网设计与制作创建表单网.pptx

（一）课程引导我们都曾申请过免费E-mail邮箱，在申请过程必须在网页上输入个人信息，然后提交信息，提交成功后，才能获得免费的E-mail邮箱。这个用于获取信息的网页称为表单。第1页/共30页（二）明确知识技能目标（1）掌握如何在表单网页中插入表单域。（2）掌握如何在表单域中插入文本域和文本区域（3）掌握如何在表单域中插入单选按钮、单选按 钮组和复选框（4）掌握如何在表单域中插入列表/菜单、按钮和图像域第2页/共30页（三）展示网页浏览效果1预览网页本章所制作的表单网页11.html的浏览效果如图所示 图10-1表单网页的预览效果 第3页/共30页（四）分析操作任务 制作一个表单网页，该表单网页中包括表单域、文本域、文本区域、单选按钮、复选框、列表/菜单等表单元素。第4页/共30页（五）知识讲解与操作示范（1）10.1表单概述 通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。表单实现了浏览器和服务器之间的信息传递，它使网页由单向浏览变成了双向交互。第5页/共30页（五）知识讲解与操作示范（2）10.2插入表单元素 10.2.1新建网页 在“长沙世界之窗”站点下创建文件夹“11表单网页”，在“11表单网页”文件夹中创建命名为11.html的网页，且保存该网页。第6页/共30页（五）知识讲解与操作示范（3）10.2.2插入表单域 每个表单由一个表单域和若干个表单控件组成，所有的表单控件要放置在表单域中才会有效，因此，制作表单页面的第一步是插入表单域。1如果网页“11.html”处于关闭状态，则先打开该网页，然后将光标置于要插入表单域的位置。第7页/共30页（五）知识讲解与操作示范（4）2在Dreamweaver 8主窗口中，单击菜单【插入】【表单】【表单】，在光标处插入一个表单域。一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单或的红色虚线区域，可以单击菜单【查看】【可视化助理】【不可见元素】，使红色虚线可见。第8页/共30页（五）知识讲解与操作示范（5）3设置表单域属性 将光标置于表单域中并单击鼠标左键，即可看到表单域“属性”面板。4在表单域中插入定位表格，输入提示信息 光标置于表单域中，插入一个14行 2列的表格，且将第一行及最后两行的单元格合并，表格的“填充”文本框中输入“1”、“间距”文本框中输入“2”、“边框”文本框中输入“5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为“居中对齐”。然后在表格中输入提示信息。第9页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（6 6）10.2.3插入表单控件 1 1插入单行文本域 在表单的文本框中，可以输入文本、数字或字母。输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。插入文本域的过程如下：（1 1）将光标置于“姓名”一行的第二个单元格中。第10页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（7 7）（2 2）单击“表单”插入工具栏中的【文本字段】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入一个文本域。默认插入的是单行文本域。（3 3）设置文本域的属性 选中插入的文本域，设置文本域的属性，在“字符宽度”文本框中输入“14”14”，设置文本框中能显示7 7个汉字（1414个字节的长度）。第11页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（8 8）2 2插入文本区域 多行文本域也称为文本区域，可以直接利用【文本区域】按钮插入。（1 1）将光标置于“你的意见”一行的第二个单元格中。（2 2）单击“表单”插入工具栏中的【文本区域】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入多行文本域。第12页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（9 9）（3 3）设置多行文本域的属性 “字符宽度”文本框中输入“40”40”，“行数”文本框中输入“6”6”，“换行”下拉列表框中选择“实体”。3 3插入单选按钮 单选按钮通常是多个一起使用，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选项。（1 1）将光标置于“性别”一行的第二个单元格中。第13页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1010）（2 2）单击“表单”插入工具栏中的【单选按钮】按钮，弹出“输入标签辅助功能属性”对话框，在“标签文字”文本框输入“男”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个单选按钮。以同样的方法插入另一个单选按钮，标签文字为“女”。（3 3）设置单选按钮属性 两个单选按钮的初始状态都设置为“未选中”。第14页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1111）4 4插入单选按钮组 使用单选按钮组，可以一次插入一组单选按钮。（1 1）将光标置于“年龄”一行的第二个单元格中。（2 2）单击“表单”插入工具栏中的【单选按钮组】按钮，弹出“单选按钮组”对话框。（3 3）单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用中文，这里分别输入“2020岁以下”、“202035”35”、“353545”45”、“4545岁以上”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，分别输入“20”45”45”。第15页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1212）（4 4）单击【确定】按钮，在光标所在位置插入单选按钮组，将四个单选按钮调整为两行布局。用同样的方法在“来过几次长沙世界之窗”一行的第二个单元格中插入4 4个单选按钮，“标签”分别设置为“0 0次”、“1 1次”、“2 2次”、“2 2次以上”，“值”分别设置为“0”0”、“1”1”、“2”2”、“2”2”。第16页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1313）5 5插入复选框 （1 1）将光标置于“你曾游览过哪些景点？”一行的第二个单元格中。（2）单击“表单”插入工具栏中的【复选框】按钮，弹出“输入标签辅助功能属性”对话框，在“标签文字”文本框输入“国际街”,“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个复选框。第17页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1414）（3）设置复选框的属性 8个复选框的选定值分别为“no1”至“no8”，当表单被提交时，复选框被选中对应的值被传递给服务器的应用程序，初始状态都设置为“未选中”。第18页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1515）6 6插入列表和菜单 插入列表的步骤如下：（1 1）将光标置于“职业”一行的第二个单元格中。（2 2）单击“表单”插入工具栏中的【列表/菜单】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置便插入列表/菜单。（3 3）添加列表值。单击按钮，为列表添加一个新的选项，在此分别添加：“公务员”、“公司职员”、“经商人员”、“学生”、“自由职业”。也可以单击按钮，删除已有的选项。单击按钮或按钮，为列表选项调整顺序。第19页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1616）（4）列表项添加完成如图10-17所示。在“列表值”对话框中单击【确定】按钮。（5）设置列表/菜单的属性 设置完“列表值”后回到属性面板，这时“初始化时选定”列表框中会出现刚刚添加的列表项。插入菜单的步骤如下：（1）将光标置于“地区”一行的第二个单元格中。第20页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1717）（2）单击“表单”插入工具栏中的【列表/菜单】按钮，弹出“输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入列表/菜单。（3）添加列表值。选中刚插入的“列表/菜单”，在“属性”面板上的“类型”中选择“菜单”单选按钮，然后单击【列表值】按钮,弹出“列表值”对话框，在该对话框中，中间的列表项中列出了该菜单所包含的所有选项，每一行代表一个选项。“项目标签”用来设置每个选项所显示的文本，“值”设置的是选项的值。第21页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1818）单击按钮，为菜单添加一个新的选项，在此分别添加：“长沙”、“株洲”、“湘潭”、“益阳”、“省内其他地区”、“省外”。也可以单击按钮，删除已有的菜单选项。单击按钮或按钮，为菜单选项调整顺序。（4 4）列表项添加完成如图10-2010-20所示。在“列表值”对话框中单击【确定】按钮。第22页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（1919）7 7插入表单按钮 将光标置于表格中的倒数第二行，单击“表单”插入工具栏中的【按钮】按钮，即可在光标处插入一个按钮。选中插入的按钮，在属性面板中设置其属性“值”文本框中输入“提交”，使按钮上显示的文字为“提交”；“动作”类型选择“提交表单”单选按钮。第23页/共30页（五）知识讲解与操作示范（五）知识讲解与操作示范（2020）8 8插入图像域 表单中也可以插入图像，使表单更加美观。将光标置于表格的最后一行，先输入一段文字“长沙世界之窗欢迎你”，然后单击“表单”插入工具栏中的【图像域】按钮，打开“选择图像源文件”对话框，在该对话框中选择一幅图像，然后单击【确定】按钮，即可在光标处插入一个图像域。第24页/共30页（六）课堂模仿实践 1操作要求 （1）在“课堂实践”网站文件夹“11表单网页”中创建一个表单网页“11.html”。（2）该表单网页所包括的表单元素及浏览效果如图10-26所示。第25页/共30页（六）课堂模仿实践 2效果展示图10-26课堂实践的表单网页的浏览效果 第26页/共30页（六）课堂模仿实践 3 3制作要点提示 先插入一张9 9行4 4列的表格，然后在表格单元格中输入文字、插入图像、插入各表单元素。必须先插入表单域，才能插入表单元素。第27页/共30页（六）课堂模仿实践课外拓展实践 在“湖铁职院学院网站”站点文件夹“11表单网页”中创建一个表单网页“11.html”。第28页/共30页（八）归纳总结 通过本章的学习，熟悉网页中表单的制作，对网页中的文本字段、文本区域、单选按钮、复选框、列表/菜单、按钮等表单元素能够熟练、灵活地应用。表单网页是设计与功能的结合，一方面要与后台的程序很好地结合起来，另一个方面要制作得相对美观。所以应该掌握好表单元素的正确使用与设置。第29页/共30页感谢您的观看！第30页/共30页