网页制作案例教程-清华大学出版社-第6章-交互式网页表单的设计与使用资料.ppt

网页制作案例教程,毋建军郑宝昆郭锐编著清华大学出版社,第6章交互式网页表单的设计与使用,本章学习目标（知识要点）,网页表单入门创建网页表单网页表单验证手工创建网页表单,本章学习导航,HTML提供了表单作为网站与访问者之间交流信息的主要工具。表单可以看作是网站的设计者从Web访问者那里收集信息的一种方法，它不仅可以收集访问者对网站的意见，还可以做许多工作，例如，在访问者登记注册免费电子邮件时，可以用表单来收集一些个人的资料；在电子商务中，收集每个顾客的购物信息；在搜索引擎中，把用户要查找的关键词递交到服务器等。本章主要介绍如何创建网页表单。本章内容在全书知识结构中所处位置如图所示,6.1网页表单入门,6.1.1网页表单简介表单是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。,图6-1-1处理表单流程图,6.1.2网页表单设计原则保守性的搭建，并带有目的性的设计表单每个表单都应该符合它要表达的形势或情框用你所需主动沟通把表单划分成许多小的部分使用有意义的，关联上下文的错误信息当用户点击提交按钮时，应当有引导用户到达某个页面,6.2创建网页表单,（1）插入表单向文档中插入表单的操作为：1）定位光标在文档中要插入表单的位置。2）执行以下操作之一：单击菜单栏中“插入”|“表单”|“表单”命令。在“插入”栏的“常用”类别中，单击“表单”按钮3）向文档中插入了表单标签，添加表单标签后的文档会出现一个红色的虚线框，如图6-2-2所示。,图6-2-2插入表单标签图,（2）表单属性单击表单红色的框线或单击窗口左下角标签选择器中的标签，就可以选中表单，并在属性检查器，如图6-2-3所示，中对其进行设置。,图6-2-3表单属性图,（2）表单对象表单对象指构成表单的元素。在“插入”栏的“表单”类别，如图6-2-4中，包含了构成表单的所有元素，也可以通过菜单“插入”|“表单”命令，选择子菜单中的表单对象。,图6-2-4“插入”|“表单”对话框,1）文本域接受任何类型的字母数字文本输入内容。文本可以单行或多行显示，也可以以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本,2）隐藏域存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。3）按钮在单击时执行操作。您可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签。使用按钮可将表单数据提交到服务器，或者重置表单。您还可以指定其它已在脚本中定义的处理任务。例如，可能会使用按钮根据指定的值计算所选商品的总价。,4）复选框允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。5）单选按钮代表互相排斥的选择。在某单选按钮组（由两个或多个共享同一名称的按钮组成）中选择一个按钮，就会取消选择该组中的所有其它按钮。,6）列表菜单在一个滚动列表中显示选项值，用户可以从该滚动列表中选择多个选项。“列表”选项在一个菜单中显示选项值，用户只能从中选择单个选项。在下列情况下使用菜单：只有有限的空间但必须显示多个内容项，或者要控制返回给服务器的值。7）跳转菜单可导航的列表或弹出菜单，使用它们可以插入一个菜单，其中的每个选项都链接到某个文档或文件。,8）文件域使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。9）图像域使您可以在表单中插入一个图像。使用图像域可生成图形化按钮，例如“提交”或“重置”按钮。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。,6.3网页表单验证,（1）选择“开始”“所有程序”“AdobeDreamweaverCS5”，启动AdobeDreamweaverCS5。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为6.3.html。（4）选择“插入”|“表单”面板的“表单”，在页面中插入一个表单。,（5）创建一个包含至少一个文本域及一个“提交”按钮的HTML表单，分别选择“插入”|“表单”面板的“文本域”和“按钮”，插入到页面当中，确保要验证的每个文本域具有唯一名称，按钮类型选择“提交”按钮。如图6-3-1所示。,图6-3-1表单中插入文本域和提交按钮,（6）在“行为”面板中，单击加号(+)按钮，会弹出“添加行为”的下拉菜单，如图6-3-2所示，然后从列表中选择“检查表单”行为。,图6-3-2“添加行为”的下拉菜单,（7）在如图6-3-3所示的对话框中设置每个文本域的验证规则，然后单击“确定”。,图6-3-3“检查表单”对话框,6.4项目案例,学习目标,案例描述,通过实例掌握网页表单及其表单元素的插入、属性的设定等操作。,使用表单及其表单元素，在DreamweaverCS5中制作的用户注册页面,案例要点,表单元素的布局方式。,案例实施,（1）选择“开始”“所有程序”“AdobeDreamweaverCS5”，启动AdobeDreamweaverCS5，新建一站点，将images素材文件夹复制到本站点文件夹中。（2）选择“文件”“新建”菜单项，打开“新建文档”对话框，选择“空白页”“HTML”“无”，单击“创建”按钮，新建一个网页。（3）在打开的空白文档中，选择“文件”“保存”菜单项，将文件保存在根目录下，文件名为6.5.html。（4）在页面6.5.html的文档编辑区的【标题】文本框里，将标题命名为“用户注册”。,案例实施,（5）选择“插入”|“常用”|“表格”，插入4行1列的表格，如图6-5-2所示。,案例实施,（6）插入表格后，在属性面板改变表格“宽度”属性值为760像素，对齐方式为居中对齐。（7）选中第一行，然后点击“插入”|“图像”，弹出如图6-5-3所示的选择图像源文件对话框，选择images文件夹下的top.gif。,案例实施,（8）在第二行内按照第（5）步操作插入一个1行6列，边框为1像素的表格，将其背景颜色设置为蓝色，并在每个单元格内输入相应的文字，调整每个单元格的宽度以适应文字的宽度，如图6-5-5所示。,（9）将光标放在第三内，选择“插入”|“表单”选项卡，插入一个表单。（10）在上述插入的表单内，按照第5步操作插入一个12行2列的表格。（11）选中第（10）步插入的表格的各行，在属性面板中将行高设定为25像素，表格左侧部分对齐方式设定为右对齐，宽度为40%，然后在表格左侧输入相应的文字，如图6-5-6所示。,案例实施,（12）在第（10）步插入的表格的右侧前11行中，选择“