Dreamweaver-CC第5章-表单和行为课件.ppt

1、网页制作案例教程第5章 表单和行为l 了解表单和行为的基本概念。l 掌握插入和设置表单的基本方法。l 了解常用事件和常用行为。l 掌握添加和设置行为的基本方法。学习目标5.1.1 认识表单5.1 使用表单 表单提供了从用户那里收集信息的方法。表单通常由两部分组成，一部分是用来搜集数据的表单页面，另一部分是用来处理数据的应用程序。表单输入类型称为表单对象，表单对象是允许用户输入数据的机制。表单对象名称可以使用字母、数字、字符和下划线的任意组合，但不能包含空格或特殊字符。使用Dreamweaver CC 2017可以制作表单页面，在表单页面上插入表单对象通常有两种方法，一种是选择菜单命令【插入】/

2、【表单】中的相应选项，另一种是在【插入】面板的【表单】类别中单击相应按钮。5.1.2 插入和设置表单域5.1 使用表单 选择菜单命令【插入】/【表单】/【表单】，在页面中插入一个表单。在【设计】视图中，表单轮廓线以红色虚线表示。可根据需要直接在【属性】面板中设置其属性。5.1.3 插入文本类表单对象5.1 使用表单 一、文本。文本（Text）是可以输入单行文本的表单对象，可选择菜单命令【插入】/【表单】/【文本】来插入文本表单对象。5.1.3 插入文本类表单对象5.1 使用表单 二、电子邮件。电子邮件（Email）是用于输入电子邮件地址列表的表单对象，可选择菜单命令【插入】/【表单】/【电子邮

3、件】来插入电子邮件表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 三、密码。密码（Password）是用于输入电子邮件地址列表的表单对象，可选择菜单命令【插入】/【表单】/【密码】来插入密码表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 四、Url。地址（Url）是用于输入绝对Url的表单对象，可选择菜单命令【插入】/【表单】/【Url】来插入地址表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 五、Tel。电话（Tel）是用于输入Tel的表单对象，可选择菜单命令【插入】/【表单】/

4、【Tel】来插入电话表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 六、搜索。搜索（Search）是用于输入一个或多个搜索词的表单对象，可选择菜单命令【插入】/【表单】/【搜索】来插入搜索表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 七、数字。数字（Number）是用于仅输入数字的表单对象，可选择菜单命令【插入】/【表单】/【数字】来插入数字表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 八、范围。范围（Range）是用于输入仅包含某个数字范围内值的表单对象，可选择菜单命令【插入

5、】/【表单】/【范围】来插入范围表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 九、颜色。颜色（Color）是用于输入仅包含颜色值的表单对象，可选择菜单命令【插入】/【表单】/【颜色】来插入颜色表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十、月。月（Month）是供用户输入月和年的表单对象，可选择菜单命令【插入】/【表单】/【月】来插入月表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十一、周。周（Week）是供用户输入周的表单对象，可选择菜单命令【插入】/【表单】/【周】来插

6、入周表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十二、日期。日期（Date）是供用户输入日期（年月日）的表单对象，可选择菜单命令【插入】/【表单】/【日期】来插入日期表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十三、时间。时间（Time）是供用户输入时间（时分秒）的表单对象，可选择菜单命令【插入】/【表单】/【时间】来插入时间表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十四、日期时间。日期时间（datetime）是供用户输入日期时间（年月日时分秒，带时区）的表单对象，可

7、选择菜单命令【插入】/【表单】/【日期时间】来插入日期时间表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十五、日期时间（当地）。日期时间（当地）（datetime-local）是供用户输入当地日期时间（年月日时分秒，无时区）的表单对象，可选择菜单命令【插入】/【表单】/【日期时间（当地）】来插入日期时间（当地）表单对象，并可根据需要设置其相关属性。5.1.3 插入文本类表单对象5.1 使用表单 十六、文本区域。文本区域（Textarea）是可以输入多行文本的表单对象，可选择菜单命令【插入】/【表单】/【文本区域】来插入文本区域表单对象，并可根据需要设置其

8、相关属性。5.1.4 插入选择类表单对象5.1 使用表单 一、单选按钮。单选按钮（radio）主要用于标记一个选项是否被选中，它只允许用户从所提供的选项中选择唯一答案。选择菜单命令【插入】/【表单】/【单选按钮】，将在文档中插入一个单选按钮表单对象，反复执行该操作可插入多个单选按钮。5.1.4 插入选择类表单对象5.1 使用表单 二、单选按钮组。选择菜单命令【插入】/【表单】/【单选按钮】，一次只能插入一个单选按钮。在实际应用中，单选按钮至少要有两个或者更多，因此可以选择菜单命令【插入】/【表单】/【单选按钮组】打开【单选按钮组】对话框，经过设置一次插入多个单选按钮。5.1.4 插入选择类表单

