《09章 掌握页面的交互性—表单与行为《Dreamweaver 网页设计与制作》》由会员分享，可在线阅读，更多相关《09章 掌握页面的交互性—表单与行为《Dreamweaver 网页设计与制作》（57页珍藏版）》请在金锄头文库上搜索。
1、本章简介：随着网络的普及，越来越多的人在网上拥有自己的个人网站。一般情况下，个人网站的设计者除了想宣传自己外，还希望收到他人的反馈信息。表单为网站设计者提供了通过网络接收用户数据的平台，如注册会员页、网上订货页、检索页等，都是通过表单来收集用户信息。因此，表单是网站管理者与浏览者之间沟通的桥梁。行为是Dreamweaver CC 2019预置的JaveScript程序库，每个行为包括一个动作和一个事件。任何一个动作都需要一个事件激活，两者相辅相成。动作是一段已编辑好的JaveScript代码，这些代码在特定事件被激发时执行。项目9 掌握页面的交互性表单与行为学习引导知识目标能力目标情感目标学习
2、目标1、了解表单的使用方法及种类。2、了解行为的使用方法。1、熟练掌握表单的使用方法及技巧。2、掌握行为的使用方法。培养对网页数据收集的方法。实训项目1、制作人力资源网页2、制作动物乐园网页3、制作品牌商城网页任务9.1 制作人力资源网页u任务引入u设计理念u任务知识u任务实施u扩展实践9.1.1 任务引入人力资源网是一个专为HR提供的网络服务交流平台，汇集了多方人力资源，倡导全新的服务理念，为从业者提供一流的管理服务，最新的行业资讯、完善的学习课程等内容。网页设计要求体现出平台的专业的服务态度和优质的服务理念。9.1.2设计理念在网页设计和制作过程中，以实景照片为主背景，突出主题；网页的图案
3、清新自然，在细节处理上颇为仔细，加强了视觉上的美感；中心的注册表结构简单、清晰明确，体现出简洁美观的风格；网页的整体设计简单大方，配色清朗明快，充满活力的感觉。效果图1创建表单表单是一个“容器”，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理，所以在添加文本域、按钮等表单对象之前，要先创建表单。9.1.3任务知识：创建表单、表单的属性2表单的属性在文档编辑窗口中选择表单，“属性”面板中出现表单属性。“属性”面板9.1.3任务知识：创建表单、表单的属性3文本域制作网页时通常使用表单的文本域来接收用户输入的信息，文本域包括单行文本域、多行文本域、密码文本域3种。一般情况下，当用
4、户输入较少的信息时，使用单行文本域接收；当用户输入较多的信息时，使用多行文本域接收；当用户输入密码等保密信息时，使用密码文本域接收。u插入单行文本域u插入密码文本域u插入多行文本域9.1.3任务知识：创建表单、表单的属性4单选按钮为了单选按钮的布局更加合理，通常采用逐个插入单选按钮的方式。若要在表单域中插入单选按钮，先将光标放在表单轮廓内需要插入单选按钮的位置，然后插入单选按钮。9.1.3任务知识：创建表单、表单的属性5单选按钮组先将光标放在表单轮廓内需要插入单选按钮组的位置，然后弹出“单选按钮组”对话框。“单选按钮组”对话框9.1.3任务知识：创建表单、表单的属性6复选框为了复选框的布局更加
5、合理，通常采用逐个插入复选框的方式。若要在表单域中插入复选框，先将光标放在表单轮廓内需要插入复选框的位置，然后插入复选框。9.1.3任务知识：创建表单、表单的属性7创建下拉菜单和滚动列表 在表单中有2种类型的菜单，一个是下拉菜单，一个是滚动列表，它们都包含一个或多个菜单列表选择项。当用户需要在预先设定的菜单列表选项中选择一个或多个选项时，可使用“选择”功能创建下拉菜单或滚动列表。u插入下拉菜单u插入滚动列表9.1.3任务知识：创建表单、表单的属性8创建文件域网页中要实现访问者上传文件的功能，需要在表单中插入文件域。文件域的外观与其他文本域类似，只是文件域还包含一个“浏览”按钮。访问者可以手动输
6、入要上传的文件路径，也可以使用“浏览”按钮定位并选择该文件。若要在表单域中插入文件域，则先将光标放在表单轮廓内需要插入文件域的位置，然后插入文件域。9.1.3任务知识：创建表单、表单的属性9插入图像按钮（创建图像域）Dreamweaver CC 2019默认的按钮样式比较死板，为了设计需要，可使用自定义的图像代替按钮。将光标放在表单轮廓内需要插入图像按钮的位置。弹出“选择图像源文件”对话框，选择作为按钮的图像文件。“选择图像源文件”对话框9.1.3任务知识：创建表单、表单的属性10插入按钮按钮的作用是控制表单的操作。一般情况下，表单中设有“提交”按钮、“重置”按钮和普通按钮等，浏览者在网上申请
7、QQ、邮箱或会员注册时会见到。Dreamweaver CC 2019将按钮分为3种类型，即按钮、“提交”按钮和“重置”按钮。其中，按钮元素需要制作者指定单击该按钮时要执行的操作，例如添加一个JavaScript脚本，使得浏览者单击该按钮时打开另一个页面。若要在表单域中插入按钮表单，则先将光标放在表单轮廓内需要插入按钮表单的位置，然后插入按钮表单。9.1.3任务知识：创建表单、表单的属性11插入“提交”按钮“提交”按钮的作用是，在用户单击该按钮时将表单数据内容提交到表单域的Action属性中指定的处理程序中进行处理。若要在表单域中插入“提交”按钮，先将光标放在表单轮廓内需要插入“提交”按钮的位置
8、，然后插入“提交”按钮。9.1.3任务知识：创建表单、表单的属性9.1.3任务知识：创建表单、表单的属性12插入“重置”按钮“重置”按钮的作用是，在用户单击该按钮时将清除表单中所做的设置，恢复为默认的设置内容。若要在表单域中插入“重置”按钮，先将光标放在表单轮廓内需要插入“重置”按钮的位置，然后插入“重置”按钮。9.1.4任务实施 1 2 3 49.1.5扩展实践：制作健康测试网页使用“选择”按钮，插入下拉菜单；使用“属性”面板，设置下拉菜单的属性。效果图任务9.2 制作动物乐园网页u任务引入u设计理念u任务知识u任务实施u扩展实践9.2.1 任务引入动物乐园是一个野生动物园，园内饲养了多种野
9、生动物，数量庞大，是适合游客参观和学习知识的乐园；园内分为多个区块，模拟动物实际的生活环境，最大程度的保护动物天性。网页设计要求体现出动物乐园的特点和开放政策。9.2.2设计理念在网页设计和制作过程上，背景采用蓝实景配，带给人直观的视觉感受，成群的动物、广袤的草地、无垠的天际营造出动植物自由无忧的生活状态；整个页面结构清晰，信息明确，突出主题，报名表的摆放及设计简洁明了，能够让浏览者印象深刻。效果图1插入电子邮件文本域Dreamweaver CC 2019为了适应HTML 5的发展增加了许多全新的HTML 5表单元素，电子邮件文本域就是其中的一种。电子邮件文本域是专门为输入E-mail地址而定
10、义的文本框，在其中程序会验证输入的文本是否符合E-mail地址的格式，并会提示验证错误。若要在表单域中插入电子邮件文本域，先将光标置于表单轮廓内需要插入电子邮件文本域的位置，然后插入电子邮件文本域。9.2.3任务知识：插入电子邮件、数字文本域2插入URL文本域URL表单元素是专门为输入URL地址而定义的文本框，在验证输入的文本格式时，如果该文本框中的内容不符合URL地址的格式，会提示验证错误。若要在表单域中插入URL文本域，先将光标放在表单轮廓内需要插入URL文本域的位置，然后插入URL文本域。9.2.3任务知识：插入电子邮件、数字文本域3插入Tel文本域Tel表单元素是专门为输入电话号码而定
11、义的文本框，没有特殊的验证规则。若要在表单域中插入Tel文本域，先将光标放在表单轮廓内需要插入Tel文本域的位置，然后插入Tel文本域。9.2.3任务知识：插入电子邮件、数字文本域4 插入搜索文本域搜索表单元素是专门为输入搜索内容而定义的文本框，没有特殊的验证规则。若要在表单域中插入搜索文本域，先将光标放在表单轮廓内需要插入搜索文本域的位置，然后插入搜索文本域。9.2.3任务知识：插入电子邮件、数字文本域5插入数字文本域数字表单元素是专门为输入特定的数字而定义的文本框，具有Min、Max和Step属性，表示允许输入的最小值、最大值和调整步长。若要在表单域中插入数字文本域，先将光标放在表单轮廓内
12、需要插入数字文本域的位置，然后插入数字文本域。9.2.3任务知识：插入电子邮件、数字文本域6插入范围文本域范围表单元素是将输入框显示为滑动条，其作用是作为某一特定范围内的数值选择器。若要在表单域中插入范围文本域，先将光标放在表单轮廓内需要插入范围文本域的位置，然后插入范围文本域。9.2.3任务知识：插入电子邮件、数字文本域7插入颜色颜色表单元素应用于网页时会默认提供一个颜色选择器，但在大部分浏览器中还不能实现该效果，在Chrome、火狐浏览器中都可以看到颜色表单元素的效果。若要在表单域中插入颜色，先将光标放在表单轮廓内需要插入颜色的位置，然后插入颜色。9.2.3任务知识：插入电子邮件、数字文本
13、域8插入月表单月表单元素的作用是为用户提供一个月选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到月表单元素的效果。若要在表单域中插入月表单，先将光标放在表单轮廓内需要插入月表单的位置，然后插入月表单。9.2.3任务知识：插入电子邮件、数字文本域9插入周表单周表单元素的作用是为用户提供一个周选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到周表单元素的效果。若要在表单域中插入周表单，先将光标放在表单轮廓内需要插入周表单的位置，然后插入周表单。9.2.3任务知识：插入电子邮件、数字文本域10插入日期表单日
14、期表单元素的作用是为用户提供一个日期选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到日期表单元素的效果。若要在表单域中插入日期表单，先将光标放在表单轮廓内需要插入日期表单的位置，然后插入日期表单。9.2.3任务知识：插入电子邮件、数字文本域11插入时间表单时间表单元素的作用是为用户提供一个时间选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到时间表单元素的效果。若要在表单域中插入时间表单，先将光标放在表单轮廓内需要插入时间表单的位置，然后插入时间表单。9.2.3任务知识：插入电子邮件、数字文本域12插
15、入日期时间表单日期时间表单元素的作用是为用户提供一个完整的日期时间选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到日期时间表单元素的效果。若要在表单域中插入日期时间表单，先将光标放在表单轮廓内需要插入日期时间表单的位置，然后插入日期时间表单。9.2.3任务知识：插入电子邮件、数字文本域9.2.3任务知识：插入电子邮件、数字文本域13插入日期时间（当地）表单日期时间（当地）表单元素的作用是为用户提供一个完整的日期时间（不包含时区）选择器，但在大部分浏览器中还不能实现该效果，在Chrome、360、Opera浏览器中都可以看到日期时间（当地）表单元素
16、的效果。若要在表单域中插入日期时间（当地）表单，先将光标放在表单轮廓内需要插入日期时间（当地）表单的位置，然后插入日期时间（当地）表单。9.2.4任务实施 1 2 3 49.2.5扩展实践：制作鑫飞越航空网页使用“日期”按钮，插入日期元素。效果图任务9.3 制作品牌商城网页u任务引入u设计理念u任务知识u任务实施u扩展实践9.3.1 任务引入Easy life是一家电商用品零售企业，贩售平整式包装的家具、配件、浴室和厨房用品等。公司近期推出“免单活动”，需要为其制作一个全新的网店首页，要求起到宣传公司活动的作用，向客户准确的传递活动和活动规则，并且能够引起客服参与的欲望。9.3.2设计理念在网
17、页设计和制作过程上，背景采用红色系进行搭配，带给人热闹非凡的视觉感受；使用直观醒目的文字来诠释广告内容，表现活动特色；整体色彩清新干净，与宣传的主题相呼应；设计风格简洁大方，给人整洁干练的感觉。效果图9.3.3任务知识：行为面板、应用行为1“行为”面板使用“行为”面板为网页元素指定动作和事件方便快捷。在文档编辑窗口中，选择“窗口 行为”命令，或按Shift+F4组合键，即可弹出“行为”面板。“行为”面板9.3.3任务知识：行为面板、应用行为2应用行为u将行为附加到网页元素上u将行为附加到文本上9.3.3任务知识：行为面板、应用行为3调用 JavaScript“调用 JavaScript”动作的
18、功能是当发生某个事件时选择自定义函数或 JavaScript代码行。“调用 JavaScript”对话框9.3.3任务知识：行为面板、应用行为4打开浏览器窗口使用“打开浏览器窗口”动作可以在一个新的窗口中打开指定的URL，还可以指定新窗口的属性、特征和名称。“打开浏览器窗口”对话框9.3.3任务知识：行为面板、应用行为5转到 URL“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击操作更改2个或多个框架的内容。“转到URL”对话框9.3.3任务知识：行为面板、应用行为6交换图像“交换图像”动作通过更改标签的 src 属性将一个图像和另一个图像进行交换。
19、“交换图像”动作主要用于创建当鼠标指针经过时产生动态变化的按钮。“交换图像”对话框9.3.3任务知识：行为面板、应用行为7设置容器的文本“设置容器的文本”动作的功能是用指定的内容替换网页上现有层的内容和格式,该内容可以包括任何有效的HTML源代码。虽然“设置容器的文本”将替换层的内容和格式，但保留层的属性，包括颜色。通过在“设置容器的文本”对话框的“新建HTML”选项的文本框中加入HTML标签，可对内容进行格式设置。“设置容器的文本”对话框9.3.3任务知识：行为面板、应用行为8设置状态栏文本“设置状态栏文本”动作的功能是设置在浏览器窗口底部左侧的状态栏中显示的消息。访问者常常会忽略或注意不到
20、状态栏中的消息，如果消息非常重要，还是应考虑将其显示为弹出式消息或层文本。可以在状态栏文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其他表达式。若要嵌入一个 JavaScript 表达式，需将其放置在大括号中。“设置状态栏文本”对话框9.3.3任务知识：行为面板、应用行为9设置文本域文字“设置文本域文字”动作的功能是用指定的内容替换表单文本域的内容。可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其他表达式。若要嵌入一个 JavaScript 表达式，应将其放置在大括号中；若要显示大括号，在它前面加一个反斜杠（）。“设置文本域文字”对话框9.
21、3.3任务知识：行为面板、应用行为10跳转菜单跳转菜单是创建超链接的一种形式，与真正的超链接相比，跳转菜单形式更加灵活。跳转菜单从表单中的菜单发展而来，通过“行为”面板中的“跳转菜单”选项进行添加。“跳转菜单”对话框9.3.3任务知识：行为面板、应用行为11跳转菜单开始“跳转菜单开始”动作与“跳转菜单”动作密切关联。“跳转菜单开始”将一个“前往”按钮和一个“跳转菜单”关联起来，单击“前往”按钮则打开在该“跳转菜单”中选择的链接。通常情况下，“跳转菜单”不需要一个“前往”按钮。但是如果“跳转菜单”出现在一个框架中，而“跳转菜单”项链接到其他框架中的页，则通常需要使用“前往”按钮，实现访问者重新选
22、择“跳转菜单”中已选项。“跳转菜单开始”对话框9.3.4任务实施 1 2 3 49.3.5扩展实践：制作婚戒网页使用“打开浏览器窗口”命令，制作在网页中显示指定大小和属性的弹出窗口。效果图任务9.4 项目演练：制作智能扫地机器人网页u任务引入u设计理念9.4.1 任务引入扫地机器人网是一个为用户提供各类有关扫地机器人高品质服务的网站，包括产品推荐、技术支持、购买渠道等多项功能。现要为网站设计新的页面，网页设计要求带给浏览者简洁明了，易于识别的观感。9.4.2设计理念在网页设计和制作过程中，背景采用实景照片，使画面看起来干净清爽；产品与背景的搭配，使页面看起来活泼轻松；用户注册界面设计简洁，操作简单；整体设计简洁清晰，让人一目了然，增强了网站的吸引力。效果图
