《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元19：创建表单网页 一、课程引导 二、明确知识技能目标 湖南城道業夜御学院 三、展示网页浏览效果 四、分析操作任务 要教学环节 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元19：创建表单网页 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 南馍道 我们都曾申请过免费E-mail邮箱，在申请过 程必须在网页上输入个人信息，然后提交信息， 提交成功后，才能获得免费的E-mai邮箱。这 蒸 个用于获取信息的网页称为表单。 拳院 网页设计与制作
（一）课程引导 我们都曾申请过免费E-mail邮箱，在申请过 程必须在网页上输入个人信息，然后提交信息， 提交成功后，才能获得免费的E-mail邮箱。这 个用于获取信息的网页称为表单
(二) 明确知识技能目标 湖南 (1)掌握如何在表单网页中插入表单域。 (2)掌握如何在表单域中插入文本域和文本区域 道 (3)掌握如何在表单域中插入单选按钮、单选按 紫城 钮组和复选框 (4)掌握如何在表单域中插入列表菜单、按钮和图 琴 像域 网页设计与制作
（二）明确知识技能目标 （1）掌握如何在表单网页中插入表单域。 （2）掌握如何在表单域中插入文本域和文本区域 （3）掌握如何在表单域中插入单选按钮、单选按 钮组和复选框 （4）掌握如何在表单域中插入列表/菜单、按钮和图 像域
(三) 展示网页浏览效果 1. 预览网页 本章所制作的表单网页11.html的浏览效果如图所示 湖南城道营政似学院 长沙世界之南调查间卷 名：在此疯姓名 列别。男女 龄 * 业 学生 地区： 电话： 0次1次。2次22次以上 餐罗专信巴。F调 的意见 提文清除 长沙世界之淘欢迎你零 图10-1 表单网页的预览效果 网页设计与制作
（三）展示网页浏览效果 1．预览网页 本章所制作的表单网页11.html的浏览效果如图所示 图10-1 表单网页的预览效果
(四) 分析操作任务 制作一个表单网页，该表单网页中包括 湖南城道质营政饰学院 表单域、文本域、文本区域、单选按钮、复 选框、列表菜单等表单元素。 网页设计与制作
（四）分析操作任务 制作一个表单网页，该表单网页中包括 表单域、文本域、文本区域、单选按钮、复 选框、列表/菜单等表单元素
(五)知识讲解与操作示范（1) 湖南绒道 10.1表单概述 通常，一个表单中包含多个对象，有时也称为控件 或表单元素，例如用于输入文本的文本域、用于发送命 令的按钮、用于选择项目的单选按钮和复选框、用于显 示列表项的列表框等。 解 表单实现了浏览器和服务器之间的信息传递，它使 网页由单向浏览变成了双向交互。 克 网页设计与制作
（五）知识讲解与操作示范（1） 10.1 表单概述 通常，一个表单中包含多个对象，有时也称为控件 或表单元素，例如用于输入文本的文本域、用于发送命 令的按钮、用于选择项目的单选按钮和复选框、用于显 示列表项的列表框等。 表单实现了浏览器和服务器之间的信息传递，它使 网页由单向浏览变成了双向交互
（五)知识讲解与操作示范（2) 湖南绒道 10.2插入表单元素 10.2.1 新建网页 在“长沙世界之窗”站点下创建文件夹“11表单 蕙 网页”，在“11表单网页”文件夹中创建命名为 11.html的网页，且保存该网页。 网页设计与制作
（五）知识讲解与操作示范（2） 10.2 插入表单元素 在“长沙世界之窗”站点下创建文件夹“11表单 网页”，在“11表单网页”文件夹中创建命名为 11.html的网页，且保存该网页。 10.2.1 新建网页
（五)知识讲解与操作示范 (3) 10.2.2插入表单域 南城道 每个表单由一个表单域和若干个表单控件组成，所有的表单控件要 放置在表单域中才会有效，因此，制作表单页面的第一步是插入表单域。 1.如果网页“11.htm处于关闭状态，则先打开该网页，然后将 光标置于要插入表单域的位置。 薰 2.在Dreamweaver8主窗口中，单击菜单【插入】→【表单】→ 【表单】，在光标处插入一个表单域。 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框， 所 其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页 面中的标记表单或的红色虚线区域，可以单击菜单【查看】一【可视化 助理】→【不可见元素】，使红色虚线可见。 网设计与制作
（五）知识讲解与操作示范（3） 10.2.2 插入表单域 每个表单由一个表单域和若干个表单控件组成，所有的表单控件要 放置在表单域中才会有效，因此，制作表单页面的第一步是插入表单域。 1．如果网页“11.html”处于关闭状态，则先打开该网页，然后将 光标置于要插入表单域的位置。 2．在Dreamweaver 8主窗口中，单击菜单【插入】→【表单】→ 【表单】，在光标处插入一个表单域。 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框， 其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页 面中的标记表单或的红色虚线区域，可以单击菜单【查看】→【可视化 助理】→【不可见元素】，使红色虚线可见
五)知识讲解与操作示范 （4) 10.2.2 插入表单域 湖南绒道廟 3.设置表单域属性 将光标置于表单域中并单击鼠标左键，即可看 到表单域 “属性”面板。 4.在表单域中插入定位表格，输入提示信息 光标置于表单域中，插入一个14行2列的表格，且将第一行 及最后两行的单元格合并，表格的“填充”文本框中输入 “1”、“间距”文本框中输入“2”、“边框”文本框中输入 “5”、“边框颜色”文本框中输入“℉9900”，对齐方式为 吃 “居中对齐”。然后在表格中输入提示信息。 网页设计与制作
（五）知识讲解与操作示范（4） 3．设置表单域属性 将光标置于表单域中并单击鼠标左键，即可看 到表单域 “属性”面板。 4．在表单域中插入定位表格，输入提示信息 光标置于表单域中，插入一个14行2列的表格，且将第一行 及最后两行的单元格合并，表格的“填充”文本框中输入 “1”、“间距”文本框中输入“2”、“边框”文本框中输入 “5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为 “居中对齐”。然后在表格中输入提示信息。 10.2.2 插入表单域