网页设计与制作使用行为课件.pptx

1、1第第9章章 使用行为使用行为v9.1 行为概述行为概述 9.1.1【行为】面板 9.1.2 关于事件2第第9章章 使用行为使用行为v9.2 基本浏览器行为基本浏览器行为 9.2.1弹出信息 9.2.2打开浏览器窗口 9.2.3设置导航栏图像 9.2.4显示弹出式菜单 9.2.5交换图像 9.2.6播放声音 9.2.7拖动层 9.2.8显示与隐藏层 9.2.9控制Shockwave或Flash 9.2.10检查表单 9.2.11调用JavaScript 9.2.12转到URL 9.2.13检查插件 9.2.14检查浏览器3行为的概念：行为的概念：行为是行为是Dreamweaver MX 200

2、4中自带的一段中自带的一段JavaScript代码，使用行为可以使用户与网页之代码，使用行为可以使用户与网页之间产生一种交互，以改变一个页面或引发一个任间产生一种交互，以改变一个页面或引发一个任务。务。Dreamweaver MX 2004提供了丰富的行为，提供了丰富的行为，内置了内置了21种常见的行为，这些行为的设置可以为种常见的行为，这些行为的设置可以为网页对象添加一些动态效果和简单的交互功能，网页对象添加一些动态效果和简单的交互功能，从而使那些不熟悉从而使那些不熟悉JavaScript或或VBScript的用户，的用户，也可以方便的设计出只有通过复杂的也可以方便的设计出只有通过复杂的Ja

3、vaScript或或VBScript语言才能实现的功能。语言才能实现的功能。当然你也可以自己编写行为。当然你也可以自己编写行为。9.1 行为概述行为概述49.1 行为概述行为概述行为三打的组成要素：行为三打的组成要素：对象、事件和动作对象、事件和动作 对象对象是产生行为的主体。网页中的很多元素都可是产生行为的主体。网页中的很多元素都可以成为对象，例如：整个以成为对象，例如：整个HTML文档、插入的一个图文档、插入的一个图片、一段文字、一个媒体文件等。对象也是基于成对片、一段文字、一个媒体文件等。对象也是基于成对出现的标签中，在创建时首先选中对象的标签。出现的标签中，在创建时首先选中对象的标签。

4、事件事件是触发动态效果的条件。网页事件分为不同是触发动态效果的条件。网页事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和网页相关，如单击、键盘某个键按下。有的事件还和网页相关，如网页下载完毕，页面切换等。一个事件也可以触发许网页下载完毕，页面切换等。一个事件也可以触发许多动作，你可以定义它们执行的顺序。对于同一个对多动作，你可以定义它们执行的顺序。对于同一个对象，不同版本的浏览器支持的事件种类和多少也是不象，不同版本的浏览器支持的事件种类和多少也是不一样的。一样的。5v动作动作是最终产生的动态效果。动态效

5、果可能是是最终产生的动态效果。动态效果可能是图片的翻转、链接的改变、声音播放等。图片的翻转、链接的改变、声音播放等。v行为可以附加到整个文档，还可以附加到链接、行为可以附加到整个文档，还可以附加到链接、图象、表单元素或其他网页对象中的任何一种，图象、表单元素或其他网页对象中的任何一种，用户可以为每个事件指定多个动作。动作按照用户可以为每个事件指定多个动作。动作按照它们在行为面板的动作列表中列出的顺序发生。它们在行为面板的动作列表中列出的顺序发生。注意：不同的显示器支持的行为事件是不一样注意：不同的显示器支持的行为事件是不一样的。的。9.1 行为概述行为概述6v9.1.2 关于事件关于事件v事件

