网页设计与制作：项目7 交互应用

1、项目7 交互应用,1,网页设计与制作,项目7 交互应用,本章简介： 在制作网页时，网络丰富网页内容，可以在网页中添加网页特效与交互。这样制作的网页，不但新颖、有风格，而且也能增加网站的访问量。 本章主要讲解表单及其应用，以及交互行为等相关知识，通过学习，读者可以掌握表单的相关知识及应用，熟悉常用行为的添加及应用，能实现简单的网页交互功能,项目目标,掌握表单的概念及其应用 熟悉常用的行为及其应用,要在网页中实现交互，首先需要获得用户的意愿，收集有关资料，然后才能根据收集的资料进行相应的处理，并将处理结果返回给用户。因此，表单是创建交互站点的基础，是客户端与程序设计的纽带，是服务器用以获取用户信息

2、的一种方式。 服务器通常通过表单页面来实现用户资料的收集，表单页面中会列举许多项目，允许用户进行选择或输入相应的内容，如在淘宝网购物时填写的购物单，在论坛注册个人信息时的页面以及在登录邮箱时填写个人账户信息的页面等都是表单页面,表单在网页中主要负责数据采集功能，在HTML中它拥有支持交互作用的特殊功能。 一个表单有三个基本组成部分：表单标签；表单域；表单按钮。 表单的工作流程如下： 1、用户浏览含有表单的网页时，填写必须的信息，然后按某个按钮提交信息。 2、用户所填写的信息通过Internet传送到服务器上。 3、服务器上专门的程序对这些数据进行处理。若有错误则返回错误信息，并要求纠正错误。当

3、数据完整无误后，服务器反馈一个输入完成信息,制作表单页面之前首先要创建表单域，然后再将表单添加到表单内部，否则将不能正常运行。在Dreamweaver CS5 中设计表单非常简单，通过“表单”插入栏即可完成表单与表单对象的添加。 创建表单域的步骤如下： 1、将光标定位到要插入表单的位置。 2、单击“表单”插入面板中的“表单”按钮图标或选择“插入表单表单”命令在编辑窗口中创建表单，新创建的表单是一个红色虚线矩形框。 3、设置表单属性,在表单域中可以插入单行文本域、文本域、隐藏域、单选按钮、单选按钮组、复选按钮、复选按钮组、列表/菜单、跳转菜单等多种表单对象。 1、插入文本字段 （1）设置单行文本

4、字段属性 （2）设置多行文本字段属性 （3）设置密码字段属性 2、插入文本区域 3、插入隐藏域 4、插入单选按钮及单选按钮组 5、插入复选框及复选框组,6、插入列表/菜单 7、插入跳转菜单 8、插入图像域、文件域及按钮,Spry表单验证技术与Spry菜单栏等技术相同，都是由JavaScript和CSS代码构成，该技术可根据用户对表单进行的操作显示各种提示信息。由于Spry表单验证技术不需要提交数据，因此可在页面不刷新的情况下对用户的操作进行响应。 使用Spry表单验证技术，可以方便地实现表单与用户的快速交互与响应，提高填写表单的效率，并降低用户在刷新页面时等待的时间,1、Spry验证文本 Sp

5、ry验证文本技术用于验证文本字段表单、文本区域表单等表单内输入的内容，可对这两种表单中的数据进行匹配，验证字符类型、字符长度等多种条件，并显示相应的结果。 （1）Spry验证文本域 Spry验证文本域计技术的作用是验证单行的文本域中内容是否符合网页表单提交的需求。在使用Spry验证文本域时，有两种主要的方法，即为文本字段添加验证和直接添加可验证的文本字段等。 （2）Spry验证文本区域 Spry验证文本区域技术的作用是验证多行的文本区域表单中的内容，并读取一些简单的属性,2、Spry验证选择 Spry验证选择的功能是验证用户在各种选择类表单的选择内容，并根据这些内容显示各种提示选项。Spry验

6、证选择可验证单选按钮组、复选框，以及菜单/列表等多种类型的选择表单。 （1）Spry验证单选按钮组 Spry验证单选按钮组技术既可以验证单独的单选按钮，也可以验证多个位于同组的单选按钮，根据用户选择的选项显示反馈的信息。 如需要直接插入带有验证功能的单选按钮组，可直接将鼠标光标置于表单容器对象中，单击“插入”面板中的“Spry验证单选按钮组”按钮 ，在弹出的对话框中添加单选按钮，并设置组的名称和布局方式，单击“确定”按钮,2）Spry验证复选框 Spry验证复选框既可以验证单独的复选框，也可以验证位于同组的复选框。选择复选框表单，然后即可单击“插入”面板中的“Spry验证复选框”按钮 ，为其添

