设计复杂网页

1、第5章 设计复杂网页 5.1应用Dreamweaver内部行为 5.2使用CSS样式 5.3创建表单 15.1 应用Dreamweaver内部行为 行为是指Web页面上的对象可以对用户的一些动作做出反应，并进而引发的页面效果。组成行为的基本要素有两个：事件(Event)和动作(Action)，也就是说事件和动作共同构成了行为。 本节讲述利用Dreamweaver提供的一些工具和面板，实现许多常见的动态交互式效果，如弹出窗口、显示和隐藏层、播放多媒体文件、下拉菜单效果，以及拖拽层的效果等复杂的动态网页。25.1.1添加及修改行为 1添加行为 添加行为的操作步骤如下：（1）在网页中选定一个对象，也

2、可以单击文档窗口左下角的标记，选中整个页面。（2）选择【窗口】【行为】命令，打开【行为】面板。单击面板上的按钮，弹出动作菜单。（3）选择希望执行的动作，例如打开一个浏览器窗口、交换图片、隐藏一个层，或是在状态栏显示一段文字。之后会弹出相应的参数设置对话框。设置参数后，单击【确定】按钮。3【行为】面板上各按钮的作用如下： 按钮：单击该按钮，只显示已经设置的事件。 按钮：单击该按钮，显示所有可设置的事件。 按钮：单击该按钮，打开下拉菜单，其中包含可以附加到当前所选对象的多个动作。当在其中选择某个动作时，将出现一个对话框，用户可以在其中指定该动作的参数。如果所有动作都以灰色显示，则表示没有该所选对象

3、可以生成的事件。 按钮：单击该按钮，删除选定的行为。 按钮：这两个按钮用来将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序。对于不能在列表中上下移动的动作将禁用箭头按钮。 4 Dreamweaver提供了许多常用的事件能够触发的动作。下面介绍【行为】面板动作弹出菜单能够和动作相链接的事件。onAbort：该事件在浏览者中断浏览器正在载入图像的操作时产生。onBlur：该事件在指定元素不再被浏览者交互时产生。onChange：该事件在浏览者改变网页中的某个值时产生。onClick：该事件在浏览者在指定的元素上单击时产生。onDbl

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

5、定元素上移开时产生。onMouseOver：该事件在鼠标第一次移动到指定元素时产生。onMouseUp：该事件在鼠标弹起时产生。6 onMove：该事件在窗体或框架移动时产生。onReadyStateChange：该事件在指定元素的状态改变时产生。onReset：该事件在表单内容被重新设置为默认值时产生。onResize：该事件在浏览者调整浏览器或框架大小时产生。onScroll:该事件在浏览者使用滚动条向上或向下滚动时产生。onSelect：该事件在浏览者选择文本框中的文本时产生。onSubmit：该事件在浏览者提交表格时产生。onUnload：该事件在浏览者离开网页时产生7 2.修改行为

6、打开【行为】面板后，用户可以根据需要对行为进行删除、改变动作参数以及调整动作的顺序等修改。 要删除一个行为，先将其选中，然后单击删除按钮即可。 要改变一个动作的参数，可双击此行为，在弹出的对话框中修改参数项，修改完毕后单击【确定】按钮即可。 要更改动作之间的顺序，可选定需要改变顺序的行为，然后单击面板上的向上或向下方向按钮即可。85.1.2 交换图像 交换图像动作是通过改变IMG(图像)标签的SRC属性，将该图像变换为另外一幅图像。该动作可以制作变换的按钮效果。 5.1.3弹出信息 弹出信息动作的功能是：当用户与附加了该动作的对象（例如图片、文本等）进行交互（例如单击、鼠标移过等）时，显示指定

7、信息。 95.1.4打开浏览器窗口 打开浏览器窗口动作的功能是在新的浏览器窗口打开指定的网页。用户可以自定义新窗口的大小、属性及名称等。5.1.5拖动层 拖动层行为之所以具有很大的吸引力，在于它可以让浏览者自己控制和改变一些页面元素的位置，例如常见的一些可以拖动的图片，以及一些拼图游戏等。使用【拖动层】可以指定层的移动范围、移动方向（水平或垂直）、层的目标位置、是否自动对齐或到达指定位置后是否触发另一个行为。 105.1.6控制Flash 控制shockwave或Flash动作的功能是控制shockwave或Flash影片的播放和停止等。 5.1.7播放声音 使用播放声音动作可以为网页制作背景

