《网页设计与制作第9章使用行为》由会员分享，可在线阅读，更多相关《网页设计与制作第9章使用行为（56页珍藏版）》请在金锄头文库上搜索。
1、第第9章章 使用行为使用行为学习目标：学习目标：本章要求掌握行为的概念，行为的组成要素，如何在本章要求掌握行为的概念，行为的组成要素，如何在网页中附加行为，修改行为。熟练使用行为为网页增网页中附加行为，修改行为。熟练使用行为为网页增加交互性。加交互性。1第第9章章 使用行为使用行为v9.1 行为概述行为概述 9.1.1 【行为】面板 9.1.2 关于事件2第第9章章 使用行为使用行为v9.2 基本浏览器行为基本浏览器行为 弹出信息 打开浏览器窗口 设置导航栏图像 显示弹出式菜单 交换图像 播放声音 拖动层 显示与隐藏层 控制Shockwave或Flash检查表单 调用JavaScript转到U
2、RL检查插件 检查浏览器3行为的概念：行为的概念： 行为是行为是Dreamweaver MX 2004中自带的一段中自带的一段JavaScript代码，使用行为可以使用户与网页之代码，使用行为可以使用户与网页之间产生一种交互，以改变一个页面或引发一个任务。间产生一种交互，以改变一个页面或引发一个任务。 Dreamweaver MX 2004提供了丰富的行为，提供了丰富的行为，内置了内置了21种常见的行为，这些行为的设置可以为种常见的行为，这些行为的设置可以为网页对象添加一些动态效果和简单的交互功能，从网页对象添加一些动态效果和简单的交互功能，从而使那些不熟悉而使那些不熟悉JavaScript或
3、或VBScript的用户，的用户，也可以方便的设计出只有通过复杂的也可以方便的设计出只有通过复杂的JavaScript或或VBScript语言才能实现的功能。语言才能实现的功能。 当然你也可以自己编写行为。当然你也可以自己编写行为。9.1 行为概述行为概述49.1 行为概述行为概述行为三打的组成要素：行为三打的组成要素：对象、事件和动作对象、事件和动作 对象对象是产生行为的主体。网页中的很多元素都可以是产生行为的主体。网页中的很多元素都可以成为对象，例如：整个成为对象，例如：整个HTML文档、插入的一个图片、文档、插入的一个图片、一段文字、一个媒体文件等。对象也是基于成对出现一段文字、一个媒体
4、文件等。对象也是基于成对出现的标签中，在创建时首先选中对象的标签。的标签中，在创建时首先选中对象的标签。 事件事件是触发动态效果的条件。网页事件分为不同的是触发动态效果的条件。网页事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和网页相关，如网击、键盘某个键按下。有的事件还和网页相关，如网页下载完毕，页面切换等。一个事件也可以触发许多页下载完毕，页面切换等。一个事件也可以触发许多动作，你可以定义它们执行的顺序。对于同一个对象，动作，你可以定义它们执行的顺序。对于同一个对象，不同版本的浏览器支持的事件种类和多
5、少也是不一样不同版本的浏览器支持的事件种类和多少也是不一样的。的。5v动作动作是最终产生的动态效果。动态效果可能是是最终产生的动态效果。动态效果可能是图片的翻转、链接的改变、声音播放等。图片的翻转、链接的改变、声音播放等。v行为可以附加到整个文档，还可以附加到链接、行为可以附加到整个文档，还可以附加到链接、图象、表单元素或其他网页对象中的任何一种，图象、表单元素或其他网页对象中的任何一种，用户可以为每个事件指定多个动作。动作按照用户可以为每个事件指定多个动作。动作按照它们在行为面板的动作列表中列出的顺序发生。它们在行为面板的动作列表中列出的顺序发生。注意：不同的显示器支持的行为事件是不一样注意
6、：不同的显示器支持的行为事件是不一样的。的。9.1 行为概述行为概述6v9.1.2 关于事件关于事件v事件的出现类型取决于所选对象和浏览器。所事件的出现类型取决于所选对象和浏览器。所选对象的不同，所能显示的事件也有所不同；选对象的不同，所能显示的事件也有所不同；而不同的浏览器对事件的支持也不相同，可在而不同的浏览器对事件的支持也不相同，可在【添加行为】菜单的【显示事件】子菜单中指【添加行为】菜单的【显示事件】子菜单中指定浏览器，浏览器的版本越高，能支持的事件定浏览器，浏览器的版本越高，能支持的事件越多。越多。7 下面列举一些不同的浏览器能引发的事件，同时介下面列举一些不同的浏览器能引发的事件，
7、同时介绍各种事件的功能。绍各种事件的功能。onAbort：当浏览器正载入一幅图像，用户停止当浏览器正载入一幅图像，用户停止了浏览了浏览 器的运行时（例如，单击浏览器的【停止】按钮）器的运行时（例如，单击浏览器的【停止】按钮），引发该事件。，引发该事件。onAfterUpdate：当页面上被选中的数据元素完：当页面上被选中的数据元素完成了更新数据源后，引发该事件。成了更新数据源后，引发该事件。onBeforeUpdate：当页面上被选中的数据元素当页面上被选中的数据元素已经改变并且将要失去焦点时（因些就要开始更已经改变并且将要失去焦点时（因些就要开始更新数据源）时，引发该事件新数据源）时，引发该
8、事件9.1.2 关于事件关于事件8onBlur：这是和这是和onFocus相反的事件，当指定元素不再是相反的事件，当指定元素不再是用户与网页交互的焦点时，这个事件发生。例如，用户单击用户与网页交互的焦点时，这个事件发生。例如，用户单击了一个文本区域后，又单击文本区域外部的部分，就为这个了一个文本区域后，又单击文本区域外部的部分，就为这个文本区域引发一个文本区域引发一个onBlur事件。事件。onChange：当改变了页面上的一个值，如在菜单中选择了当改变了页面上的一个值，如在菜单中选择了一个项目，或者先改变了文本区域的值，然后单击页面以外一个项目，或者先改变了文本区域的值，然后单击页面以外的部
9、分时，会引发这个事件。的部分时，会引发这个事件。onClick：当访问者用鼠标单击特定事物时，引发当访问者用鼠标单击特定事物时，引发该事件。该事件。onDblClick：当访问者用鼠标双击特定物件时，引当访问者用鼠标双击特定物件时，引发该事件。发该事件。onError：当载入一个页面或者图像，浏览器出现当载入一个页面或者图像，浏览器出现错误时，引发该事件。错误时，引发该事件。9.1.2 关于事件关于事件9onFinish：当个字幕元素的内容完成一个循环时，引发当个字幕元素的内容完成一个循环时，引发该事件。该事件。onFocus：当指定的元素成为访问者交互的焦点时，引当指定的元素成为访问者交互的
10、焦点时，引发该事件。发该事件。onHelp：当访问者点击浏览器的帮助按键时，引发该事当访问者点击浏览器的帮助按键时，引发该事件。件。onKeyDown：当访问者按下任何键（未释放）时，引发当访问者按下任何键（未释放）时，引发该事件。该事件。onKeyPress：当访问者按下按任何键（己释放）时，引当访问者按下按任何键（己释放）时，引发该事件。这个事件就像【发该事件。这个事件就像【onKeydown】和【】和【onKeyUp】事件的组合。】事件的组合。9.1.2 关于事件关于事件10onKeyUp：当访问者按下一个键再释放它时，引发该事：当访问者按下一个键再释放它时，引发该事件。件。onLoad
11、：当网页或图像完成载入时，引发该事件。：当网页或图像完成载入时，引发该事件。onMouseDown：当访问者按下鼠标键的时候（要引发：当访问者按下鼠标键的时候（要引发该事件，访问者不必释放鼠标键），引发该事件。该事件，访问者不必释放鼠标键），引发该事件。onMouseMove：当光标指向一个特定元素并移动鼠标时：当光标指向一个特定元素并移动鼠标时产生（指光标停留在元素的边界以内）。产生（指光标停留在元素的边界以内）。onMouseOut：当光标移出特定元素（通常指链接）的：当光标移出特定元素（通常指链接）的边界时引发该事件。边界时引发该事件。v onMouseOver：当光标刚刚指点向特定元素
12、（通常指链：当光标刚刚指点向特定元素（通常指链接）时，引发该事件。接）时，引发该事件。 9.1.2 关于事件关于事件11onMouseUp：当鼠标按键被释放时引发事件。：当鼠标按键被释放时引发事件。onMove：当一个窗口或一个框架移动时引发事件。：当一个窗口或一个框架移动时引发事件。onReadyStateChange：当特定元素的状态改变时引：当特定元素的状态改变时引发这个事件。可能的元素状态包括未初始化、载入中和发这个事件。可能的元素状态包括未初始化、载入中和完成。完成。9.1.2 关于事件关于事件12on Reset：当重置表单初始值时引发事件。：当重置表单初始值时引发事件。onRes
13、ize：调整浏览器窗口大小或者框架大小时引发事件。：调整浏览器窗口大小或者框架大小时引发事件。onRowEnter：所选中数据源的当前记录指针改变所引发的事件。：所选中数据源的当前记录指针改变所引发的事件。onRowExit：所选中数据源的当前记录指针将要改变所引发的事件。：所选中数据源的当前记录指针将要改变所引发的事件。onScroll：上翻滚动条或下翻滚动条时引发的事件：上翻滚动条或下翻滚动条时引发的事件onSelect：当访问者在一个文本区域里选定文本时所引发的事件。：当访问者在一个文本区域里选定文本时所引发的事件。onStart：当字幕开始循环时引发事件。：当字幕开始循环时引发事件。o
14、nSubmit：当访问者提交表单时引发的事件。：当访问者提交表单时引发的事件。onUnload：当访问者离开页面时引发的事件。：当访问者离开页面时引发的事件。9.1.2 关于事件关于事件13第第9章章 使用行为使用行为v9.2 基本浏览器行为基本浏览器行为 弹出信息 打开浏览器窗口 设置导航栏图像 显示弹出式菜单 交换图像 播放声音 拖动层 显示与隐藏层 控制Shockwave或Flash检查表单 调用JavaScript转到URL检查插件 检查浏览器145.2.1 创建新的CSS样式v【标签（重新定义特定标签外观）】：该选项可以对某一具体标【标签（重新定义特定标签外观）】：该选项可以对某一具
15、体标签进行重新定义。可以直接输入一个签进行重新定义。可以直接输入一个HTML标签，也可以从弹出标签，也可以从弹出的下拉菜单选择。例如：当重新创建或修改的下拉菜单选择。例如：当重新创建或修改HR的的CSS样式时，样式时，文档中用文档中用HR标签的地方都会自动更新。在一个已链接好的标签的地方都会自动更新。在一个已链接好的CSS样式表里重定义标签应小心，因为这样做有可能会改变许多样式表里重定义标签应小心，因为这样做有可能会改变许多页面的布局。例如，如果对页面的布局。例如，如果对“TABLE”标签进行重新定义，就会影标签进行重新定义，就会影响到其他使用表格的页面布局。响到其他使用表格的页面布局。v【高
16、级（【高级（ID、上下文选择器等）】：可以定义特殊的标签组合、上下文选择器等）】：可以定义特殊的标签组合（如（如“td h2”表示只要在表格单元中出现表示只要在表格单元中出现“h2”标题就应用该样标题就应用该样式）以及包含特殊序列号（式）以及包含特殊序列号（ID）的标记属性（如）的标记属性（如“#myStyle”表表示所有属性之中有一对示所有属性之中有一对“ID=#myStyle”的标签都应用该样式）。的标签都应用该样式）。155.2.1 创建新的CSS样式v在【高级】选项中，有四种给定的组合在【高级】选项中，有四种给定的组合样式，分别是样式，分别是a:active（活动链接），（活动链接），
17、a:hover（当前链接），（当前链接），a:link（链接），（链接），a:visited（访问过的链接）。通过对这（访问过的链接）。通过对这几种样式的定义，可以制作出富有特色几种样式的定义，可以制作出富有特色的超级链接，例如，给链接去掉下划线，的超级链接，例如，给链接去掉下划线，对链接的各种状态设置不同颜色等。对链接的各种状态设置不同颜色等。165.2.2 链接外部样式表文件v如果已经定义了样式文件，则在【定义在】选项中，如果已经定义了样式文件，则在【定义在】选项中，可以选择下拉列表中已存在的样式文件，如图可以选择下拉列表中已存在的样式文件，如图5-10所示。这样操作表示将新的内容添加到该
18、样式文件所示。这样操作表示将新的内容添加到该样式文件中。以文件形式存在的样式表可以通过链接形式引中。以文件形式存在的样式表可以通过链接形式引用。例如，运用样式表文件，则在用。例如，运用样式表文件，则在标签中引用代码为：标签中引用代码为：v17 5.2.2 链接外部样式表文件v样式表是一个包含样式规则的文本文件，它样式表是一个包含样式规则的文本文件，它的扩展名为的扩展名为*.CSS。它可分为。它可分为2种类型。一种种类型。一种是用户自己创建的样式文件，称为内部样式是用户自己创建的样式文件，称为内部样式表；另一种是外部样式表文件，即把现成的表；另一种是外部样式表文件，即把现成的样式表文件链接到页面
19、，直接使用它进行格样式表文件链接到页面，直接使用它进行格式控制。编辑外部样式表将会影响到所有链式控制。编辑外部样式表将会影响到所有链接引用它的文件。我们先讲后一种情况。接引用它的文件。我们先讲后一种情况。185.2.2 链接外部样式表文件链接到一个外部样式表的操作方法如下：链接到一个外部样式表的操作方法如下：v选择【窗口】选择【窗口】/【CSS样式】命令，打开【样式】命令，打开【CSS样式样式】面板。】面板。v在【在【CSS样式】面板中单击右下角的【附加样式表】样式】面板中单击右下角的【附加样式表】按钮，打开【链接外部样式表】对话框。如图按钮，打开【链接外部样式表】对话框。如图5-2所示。所示
20、。v在【文件在【文件/URL】文本框中输入外部样式表的文件名，】文本框中输入外部样式表的文件名，或单击【浏览或单击【浏览】按钮，打开【选择样式表文件】对】按钮，打开【选择样式表文件】对话框，如图话框，如图5-3所示，在对话框中选择外部样式表文件。所示，在对话框中选择外部样式表文件。195.2.2 链接外部样式表文件v【添加为】的方式有两种：一种为【链接】【添加为】的方式有两种：一种为【链接】Link；一种是【导入】一种是【导入】Import。这两种方式的作用都是把。这两种方式的作用都是把外部样式引用到当前文档，但链接标记可提供更多外部样式引用到当前文档，但链接标记可提供更多的功能，而且支持的浏
21、览器更多。的功能，而且支持的浏览器更多。v单击【确定】按钮。这时在【单击【确定】按钮。这时在【CSS样式】面板中可样式】面板中可看到刚链接进来的外部样式文件。同时，该样式文看到刚链接进来的外部样式文件。同时，该样式文件的内容已自动运用到当前文档。件的内容已自动运用到当前文档。205.2.2 链接外部样式表文件v在在Dreamweaver MX 2004中，预先创建了一些现中，预先创建了一些现成的样式文件，我们可以把它链接在当前文档，直成的样式文件，我们可以把它链接在当前文档，直接使用，可以快速进行格式控制。具体操作如下：接使用，可以快速进行格式控制。具体操作如下：v选择【窗口】选择【窗口】/【
22、CSS样式】命令，打开【样式】命令，打开【CSS样样式】面板。式】面板。v在【在【CSS样式】面板中单击右下角的【附加样式表】按钮，打开样式】面板中单击右下角的【附加样式表】按钮，打开【链接外部样式表】对话框。【链接外部样式表】对话框。v单击对话框中的【范例样式表】，打开【范例样式表】对话框，单击对话框中的【范例样式表】，打开【范例样式表】对话框，如图如图5-4所示。所示。215.2.2 链接外部样式表文件v一共有二十三种预先设置好的样式，选择其中一种，例如：基本：Arial，该样式对body，td，th标签重新进行定义。v指定样式表的【保存位置】，Dreamweaver MX 2004会自动
23、把样式文件保存到网站的CSS目录下，若网站没有CSS子目录，Dreamweaver MX 2004会自动建立。v单击【确定】按钮。在【CSS样式】面板中出现了该样式表，同时，该样式表文件已自动应用到当前文档。225.1.3 应用类样式v直接通过【属性】面板以手工给文本设置格式，也会生成样式，该样式只对当前文档起作用。这种操作会自动在【属性】面板的【样式】文本框中生成新样式，名称分别为Style1，Style2等，切换到代码视图，在中可以看到样式文件的内容。v要想使用样式文件来控制段落或文本的格式，应先把所有手工设置的样式删除，这样做是为了避免产生冲突并导致意想不到的结果。v尽管可以不受限制地在
24、Dreamweaver中设置CSS2规范所定义的所有样式，但并不表示所有设置属性都会表现出来，有些属性浏览器还不支持，甚至相同的属性在和中表现是不同的。235.1.3 应用类样式v在新建CSS样式时，【标签】样式和【高级】样式定义好后，会直接格式化当前文档对应的标签。而类样式可以应用于文档的任何文本，所以类样式的应用和前两者有所不同。具体操作如下：v选定要应用CSS样式的文本。v在【属性】面板中单击【样式】下拉列表，其中列出了所有可用的样式，选中需要的样式即可。v标签样式和高级样式不会出现在【属性】面板的【样式】列表中，因为它们不能应用于普通对象。v对相同文本应用两个以上的样式，可能会产生冲突
25、，这时浏览器会根椐以下原则应用样式属性：v如果两个样式应用于相同文本，则浏览器显示两个样式的所有属性（冲突属性除外）。冲突属性是指那些无法统一的属性，例如：一个样式指定文本颜色为红色，另一个样式由指定文本颜色为绿色.245.1.3 应用类样式 如果应用于相同文本的属性产生冲突，一般遵循一下原则：1.就近原则；优先于HTML；255.1.4 编辑样式vCSS样式建立好后，可以进行修改。在Dreamweaver MX 2004中对样式的修改非常方便，有几种方法可以实现对样式表的修改。v方法一：打开【CSS样式】面板，选中一个样式文件，双击，则该样式文件以文本形式打开，可直接在文件中修改。v方法二：
26、打开【CSS样式】面板，选中一个已定义好的CSS标签，单击面板底部的编辑样式按钮，会弹出如图5-11所示对话框，在这里对样式重新进行设置。26v方法三：打开【CSS样式】面板，选中一个样式文件，单击面板底部的编辑样式按钮，会弹出如图5-12所示对话框，在这里可附加样式、新建样式、编辑样式、重命名、重制、删除样式。v方法四：选择【窗口】/【标签检查器】，打开【标签检查器】面板，在【CSS样式】面板中选中一个样式，则【标签检查器】面板变为【规则】面板，它有两个选项卡，一个是【显示类别视图】，一个是【显示列表视图】，如图5-13 a，5-13 b所示。在两种视图中都可直接修改。5.1.4 编辑样式2
27、75.2.1 创建新的CSS样式在在CSS中使用如下格式来创建样式单中使用如下格式来创建样式单: .选择符选择符属性属性1:属性值属性值1;属性属性2:属性值属性值2 选择符选择符: 可以是可以是HTML中的任意标签或样式名中的任意标签或样式名属性属性: 为用于控制元素各种特性为用于控制元素各种特性,如显示属性、字体属性如显示属性、字体属性和文本属性等。和文本属性等。28v.font vfont-family: 幼圆幼圆;vfont-size: 10pt;vfont-style: normal;vline-height: normal;vfont-weight: bolder;vfont-va
28、riant: normal;vtext-transform: none;vcolor: #006666;vletter-spacing: normal;vtext-align: center;vtext-indent: 2pt;vvertical-align: middle;vword-spacing: 30pt;vwhite-space: normal;v5.2.1 创建新的CSS样式295.2 CSS样式的属性设置样式的属性设置v前面介绍了的如何建立前面介绍了的如何建立CSS样式表、编辑样式表、样式表、编辑样式表、运用样式表等操作，现在我们来介绍运用样式表等操作，现在我们来介绍CSS样式表
29、的样式表的属性。属性。vDreamweaver MX 2004把样式表的属性分为把样式表的属性分为8类，类，在【新建在【新建CSS样式】对话框中单击【确定】按钮，样式】对话框中单击【确定】按钮，可以打开【可以打开【.unnamed1的的CSS样式定义】对话框，样式定义】对话框，如图如图5-14所示。在【分类】列表中共有所示。在【分类】列表中共有8 个选项：个选项：【类型】、【背景】、【区块】、【方框】、【边【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】，下面来一框】、【列表】、【定位】、【扩展】，下面来一 一介绍。一介绍。305.2.1 设置类型属性v【类型】属
30、性主要是对网页中的文本的字体、大小、颜色等【类型】属性主要是对网页中的文本的字体、大小、颜色等风格进行设置。风格进行设置。v【字体】：属性名为【字体】：属性名为“font-family”，从下拉列表中选择字，从下拉列表中选择字体，也可以选择【编辑字体列表】选项，自定义字体列表。体，也可以选择【编辑字体列表】选项，自定义字体列表。v【大小】：属性名【大小】：属性名“fontsize”，设置字体的字号，单位常，设置字体的字号，单位常用像素。用像素。v【粗细】：属性名【粗细】：属性名“font-weight”，用于设置字体的粗细效，用于设置字体的粗细效果。有【正常】（果。有【正常】（normal）、
31、【粗体】（）、【粗体】（bold）、【特粗）、【特粗】（】（bolder）、【细体】（）、【细体】（light）和具体粗细值等选项，【）和具体粗细值等选项，【正常】等于正常】等于400，【粗细】等于，【粗细】等于700。v【样式】：属性名【样式】：属性名“font-style”，用于设置字体的风格。有，用于设置字体的风格。有【正常】（【正常】（normal）、【斜休】（）、【斜休】（italic）、【偏斜体】）、【偏斜体】（oblique）3个选项。个选项。v【变量】：属性名【变量】：属性名“font-variant”，包括正常和小型大写字，包括正常和小型大写字母。母。315.2.1 设置类型
32、属性v【行高】：属性名【行高】：属性名“font-height”，文本所在行的行高。选择，文本所在行的行高。选择【正常】选项，将自动计算字体的行高；否则，可以输入一个【正常】选项，将自动计算字体的行高；否则，可以输入一个精确值并选择其计算单位。常用单位是像素。精确值并选择其计算单位。常用单位是像素。v【大小写】：属性名【大小写】：属性名“text-transform”，指定字母大小写规则。，指定字母大小写规则。有【首写字母大写】（有【首写字母大写】（capitalize）、【大写】（）、【大写】（uppercase）、）、【小写】（【小写】（lowercase）、【无】（）、【无】（none）
33、4个选项。个选项。v【修饰】：属性名【修饰】：属性名“text-decoration”，用于控制链接文本的，用于控制链接文本的显示形态，有【下划线】（显示形态，有【下划线】（underline）、【上划线】）、【上划线】（overline）、【删除线】（）、【删除线】（line-through）、【闪烁】）、【闪烁】（blink）、【无】（）、【无】（none）5种修饰方式。种修饰方式。v【颜色】：属性名【颜色】：属性名“color”，用于设置字体的颜色，用于设置字体的颜色 32v例如：定义了一个类样式例如：定义了一个类样式.unnamed1，内容为：，内容为：v .unnamed1vfont
34、-family: 方正舒体方正舒体;vfont-size: 36px;vfont-style: italic;vfont-weight: bold;vcolor: #FF0000;v5.2.1 设置类型属性335.2.2 设置背景属性v在在CSS样式定义对话框的【分类】列表中选样式定义对话框的【分类】列表中选择【背景】选项，如图择【背景】选项，如图5-15所示。该选项的所示。该选项的主要功能是在网页的元素后面添加的背景色主要功能是在网页的元素后面添加的背景色或背景图像。各属性的意义如下：或背景图像。各属性的意义如下：345.2.2 设置背景属性v【背景颜色】：属性名【背景颜色】：属性名“bac
35、kground-color”，用于设置元，用于设置元素的背景颜色。素的背景颜色。v【背景图像】：属性名【背景图像】：属性名“background-image”，给网页元素，给网页元素设置背景图像。设置背景图像。v【重复】：属性名【重复】：属性名“background-repeat”，用于控制背景图，用于控制背景图像的平铺方式。包括以下几个选项（属性值）：像的平铺方式。包括以下几个选项（属性值）：v【不重复】（【不重复】（no-repeat）：图像不平铺。）：图像不平铺。v【重复】（【重复】（repeat）:图像沿水平及垂直方向重复排列。图像沿水平及垂直方向重复排列。v【横向重复】（【横向重复】
36、（repeat-x）:图像沿水平方向平铺。图像沿水平方向平铺。v【纵向重复】（【纵向重复】（repeat-y）: 图像沿垂直方向平铺图像沿垂直方向平铺355.2.2 设置背景属性v【附件】：属性名（【附件】：属性名（background-attachment），选择【），选择【固定】选项（固定】选项（fixed），背景将不随滚动条的拖支而改变；），背景将不随滚动条的拖支而改变；选择【滚动】选项（选择【滚动】选项（scroll），背景将随滚动条而滚动。），背景将随滚动条而滚动。v【水平位置】：属性名【水平位置】：属性名“background-position”，用来确定，用来确定背景图像的水平排
37、列方式。包括【左对齐】（背景图像的水平排列方式。包括【左对齐】（left）、【右）、【右对齐】（对齐】（right）、【居中对齐】（）、【居中对齐】（center）、【值】）、【值】（value）等选项。）等选项。v【垂直位置】：属性名【垂直位置】：属性名“background-position”，用来确定，用来确定背景图像的垂直排列方式。包括【顶部】（背景图像的垂直排列方式。包括【顶部】（top）、【居中）、【居中】（】（center）、【底部】（）、【底部】（bottom）、【值】（）、【值】（value）等）等选项。选项。365.2.3 设置区块属性v在在CSS样式定义对话框的【分类】列
38、表中选样式定义对话框的【分类】列表中选择【区块】选项，如图择【区块】选项，如图5-16所示。区块是指所示。区块是指网页中的文本、图像、层等元素。该选项的网页中的文本、图像、层等元素。该选项的主要用来控制区块的间距、对齐方式和文字主要用来控制区块的间距、对齐方式和文字缩进等。各属性的意义如下：缩进等。各属性的意义如下：375.2.3 设置区块属性v单词间距：属性名单词间距：属性名“word-spacing”，控制单词之间的距离。，控制单词之间的距离。有【正常】（有【正常】（normal）和【值】（）和【值】（value）两种。）两种。v字母间距：属性名字母间距：属性名“letter-spacin
39、g”，控制字符之间的距，控制字符之间的距离。有【正常】（离。有【正常】（normal）和【值】（）和【值】（value）两种。）两种。v垂直对齐：属性名垂直对齐：属性名“vertical-align”，用于控制元素相对，用于控制元素相对其母体元素的垂直位置。共有其母体元素的垂直位置。共有5个选项。例如：选择【基线个选项。例如：选择【基线】（】（baseline），则元素的基准线同母体元素的基准线对齐；），则元素的基准线同母体元素的基准线对齐；选择【下标】（选择【下标】（sub），则元素以下标的形式显示；【上标），则元素以下标的形式显示；【上标】（】（super），元素将以上标的形式出现；【顶部
40、】），元素将以上标的形式出现；【顶部】（top），元素的顶部与母体元素的顶部对齐。），元素的顶部与母体元素的顶部对齐。v文本对齐：属性名文本对齐：属性名“text-align”，用于指定文本的水平对，用于指定文本的水平对齐方式。共有【左对齐】（齐方式。共有【左对齐】（left）、【居中对齐】）、【居中对齐】（center）、【右对齐】（）、【右对齐】（right）、【两端对齐】）、【两端对齐】（justify）4个选项。个选项。385.2.3 设置区块属性v文字缩进：属性名文字缩进：属性名“text-indent”，用于指定文本，用于指定文本块中首行的缩进距离。块中首行的缩进距离。v空格：属性
41、名空格：属性名“white-space”，指定空格的处理方，指定空格的处理方式。在式。在HTML文档中，从键盘输入的空格是无效的。文档中，从键盘输入的空格是无效的。要输入空格，只有插入空格的代码要输入空格，只有插入空格的代码“ ”，或，或者是用预定义格式标签者是用预定义格式标签，把空格保留。该属，把空格保留。该属性有性有3个选项：【正常】、【保留】、【不换行】。个选项：【正常】、【保留】、【不换行】。v显示：属性名显示：属性名“display”，用于设置区块的显示方，用于设置区块的显示方式。式。395.2.4 设置方框属性vCSS将网页中所有的块元素都看作是包含在将网页中所有的块元素
42、都看作是包含在一个方框中，对方框的设置包括方框的宽度、一个方框中，对方框的设置包括方框的宽度、高度，块元素与方框的距离，方框的边界等。高度，块元素与方框的距离，方框的边界等。在在CSS样式定义对话框的【分类】列表中选样式定义对话框的【分类】列表中选择【方框】选项，如图择【方框】选项，如图5-17所示。所示。405.2.4 设置方框属性v【宽】：属性名【宽】：属性名“width”，设定方框的宽度。，设定方框的宽度。v【高】：属性名【高】：属性名“height”， 设定方框的高度。设定方框的高度。v【浮动】：属性名【浮动】：属性名“float”，用于设置块元素的浮，用于设置块元素的浮动效果。动效果
43、。v【清除】：属性名【清除】：属性名“clear”，用于清除设置的浮动，用于清除设置的浮动效果。效果。v【填充】：属性名【填充】：属性名“margin”，用于设置块元素与，用于设置块元素与边框的距离。包含【上】、【右】、【下】、【左边框的距离。包含【上】、【右】、【下】、【左】4项。项。415.2.4 设置方框属性v【上】：（【上】：（margin-top）控制上边距的宽度）控制上边距的宽度.v【右】：（【右】：（margin-right）控制右边距的宽度）控制右边距的宽度.v【下】：（【下】：（margin-bottom）控制下边距的宽度）控制下边距的宽度.v【左】：（【左】：（margin
44、-left）控制左边距的宽度）控制左边距的宽度.v【边界】：属性名【边界】：属性名“padding”，用于控制块元素与其他元，用于控制块元素与其他元素之间的距离。也有素之间的距离。也有4个选项。个选项。v【上】：（【上】：（padding-top）控制上边界的宽度）控制上边界的宽度.v【右】：（【右】：（padding-right）控制右边界的宽度）控制右边界的宽度.v【下】：（【下】：（padding-bottom）控制下边界的宽度）控制下边界的宽度.v【左】：（【左】：（padding-left）控制左边界的宽度）控制左边界的宽度.425.2.5 设置边框属性v在在CSS样式定义对话框的【
45、分类】列表中选择【边框】选项，如图样式定义对话框的【分类】列表中选择【边框】选项，如图5-23所示。该选项主要用来定义边框的。所示。该选项主要用来定义边框的。v图图5-23 设置边框属性设置边框属性v【样式】：属性名【样式】：属性名“border-style”，用于设定边框线的样式。包括【上，用于设定边框线的样式。包括【上】、【右】、【下】、【左】、【右】、【下】、【左】4个选项。每个选项又有以下个选项。每个选项又有以下5 个子选项：个子选项：v【无】（【无】（none）：没有边框线；【点划线】（）：没有边框线；【点划线】（dotted）：边框线为短线；）：边框线为短线；【虚线】（【虚线】（d
46、ashed）：边框线为点线；【实线】（）：边框线为点线；【实线】（solid）：边框线为实）：边框线为实线；【双线】（线；【双线】（double）：边框线为双线；【槽状】（）：边框线为双线；【槽状】（groove）：边框）：边框线为槽状；【脊状】（线为槽状；【脊状】（ridge）：边框线为脊状。和槽状相反。【凹陷】）：边框线为脊状。和槽状相反。【凹陷】（inset）；【凸出】（）；【凸出】（outset）。）。v宽度：属性名宽度：属性名“border-width”，用于设定边框线的宽度，有【细】、【，用于设定边框线的宽度，有【细】、【中】、【粗】、【值】中】、【粗】、【值】4个选项。个选项。v
47、颜色：属性名颜色：属性名“border-color”，用于设置边框线的颜色。，用于设置边框线的颜色。v例如：我们把文件例如：我们把文件 “”的边框线设置为虚线，宽度为的边框线设置为虚线，宽度为1像素，蓝色。选定像素，蓝色。选定类样式类样式.aa，编辑，重新设置【边框】属性，如图，编辑，重新设置【边框】属性，如图5-24所示。查看效果。所示。查看效果。435.2.6 设置列表属性v在在CSS样式定义对话框的【分类】列表框中选择【列表】选样式定义对话框的【分类】列表框中选择【列表】选项，如图项，如图5-25所示。该选项是主要用来定义列表属性。所示。该选项是主要用来定义列表属性。v【类型】：属性名【
48、类型】：属性名“list-style-type”，指定项目符号或编，指定项目符号或编号的外观。号的外观。v【项目符号图像】：属性名【项目符号图像】：属性名“list-style-image”，用于指，用于指定自定义符号的图像，既可以直接输入文件名，也可以单击定自定义符号的图像，既可以直接输入文件名，也可以单击【浏览】按钮，浏览并选择合适的图像文件。【浏览】按钮，浏览并选择合适的图像文件。v【位置】：属性名【位置】：属性名“list-style-position”，用于决定列表，用于决定列表项换行时缩进还是边缘对齐。要缩进时，选择【外】选项；项换行时缩进还是边缘对齐。要缩进时，选择【外】选项；要
49、边缘对齐，则选择【内】选项。要边缘对齐，则选择【内】选项。445.2.7 设置定位属性v在在CSS样式定义对话框的【分类】列表框中样式定义对话框的【分类】列表框中选择【定位】选项，如图选择【定位】选项，如图5-26所示。该选项所示。该选项是主要用来精确定位层位置。是主要用来精确定位层位置。455.2.7 设置定位属性v【类型】：属性名【类型】：属性名“position”，用于选择层定位的方式，用于选择层定位的方式，有【绝对】（有【绝对】（absolute）、【相对】（）、【相对】（relative）、【静态）、【静态】（】（static）3个选项。个选项。v【显示】：属性名【显示】：属性名“v
50、isibility”，用于决定层的初始显示，用于决定层的初始显示状态。如果没有指定本属性，则在默认情况下，大多数的浏状态。如果没有指定本属性，则在默认情况下，大多数的浏览器将继承其上一级的值，其中包括以下览器将继承其上一级的值，其中包括以下3个选项。个选项。v【继承】：继承层的上一级的可见性属性。【继承】：继承层的上一级的可见性属性。v【可见】：显示层的内容而不考虑其上一级值。【可见】：显示层的内容而不考虑其上一级值。v【隐藏】：隐藏层的内容而不考虑其上一级值。【隐藏】：隐藏层的内容而不考虑其上一级值。v【Z轴】：属性名轴】：属性名“Z-index”，用于决定层的叠放顺序。，用于决定层的叠放顺
51、序。v【溢出】：用于指定当层的内容超出了层的大小时【溢出】：用于指定当层的内容超出了层的大小时Dreamweaver MX 2004的处理方法。的处理方法。465.2.7 设置定位属性v【可见】：扩大层的尺寸，使层中所有的内容都可【可见】：扩大层的尺寸，使层中所有的内容都可见。见。v【隐藏】：隐藏超出范围的内容。【隐藏】：隐藏超出范围的内容。v【滚动】：在层的右边增加滚动条。【滚动】：在层的右边增加滚动条。v【自动】：当层中的内容超过层边界时，自动显示【自动】：当层中的内容超过层边界时，自动显示滚动条。滚动条。v【定位】：当层确定为绝对定位后，该组属性决定【定位】：当层确定为绝对定位后，该组属
52、性决定元素在网页中的具体位置。包含有元素在网页中的具体位置。包含有4个子属性，分个子属性，分别是【上】、【右】、【下】、【左】。别是【上】、【右】、【下】、【左】。475.2.8 设置扩展属性v在在CSS样式定义对话框的【分类】列表框中选择【扩展】选样式定义对话框的【分类】列表框中选择【扩展】选项，如图项，如图5-27所示。该选项是主要用来产生一些特殊效果。所示。该选项是主要用来产生一些特殊效果。v【分页】：使用该属性，在打印【之前】或【之后】文本框【分页】：使用该属性，在打印【之前】或【之后】文本框中的内容时会自动进行分页。中的内容时会自动进行分页。v【视觉效果】：这里的两个属性可为网页元素
53、设计出特殊效【视觉效果】：这里的两个属性可为网页元素设计出特殊效果。包括两个属性选项。果。包括两个属性选项。v【光标】：属性名【光标】：属性名“cursor”，用于设置鼠标形状，指定当，用于设置鼠标形状，指定当光标停留在由样式所控制的对象之上时，改变光标的形状。光标停留在由样式所控制的对象之上时，改变光标的形状。共有共有15种选择。种选择。v【过滤器】：属性名【过滤器】：属性名“filter”，可以为网页中的元素添加，可以为网页中的元素添加各种过滤效果。共有各种过滤效果。共有16种属性，下面我们详细介绍。种属性，下面我们详细介绍。485.3 CSS样式中的过滤器样式中的过滤器v滤镜是滤镜是CS
54、S的最精彩的一部分，它将把我们带入绚丽多姿的的最精彩的一部分，它将把我们带入绚丽多姿的多媒体世界。有了滤镜属性，我们能实现一些图像处理软件多媒体世界。有了滤镜属性，我们能实现一些图像处理软件才能完成的功能，比如：渐变、模糊等效果，而且代码简洁，才能完成的功能，比如：渐变、模糊等效果，而且代码简洁，网页下载速度更快。网页下载速度更快。vCSS的滤镜属性的标识符是的滤镜属性的标识符是filter。为了对它有个整体的印象，。为了对它有个整体的印象，我们先来看一下它的书写格式：我们先来看一下它的书写格式：vfilter：filtername（parameters）vfilter是过滤镜属性名，要进行滤
55、镜操作，就必须先定义是过滤镜属性名，要进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，等等多种属性，parameters是表示各个滤镜属性的是表示各个滤镜属性的参数，这些参数决定了滤镜将以怎样的效果显示。参数，这些参数决定了滤镜将以怎样的效果显示。495.3 CSS样式中的过滤器样式中的过滤器v1Alpha属性属性v让对象呈现渐变半透明的效果。让对象呈现渐变半透明的效果。v它的表达格式为：它的表达格式为：vfilter：alpha（opacity=opcity，finishopacity=f
56、inishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）vOpacity代表透明度等级，可选值从代表透明度等级，可选值从0到到100，0代表完全透明，代表完全透明，100代表完全不透明。代表完全不透明。 Style参数指定了透明区域的形状特征。其中参数指定了透明区域的形状特征。其中0代表统一形状；代表统一形状；1代表线形；代表线形；2代表放射状；代表放射状；3代表长方形。代表长方形。 vFinishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值是一
57、个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从也是从0到到100。StartX和和StartY代表渐变透明效果的开始坐标，代表渐变透明效果的开始坐标，finishX和和finishY代表渐代表渐变透明效果的结束坐标。这四个参数都是可选项。变透明效果的结束坐标。这四个参数都是可选项。v例如：定义了类样式例如：定义了类样式.alpha，渐变从，渐变从0开始到开始到100结束，形状为结束，形状为3。valphavfilter: Alpha（Opacity=0，FinishOpacity=100，Style=3）;vv把类样式把类样式.alpha应用到图像文件中，可查看效果。应用
58、到图像文件中，可查看效果。v505.3 CSS样式中的过滤器样式中的过滤器v2Blur属性属性v让对象产生风吹模糊的效果。让对象产生风吹模糊的效果。vblur属性的表达式：属性的表达式：vfilter：blur（add=add，direction，strength=strength） vAdd参数有两个参数值：参数有两个参数值：true和和false。意思是指定图片是否被改变成模糊效果。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂度代表垂直向上，每直向上
59、，每45度一个单位，默认值是向左的度一个单位，默认值是向左的270度。角度方向的对应关系见下表：度。角度方向的对应关系见下表：v角度方向角度方向0TOP 垂直向上垂直向上45Top right 垂直向右垂直向右55Right 向右向右135Bottom right 向下偏右向下偏右180Bottom 向下向下225Bottom left 向下偏左向下偏左270Left 向左向左315Top Left 向上偏左表向上偏左表5-1 Direction参数的取值参数的取值vStrength 指定模糊图像的半径大小，单位像素，默认值是指定模糊图像的半径大小，单位像素，默认值是5像素。只能取值自然数。像
60、素。只能取值自然数。v例：建立类样式例：建立类样式.blur，Blur属性的属性的Direction为为180，Strength为为20。v.blur vfont-family: 幼圆幼圆;vfont-size: 36px;515FlipH和FlipV属性v可使网页对象产生水平和垂直翻转的效果，这两处属性没有参数设置，直接使用就可以。vGray属性：把一张彩色图片变成灰度图。它的表达式很简单： 529Shadow属性v使网页对象产生阴影效果，和Dropshadow属性相似。Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。DropShadow没有渐
61、近感，Shadow有渐近的阴影感，感觉更真实一些。它的表达式是这样的：vFilter：Shadow（Color=color，Direction=direction） 539Shadow属性vShadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。和Blur属性中方向Direction参数设置相同。v例如：重新定义层标签样式：vdiv vfont-family: 方正舒体;vfont-size: 36px;vfont-weight: bold;vcolor: #FF5500;vfilter: Shadow（Color=#ffcc00， Directi
62、on=180）;v545.3 CSS样式中的过滤器样式中的过滤器动态CSS样式过滤器：一、淡入淡出效果：blendtrans(duration=时间)Style=“filter:blendtrans (duration=2)”要结合在script中使用：v();v=image/1.JPG ;()55动态CSS样式过滤器：二、过渡效果：Revealtrans(duration=过渡时间 transition=“过渡效果”)Style=“filter:Revealtrans(duration=2， transition=“23”)”要结合在script中使用：vv();v=20074141113060.jpg;v()5.3 CSS样式中的过滤器样式中的过滤器56