6、的出现类型取决于所选对象和浏览器。所事件的出现类型取决于所选对象和浏览器。所选对象的不同，所能显示的事件也有所不同；选对象的不同，所能显示的事件也有所不同；而不同的浏览器对事件的支持也不相同，可在而不同的浏览器对事件的支持也不相同，可在【添加行为添加行为】菜单的菜单的【显示事件显示事件】子菜单中指子菜单中指定浏览器，浏览器的版本越高，能支持的事件定浏览器，浏览器的版本越高，能支持的事件越多。越多。7 下面列举一些不同的浏览器能引发的事件，同时介下面列举一些不同的浏览器能引发的事件，同时介绍各种事件的功能。绍各种事件的功能。onAbort：当浏览器正载入一幅图像，用户停止当浏览器正载入一幅图像，

7、用户停止了浏览了浏览 器的运行时（例如，单击浏览器的器的运行时（例如，单击浏览器的【停止停止】按按钮），引发该事件。钮），引发该事件。onAfterUpdate：当页面上被选中的数据元素完：当页面上被选中的数据元素完成了更新数据源后，引发该事件。成了更新数据源后，引发该事件。onBeforeUpdate：当页面上被选中的数据元素当页面上被选中的数据元素已经改变并且将要失去焦点时（因些就要开始更已经改变并且将要失去焦点时（因些就要开始更新数据源）时，引发该事件新数据源）时，引发该事件9.1.2 关于事件关于事件8onBlur：这是和这是和onFocus相反的事件，当指定元素不再是相反的事件，当指

8、定元素不再是用户与网页交互的焦点时，这个事件发生。例如，用户单击用户与网页交互的焦点时，这个事件发生。例如，用户单击了一个文本区域后，又单击文本区域外部的部分，就为这个了一个文本区域后，又单击文本区域外部的部分，就为这个文本区域引发一个文本区域引发一个onBlur事件。事件。onChange：当改变了页面上的一个值，如在菜单中选择了当改变了页面上的一个值，如在菜单中选择了一个项目，或者先改变了文本区域的值，然后单击页面以外一个项目，或者先改变了文本区域的值，然后单击页面以外的部分时，会引发这个事件。的部分时，会引发这个事件。onClick：当访问者用鼠标单击特定事物时，引发当访问者用鼠标单击特

9、定事物时，引发该事件。该事件。onDblClick：当访问者用鼠标双击特定物件时，引当访问者用鼠标双击特定物件时，引发该事件。发该事件。onError：当载入一个页面或者图像，浏览器出现当载入一个页面或者图像，浏览器出现错误时，引发该事件。错误时，引发该事件。9.1.2 关于事件关于事件9onFinish：当个字幕元素的内容完成一个循环时，引发当个字幕元素的内容完成一个循环时，引发该事件。该事件。onFocus：当指定的元素成为访问者交互的焦点时，引当指定的元素成为访问者交互的焦点时，引发该事件。发该事件。onHelp：当访问者点击浏览器的帮助按键时，引发该事当访问者点击浏览器的帮助按键时，引

10、发该事件。件。onKeyDown：当访问者按下任何键（未释放）时，引发当访问者按下任何键（未释放）时，引发该事件。该事件。onKeyPress：当访问者按下按任何键（己释放）时，引当访问者按下按任何键（己释放）时，引发该事件。这个事件就像发该事件。这个事件就像【onKeydown】和和【onKeyUp】事件的组合。事件的组合。9.1.2 关于事件关于事件10onKeyUp：当访问者按下一个键再释放它时，引发该事：当访问者按下一个键再释放它时，引发该事件。件。onLoad：当网页或图像完成载入时，引发该事件。：当网页或图像完成载入时，引发该事件。onMouseDown：当访问者按下鼠标键的时候（

11、要引发：当访问者按下鼠标键的时候（要引发该事件，访问者不必释放鼠标键），引发该事件。该事件，访问者不必释放鼠标键），引发该事件。onMouseMove：当光标指向一个特定元素并移动鼠标时：当光标指向一个特定元素并移动鼠标时产生（指光标停留在元素的边界以内）。产生（指光标停留在元素的边界以内）。onMouseOut：当光标移出特定元素（通常指链接）的：当光标移出特定元素（通常指链接）的边界时引发该事件。边界时引发该事件。v onMouseOver：当光标刚刚指点向特定元素（通常指链：当光标刚刚指点向特定元素（通常指链接）时，引发该事件。接）时，引发该事件。9.1.2 关于事件关于事件11onMo