8、音乐。打开页面时，将自动循环播放音乐。5.1.8显示隐藏图层 通过应用【显示隐藏层】行为，交互式地改变层的显示和隐藏属性，可实现Web页面的一些特殊效果，例如翻转图效果、下拉菜单效果等。115.1.9检查表单 表单的完整性和正确性是非常重要的，通常情况下，对表单的验证是在服务器端进行的，不过在客户端利用Dreamweaver的【检查表单】行为也可以实现检查表单数据是否符合要求。 5.1.10改变属性 改变属性行为的功能是改变网页元素或对象的属性。例如层的背景颜色或表单的动作等都是对象的属性。对HTML和JavaScript非常属性的情况下则能较好应用此行为。125.2.使用CSS样式 CSS是

9、Cascading Style Sheets（层叠样式单）的简称，通常我们把它称作样式表，它是一种格式化网页的标准方式。CSS样式不仅能够控制一篇文档中的文本格式，而且通过采用外部链接的方式，还可以控制多篇文档的文本格式。当对CSS样式的定义进行修改时，文档中所有应用该样式的文本格式也会自动发生改变。 135.2.1创建CSS样式1CSS样式的构成样式规则组成如下：选择符属性：值单一选择符的复合样式声明应该用分号隔开，即：选择符属性1：值1；属性2：值214以下是一段定义了H1和H2元素的颜色和字体大小属性的代码： CSS例子 H1font-size: x-large; color: gree

10、n H2font-size: large; color: red 上述样式表用加大、绿色字体显示一级标题，用大的、红色字体显示二级标题。 15 在网页中应用样式的常用方法有3种：（1）使用HTML标记符的STYLE属性嵌套样式信息，适用于只在网页的局部使用CSS样式。例如：这段的样式是红色的New Century Schoolbook字体，如果字体可用的话。（2）通过在网页的HEAD标记中使用STYLE标记嵌套样式信息，适用于只对单个网页中使用CSS样式。（3）通过在网页的HEAD标记中使用LINK标记符链接外部样式表文件（*.css文件），适用于对多个网页使用CSS样式。例如：16 2创建C

11、SS样式 在Dreamweaver中创建CSS样式的操作步骤如下： （1）单击【窗口】【CSS样式】命令，打开【CSS样式】面板，在面板上单击上的【新建CSS样式】按钮，打开【新建CSS样式】对话框；或右键单击【CSS样式】面板，在弹出的快捷菜单中选择【新建】命令，打开【新建CSS样式】对话框，如图5.28所示。 （2）在【名称】文本框中输入新样式的名称。命名时必须注意，样式名称必须以英文句号开头。 （3）在【选择类型】的三个单选项中选定一个要定制的类型 。17 （4）单击【确定】按钮，弹出【保存样式表文件为】对话框，选择样式的保存位置。 （5）单击【保存】按钮，弹出定义CSS格式的对话框。在

12、对话框中进行各项的格式设置，设置完毕后单击【确定】按钮。 3CSS编辑器 在保存样式后，系统会自动弹出编辑CSS样式属性的对话框，通过该对话框，可以定义CSS样式的多种格式，如文本、背景等。对话框左边【分类】列表框中显示了设置CSS样式的不同属性 ，各属性的作用如下：18（1）类型 【类型】选项中主要用来设置字体属性，包括字体、大小、样式、文字颜色等。字体属性是每个页面中最基本的属性。需要注意的是，不仅单独的文字需要定义字体属性，几乎所有的页面元素都会涉及到字体定义，例如定义表格需要涉及表格中的字体、定义列表也要涉及到列表中的字体。（2）背景 背景的属性通常包括背景色和背景图片。在这个对话框里

13、可以精确设定背景图片的位置、是否重复显示、是否随页面内容滚动。 19（3）区块 区块属性主要是定义段落的一些属性值。需要注意的是，在Dreamweaver样式面板里很多属性前面有“*”，它表示此属性只能在浏览器中看到效果，在Dreamweaver的编辑器中无法预览。（4）方框 【方框】属性是样式表最为重要的一个属性类别，是实现页面元素精确定位的基础。 （5）边框【边框】项可以定义元素周围的边框，例如样式、宽度和颜色。 20（6）列表【列表】属性可以对分级列表内容进行更多的控制。 （7）定位【定位】属性是实现精确和自由定位的关键属性，它赋予设计者更大的控制页面元素的能力，而且还扩展到了三维的Z轴

14、方向，从而为动态页面的实现创造了基础。 （8）扩展【扩展】属性是一些增强性的样式属性，在低版本和不同类型的浏览器中支持不好。 215.2.2 应 用 CSS样式 1应用CSS样式 用户创建好的样式可以直接应用到文档中。有两种操作方法：第一种是选择【文本】【CSS】子菜单中列出的样式名称。第二种是：在要应用CSS样式的文档中单击鼠标右键，从弹出的快捷菜单中选择【文本】【CSS】子菜单中列出的样式名称。 2应用外部样式 用户可以选用或链接已经存在的样式表并应用到文档中。具体操作步骤如下：（1）单击【窗口】【CSS样式】命令，打开【CSS样式】面板。22（2）单击面板右上角的下拉按钮，打开下拉菜单，

