第十章 创建表单网页ppt课件.ppt

《第十章 创建表单网页ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、《网页设计与制作》教学课件第10章：创建表单网页主要教学环节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题（一）课程引导我们都曾申请过免费E-mail邮箱，在申请过程必须在网页上输入个人信息，然后提交信息，提交成功后，才能获得免费的E-mail邮箱。这个用于获取信息的网页称为表单。（二）明确知识技能目标（1）掌握如何在表单网页中插入表单域。（2）掌握如何在表单域中插入文本域和文本区域（3）掌握如何在

2、表单域中插入单选按钮、单选按　　　　　　　　　　　钮组和复选框（4）掌握如何在表单域中插入列表/菜单、按钮和图像域（三）展示网页浏览效果1．预览网页本章所制作的表单网页11.html的浏览效果如图所示图10-1　　表单网页的预览效果（四）分析操作任务制作一个表单网页，该表单网页中包括表单域、文本域、文本区域、单选按钮、复选框、列表/菜单等表单元素。（五）知识讲解与操作示范（1）10.1　表单概述通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、

3、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。表单实现了浏览器和服务器之间的信息传递，它使网页由单向浏览变成了双向交互。（五）知识讲解与操作示范（2）10.2　插入表单元素10.2.1　新建网页在“长沙世界之窗”站点下创建文件夹“11表单网页”，在“11表单网页”文件夹中创建命名为11.html的网页，且保存该网页。（五）知识讲解与操作示范（3）10.2.2　插入表单域每个表单由一个表单域和若干个表单控件组成，所有的表单控件要放置在表单域中才会有效，因此，制作表单页面的第一步是插入表

4、单域。1．如果网页“11.html”处于关闭状态，则先打开该网页，然后将光标置于要插入表单域的位置。（五）知识讲解与操作示范（4）2．在Dreamweaver8主窗口中，单击菜单【插入】→【表单】→【表单】，在光标处插入一个表单域。一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单或的红色虚线区域，可以单击菜单【查看】→【可视化助理】→【不可见元素】，使红色虚线可见。（五）知识讲解与操作示范（5）3．设置表单域属

5、性将光标置于表单域中并单击鼠标左键，即可看到表单域“属性”面板。4．在表单域中插入定位表格，输入提示信息光标置于表单域中，插入一个14行2列的表格，且将第一行及最后两行的单元格合并，表格的“填充”文本框中输入“1”、“间距”文本框中输入“2”、“边框”文本框中输入“5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为“居中对齐”。然后在表格中输入提示信息。（五）知识讲解与操作示范（6）10.2.3　插入表单控件1．插入单行文本域在表单的文本框中，可以输入文本、数字或字母。输入的内容可以单

6、行显示，也可以是多行显示，还可以将密码以星号形式显示。插入文本域的过程如下：（1）将光标置于“姓名”一行的第二个单元格中。（五）知识讲解与操作示范（7）（2）单击“表单”插入工具栏中的【文本字段】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入一个文本域。默认插入的是单行文本域。（3）设置文本域的属性选中插入的文本域，设置文本域的属性，在“字符宽度”文本框中输入“14”，设置文本框中能显示7个汉字（14个字节的长度）。（五）知识讲解与操作示范（8）2．插入文本区

7、域多行文本域也称为文本区域，可以直接利用【文本区域】按钮插入。（1）将光标置于“你的意见”一行的第二个单元格中。（2）单击“表单”插入工具栏中的【文本区域】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入多行文本域。（五）知识讲解与操作示范（9）（3）设置多行文本域的属性“字符宽度”文本框中输入“40”，“行数”文本框中输入“6”，“换行”下拉列表框中选择“实体”。3．插入单选按钮单选按钮通常是多个一起使用，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选

8、项。（1）将光标置于“性别”一行的第二个单元格中。（五）知识讲解与操作示范（10）（2）单击“表单”插入工具栏中的【单选按钮】按钮，弹出“输入标签辅助功能属性”对话框，在“标签文字”文本框输入“男”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个单选按钮。以同样的方法插入另一个单选按钮，标签文字为“女”。（3）设置单选按钮属性两个单选按钮的初始状态都设置为“未选中”。（五）知识讲解与操作示范（11）4．插入单选按钮组使用单选按钮组，可以一次插入一组单选按钮。（