设计复杂网页ppt课件

1、第第5章章 设计复杂网页设计复杂网页 5.1运用Dreamweaver内部行为 5.2运用CSS款式 5.3创建表单 5.1 运用运用Dreamweaver内部行为内部行为 行为是指行为是指Web页面上的对象可以对用户的一页面上的对象可以对用户的一些动作做出反响，并进而引发的页面效果。组些动作做出反响，并进而引发的页面效果。组成行为的根本要素有两个：事件成行为的根本要素有两个：事件(Event)和动作和动作(Action)，也就是说事件和动作共同构成了行，也就是说事件和动作共同构成了行为。为。 本节讲述利用本节讲述利用Dreamweaver提供的一些工具提供的一些工具和面板，实现许多常见的动态

2、交互式效果，如和面板，实现许多常见的动态交互式效果，如弹出窗口、显示和隐藏层、播放多媒体文件、弹出窗口、显示和隐藏层、播放多媒体文件、下拉菜单效果，以及拖拽层的效果等复杂的动下拉菜单效果，以及拖拽层的效果等复杂的动态网页。态网页。5.1.1添加及修正行为添加及修正行为 1添加行为添加行为 添加行为的操作步骤如下：添加行为的操作步骤如下：1在网页中选定一个对象，也可以单击文档窗在网页中选定一个对象，也可以单击文档窗口左下角的口左下角的标志，选中整个页面。标志，选中整个页面。2选择【窗口】选择【窗口】【行为】命令，翻开【行为】【行为】命令，翻开【行为】面板。单击面板上的按钮，弹出动作菜单。面板。单

3、击面板上的按钮，弹出动作菜单。3选择希望执行的动作，例如翻开一个阅读器选择希望执行的动作，例如翻开一个阅读器窗口、交换图片、隐藏一个层，或是在形状栏显示窗口、交换图片、隐藏一个层，或是在形状栏显示一段文字。之后会弹出相应的参数设置对话框。设一段文字。之后会弹出相应的参数设置对话框。设置参数后，单击【确定】按钮。置参数后，单击【确定】按钮。【行为】面板上各按钮的作用如下： 按钮：单击该按钮，只显示曾经设置的事件。 按钮：单击该按钮，显示一切可设置的事件。 按钮：单击该按钮，翻开下拉菜单，其中包含可以附加到当前所选对象的多个动作。当在其中选择某个动作时，将出现一个对话框，用户可以在其中指定该动作的

4、参数。假设一切动作都以灰色显示，那么表示没有该所选对象可以生成的事件。 按钮：单击该按钮，删除选定的行为。 按钮：这两个按钮用来将特定事件的所选动作在行为列表中向上或向下挪动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序。对于不能在列表中上下挪动的动作将禁用箭头按钮。 Dreamweaver提供了许多常用的事件可以触发的动作。下面引见【行为】面板动作弹出菜单可以和动作相链接的事件。onAbort：该事件在阅读者中断阅读器正在载入图像的操作时产生。onBlur：该事件在指定元素不再被阅读者交互时产生。onChange：该事件在阅读者改动网页中的某个值时产生。onClick：

5、该事件在阅读者在指定的元素上单击时产生。onDblClick：该事件在阅读者在指定的元素上双击时产生。onError：该事件在阅读器在网页或图像载入产生错位时产生。 onFocus：该事件在指定元素被阅读者交互时产生。onKeyDown：该事件在按下恣意键的同时产生。onKeyPress：该事件在按下和松开恣意键时产生。此事件相当于把onKeyDown和onKeyUp这两个事件集合在一同 onKeyUp：该事件在按下的键松开时产生。onLoad：该事件在一幅图像或网页载入完成时产生。onMouseDown：该事件在阅读者按下鼠标时产生。onMouseMove：该事件在阅读者将鼠标在指定元素上挪

