网页设计与制作案例教程 教学课件 陈承欢 第19单元.pptVIP

第10章　创建表单网页; 知识技能目标 ; 网页浏览效果展示; 本章操作任务;;10.1　表单概述;10.2　插入表单元素; 每个表单由一个表单域和若干个表单控件组成，所有的表单控件要放置在表单域中才会有效，因此，制作表单页面的第一步是插入表单域。 1．如果网页“11.html”处于关闭状态，则先打开该网页，然后将光标置于要插入表单域的位置。; 2．在Dreamweaver 8主窗口中，单击菜单【插入】→【表单】→【表单】，在光标处插入一个表单域。 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单或的红色虚线区域，可以单击菜单【查看】→【可视化助理】→【不可见元素】，使红色虚线可见。 ; 将光标置于表单域中并单击鼠标左键，即可看到表单域“属性”面板。; 光标置于表单域中，插入一个14行2列的表格，且将第一行及最后两行的单元格合并，表格的“填充”文本框中输入“1”、“间距”文本框中输入“2”、“边框”文本框中输入“5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为“居中对齐”。然后在表格中输入提示信息。; 在表单的文本框中，可以输入文本、数字或字母。输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。 插入文本域的过程如下： （1）将光标置于“姓名”一行的第二个单元格中。 ; （2）单击“表单”插入工具栏中的【文 本字段】按钮，弹出 “输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入一个文本域。默认插入的是单行文本域。 ; （3）设置文本域的属性 选中插入的文本域，设置文本域的属性，在“字符宽度”文本框中输入“14”，设置文本框中能显示7个汉字（14个字节的长度）。 ; 多行文本域也称为文本区域，可以直接利用【文本区域】按钮插入。 （1）将光标置于“你的意见”一行的第二个单元格中。 （2）单击“表单”插入工具栏中的【文本区域】按钮，弹出 “输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置插入多行文本域。 ; （3）设置多行文本域的属性 “字符宽度”文本框中输入“40”，“行数”文本框中输入“6”，“换行”下拉列表框中选择“实体”。; 单选按钮通常是多个一起使用，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选项。 （1）将光标置于“性别”一行的第二个单元格中。 ; （2）单击“表单”插入工具栏中的【单选按钮】按钮，弹出“输入标签辅助功能属性”对话框，在“标签文字”文本框输入 “男”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个单选按钮。 以同样的方法插入另一个单选按钮，标签文字为“女”。 ; （3）设置单选按钮属性 两个单选按钮的初始状态都设置为“未选中”。 ; 使用单选按钮组，可以一次插入一组单选按钮。 （1）将光标置于“年龄”一行的第二个单元格中。 （2）单击“表单”插入工具栏中的【单选按钮组】按钮，弹出“单选按钮组”对话框。; （3）单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用中文，这里分别输入“20岁以下”、“20～35”、“35～45”、“45岁以上”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，这里分别输入“20”、“35”、“45”、“45”。; （4）单击【确定】按钮，在光标所在位置插入单选按钮组，将四个单选按钮调整为两行布局。 用同样的方法在“来过几次长沙世界之窗”一行的第二个单元格中插入4个单选按钮，“标签”分别设置为“0次”、“1次”、“2次”、“2次以上”，“值”分别设置为“0”、“1”、“2”、“2”。; （1）将光标置于“你曾游览过哪些景点？”一行的第二个单元格中。 （2）单击“表单”插入工具栏中的【复选框】按钮，弹出 “输入标签辅助功能属性”对话框，在“标签文字”文本框输入“国际街”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个复选框。; （3）设置复选框的属性 8个复选框的选定值分别为“no1”至“no8”，当表单被提交时，复选框被选中对应的值被传递给服务器的应用程序，初始状态都设置为“未选中”。; 插入列表的步骤如下： （1）将光标置于“职业”一行的第二个单元格中。 （2）单击“表单”插入工具栏中的【列表/菜单】按钮，弹出 “输入标签辅助功能属性”对话框，直接单击【确定】按钮，在光标所在位置便插入列表/菜单。 ; （3）添加列表值。