网站建设=表格和表单上机练习.doc

使用表格和表单 授课教师： 学时：2学时 第一部分 上机准备 教学单元： 能熟练的使用表格和表单 教学软件： Dreamweaver8.0 学习目标： 实现跨行跨列的复杂表格，能够对表格进行美化修饰 了解表单的基本形式，掌握表单元素的使用方法 上机主要任务： 任务一：使用表格标签创建表格 任务二：使用表单制作HTML页面 任务三：使用表单和表格制作HTML页面 前置知识： 表格的基本结构，表格和表单标签 第二部分： 程序示范 任务一：使用表格标签创建表格table.htm 时间控制： 20 分钟 分值：20分 训练技能要点 表格的基本结构 能够创建跨行跨列的表格 涉及难点 使用colspan 、 rowspan属性实现表格的跨行跨列 需求说明 使用各种表格标签创建如图5.1所示表格 图5.1 订单明细表格 实现思路 首先，找出该表格的行数和列数。然后，从标题部分开始，先确定行数，再确定每个特定行所包含的列数。 表格标题：订单详细信息，4行6列。其中最后一行“合计”单元格跨5列。为了显示界面漂亮，每行设置不同的背景色，表格边框制定为0。 关键代码 任务二：使用表单制作HTML页面form.htm 时间控制： 20 分钟 分值：20分 训练技能要点 会使用 FORM 标签创建表单 会向表单添加表单控件 会使用RADIO、CHECKBOX控件 涉及难点 RADIO、CHECKBOX控件的使用 需求说明 通过Dreamweaver创建简单的申请表单页面如图5.2： 图5.2 调查表 实现思路 表单的创建从FORM标签开始，用户可以在该标签中输入HTML输入元素。通过给表单制定标题开始设计表单。插入文本框等元素，用于输入姓名或电子邮件地址，就像间断的单行描述性文本，然后插入SELECT元素，用于选择国籍。 用户也可以使用单选按钮来只选择一个选项。使用复选框进行多种选择。对于大段的描述，可使用文本区域给出详细的信息。最后，在表单的末尾使用“提交”和“重置”按钮。“提交”按钮用于确认表单中输入的数据都是正确的，并可以提交。若要提交表单，必须包括表单的“动作”属性。动作属性可设置表单被提交到的确切地址。“重置”按钮用于取消表单中填写的内容，并重新打开新的空白表单供填写。 关键代码 第三部分： 程序模仿 任务三：使用表单和表格制作HTML页面table-form.htm 时间控制： 30 分钟 分值：20 分 训练技能要点 使用表格布局表单的外观 涉及难点 使用表格控制表单元素的位置 需求说明 需要采用表格布局表单元素，如图5.3所示 图5.3 表单和表格的综合应用 实现思路 表格应该设置为10行2列，前面两行的单元格占据2列（跨2列）。为了整个界面色调的统一，网页背景色和图片的色调保持一致。 关键代码 第四部分： 练习与总结 练习一：表格布局图像和文字 时间控制： 20 分钟 分值：20分 需求说明 实现如图5.4所示的效果图，教员将提供其中的上机图片素材 图5.4 表格中的图像和文字 涉及难点 无 参考解决方案 此表格可以分为4行3列，第一行只有一个单元格，横跨3列，放置图片xpss01.gif，第二行的图片依次为“01.gif”,”02.gif”,”03.gif”.表格中放入图片和放入文字语法类似： 练习二：登录的表单 时间控制： 20 分钟 分值：20分 需求说明 练习使用表单。实现如图5.5所示的登录表单。风格下拉菜单中有：默认、简约、商务、快递Beta版几个选项。 图5.5 登录的表单 涉及难点 无 参考解决方案 参照第一部分的练习3，请采用表格排版上述表单，要求表格居中 知识点总结： 知识点1： 表格的基本结构和表格标签及相关属性的使用 知识点2： 创建表单及添加表单控件 知识点3： 使用表格布局表单外观 第五部分： 作业 1.练习如图5.6所示的常用的客户反馈表单。 图5.6 客户反馈表单 HTML HEAD META http-equiv=Content-Type content=text/html; charset=gb2312 TITLE无标题文档/TITLE /HEAD BODY TABLE width=63% border=0 cellpadding=0 cellspacing=0 CAPTION 订单详细信息 /CAPTION TR bgcolor=#33CC99 TD width=9%序号/TD TD width=29%项目/TD TD width=15%数量/TD TD width=16%单价/TD TD w