6、动时产生。onMouseOut：该事件在鼠标从指定元素上移开时产生。onMouseOver：该事件在鼠标第一次挪动到指定元素时产生。onMouseUp：该事件在鼠标弹起时产生。 onMove：该事件在窗体或框架挪动时产生。onReadyStateChange：该事件在指定元素的形状改动时产生。onReset：该事件在表单内容被重新设置为默许值时产生。onResize：该事件在阅读者调整阅读器或框架大小时产生。onScroll:该事件在阅读者运用滚动条向上或向下滚动时产生。onSelect：该事件在阅读者选择文本框中的文本时产生。onSubmit：该事件在阅读者提交表格时产生。onUnload：

7、该事件在阅读者分开网页时产生 2. 2.修正行为修正行为 翻开【行为】面板后，用户可以根据需求对行为进展删翻开【行为】面板后，用户可以根据需求对行为进展删除、改动动作参数以及调整动作的顺序等修正。除、改动动作参数以及调整动作的顺序等修正。 要删除一个行为，先将其选中，然后单击删除按钮即可。要删除一个行为，先将其选中，然后单击删除按钮即可。 要改动一个动作的参数，可双击此行为，在弹出的对话要改动一个动作的参数，可双击此行为，在弹出的对话框中修正参数项，修正终了后单击【确定】按钮即可。框中修正参数项，修正终了后单击【确定】按钮即可。 要更改动作之间的顺序，可选定需求改动顺序的行为，要更改动作之间的

8、顺序，可选定需求改动顺序的行为，然后单击面板上的向上或向下方向按钮即可。然后单击面板上的向上或向下方向按钮即可。5.1.2 交换图像交换图像 交换图像动作是经过改动交换图像动作是经过改动IMG(图像图像)标签的标签的SRC属属性，将该图像变换为另外一幅图像。该动作可以制性，将该图像变换为另外一幅图像。该动作可以制造变换的按钮效果。造变换的按钮效果。 5.1.3弹出信息弹出信息 弹出信息动作的功能是：当用户与附加了该动作的弹出信息动作的功能是：当用户与附加了该动作的对象例如图片、文本等进展交互例如单击、对象例如图片、文本等进展交互例如单击、鼠标移过等时，显示指定信息。鼠标移过等时，显示指定信息。

9、 5.1.4翻开阅读器窗口翻开阅读器窗口 翻开阅读器窗口动作的功能是在新的阅读翻开阅读器窗口动作的功能是在新的阅读器窗口翻开指定的网页。用户可以自定义新器窗口翻开指定的网页。用户可以自定义新窗口的大小、属性及称号等。窗口的大小、属性及称号等。5.1.5拖动层拖动层 拖动层行为之所以具有很大的吸引力，在拖动层行为之所以具有很大的吸引力，在于它可以让阅读者本人控制和改动一些页面于它可以让阅读者本人控制和改动一些页面元素的位置，例如常见的一些可以拖动的图元素的位置，例如常见的一些可以拖动的图片，以及一些拼图游戏等。运用【拖动层】片，以及一些拼图游戏等。运用【拖动层】可以指定层的挪动范围、挪动方向程度

10、或可以指定层的挪动范围、挪动方向程度或垂直、层的目的位置、能否自动对齐或到垂直、层的目的位置、能否自动对齐或到达指定位置后能否触发另一个行为。达指定位置后能否触发另一个行为。 5.1.6控制控制Flash 控制控制shockwave或或Flash动作的功能是控制动作的功能是控制shockwave或或Flash影片的播放和停顿等。影片的播放和停顿等。 5.1.7播放声音播放声音 运用播放声音动作可以为网页制造背景音乐。翻运用播放声音动作可以为网页制造背景音乐。翻开页面时，将自动循环播放音乐。开页面时，将自动循环播放音乐。5.1.8显示隐藏图层显示隐藏图层 经过运用【显示隐藏层】行为，交互式地改动

