网页制作-ch4.pptVIP

第4章 表单、CSS样式表和命令 4.1 案例10 “校园风貌——校园留言簿1”网页 4.2 案例11 “校园风貌——校园留言簿2”网页 4.3 案例12 定义CSS样式表 4.1 案例10 “校园风貌——校园留言簿1”网页 案例效果 “校园风貌——校园留言簿1”是一个留言网页。利用Dreamweaver软件提供的表单功能，实现访问者和网站之间的交流。下面通过详细的步骤来介绍制作这个网页的过程。 4.1 案例10 “校园风貌——校园留言簿1”网页 设计过程 1．新建“案例9.html”网页 2．插入表单 3．插入表格 4．设置表格 5．插入表格 6．设置表格 7．保存并预览 4.1 案例10 “校园风貌——校园留言簿1”网页 相关知识 1．表单域和插入表单对象 （1）表单域 在 Dreamweaver 中，执行“插入”→“表单”→“表单”命令，如图4-31所示，或者通过从下图显示的“插入”（表单）工具栏中单击“表单”按钮，即可在窗口中插入表单域。 红线虚框内的区域即为表单域，所有的表单对象都要插入到该红线框内，这样服务器才能正确地处理用户所填写的信息。 如果执行插入表单域的操作后，在窗口中仍看不见表单域，则可执行“查看”→“可视化助理”→“不可见元素”命令，因为表单域是不可见元素。 4.1 案例10 “校园风貌——校园留言簿1”网页 相关知识 1．表单域和插入表单对象 （2）表单对象 在Dreamweaver 中，表单输入类型称为表单对象。用户可以通过“插入”→“表单”菜单命令，从如图4-31所示的级联菜单中选择所需的对象进行插入操作；也可以在如图4-32所示的“插入”栏中的“表单”选项卡中直接单击表单对象按钮来插入表单对象。 “表单”按钮 。单击该按钮，在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。 “文本字段”按钮 。单击该按钮，在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。 4.1 案例10 “校园风貌——校园留言簿1”网页 相关知识 1．表单域和插入表单对象 （2）表单对象 “隐藏域”按钮 。单击该按钮，可以在表单域中插入一个可以存储用户数据的域。使用隐藏域可以存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式等，以便该用户下次访问站点时可以再次使用这些数据。 “文本区域”按钮 。单击该按钮，可以在表单域中插入文本区域，在其中可以输入多行文字。 “复选框”按钮 。单击该按钮，可以在表单域中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。 “单选按钮”按钮 。单击该按钮，可以在表单域中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。 4.1 案例10 “校园风貌——校园留言簿1”网页 相关知识 1．表单域和插入表单对象 （2）表单对象 “单选按钮组”按钮 。单击该按钮，可以在表单域中插入共享同一名称的单选按钮的集合。 “列表/菜单”按钮 。单击该按钮，可以在表单域中插入列表/菜单。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。 “跳转菜单”按钮 。单击该按钮，可以在表单域中插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。 “图像域”按钮 。单击该按钮，可以在表单域中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。 4.1 案例10 “校园风貌——校园留言簿1”网页 相关知识 1．表单域和插入表单对象 （2）表单对象 “文件域”按钮 。单击该按钮，可以在表单域中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。 “按钮”按钮 。单击该按钮，可以在表单域中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。 “标签”按钮 。单击该按钮，可以在表单域中给表单加上标签，以label/label形式开头和结尾。 “字段集”按钮 。单击该按钮，可以在表单域中添加一个字段集的同时在HTML源代码中添加标签fieldset/fieldset。该标签是表单元素逻辑组的容器标签，在其中可以继续插入单选按钮、复选框、图像以及文件域等对象。 4.1 案例10 “校园风貌——校园留言簿1”网页 2．设置文本字段的属性 文本字段有文本