12、useUp：当鼠标按键被释放时引发事件。：当鼠标按键被释放时引发事件。onMove：当一个窗口或一个框架移动时引发事件。：当一个窗口或一个框架移动时引发事件。onReadyStateChange：当特定元素的状态改变时引：当特定元素的状态改变时引发这个事件。可能的元素状态包括未初始化、载入中发这个事件。可能的元素状态包括未初始化、载入中和完成。和完成。9.1.2 关于事件关于事件12on Reset：当重置表单初始值时引发事件。：当重置表单初始值时引发事件。onResize：调整浏览器窗口大小或者框架大小时引发事件。：调整浏览器窗口大小或者框架大小时引发事件。onRowEnter：所选中数据源

13、的当前记录指针改变所引发的事件。：所选中数据源的当前记录指针改变所引发的事件。onRowExit：所选中数据源的当前记录指针将要改变所引发的事件。：所选中数据源的当前记录指针将要改变所引发的事件。onScroll：上翻滚动条或下翻滚动条时引发的事件：上翻滚动条或下翻滚动条时引发的事件onSelect：当访问者在一个文本区域里选定文本时所引发的事件。：当访问者在一个文本区域里选定文本时所引发的事件。onStart：当字幕开始循环时引发事件。：当字幕开始循环时引发事件。onSubmit：当访问者提交表单时引发的事件。：当访问者提交表单时引发的事件。onUnload：当访问者离开页面时引发的事件。：

14、当访问者离开页面时引发的事件。9.1.2 关于事件关于事件13第第9章章 使用行为使用行为v9.2 基本浏览器行为基本浏览器行为 9.2.1弹出信息 9.2.2打开浏览器窗口 9.2.3设置导航栏图像 9.2.4显示弹出式菜单 9.2.5交换图像 9.2.6播放声音 9.2.7拖动层 9.2.8显示与隐藏层 9.2.9控制Shockwave或Flash 9.2.10检查表单 9.2.11调用JavaScript 9.2.12转到URL 9.2.13检查插件 9.2.14检查浏览器145.2.1 创建新的CSS样式v【标签（重新定义特定标签外观）标签（重新定义特定标签外观）】：该选项可以对某一具

15、体标：该选项可以对某一具体标签进行重新定义。可以直接输入一个签进行重新定义。可以直接输入一个HTML标签，也可以从弹出标签，也可以从弹出的下拉菜单选择。例如：当重新创建或修改的下拉菜单选择。例如：当重新创建或修改HR的的CSS样式样式时，文档中用时，文档中用HR标签的地方都会自动更新。在一个已链接标签的地方都会自动更新。在一个已链接好的好的CSS样式表里重定义标签应小心，因为这样做有可能会改变样式表里重定义标签应小心，因为这样做有可能会改变许多页面的布局。例如，如果对许多页面的布局。例如，如果对“TABLE”标签进行重新定义，标签进行重新定义，就会影响到其他使用表格的页面布局。就会影响到其他使

16、用表格的页面布局。v【高级（高级（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、内容添加到该样式文件所示。这样操作表示将新的内容添加到该样式文件中。以文件形式存在的样式表可以通过链接形式引中。以文件形式存在的样式表可以通过链接形式引用。例如，运用样式表文件用。例如，运用样式表文件mycss.css，则在，则在标签中引用代码为：标签中引用代码为：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选择选择【窗口窗口】/【CSS样式样式】命令，打开命