7、加Spry验证功能。 将鼠标移动至复选框上方，单击弹出的蓝色浮动框，即可在“属性”检查器中设置Spry验证复选框的属性,3）Spry验证选择 Spry验证选择可以对各种列表、菜单、跳转菜单等表单进行验证，根据用户选择的项目类型反馈信息结果。在“插入”面板中单击“Spry验证选择”按钮 ，为列表、菜单表单添加Spry表单验证,3Spry验证密码域确认 在网页的表单设计中，如需要用户填入密码和二次填入密码，则可以使用Spry验证密码和Spry验证确认等两种技术，验证密码的复杂程度和确认密码域密码是否保持一致。 （1）Spry验证密码 Spry验证密码技术可以验证类型为密码的文本字段中做饭的复杂程度

8、，并根据其包含的字符类型显示不同的结果。选择密码类的文本字段，然后即可单击“插入”面板中的“Spry验证密码”按钮 ，为文本字段添加密码验证,2）Spry验证确认 Spry验证确认技术可以在密码文本字段和二次输入密码的文本字段均存在的情况下对这两个密码文本字段的内容进行比对，并反馈比对的结果。 如已存在密码的文本字段，则可以直接在“插入”面板中单击“Spry验证确认”按钮 ，插入一个二次输入密码的文本字段。 在选择Spry验证确认的蓝色浮动标签后，用户可以在“属性”检查器设置其属性,常见面试题】 1 表单主要用于存放什么内容？ 2 简述文本域与文件域有什么区别？ 3 简述列表框和下拉列表框的联

9、系和区别？ 4 Spry表单元素与表单对象之间的区别有哪些,网页行为是事件（Event）和动作（Action）的组合。在Dreamweaver CS5 中，事件可以是任何一个链接上单击同样具有交互性的事物，或者和一个Web也的装入过程同样自动化的某种事情。行为被规定附属与页面上的某个特定的元素，不论是一个文本链接、一个图像或标识,1、行为面板 使用行为面板，可以为对象附加JavaScript行为，还可以为以前添加的行为修改参数。行为会以事件的字母顺序在行为面板中显示。如果对于同一事件可以引发不同的动作，则这些动作将以其执行顺序在行为面板中显示。 单击菜单栏上的“窗口/行为”命令，或者单击窗口右

10、侧“标签检查器”的行为，即可打开“行为”面板,2、动作 Dreamweaver 动作是经过精心编写的，以便在尽可能多的浏览器中发挥作用。Dreamweaver CS5 中内置了20多个动作,3、事件 事件决定了为某一页面元素所定义的动作在何时被执行，即在何时触发一个动作。每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+) 弹出式菜单中列出的动作相关联。当Web页的访问者与页进行交互时（例如，单击某个图像），浏览器生成事件；这些事件可用于调用引起动作发生的JavaScript函数。 4、附加行为 可以将行为附加给整个文件，也可以附加给链接、图像、表单对象或如何其它的HTML元素

11、。每个事件可以指定多个动作，动作将按照顺序列表一次执行,5、修改行为 在给一个对象附加了行为以后，仍可以改变引发动作的事件，添加或删除动作及改变动作的参数,Dreamweaver CS5 提供了许多种网页行为，可以直接应用于网页中各种元素中。在“标签检查器”中的“行为”面板中，用户可以方便地为文本、窗口、图像、容器以及各种CSS属性添加交互行为。 1、窗口交互行为 窗口交互行为的作用是对浏览器窗口和窗体的对话框进行操作，实现简单的用户交互。在Dreamweaver CS5中，主要提供了两种窗口交互行为，及弹出信息和打开浏览器窗口。 “弹出信息”行为可以根据用户触发的事件，在浏览器窗口中弹出一个