9、对象5.1 使用表单 三、复选框。复选框（checkbox）常被用于有多个选项可以同时被选择的情况。每个复选框都是独立的，必须有一个唯一的名称。选择菜单命令【插入】/【表单】/【复选框】，将在文档中插入一个复选框，反复执行该操作将插入多个复选框。5.1.4 插入选择类表单对象5.1 使用表单 四、复选框组。选择菜单命令【插入】/【表单】/【复选框】命令，一次只能插入一个复选框。在实际应用中，复选框通常是多个同时使用，因此可以选择菜单命令【插入】/【表单】/【复选框组】命令一次插入多个复选框。5.1.4 插入选择类表单对象5.1 使用表单 五、选择。选择（Select）可以显示一个包含有多个选项

10、的可滚动列表，在列表中可以选择需要的项目。选择菜单命令【插入】/【表单】/【选择】，将在文档中插入一个选择域。5.1.5 插入按钮类表单对象5.1 使用表单 一、按钮。按钮（Button）是指网页文件中表示按钮时用到的表单对象。选择菜单命令【插入】/【表单】/【按钮】可插入一个普通按钮。5.1.5 插入按钮类表单对象5.1 使用表单 二、“提交”按钮。使用“提交”按钮（Submit Button）可以将表单数据提交到服务器。选择菜单命令【插入】/【表单】/【“提交”按钮】，将插入一个“提交”按钮。5.1.5 插入按钮类表单对象5.1 使用表单 三、重置”按钮。使用“重置”按钮（Reset Bu

11、tton）可以删除表单中输入或设置的所有内容，使其恢复到初始状态。选择菜单命令【插入】/【表单】/【“重置”按钮】，将插入一个“重置”按钮。5.1.5 插入按钮类表单对象5.1 使用表单 四、图像按钮。图像按钮（Image Button）用于在表单中插入一幅图像从而生成图形化按钮，在网页中使用图形化按钮要比单纯使用按钮美观得多。选择菜单命令【插入】/【表单】/【图像按钮】。5.1.5 插入按钮类表单对象5.1 使用表单 五、隐藏。隐藏（hidden）表单对象的作用主要是用来储存并提交非用户输入信息，如注册时间、认证号等，这些都需要使用JavaScript、ASP等源代码来编写，隐藏域在网页中一

12、般不显现。选择菜单命令【插入】/【表单】/【隐藏】，将插入一个隐藏域。5.1.5 插入按钮类表单对象5.1 使用表单 六、文件。文件（File）表单对象的作用是允许用户浏览并选择本地计算机上的文件，以便将该文件作为表单数据进行上传。但真正上传文件还需要相应的上传组件作支持，文件域仅仅是供用户浏览并选择文件使用，并不具有上传功能。5.1.6 插入域集和标签5.1 使用表单 一、域集。使用域集可将表单内的相关元素进行分组，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果等。首先选中要分组的表单对象，然后选择菜单命令【插入】/【表单】/【域集】。5.1.6 插入域集和标签5.1 使用表单

13、 二、标签。标签为input等表单对象定义标注（标记）。标签元素不会向用户呈现任何特殊效果。但它为鼠标用户改进了可用性。在浏览器中如果在标签元素内点击文本，就会触发此控件。也就是说，当用户单击表单对象前面的标签文本时，浏览器就会自动将焦点转到和标签文本对应的表单对象上。选择菜单命令【插入】/【表单】/【标签】可以插入标签。5.2.1 认识行为5.2 使用行为 行为的基本元素有两个：事件和动作，事件是触发动作的原因，动作是事件触发后要实现的效果。行为是事件和事件触发的动作的组合，是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。事件是由浏览器生成的消息，它提示该页的浏览者已执行

14、了某种操作。例如，当浏览者将鼠标光标移到某个链接上时，浏览器将为该链接生成一个“onMouseOver”事件，然后浏览器检查在当前页面中是否应该调用某段JavaScript代码进行响应。不同的页面元素定义不同的事件。例如，在大多数浏览器中，“onMouseOver”和“onClick”是与超级链接关联的事件，而“onLoad”是与图像和文档的body部分关联的事件。动作是一段预先编写的JavaScript代码，可用于执行诸如以下的任务：打开浏览器窗口、显示或隐藏AP元素、转到URL等。在将行为附加到某个页面元素后，当该元素的某个事件发生时，行为即会调用与这一事件关联的动作。例如，如果将“弹出信