22、令，打开【CSS样式样式】面板。面板。v在在【CSS样式样式】面板中单击右下角的面板中单击右下角的【附加样式表附加样式表】按钮，打开按钮，打开【链接外部样式表链接外部样式表】对话框。对话框。v单击对话框中的单击对话框中的【范例样式表范例样式表】，打开，打开【范例样式表范例样式表】对话框，对话框，如图如图5-4所示。所示。215.2.2 链接外部样式表文件v一共有二十三种预先设置好的样式，选择其中一种，例如：基本：Arial，该样式对body，td，th标签重新进行定义。v指定样式表的【保存位置】，Dreamweaver MX 2004会自动把样式文件保存到网站的CSS目录下，若网站没有CSS子

23、目录，Dreamweaver MX 2004会自动建立。v单击【确定】按钮。在【CSS样式】面板中出现了该样式表，同时，该样式表文件已自动应用到当前文档。225.1.3 应用类样式v直接通过【属性】面板以手工给文本设置格式，也会生成样式，该样式只对当前文档起作用。这种操作会自动在【属性】面板的【样式】文本框中生成新样式，名称分别为Style1，Style2等，切换到代码视图，在中可以看到样式文件的内容。v要想使用样式文件来控制段落或文本的格式，应先把所有手工设置的样式删除，这样做是为了避免产生冲突并导致意想不到的结果。v尽管可以不受限制地在Dreamweaver中设置CSS2规范所定义的所有样

24、式，但并不表示所有设置属性都会表现出来，有些属性浏览器还不支持，甚至相同的属性在Microsoft Internet Explorer 4.0和Netscape Navigator 4.0中表现是不同的。235.1.3 应用类样式v在新建CSS样式时，【标签】样式和【高级】样式定义好后，会直接格式化当前文档对应的标签。而类样式可以应用于文档的任何文本，所以类样式的应用和前两者有所不同。具体操作如下：v选定要应用CSS样式的文本。v在【属性】面板中单击【样式】下拉列表，其中列出了所有可用的样式，选中需要的样式即可。v标签样式和高级样式不会出现在【属性】面板的【样式】列表中，因为它们不能应用于普通

25、对象。v对相同文本应用两个以上的样式，可能会产生冲突，这时浏览器会根椐以下原则应用样式属性：v如果两个样式应用于相同文本，则浏览器显示两个样式的所有属性（冲突属性除外）。冲突属性是指那些无法统一的属性，例如：一个样式指定文本颜色为红色，另一个样式由指定文本颜色为绿色.245.1.3 应用类样式 如果应用于相同文本的属性产生冲突，一般遵循一下原则：1.就近原则；2.CSS优先于HTML；255.1.4 编辑样式vCSS样式建立好后，可以进行修改。在Dreamweaver MX 2004中对样式的修改非常方便，有几种方法可以实现对样式表的修改。v方法一：打开【CSS样式】面板，选中一个样式文件，双

26、击，则该样式文件以文本形式打开，可直接在文件中修改。v方法二：打开【CSS样式】面板，选中一个已定义好的CSS标签，单击面板底部的编辑样式按钮，会弹出如图5-11所示对话框，在这里对样式重新进行设置。26v方法三：打开【CSS样式】面板，选中一个样式文件，单击面板底部的编辑样式按钮，会弹出如图5-12所示对话框，在这里可附加样式、新建样式、编辑样式、重命名、重制、删除样式。v方法四：选择【窗口】/【标签检查器】，打开【标签检查器】面板，在【CSS样式】面板中选中一个样式，则【标签检查器】面板变为【规则】面板，它有两个选项卡，一个是【显示类别视图】，一个是【显示列表视图】，如图5-13 a，5-

27、13 b所示。在两种视图中都可直接修改。5.1.4 编辑样式275.2.1 创建新的CSS样式在在CSS中使用如下格式来创建样式单中使用如下格式来创建样式单:.选择符选择符属性属性1:属性值属性值1;属性属性2:属性值属性值2 选择符选择符:可以是可以是HTML中的任意标签或样式名中的任意标签或样式名属性属性:为用于控制元素各种特性为用于控制元素各种特性,如显示属性、字体属性如显示属性、字体属性和文本属性等。和文本属性等。28v.font vfont-family:幼圆幼圆;vfont-size:10pt;vfont-style:normal;vline-height:normal;vfont

