5.1 制作客户注册及信息反馈网页（课件）-高二《网页设计与制作》同步教学（北京出版社）

第5章 表单和框架 表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象，被广泛应用于各种信息的搜集与反馈，是网站管理者与浏览者之间沟通的桥梁。收集、分析用户的反馈意见，作出科学的、合理的决策，是一个网站成功的重要因素。有了表单，网站不仅是信息提供者，同时也是信息收集者，也由被动提供转变为主动出击。 框架是一种可以独立变化的、在一定情况下可以用鼠标滚动的窗口。这些窗口被组合在一起，从而使得网页不仅在视觉上更有吸引力，而且更加容易使用。 第5章 表单和框架 本章介绍在Dreamweaver中设计表单和框架的方法，以及CSS的高级使用。主要内容包括： （1）利用表单制作客户注册及信息反馈网页。 （2）利用框架技术制作公司产品介绍网页。 （3）CSS样式表的高级应用。 5.1 制作客户注册及信息反馈网页 5.2 制作公司产品介绍网页 5.3 CSS进阶 5.1 制作客户注册及信息反馈网页 任务导入 学习目标 任务实施 知识拓展 思考与练习 任务导入 在网站中，公司希望能够有客户注册的页面以及客户信息反馈的页面。使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入的信息的正确性。本任务将学习制作客户注册及信息反馈网页的方法，效果如图所示。 客户注册及信息反馈网页 学习目标 （1）掌握网页中表单及表单元素的制作，能够对其进行属性设置。 （2）了解网页中检查表单的方法，能够在表单提交时对用户输入的表单元素进行检查。 任务实施 1. 表单的基本知识 表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如ASP等。 任务实施 2. 创建表单 使用菜单栏中的命令 使用工具栏上的按钮 任务实施 3. 插入表单对象 Dreamweaver中表单可以包含的对象有文本域、按钮、复选框、单选钮、列表/菜单、文件域及隐藏域等。 将插入点放置在希望表单对象在表单中出现的位置，然后在“插入”菜单→“表单”命令中选择对象，或者在“插入”栏的“表单”类别中选择对象，如图所示。 “插入”栏的“表单”类别 任务实施 在“表单”面板中可以设置以下表单选项： （1）文本框：接受任何类型的文本、字母或数字。输入的文本可 以显示为单行、多行、黑点或星号（用于密码保护）。 （2）复选框：在一组选项中可以选择多个选项。 （3）单选按钮：在一组选项中一次只能选择一项的选项。 （4）列表/菜单：提供一组选项，让用户从中选择一项或多项。该对 象可以是弹出菜单，这种菜单仅在用户单击时才显示出来，且仅能从中选择一项。也可以是列表框，选项总是显示在可滚动列表中，且可以从中选择多项。 任务实施 在“表单”面板中可以设置以下表单选项： （5）跳转菜单：插入跳转菜单，这种菜单上的每一选项都链接着一个文件。从中选择某一项，将跳转到被链接的网页。 （6）图像域：可以用来替换按钮。 （7）文件域：允许用户在自己的硬盘上浏览文件，并作为表单数据上传。 （8）隐藏域：允许设计者存储信息（如表单主题），这些信息与用户无关，但却是应用程序在处理表单时所需要的。 （9）按钮：单击时执行提交或重置表单之类的任务。 任务实施 4. 制作跳转菜单 除了我们前面介绍的表单外，还有一类常用的表单选项，这里我们单独介绍它的使用。下面以“友情链接”为例，制作如图所示跳转菜单。 “友情链接”跳转菜单 “插入跳转菜单”对话框 任务实施 5. 检查表单 表单创建完成后，如果需要在浏览器端对用户填写的表单内容进行检查，在Dreamweaver中可以直接设置。 若在用户提交表单时，检查多个域，可以进行下面操作： 添加检查表单的行为 知识拓展 1. 表单代码 表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 知识拓展 2. 表单项代码 表单（Form）常用控件有： input type="text" 单行文本输入框 input type="submit" 将表单里的信息提交给表单里action所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框（输入的文字用*表示） 思考与练习 1. 使用表单元素制作一个调查表，并以邮件形式提交。 2. 制作如图所示的客户反馈表。 客户反馈表 思考与练习 3. 对客户反馈表，在提交时进行检查，基本信息中的所有文本选项都是必需的，电子邮箱