11、经过运用【显示隐藏层】行为，交互式地改动层的显示和隐藏属性，可实现层的显示和隐藏属性，可实现Web页面的一些特页面的一些特殊效果，例如翻转图效果、下拉菜单效果等。殊效果，例如翻转图效果、下拉菜单效果等。5.1.9检查表单检查表单 表单的完好性和正确性是非常重要的，通常情表单的完好性和正确性是非常重要的，通常情况下，对表单的验证是在效力器端进展的，不过况下，对表单的验证是在效力器端进展的，不过在客户端利用在客户端利用Dreamweaver的【检查表单】行的【检查表单】行为也可以实现检查表单数据能否符合要求。为也可以实现检查表单数据能否符合要求。 5.1.10改动属性改动属性 改动属性行为的功能是

12、改动网页元素或对象的改动属性行为的功能是改动网页元素或对象的属性。例如层的背景颜色或表单的动作等都是对属性。例如层的背景颜色或表单的动作等都是对象的属性。对象的属性。对HTML和和JavaScript非常属性的情非常属性的情况下那么能较好运用此行为。况下那么能较好运用此行为。5.2.运用运用CSS款式款式 CSS是是Cascading Style Sheets层叠款式层叠款式单的简称，通常我们把它称作款式表，单的简称，通常我们把它称作款式表，它是一种格式化网页的规范方式。它是一种格式化网页的规范方式。CSS款式款式不仅可以控制一篇文档中的文本格式，而不仅可以控制一篇文档中的文本格式，而且经过采

13、用外部链接的方式，还可以控制且经过采用外部链接的方式，还可以控制多篇文档的文本格式。当对多篇文档的文本格式。当对CSS款式的定义款式的定义进展修正时，文档中一切运用该款式的文进展修正时，文档中一切运用该款式的文本格式也会自动发生改动。本格式也会自动发生改动。 5.2.1创建创建CSS款式款式1CSS款式的构成款式的构成款式规那么组成如下：款式规那么组成如下：选择符属性：值选择符属性：值单一选择符的复合款式声明应该用分号隔开，即：单一选择符的复合款式声明应该用分号隔开，即：选择符属性选择符属性1：值：值1；属性；属性2：值：值2以下是一段定义了H1和H2元素的颜色和字体大小属性的代码： CSS例

14、子 H1font-size: x-large; color: green H2font-size: large; color: red 上述款式表用加大、绿色字体显示一级标题，用大的、红色字体显示二级标题。 在网页中运用款式的常用方法有3种：1运用HTML标志符的STYLE属性嵌套款式信息，适用于只在网页的部分运用CSS款式。例如：这段的款式是红色的New Century Schoolbook字体，假设字体可用的话。2经过在网页的HEAD标志中运用STYLE标志嵌套款式信息，适用于只对单个网页中运用CSS款式。3经过在网页的HEAD标志中运用LINK标志符链接外部款式表文件*.css文件，适用

15、于对多个网页运用CSS款式。例如： 2 2创建创建CSSCSS款式款式 在在DreamweaverDreamweaver中创建中创建CSSCSS款式的操作步骤如下：款式的操作步骤如下： 1 1单击【窗口】单击【窗口】【CSSCSS款式】命令，翻开【款式】命令，翻开【CSSCSS款式】款式】面板，在面板上单击上的【新建面板，在面板上单击上的【新建CSSCSS款式】按钮，翻开【新款式】按钮，翻开【新建建CSSCSS款式】对话框；或右键单击【款式】对话框；或右键单击【CSSCSS款式】面板，在弹出款式】面板，在弹出的快捷菜单中选择【新建】命令，翻开【新建的快捷菜单中选择【新建】命令，翻开【新建CSS