12、包含文本信息和一个确认按钮的对话框。使用该行为，可以以醒目的方式强制用户阅读本文信息。 “打开浏览器窗口”行为可以根据用户触发的事件，为Web浏览器弹出一个新的窗口，同时还可以定义新窗口的属性,2. 容器交互行为 容器交互行为的作用就是为AP Div等带有ID的容器添加交互的行为效果，包括“拖动AP元素”行为和“显示-隐藏元素”行为。 添加“拖动AP元素”行为允许用户为AP元素标签添加拖拽行为，允许用户在Web浏览器中用鼠标拖动该元素，更改元素的位置。由于“拖动AP元素”动作必须在层被用户拖动之前调用，所以确认引发动作的事件必须发生在拖动层之前,显示-隐藏元素”行为可以控制网页架构标签根据用户

13、重复的行为，在显示和隐藏等两种状态间切换。“显示-隐藏元素”行为可以应用于所有带ID属性的网页布局标签，不需要该标签以绝对定位的方式显示。“显示-隐藏元素”行为通常被用在一些特殊的网页元素上，如弹出式菜单、下落列表类导航等,3. 图像交互行为 图像交互行为的作用是为网页中的各种图像添加交互事件，实现图像的交换/恢复等。图像交互行为通常是基于鼠标滑过和滑开事件的。 预先载入图像 当我们浏览网页时，如果使用的宽带较慢时，常常会出现显示图像时的长时间等待。此时使用Dreamweaver CS5中自带的“预先载入图像”动作，可以使图像的下载速度明显加快，因为它已经将需要的图像保存到用户的缓冲区中。这样

14、可以大大提高网站的访问量,交换图像”行为和“恢复交互图像”行为通常都是成对使用。“交换图像”行为可以在用户触发行为后替换网页文档中插入的图像；“恢复交互图像”可以根据另一个触发的事件恢复显示原来的图像，只有在使用了“交换图像”行为后才起作用,4. 属性交互行为 属性交互行为的作用是根据用户触发的事件，动态地改变网页中某个对象的属性值，一般通过改变对象的标记属性值相应地发表对象的属性，以实现各种特殊的视觉效果。Dreamweaver CS5 提供了“改变属性”行为，用户可以很方便地更改网页标签的各种属性，实现属性的交互。 5. 文本交互行为 文本交互行为即操作网页中文本内容的行为。在Dreamw

15、eaver CS5 中，允许用户通过行为功能操作容器本文、文本域文本、框架文本以及状态栏文本等。 “设置容器的文本”行为可以方便地定义触发的事件，用指定的内容来代替页面上现有容器的内容。 “设置状态栏本文”，状态栏是在浏览器窗口底部显示当前网页打开状态以及鼠标滑过的网页对象等情况的一种特殊工具栏。在Web页中，用户可以通过JavaScript脚本语言等定义状态栏的文本内容,6、跳转菜单及转到URL 跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。当您使用“插入-表单对象-跳转菜单”创建跳转菜单时，Dreamweaver CS5 创建一个菜单对象并向其附加一个“跳转菜

16、单“行为。 “转到 URL”行为可以让用户在当前窗口或者指定框架中打开一个新页面。不仅可以由不同的事件来执行，而且对于一次改变两个或两个以上框架的内容特别有用。这个动作还可以在时间轴内被调用，用以隔一定时间跳转到新的页面,6、跳转菜单及转到URL 跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。当您使用“插入-表单对象-跳转菜单”创建跳转菜单时，Dreamweaver CS5 创建一个菜单对象并向其附加一个“跳转菜单“行为。 “转到 URL”行为可以让用户在当前窗口或者指定框架中打开一个新页面。不仅可以由不同的事件来执行，而且对于一次改变两个或两个以上框架的内容特别

17、有用。这个动作还可以在时间轴内被调用，用以隔一定时间跳转到新的页面,7. 效果交互行为 效果交互行为的作用是通过动态改变属性的方式，为网页添加动画视觉效果，包含7种交互行为，分别应用于图像、AP元素及带有ID属性的网页结构标签等。 （1）增大/收缩 （2）挤压 （3）显示/渐隐 （4）晃动 （5）滑动 （6）遮帘 （7）高亮颜色,8、检查表单 “检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用 onBlur 事件将此动作分别附加到各文本域，在用户填写表单时对域进行检查；或使用 onSubmit 事件将其附加到表单，在用户单击“提交”按钮时同时对多个文本域进行检查。将此动作附加到表单防止表单提交到服务器后任何指定的文本域包含无效的数据,9. 检查插件 在Dreamweaver中使用“检查插件”行为可以根据用户