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