28、-weight:bolder;vfont-variant: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样式表、编辑样式表、样式表、编辑样式表、运用样式表等操作，现在我们来介绍运用样式表等操作

29、，现在我们来介绍CSS样式表的样式表的属性。属性。vDreamweaver MX 2004把样式表的属性分为把样式表的属性分为8类，类，在在【新建新建CSS样式样式】对话框中单击对话框中单击【确定确定】按钮，按钮，可以打开可以打开【.unnamed1的的CSS样式定义样式定义】对话框，对话框，如图如图5-14所示。在所示。在【分类分类】列表中共有列表中共有8 个选项：个选项：【类型类型】、【背景背景】、【区块区块】、【方框方框】、【边边框框】、【列表列表】、【定位定位】、【扩展扩展】，下面来一，下面来一 一介绍。一介绍。305.2.1 设置类型属性v【类型类型】属性主要是对网页中的文本的字体、

30、大小、颜色等属性主要是对网页中的文本的字体、大小、颜色等风格进行设置。风格进行设置。v【字体字体】：属性名为：属性名为“font-family”，从下拉列表中选择字，从下拉列表中选择字体，也可以选择体，也可以选择【编辑字体列表编辑字体列表】选项，自定义字体列表。选项，自定义字体列表。v【大小大小】：属性名：属性名“fontsize”，设置字体的字号，单位常，设置字体的字号，单位常用像素。用像素。v【粗细粗细】：属性名：属性名“font-weight”，用于设置字体的粗细效，用于设置字体的粗细效果。有果。有【正常正常】（normal）、）、【粗体粗体】（bold）、）、【特粗特粗】（bolder

31、）、）、【细体细体】（light）和具体粗细值等选项，）和具体粗细值等选项，【正正常常】等于等于400，【粗细粗细】等于等于700。v【样式样式】：属性名：属性名“font-style”，用于设置字体的风格。有，用于设置字体的风格。有【正常正常】（normal）、）、【斜休斜休】（italic）、）、【偏斜体偏斜体】（oblique）3个选项。个选项。v【变量变量】：属性名：属性名“font-variant”，包括正常和小型大写字，包括正常和小型大写字母。母。315.2.1 设置类型属性v【行高行高】：属性名：属性名“font-height”，文本所在行的行高。选择，文本所在行的行高。选择【正

32、常正常】选项，将自动计算字体的行高；否则，可以输入一个选项，将自动计算字体的行高；否则，可以输入一个精确值并选择其计算单位。常用单位是像素。精确值并选择其计算单位。常用单位是像素。v【大小写大小写】：属性名：属性名“text-transform”，指定字母大小写规则。，指定字母大小写规则。有有【首写字母大写首写字母大写】（capitalize）、）、【大写大写】（uppercase）、）、【小写小写】（lowercase）、）、【无无】（none）4个选项。个选项。v【修饰修饰】：属性名：属性名“text-decoration”，用于控制链接文本的，用于控制链接文本的显示形态，有显示形态，有【

33、下划线下划线】（underline）、）、【上划线上划线】（overline）、）、【删除线删除线】（line-through）、）、【闪烁闪烁】（blink）、）、【无无】（none）5种修饰方式。种修饰方式。v【颜色颜色】：属性名：属性名“color”，用于设置字体的颜色，用于设置字体的颜色 32v例如：定义了一个类样式例如：定义了一个类样式.unnamed1，内容为：，内容为：v.unnamed1vfont-family:方正舒体方正舒体;vfont-size:36px;vfont-style:italic;vfont-weight:bold;vcolor:#FF0000;v5.2.1

