dreamweaver cs 网页制作案例教程电子教案第章制作表单网页

《dreamweaver cs 网页制作案例教程电子教案第章制作表单网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章　制作表单网页第7章　制作表单网页通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。【教学导航】教学目标（1）学会制作表单网页（2）在网页中正确插入表单域（3）在表单域中正确插入文本域和文本区域（4）在表单域中正确插入单选按钮、单选按钮组和复选框（5）在表单域中正确插入列表/菜单、跳转菜单、按钮和图像域（6）掌握检查提交表单数据的正确性的方法（7）预设输入文字的字体和大小（8）引用外部JavaScript脚本文件在网页中显

2、示当前日期（9）引用外部JavaScript脚本文件动态改变网页中的菜单选项（10）引用外部JavaScript脚本文件验证表单数据（11）了解使用Spry验证控件实现对表单控件内容的检测本章重点（1）在网页中正确插入表单域，在表单域中正确插入各种表单元素（2）检查提交表单数据的正确性（3）引用外部JavaScript脚本文件实现表单网页所需的功能本章难点（1）在表单域中插入列表/菜单和跳转菜单（2）使用Spry验证功能实现对表单元素的内容检测教学方法任务驱动法、分组讨论法、四步训练法课时建议6课时（含课堂同步训练）7.1　课前准备7.

3、1.1　新建一个站点（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3（3）创建名称为“E游调查”的本地站点7.1.2　新建一个网页文档index0701.html187第7章　制作表单网页（1）新建一个网页文档（2）设置网页标题（3）保存该网页。7.1.3　在网页中插入表格1、在网页index0701.html中插入表格12、在网页index0701.html中插入表格23、在网页index0701.html中插入表格34、在表格3中插入表格3-1（1）插入4行1列表格3-1（2）在表格3-1第1行的单元格中插入表格3-

4、1-1（3）在表格3-1第3行的单元格中插入表格3-1-3（4）在表格3第2行的单元格中插入表格3-1-2（5）在表格3第4行的单元格中插入表格3-1-47.2　课堂引导训练及评价【课堂引导训练任务描述】1、网页制作任务卡网页制作任务卡如表7-5所示。表7-5　网页制作任务卡任务编号07-1任务名称制作表单网页网页主题E游调查计划工时120min网页制作任务描述（1）制作一个表格布局的网页（2）在网页插入表单域，且设置该表单域的属性（3）在表单域中分别插入单行文本域、文本区域、单选按钮、单选按钮组、复选框、下拉式菜单、列表、跳转菜单、表

5、单按钮和图像域（4）预设文本域中输入文字的字体和大小，浏览网页时将鼠标移到该文本域时，实现自动选中提示信息，直接输入所需文本（5）使用Spry验证表单数据的有效性（6）在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能（7）引用外部JavaScript脚本文件实现表单网页所需的功能网页布局结构分析（1）表格布局结构，如图7-所示。（2）无导航栏网页色彩搭配分析网页中文字的颜色：#000000、#0000FF，背景颜色：#99CCCC、#99CCFF、#9BBB38网页组成元素分析主要包括表格、表单域、表单控件、文本、图像等网页元素任

6、务实现流程分析制作表格布局的网页→插入表单域→插入表单控件→187第7章　制作表单网页使用Spry验证表单数据的有效性→在表单网页中应用行为实现检查表单和关闭浏览器窗口的功能→引用外部JavaScript脚本文件实现表单网页所需的功能配盘素材导引原始文件位置：start7第7章制作表单网页task07-1最终文件位置：result7第7章制作表单网页task07-12、网页制作任务跟踪卡网页制作任务跟踪卡如表7-6所示。表7-6　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页“inde

7、x0701.html”的预览效果如图7-2所示。图7-2　网页“index0701.html”的预览效果【任务完成过程】7.2.1　插入表单域187第7章　制作表单网页【操作要求】在表格3的单元格中插入一个表单域。【实施过程】（1）将光标置于表格3的单元格中。（2）在DreamweaverCS3主界面中，单击菜单【插入记录】→【表单】→【表单】，如图7-3所示，在表格3单元格中光标处插入一个表单域。7.2.2　设置表单域的属性【操作要求】设置表单域的“名称”、“动作”、“目标”和“方法”等属性。【实施过程】将光标置于表单域中，即可看到表

8、单域的“属性”面板，在该属性面板中设置表单域的属性。“属性”面板上各项属性的设置如下：（1）“表单名称”：用来设置表单的名称。这里设置为“Form1”。（2）“动作”：用来设置处理该表单的动态网页或用来处理