电子商务网站建设与网页设计课件 项目五 使用行为和表单创建网页特效

项目五使用行为和表单创建网页特效电子商务网站建设与网页设计

1使用行为2使用表单3课堂练习——

制作“新用户注册”网页表单目录CONTENTS4课堂练习——

使用行为制作“数码商城”网页特效5课堂练习——

使用行为验证用户注册行为是一系列使用JavaScript代码预定义的页面特效工具，是JavaScript在Dreamweaver中内置的程序库。当把行为赋予页面中某个元素时，也就是定义了一个操作，以及用于触发这个操作的事件。任务一使用行为一、认识行为和事件行为在网页中是比较常见的，如弹出窗口、鼠标指针移上去图片切换等。当发生某个事件时执行某个动作的过程称为行为，行为是事件和动作的组合。行为行为包括两部分内容，一部分是事件，另一部分是动作。事件用于指明执行某个动作的条件，如将鼠标指针移到对象上方、离开对象、单击对象、双击对象等；动作是行为的另一个组成部分，由预先编写的JavaScript代码组成，我们利用这些代码可以执行特定的任务，如打开浏览器窗口、弹出信息等。事件为了便于理解，可以将事件分为4类，分别是鼠标事件、键盘事件、页面事件和表单事件。常用的事件如下：onBlur、onClick、onDblClick、onError、onFocus、onKeyDown、onKeyPress、onKeyUp、onLoad、onMouseDown、onMouseUp、onMouseMove、onMouseOver、onMouseOut、onUnload。二、“行为”面板通过“行为”面板可以使用和管理行为。“行为”面板的显示列表分为两栏，左栏用于显示触发动作的事件，右栏用于显示动作。“行为”面板显示所有事件添加行为二、“行为”面板“行为”面板相关的基本操作包括打开面板、显示事件、添加行为和删除行为等，具体操作方法如下。在制作动态网页时，表单是接收用户信息的重要窗口，接收后信息交由服务器端的脚本程序处理并进行反馈。本任务将介绍如何在网页中创建表单。任务二使用表单一、了解表单一个完整的表单由两部分组成，一个是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务器端的应用程序，用于处理浏览者提交的信息。使用表单的网页二、创建表单在网页文档中创建表单的操作非常简单，下面将举例说明，具体操作方法如下。三、设置表单属性前面插入的是一个空表单，单击红色虚线框选中表单，在“属性”面板中可以设置表单的相关属性。表单“属性”面板在创建表单后，即可向其中添加表单对象。在Dreamweaver中可以创建各种表单对象，如文本域、单选按钮、复选框、按钮等。本任务将介绍“新用户注册”网页表单的制作方法。任务三课堂练习——制作“新用户注册”网页表单一、插入文本域文本域是表单中常用的元素之一，主要包括单行文本域、多行文本域和密码文本域3种。在网页中插入文本域的具体操作方法如下。插入文本域一、插入文本域设置文本域属性的具体操作方法如下。设置文本域属性二、插入单选按钮单选按钮通常不会单独出现，而是成组使用，且只允许选择其中的一个。下面将介绍如何在网页中插入单选按钮，具体操作方法如下。三、插入下拉菜单和滚动列表在网页中插入下拉菜单的具体操作方法如下。插入下拉菜单三、插入下拉菜单和滚动列表在网页中插入滚动列表的具体操作方法如下。插入滚动列表四、插入文件域文件域由一个文本框和一个“浏览”按钮组成，主要用于从磁盘上选择文件。在表单中经常会用到文件域，它能使一个文件附加到正被提交的表单中，如在表单中上传图片、在邮件中添加附件等。在表单中插入文件域的具体操作方法如下。五、插入复选框在网页中应用复选框可以为用户提供多个选项，用户可以选择其中的一项或多项。下面将详细介绍如何在网页中插入复选框并设置其属性，具体操作方法如下。六、插入按钮通过脚本的支持，单击相应的按钮，可以将表单信息提交到服务器，或者重置表单。标准表单按钮带有“提交”、“重置”或“发送”标签，还可以根据需要分配其他已经在脚本中定义的处理任务。表单中的按钮一般放置在表单的最后，用于实现相应的操作，如提交、重置等。在网页中插入按钮的具体操作方法如下。七、插入图像按钮通过插入图像按钮可以实现图形化按钮的功能。如果使用图像执行任务，而不是提交数据，则需要将某种行为附加到表单对象。在网页中插入图像按钮的具体操作方法如下。DreamweaverCC2018内置了常用标准行为，如打开浏览器窗口、交换图像、跳转菜单等，每一种行为都可以实现一个动态效果或用户与网页之间的交互。本任务将学习如何使用行为制作“数码商城”网页特效。任务四课堂练习——使用行为制作“数码商城”网页特效一、制作打开浏览器窗口特效使用“打开浏览器窗口”行为可以在一个新的窗口中打开页面，并指定新窗口的属性（包括窗口大小）、特性（是否可以调整大小、是否具有菜单栏等）和名称。制作打开浏览器窗口特效的具体操作方法如下。二、制作交换图像特效通过“交换图像”行为更改<img>标签的src属性，可以将一幅图像和另一幅图像进行交换。使用此行为可以创建鼠标指针经过按钮的效果，以及其他图像效果（包括一次交换多幅图像）。制作交换图像特效的具体操作方法如下。三、制作跳转菜单特效使用“跳转菜单”行为可以创建多个网页的链接，实现向多个目标网页的跳转。制作跳转菜单特效的具体操作方法如下。表单设计完成后，单击“提交”按钮，即可将用户信息收集到网站后台数据库中。但是，为了保证收集信息的正确性，在提交之前应先检查表单，检查是否有不符合格式要求的信息，如果有则弹出提示，进行修改后再重新提交。本任务将学习如何使用行为验证用户注册。任务五课堂练习——使用行为验证用户注册一、检查表单在新用户注册网页中，“昵称”文本框是必须填写的，通过“行为”面板可以添加检查表单行为，具体操作方法如下。二、设置密码仅为数字下面通过