15、单击【附加样式表】命令，打开【链接外部样式表】对话框。或单击面板上的【附加样式表】按钮，打开【链接外部样式表】对话框。 （3）单击【浏览】按钮，打开【选择样式表文件】对话框，选择要应用的一个样式表，单击【确定】按钮，返回【链接外部样式表】对话框，单击【确定】按钮。选择的样式表则会添加到【CSS样式】面板中。 （4）对所添加的样式表的应用，如上所述。235.2.2管理CSS样式 创建好的CSS样式，用户还可以对其进行再编辑，进行复制、删除等操作。 1修改CSS样式 具体操作步骤如下：（1）单击【窗口】【CSS样式】命令，打开【CSS样式】面板。（2）在要修改属性的CSS样式上单击鼠标右键，从弹出

16、的快捷菜单中选择【编辑】命令；或者在【CSS样式】面板上选择要修改属性的CSS，单击面板上的【编辑样式】按钮，打开定义CSS样式对话框。（3）在弹出的定义CSS样式的对话框中对各项的属性进行修改即可。 24 2复制CSS样式 复制CSS样式的操作方法是：在【CSS样式】面板上选择要复制的CSS样式，单击鼠标右键，从弹出的快捷菜单中选择【重制】命令，弹出【重制CSS样式】对话框。在对话框上重新定义一个名称，或使用原名称，单击【确定】按钮即可。 3删除CSS样式 如果创建的样式不再使用了，则可以将其删除。操作方法是：打开【CSS样式】面板，选择要删除的样式。单击面板右上角的下拉按钮，打开下拉菜单，

17、选择【删除】命令；或在样式表上单击鼠标右键，从弹出的快捷菜单中选择【删除】命令；或单击面板上的【删除CSS样式】按钮即可将选中的样式进行删除。 255.3创建表单 表单是网站管理者与浏览者之间沟通的桥梁，通过表单是可以收集来站点访问者的信息。例如，用户申请邮箱时填写个人资料的表格就是用表单来实现的。表单通常由两部分组成，一部分用于描述表单外观和组成的HTML代码，另一部分是用来处理用户在表单中提交的数据的服务器端应用程序或者客户端的处理脚本。使用Dreamweaver可以创建表单，可以给表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。 265.3.1创建及修改表单域 表单域是一个

18、红色虚线区域，各种表单元素都被存放在该区域中。表单域的作用是当访问者单击表单中的某个按钮时，浏览器将其中的各个对象的内容发送到网页上。所以表单元素必须放到表单域中，否则发送不出去。 1、创建表单域 创建表单域的步骤如下： （1）将光标放到要插入表单的位置。 （2）单击【插入】【表单】命令，即可在光标处插入一个表单域。或者单击【插入】面板的【表单】子面板中的【表单】按钮，也可在光标处插入一个表单域。272修改表单域属性 设置表单域的属性通过属性面板来完成。将光标放到表单域中，可对属性面板各项设置如下： 表单名称：用来设置表单的名称。 动作：指定处理表单信息的服务器端应用程序，单击文件夹图标，查找

19、需要的应用程序，或者直接输入应用程序路径。方法：设置表单的提交方式。提交方式有默认、GET和POST，默认值为POST。MIME类型：在弹出的菜单中，指定对提交给服务器进行处理的数据使用MIME编码类型。285.3.1创建及修改表单对象 Dreamweaver中的表单对象有文本字段、按钮、复选框、单选按钮、列表菜单等。各对象的功能如下所述：文本字段：接受任何类型的文本、字母或数字。输入的文本可以显示为单行、多行、黑点或星号(用于密码保护)。按钮：单击时执行提交或重置表单之类的任务。可以输入自定义的按钮标签，或使用Dreamweaver的预定义标签。复选框：在一组选项中选择多项。单选按钮：在一组选项中一次只能选择一项。29 列表菜单：提供一组选项，让用户从中选择一项或多项。 创建表单元素的方法有两种：一是通过【插入】【表单】中的命令；二是通过【插入】面板上的【表单】子面板上的按钮。 1创建文本字段 文本字段就是表单中放置文字的地方，例如姓名、地址等内容均填写在文本字段中。 创建表单后，将光标放到表单中，单击【插入】【表单】【文本字段】命令，或单击【插入】面板中【表单】子面板中的文本字段按钮，即可插入一个文本字段。 创建文本字段后，选定文本字段在属性面板设置其属性。 30 2创建按钮创建表单后，将光标放到表单中，单击【插入】【表单】【按钮】命令，或单击【插入】面板中【表