16、CSS款式】对款式】对话框，如图话框，如图5.285.28所示。所示。 2 2在【称号】文本框中输入新款式的称号。命名时必需在【称号】文本框中输入新款式的称号。命名时必需留意，款式称号必需以英文句号开头。留意，款式称号必需以英文句号开头。 3 3在【选择类型】的三个单项选择项中选定一个要定制在【选择类型】的三个单项选择项中选定一个要定制的类型的类型 。 4单击【确定】按钮，弹出【保管款式表文件为】对话框，选择款式的保管位置。 5单击【保管】按钮，弹出定义CSS格式的对话框。在对话框中进展各项的格式设置，设置终了后单击【确定】按钮。 3CSS编辑器 在保管款式后，系统会自动弹出编辑CSS款式属性

17、的对话框，经过该对话框，可以定义CSS款式的多种格式，如文本、背景等。对话框左边【分类】列表框中显示了设置CSS款式的不同属性 ，各属性的作用如下：1类型 【类型】选项中主要用来设置字体属性，包括字体、大小、款式、文字颜色等。字体属性是每个页面中最根本的属性。需求留意的是，不仅单独的文字需求定义字体属性，几乎一切的页面元素都会涉及到字体定义，例如定义表格需求涉及表格中的字体、定义列表也要涉及到列表中的字体。2背景 背景的属性通常包括背风光和背景图片。在这个对话框里可以准确设定背景图片的位置、能否反复显示、能否随页面内容滚动。 3区块 区块属性主要是定义段落的一些属性值。需求留意的是，在Drea

18、mweaver款式面板里很多属性前面有“*，它表示此属性只能在阅读器中看到效果，在Dreamweaver的编辑器中无法预览。4方框 【方框】属性是款式表最为重要的一个属性类别，是实现页面元素准确定位的根底。 5边框【边框】项可以定义元素周围的边框，例如款式、宽度和颜色。 6列表【列表】属性可以对分级列表内容进展更多的控制。 7定位【定位】属性是实现准确和自在定位的关键属性，它赋予设计者更大的控制页面元素的才干，而且还扩展到了三维的Z轴方向，从而为动态页面的实现发明了根底。 8扩展【扩展】属性是一些加强性的款式属性，在低版本和不同类型的阅读器中支持不好。 5.2.2 应应 用用 CSS款式款式

19、1运用运用CSS款式款式 用户创建好的款式可以直接运用到文档中。有两种用户创建好的款式可以直接运用到文档中。有两种操作方法：第一种是选择【文本】操作方法：第一种是选择【文本】【CSS】子菜单】子菜单中列出的款式称号。第二种是：在要运用中列出的款式称号。第二种是：在要运用CSS款式的款式的文档中单击鼠标右键，从弹出的快捷菜单中选择【文文档中单击鼠标右键，从弹出的快捷菜单中选择【文本】本】【CSS】子菜单中列出的款式称号。】子菜单中列出的款式称号。 2运用外部款式运用外部款式 用户可以选用或链接曾经存在的款式表并运用到文用户可以选用或链接曾经存在的款式表并运用到文档中。详细操作步骤如下：档中。详细

20、操作步骤如下：1单击【窗口】单击【窗口】【CSS款式】命令，翻开款式】命令，翻开【CSS款式】面板。款式】面板。2单击面板右上角的下拉按钮，翻开下拉菜单，单击【附加款式表】命令，翻开【链接外部款式表】对话框。或单击面板上的【附加款式表】按钮，翻开【链接外部款式表】对话框。 3单击【阅读】按钮，翻开【选择款式表文件】对话框，选择要运用的一个款式表，单击【确定】按钮，前往【链接外部款式表】对话框，单击【确定】按钮。选择的款式表那么会添加到【CSS款式】面板中。 4对所添加的款式表的运用，如上所述。5.2.2管理管理CSS款式款式 创建好的创建好的CSS款式，用户还可以对其进展再编辑，款式，用户还可