15、息”动作附加到一个链接上，并指定它将由“onMouseOver”事件触发，则只要某人将鼠标光标放到该链接上，就会弹出相应的信息。一个事件也可以触发许多动作，用户可以定义它们执行的顺序。5.2.2 添加行为5.2 使用行为 一、域集。使用域集可将表单内的相关元素进行分组，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果等。首先选中要分组的表单对象，然后选择菜单命令【插入】/【表单】/【域集】。(1)在页面上选择一个对象。(2)选择菜单命令【窗口】/【行为】，打开【行为】面板。5.2.2 添加行为5.2 使用行为 (3)单击+按钮弹出行为下拉菜单并从中选择一个要添加的行为。(4)当选择

16、某个行为时，如【弹出信息】，将打开一个对话框显示相关参数和说明，根据要求进行参数设置。5.2.2 添加行为5.2 使用行为 (5)在添加的行为中触发动作的默认事件显示在【行为】面板的【事件】列表中，如果默认显示的事件不是所预想的事件，可从【事件】下拉列表中选择适合的事件。(6)保存文件后在浏览器中预览，当鼠标停留在文本上时，将弹出一个消息提示框。5.2.3 常用行为5.2 使用行为 一、弹出信息。【弹出信息】行为显示一个包含指定消息的提示框。当从一个文档切换到另一个文档或单击特定链接或图像时，想给用户传达特定信息，可以使用此功能。5.2.3 常用行为5.2 使用行为 二、调用JavaScrip

17、t。【调用JavaScript】行为能够在事件发生时执行自定义的函数或JavaScript代码行。用户可以自己编写JavaScript，也可以使用Web上各种免费的JavaScript库中提供的代码。当单击页面中带有空链接的“关闭窗口”文本时关闭网页。5.2.3 常用行为5.2 使用行为 三、改变属性。【改变属性】行为用来改变网页元素的属性值，如文本大小和字体、背景色、图像的来源以及表单的执行等。当鼠标光标经过含有图像的Div标签时，其边框颜色由蓝色变成红色，当鼠标光标离开时其边框颜色恢复为原来的蓝色。（1）插入Div并设置CSS属性。5.2.3 常用行为5.2 使用行为 （2）在Div标签中

18、插入图像“tu01.jpg”。（3）选中Div标签，在【行为】面板中添加【改变属性】行为。将触发事件设置为“onMouseOver”。5.2.3 常用行为5.2 使用行为 （4）给Div标签再添加一个【改变属性】行为，边框颜色设置为蓝色“#0000FF”，触发事件设置为“onMouseOut”。5.2.3 常用行为5.2 使用行为 （5）保存文档并预览网页。5.2.3 常用行为5.2 使用行为 四、交换图像。【交换图像】行为可以将一个图像替换为另一个图像，这是通过改变图像的“src”属性来实现的。虽然也可以通过为图像添加【改变属性】行为来改变图像的“src”属性，但是【交换图像】行为更加复杂一

19、些，可以使用这个行为来创建翻转的按钮及其他图像效果（包括同时替换多个图像）。当鼠标光标经过图像时，图像变换为另一幅图像，当鼠标光标离开时恢复为原来的图像。5.2.3 常用行为5.2 使用行为 预览网页。5.2.3 常用行为5.2 使用行为 五、恢复交换图像。【恢复交换图像】行为就是将交换后的图像恢复为它们以前的源文件。在添加【交换图像】行为时，如果没有选择【鼠标滑开时恢复图像】选项，以后可以通过添加【恢复交换图像】行为达到这一目的。5.2.3 常用行为5.2 使用行为 六、打开浏览器窗口。使用【打开浏览器窗口】行为可在一个新的窗口中打开页面。设计者可以指定这个新窗口的属性，包括窗口尺寸、是否可

20、以调节大小、是否有菜单栏等。当在页面中单击图像时打开一个单独的窗口显示相关内容。5.2.3 常用行为5.2 使用行为 预览网页。5.2.3 常用行为5.2 使用行为 七、效果。效果几乎可以应用于HTML页面上的任何元素，使用该功能可以实现网页元素的发光、缩小、淡化、高光等效果。要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个ID名称。利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。当在页面中单击图像时图像渐渐隐去。5.2.3 常用行为5.2 使用行为 预览网页。5.2.3 常用行为5.2 使用行为 八、预先载入图像。使用【预先载入图像】行为可以对在页面打开之初不会立即显示的图像进行缓存。5.2.3 常用行为5.2 使用行为 九、检查表单。对于文本域（Text）和文本区域（Textarea），还可以通过使用【检查表单】行为来验证访问者所输入的信息是否符合要求。如果用户希望在填写完表单中所有项目进行提交表单时检查各个域。5.2.3 常用行为5.2 使用行为 网页预览。5.3.1 论文提交5.3 应用实例根据操作步骤制作表单网页。5.3.2 游瘦西湖5.3 应用实例根据操作步骤使用行为完善网页。