34、设置类型属性335.2.2 设置背景属性v在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中选列表中选择择【背景背景】选项，如图选项，如图5-15所示。该选项的所示。该选项的主要功能是在网页的元素后面添加的背景色主要功能是在网页的元素后面添加的背景色或背景图像。各属性的意义如下：或背景图像。各属性的意义如下：345.2.2 设置背景属性v【背景颜色背景颜色】：属性名：属性名“background-color”，用于设置元，用于设置元素的背景颜色。素的背景颜色。v【背景图像背景图像】：属性名：属性名“background-image”，给网页元，给网页元素设置背景图像。素设置背景图像。

35、v【重复重复】：属性名：属性名“background-repeat”，用于控制背景，用于控制背景图像的平铺方式。包括以下几个选项（属性值）：图像的平铺方式。包括以下几个选项（属性值）：v【不重复不重复】（no-repeat）：图像不平铺。）：图像不平铺。v【重复重复】（repeat）:图像沿水平及垂直方向重复排列。图像沿水平及垂直方向重复排列。v【横向重复横向重复】（repeat-x）:图像沿水平方向平铺。图像沿水平方向平铺。v【纵向重复纵向重复】（repeat-y）:图像沿垂直方向平铺图像沿垂直方向平铺355.2.2 设置背景属性v【附件附件】：属性名（：属性名（background-att

36、achment），选择），选择【固定固定】选项（选项（fixed），背景将不随滚动条的拖支而改变；），背景将不随滚动条的拖支而改变；选择选择【滚动滚动】选项（选项（scroll），背景将随滚动条而滚动。），背景将随滚动条而滚动。v【水平位置水平位置】：属性名：属性名“background-position”，用来确，用来确定背景图像的水平排列方式。包括定背景图像的水平排列方式。包括【左对齐左对齐】（left）、）、【右对齐右对齐】（right）、）、【居中对齐居中对齐】（center）、）、【值值】（value）等选项。）等选项。v【垂直位置垂直位置】：属性名：属性名“background-p

37、osition”，用来确，用来确定背景图像的垂直排列方式。包括定背景图像的垂直排列方式。包括【顶部顶部】（top）、）、【居居中中】（center）、）、【底部底部】（bottom）、）、【值值】（value）等选项。等选项。365.2.3 设置区块属性v在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中选列表中选择择【区块区块】选项，如图选项，如图5-16所示。区块是指所示。区块是指网页中的文本、图像、层等元素。该选项的网页中的文本、图像、层等元素。该选项的主要用来控制区块的间距、对齐方式和文字主要用来控制区块的间距、对齐方式和文字缩进等。各属性的意义如下：缩进等。各属性的意义如下

38、：375.2.3 设置区块属性v单词间距：属性名单词间距：属性名“word-spacing”，控制单词之间的距离。，控制单词之间的距离。有有【正常正常】（normal）和）和【值值】（value）两种。）两种。v字母间距：属性名字母间距：属性名“letter-spacing”，控制字符之间的距离。，控制字符之间的距离。有有【正常正常】（normal）和）和【值值】（value）两种。）两种。v垂直对齐：属性名垂直对齐：属性名“vertical-align”，用于控制元素相对其，用于控制元素相对其母体元素的垂直位置。共有母体元素的垂直位置。共有5个选项。例如：选择个选项。例如：选择【基线基线】（

39、baseline），则元素的基准线同母体元素的基准线对齐；），则元素的基准线同母体元素的基准线对齐；选择选择【下标下标】（sub），则元素以下标的形式显示；），则元素以下标的形式显示；【上标上标】（super），元素将以上标的形式出现；），元素将以上标的形式出现；【顶部顶部】（top），），元素的顶部与母体元素的顶部对齐。元素的顶部与母体元素的顶部对齐。v文本对齐：属性名文本对齐：属性名“text-align”，用于指定文本的水平对齐，用于指定文本的水平对齐方式。共有方式。共有【左对齐左对齐】（left）、）、【居中对齐居中对齐】（center）、）、【右对齐右对齐】（right）、）、【两端