21、以对其进展再编辑，进展复制、删除等操作。进展复制、删除等操作。 1修正修正CSS款式款式 详细操作步骤如下：详细操作步骤如下：1单击【窗口】单击【窗口】【CSS款式】命令，翻开款式】命令，翻开【CSS款式】面板。款式】面板。2在要修正属性的在要修正属性的CSS款式上单击鼠标右键，从款式上单击鼠标右键，从弹出的快捷菜单中选择【编辑】命令；或者在【弹出的快捷菜单中选择【编辑】命令；或者在【CSS款式】面板上选择要修正属性的款式】面板上选择要修正属性的CSS，单击面板上的，单击面板上的【编辑款式】按钮，翻开定义【编辑款式】按钮，翻开定义CSS款式对话框。款式对话框。3在弹出的定义在弹出的定义CSS款

22、式的对话框中对各项的属款式的对话框中对各项的属性进展修正即可。性进展修正即可。 2 2复制复制CSSCSS款式款式 复制复制CSSCSS款式的操作方法是：在【款式的操作方法是：在【CSSCSS款式】面板上选择要款式】面板上选择要复制的复制的CSSCSS款式，单击鼠标右键，从弹出的快捷菜单中选择款式，单击鼠标右键，从弹出的快捷菜单中选择【重制】命令，弹出【重制【重制】命令，弹出【重制CSSCSS款式】对话框。在对话框上重款式】对话框。在对话框上重新定义一个称号，或运用原称号，单击【确定】按钮即可。新定义一个称号，或运用原称号，单击【确定】按钮即可。 3 3删除删除CSSCSS款式款式 假设创建的

23、款式不再运用了，那么可以将其删除。操作方假设创建的款式不再运用了，那么可以将其删除。操作方法是：翻开【法是：翻开【CSSCSS款式】面板，选择要删除的款式。单击面板款式】面板，选择要删除的款式。单击面板右上角的下拉按钮，翻开下拉菜单，选择【删除】命令；或右上角的下拉按钮，翻开下拉菜单，选择【删除】命令；或在款式表上单击鼠标右键，从弹出的快捷菜单中选择【删除】在款式表上单击鼠标右键，从弹出的快捷菜单中选择【删除】命令；或单击面板上的【删除命令；或单击面板上的【删除CSSCSS款式】按钮即可将选中的款款式】按钮即可将选中的款式进展删除。式进展删除。 5.3创建表单创建表单 表单是网站管理者与阅读者

24、之间沟通的桥表单是网站管理者与阅读者之间沟通的桥梁，经过表单是可以搜集来站点访问者的信梁，经过表单是可以搜集来站点访问者的信息。例如，用户恳求邮箱时填写个人资料的息。例如，用户恳求邮箱时填写个人资料的表格就是用表单来实现的。表单通常由两部表格就是用表单来实现的。表单通常由两部分组成，一部分用于描画表单外观和组成的分组成，一部分用于描画表单外观和组成的HTML代码，另一部分是用来处置用户在表代码，另一部分是用来处置用户在表单中提交的数据的效力器端运用程序或者客单中提交的数据的效力器端运用程序或者客户端的处置脚本。运用户端的处置脚本。运用Dreamweaver可以创可以创建表单，可以给表单中添加对

25、象，还可以经建表单，可以给表单中添加对象，还可以经过运用行为来验证用户输入信息的正确性。过运用行为来验证用户输入信息的正确性。 5.3.1创建及修正表单域创建及修正表单域 表单域是一个红色虚线区域，各种表单元素都被表单域是一个红色虚线区域，各种表单元素都被存放在该区域中。表单域的作用是当访问者单击表存放在该区域中。表单域的作用是当访问者单击表单中的某个按钮时，阅读器将其中的各个对象的内单中的某个按钮时，阅读器将其中的各个对象的内容发送到网页上。所以表单元素必需放到表单域中，容发送到网页上。所以表单元素必需放到表单域中，否那么发送不出去。否那么发送不出去。 1、创建表单域、创建表单域 创建表单域

