项目6 表格和表单（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目六 表格和表单 N 1 知识目标 掌握创建表格的标签 掌握表格的CSS样式 掌握创建表单的标签 掌握表单的CSS样式 ‹#› 网页设计与制作 2 6.1.1 表格标签 任务6.1表格 实例1 创建表格 ‹#› 网页设计与制作 6.1.1 表格标签 任务6.1表格 通过实例1的代码，可以看出创建表格的基本标签有以下4种。 （1）<table>标签： 用于定义一个表格。 （2）<tr>标签： 用于定义表格的一行，该标签必须包含在<table>标签中，表格的行数与<tr>标签数量对应。 　　 ‹#› 网页设计与制作 6.1.1 表格标签 任务6.1表格 （3）<th>标签： 用于定义表头的单元格，该标签必须包含在<tr>标签中，表头行的单元格数量与<th>标签数量对应。该单元格中的文字自动设为粗体，居中对齐显示。 （4）<td>标签： 用于定义表格的普通单元格，该标签必须包含在<tr>标签中，一行的单元格数量与<td>标签数量对应。该单元格中的文字自动设为左对齐显示。 ‹#› 网页设计与制作 6.1.1 表格标签 任务6.1表格 在实例1的代码中，<table>标签中用到了border属性，其作用是给表格添加边框，如果去掉该属性，则表格默认情况下无边框。默认情况下，表格的宽度和高度靠其自身的内容来支撑。如果要进一步设置表格的外观样式，可以通过设置表格的相关属性来实现。 ‹#› 网页设计与制作 6.1.2 <table>标签的属性 任务6.1表格 <table>标签的常用属性 ‹#› 网页设计与制作 6.1.2 <table>标签的属性 任务6.1表格 实例2 使用<table>标签的属性 ‹#› 网页设计与制作 6.1.3 <tr>标签的属性 任务6.1表格 <tr>标签的常用属性 ‹#› 网页设计与制作 6.1.3<tr>标签的属性 任务6.1表格 实例3 使用<tr>标签 ‹#› 网页设计与制作 6.1.4 <th>和<td>标签的属性 任务6.1表格 在表格制作过程中，有时需要对某一个单元格进行控制，就需要对单元格<th>和<td>标签设置相关属性。 <th>和<td>标签的常用属性 ‹#› 网页设计与制作 6.1.4 <th>和<td>标签的属性 任务6.1表格 实例4 使用<th>和<td>标签 ‹#› 网页设计与制作 6.1.5使用CSS设置表格样式 任务6.1表格 实例5 使用CSS设置表格样式 ‹#› 网页设计与制作 6.1.5使用CSS设置表格样式 任务6.1表格 实例5 使用CSS设置表格样式 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.2〓表格综合案例——制作教材征订表 实例6 制作教材征订表 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.2〓表格综合案例——制作教材征订表 实例6 制作教材征订表 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.1认识表单 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理和响应，完成浏览者和网站服务器之间的交互。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.2表单标签 表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。可以使用<form>标签在网页中创建表单。<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单。 　　表单的基本语法及格式如下： <form name="表单名称" action="URL地址" method="提交方式"> … </form> ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.2表单标签 <form>标签的常用属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.3表单的控件标签 1. <input/>标签 <input/>标签用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等，其基本语法格式如下： <input type=“控件类型”/> <input/>标签为单标签，type属性是基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，<input/>标签还可以定义很多其他的属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.3表单的控件标签 <input/>标签的常用属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.3表单的控件标签 2. <textarea>标签 当定义<input>标签的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，需要使用<textarea>标签，其基本语法格式如下： <textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 在上面的语法格式中，cols和rows为<textarea>标签的必需属性，其中cols用于定义多行文本输入框每行中的字符数，rows用于定义多行文本输入框显示的行数，它们的取值均为正整数。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.3表单的控件标签 3. <select>标签 <select>标签提供下拉列表选项，供用户进行选择。下拉列表选项通过<select>标签和<option>标签来定义，其基本语法格式如下： <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> <option>标签用于定义下拉菜单中的具体选项，每对<select>标签中至少应包含一对<option>标签。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.3表单的控件标签 <select>和<option>标签的常用属性 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.4使用CSS设置表单样式 CSS可以轻松地控制表单样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 　　在使用CSS控制表单样式时，注意以下问题： （1）由于<form>是块标签，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。 （2）<input>控件默认有边框效果，当使用其定义各种按钮时，通常需要清除其边框。 （3）通常情况下需要对文本框和密码框设置2~3px的内边距，以使用户输入的内容不会紧贴输入框。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.4使用CSS设置表单样式 实例7 使用CSS设置表单样式 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.3表单 6.3.4使用CSS设置表单样式 实例7 使用CSS设置表单样式 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 实例8 制作用户信息注册表 步骤1： 创建HTML5文档 　打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 步骤2： 添加文本 （1）在<body>标签中添加<div>标签，使用ID选择器定义为box，在box中添加<h2>标签，并使用class选择器定义为header。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （2）在box中添加一个表单，表单中数据提交地址为空，数据提交方式为post。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （3）在表单中添加一个表格，并使用class选择器定义为content。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （4）在表格的第一行第一个单元格中输入文本“姓名”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt01。在表格的第二行第一个单元格中输入文本“手机”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt02。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （5）在表格的第三行第一个单元格中输入文本“性别”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加两个单选按钮，并用两个<label>标签显示说明性文字，分别为“男”和“女”。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （6）在表格的第四行第一个单元格中输入文本“邮箱”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt03。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （7）在表格的第五行第一个单元格中输入文本“职业”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个下拉列表，并使用class选择器定义为course，下拉列表中的具体内容用<option>控制，分别为教师、公司职员、工程师、自由职业者，设置公司职员为默认选项。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （8）在表格的第六行第一个单元格中输入文本“爱好”，并使用class选择器定义为left。在第二个单元格中添加四个复选框，并用<label>标签说明为音乐、上网、足球、下棋。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （9）在表格第七行第一个单元格中输入文本“个人简历”，并使用class选择器定义为left。在第二个单元格中添加文本输入控件，设置合理高度和宽度，并使用class选择器定义为message。文本输入控件中显示文本“请输入您的简历”。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （10）在表格第八行第一个单元格中的&nbsp，表示占位符。在第二个单元格中添加提交按钮和重置按钮。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 步骤3： 添加CSS样式 （1）设置全局样式。在<head>标签中添加<style>标签，body设置字体为宋体，字体大小为12 px，颜色为#515151；重置浏览器的默认样式为自适应；box设置宽度和高度分别为660 px和600 px，边框宽1 px，实线，颜色为#CCC，内边距为20 px，外边距上下位50 px，左右居中。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （2）设置标题样式。.header设置文本为居中，字体大小为22 px，颜色为#0b0b0b，内边距为30 px。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 （3）设置单元格和控件的样式。td设置内边距为26 px；td.left设置宽为78 px，文本居右对齐，文本与表单控件间的距离为8 px；.red设置颜色为红色；.txt01和.txt02控件设置宽和高分别为264 px和12 px，边框宽1 px、实线、颜色为#CCC，内边距分别为3 px 3 px 3 px 26 px，字体大小为12 px，颜色为#949494；.txt03控件设置宽和高分别为122 px和12 px，内边距分别为3 px 3 px 3 px 26 px，字体大小为12 px；.course控件设置宽度为184 px；.message控件设置宽和高分别为432 px和164 px，字体大小为 12 px，颜色为#949494，内边距为3 px。设置单元格和控件的样式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务6.4表单综合案例——制作用户信息注册表 步骤4： 保存并浏览 ‹#› 网页设计与制作 项目小结 本项目主要介绍了使用表格和表单设计网页，具体内容如下。 表格： 介绍了表格标签、<table>标签的属性、<tr>标签的属性、<th>和<td>标签的属性。 表格综合案例： 介绍了教材征订表的制作，重点学习使用CSS内部样式表设置表格各元素格式。 表单： 介绍了表单标签和表单的控件标签。 表单综合案例： 介绍了用户信息注册表的制作，重点学习页面布局。 通过本项目的学习，能够掌握创建表格与表单的基本语法，学会表格标签的使用，熟悉常用的表单控件，熟练运用表格与表单组织页面元素。 谢谢 $$