40、对齐两端对齐】（justify）4个选项。个选项。385.2.3 设置区块属性v文字缩进：属性名文字缩进：属性名“text-indent”，用于指定文本，用于指定文本块中首行的缩进距离。块中首行的缩进距离。v空格：属性名空格：属性名“white-space”，指定空格的处理方，指定空格的处理方式。在式。在HTML文档中，从键盘输入的空格是无效的。文档中，从键盘输入的空格是无效的。要输入空格，只有插入空格的代码要输入空格，只有插入空格的代码“ ”，或，或者是用预定义格式标签者是用预定义格式标签，把空格保留。该属，把空格保留。该属性有性有3个选项：个选项：【正常正常】、【保留保留】、【不

41、换行不换行】。v显示：属性名显示：属性名“display”，用于设置区块的显示方，用于设置区块的显示方式。式。395.2.4 设置方框属性vCSS将网页中所有的块元素都看作是包含在将网页中所有的块元素都看作是包含在一个方框中，对方框的设置包括方框的宽度、一个方框中，对方框的设置包括方框的宽度、高度，块元素与方框的距离，方框的边界等。高度，块元素与方框的距离，方框的边界等。在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中选列表中选择择【方框方框】选项，如图选项，如图5-17所示。所示。405.2.4 设置方框属性v【宽宽】：属性名：属性名“width”，设定方框的宽度。，设定方框的宽

42、度。v【高高】：属性名：属性名“height”，设定方框的高度。设定方框的高度。v【浮动浮动】：属性名：属性名“float”，用于设置块元素的浮，用于设置块元素的浮动效果。动效果。v【清除清除】：属性名：属性名“clear”，用于清除设置的浮动，用于清除设置的浮动效果。效果。v【填充填充】：属性名：属性名“margin”，用于设置块元素与，用于设置块元素与边框的距离。包含边框的距离。包含【上上】、【右右】、【下下】、【左左】4项。项。415.2.4 设置方框属性v【上上】：（：（margin-top）控制上边距的宽度）控制上边距的宽度.v【右右】：（：（margin-right）控制右边距的宽

43、度）控制右边距的宽度.v【下下】：（：（margin-bottom）控制下边距的宽度）控制下边距的宽度.v【左左】：（：（margin-left）控制左边距的宽度）控制左边距的宽度.v【边界边界】：属性名：属性名“padding”，用于控制块元素与其他元，用于控制块元素与其他元素之间的距离。也有素之间的距离。也有4个选项。个选项。v【上上】：（：（padding-top）控制上边界的宽度）控制上边界的宽度.v【右右】：（：（padding-right）控制右边界的宽度）控制右边界的宽度.v【下下】：（：（padding-bottom）控制下边界的宽度）控制下边界的宽度.v【左左】：（：（pad

44、ding-left）控制左边界的宽度）控制左边界的宽度.425.2.5 设置边框属性v在在CSS样式定义对话框的样式定义对话框的【分类分类】列表中选择列表中选择【边框边框】选项，如图选项，如图5-23所示。该选项主要用来定义边框的。所示。该选项主要用来定义边框的。v图图5-23 设置边框属性设置边框属性v【样式样式】：属性名：属性名“border-style”，用于设定边框线的样式。包括，用于设定边框线的样式。包括【上上】、【右右】、【下下】、【左左】4个选项。每个选项又有以下个选项。每个选项又有以下5 个子选个子选项：项：v【无无】（none）：没有边框线；）：没有边框线；【点划线点划线】（

45、dotted）：边框线为短线；）：边框线为短线；【虚线虚线】（dashed）：边框线为点线；）：边框线为点线；【实线实线】（solid）：边框线为实）：边框线为实线；线；【双线双线】（double）：边框线为双线；）：边框线为双线；【槽状槽状】（groove）：边框）：边框线为槽状；线为槽状；【脊状脊状】（ridge）：边框线为脊状。和槽状相反。）：边框线为脊状。和槽状相反。【凹陷凹陷】（inset）；）；【凸出凸出】（outset）。）。v宽度：属性名宽度：属性名“border-width”，用于设定边框线的宽度，有，用于设定边框线的宽度，有【细细】、【中中】、【粗粗】、【值值】4个选项。个