26、的步骤如下：创建表单域的步骤如下： 1将光标放到要插入表单的位置。将光标放到要插入表单的位置。 2单击【插入】单击【插入】【表单】命令，即可在光标【表单】命令，即可在光标处插入一个表单域。或者单击【插入】面板的【表处插入一个表单域。或者单击【插入】面板的【表单】子面板中的【表单】按钮，也可在光标处插入单】子面板中的【表单】按钮，也可在光标处插入一个表单域。一个表单域。2 2修正表单域属性修正表单域属性 设置表单域的属性经过属性面板来完成。将光标放到表设置表单域的属性经过属性面板来完成。将光标放到表单域中，可对属性面板各项设置如下：单域中，可对属性面板各项设置如下： 表单称号：用来设置表单的称号

27、。表单称号：用来设置表单的称号。 动作：指定处置表单信息的效力器端运用程序，单击文件动作：指定处置表单信息的效力器端运用程序，单击文件夹图标，查找需求的运用程序，或者直接输入运用程序途径。夹图标，查找需求的运用程序，或者直接输入运用程序途径。方法：设置表单的提交方式。提交方式有默许、方法：设置表单的提交方式。提交方式有默许、GETGET和和POSTPOST，默许值为默许值为POSTPOST。MIMEMIME类型：在弹出的菜单中，指定对提交给效力器进展处置类型：在弹出的菜单中，指定对提交给效力器进展处置的数据运用的数据运用MIMEMIME编码类型。编码类型。5.3.1创建及修正表单对象创建及修正

28、表单对象 Dreamweaver中的表单对象有文本字段、按钮、中的表单对象有文本字段、按钮、复选框、单项选择按钮、列表菜单等。各对象的复选框、单项选择按钮、列表菜单等。各对象的功能如下所述：功能如下所述：文本字段：接受任何类型的文本、字母或数字。输文本字段：接受任何类型的文本、字母或数字。输入的文本可以显示为单行、多行、黑点或星号入的文本可以显示为单行、多行、黑点或星号(用于用于密码维护密码维护)。按钮：单击时执行提交或重置表单之类的义务。可按钮：单击时执行提交或重置表单之类的义务。可以输入自定义的按钮标签，或运用以输入自定义的按钮标签，或运用Dreamweaver的预定义标签。的预定义标签。

29、复选框：在一组选项中选择多项。复选框：在一组选项中选择多项。单项选择按钮：在一组选项中一次只能选择一项。单项选择按钮：在一组选项中一次只能选择一项。 列表菜单：提供一组选项，让用户从中选择一项或多项。 创建表单元素的方法有两种：一是经过【插入】【表单】中的命令；二是经过【插入】面板上的【表单】子面板上的按钮。 1创建文本字段 文本字段就是表单中放置文字的地方，例如姓名、地址等内容均填写在文本字段中。 创建表单后，将光标放到表单中，单击【插入】【表单】【文本字段】命令，或单击【插入】面板中【表单】子面板中的文本字段按钮，即可插入一个文本字段。 创建文本字段后，选定文本字段在属性面板设置其属性。

30、2 2创建按钮创建按钮创建表单后，将光标放到表单中，单击【插入】创建表单后，将光标放到表单中，单击【插入】【表单】【表单】【按钮】命令，或单击【插入】面板中【表单】子面板中的【按钮】命令，或单击【插入】面板中【表单】子面板中的【按钮】按钮，即可插入一个按钮。创建按钮后，选定按钮运【按钮】按钮，即可插入一个按钮。创建按钮后，选定按钮运用属性面板设置其属性。用属性面板设置其属性。 3 3创建复选框创建复选框创建表单后，将光标放到表单中，单击【插入】创建表单后，将光标放到表单中，单击【插入】【表单】【表单】【复选框】命令，或单击【插入】面板中【表单】子面板中的【复选框】命令，或单击【插入】面板中【表单】子面板中的【复选框】按钮，即可插入一个复选框。【复选框】按钮，即可插入一个复选框。创建复选框后，选定复选框运用属性面板设置其属性。创建复选框后，选定复选框运用属性面板设置其属性。 4 4创建单项选择按钮创建单项选择按钮 【单项选择按