46、选项。v颜色：属性名颜色：属性名“border-color”，用于设置边框线的颜色。，用于设置边框线的颜色。v例如：我们把文件例如：我们把文件“fangkuang.htm”的边框线设置为虚线，宽度为的边框线设置为虚线，宽度为1像像素，蓝色。选定类样式素，蓝色。选定类样式.aa，编辑，重新设置，编辑，重新设置【边框边框】属性，如图属性，如图5-24所所示。查看效果。示。查看效果。435.2.6 设置列表属性v在在CSS样式定义对话框的样式定义对话框的【分类分类】列表框中选择列表框中选择【列表列表】选选项，如图项，如图5-25所示。该选项是主要用来定义列表属性。所示。该选项是主要用来定义列表属性。

47、v【类型类型】：属性名：属性名“list-style-type”，指定项目符号或编号，指定项目符号或编号的外观。的外观。v【项目符号图像项目符号图像】：属性名：属性名“list-style-image”，用于指定，用于指定自定义符号的图像，既可以直接输入文件名，也可以单击自定义符号的图像，既可以直接输入文件名，也可以单击【浏览浏览】按钮，浏览并选择合适的图像文件。按钮，浏览并选择合适的图像文件。v【位置位置】：属性名：属性名“list-style-position”，用于决定列表项，用于决定列表项换行时缩进还是边缘对齐。要缩进时，选择换行时缩进还是边缘对齐。要缩进时，选择【外外】选项；要选项；

48、要边缘对齐，则选择边缘对齐，则选择【内内】选项。选项。445.2.7 设置定位属性v在在CSS样式定义对话框的样式定义对话框的【分类分类】列表框中列表框中选择选择【定位定位】选项，如图选项，如图5-26所示。该选项所示。该选项是主要用来精确定位层位置。是主要用来精确定位层位置。455.2.7 设置定位属性v【类型类型】：属性名：属性名“position”，用于选择层定位的方式，用于选择层定位的方式，有有【绝对绝对】（absolute）、）、【相对相对】（relative）、）、【静态静态】（static）3个选项。个选项。v【显示显示】：属性名：属性名“visibility”，用于决定层的初始

49、显示状，用于决定层的初始显示状态。如果没有指定本属性，则在默认情况下，大多数的浏览态。如果没有指定本属性，则在默认情况下，大多数的浏览器将继承其上一级的值，其中包括以下器将继承其上一级的值，其中包括以下3个选项。个选项。v【继承继承】：继承层的上一级的可见性属性。：继承层的上一级的可见性属性。v【可见可见】：显示层的内容而不考虑其上一级值。：显示层的内容而不考虑其上一级值。v【隐藏隐藏】：隐藏层的内容而不考虑其上一级值。：隐藏层的内容而不考虑其上一级值。v【Z轴轴】：属性名：属性名“Z-index”，用于决定层的叠放顺序。，用于决定层的叠放顺序。v【溢出溢出】：用于指定当层的内容超出了层的大小

50、时：用于指定当层的内容超出了层的大小时Dreamweaver MX 2004的处理方法。的处理方法。465.2.7 设置定位属性v【可见可见】：扩大层的尺寸，使层中所有的内容都可：扩大层的尺寸，使层中所有的内容都可见。见。v【隐藏隐藏】：隐藏超出范围的内容。：隐藏超出范围的内容。v【滚动滚动】：在层的右边增加滚动条。：在层的右边增加滚动条。v【自动自动】：当层中的内容超过层边界时，自动显示：当层中的内容超过层边界时，自动显示滚动条。滚动条。v【定位定位】：当层确定为绝对定位后，该组属性决定：当层确定为绝对定位后，该组属性决定元素在网页中的具体位置。包含有元素在网页中的具体位置。包含有4个子属性