《Dreamweaver CS3网页制作学习指导》第五章网页的特效制作

第五章网页的特效制作目录前进结束后退本章导读上机实训知识细目本章任务本章导读目录前进结束后退本章主要介绍了CSS样式的概念、创建、编辑和应用，行为的概念和创建，时间轴面板的组成及使用时间轴制作简单动画的方法。本章任务目录前进结束后退学会CSS样式的创建、编辑和应用；学会使用CSS样式美化和布局网页的方法；了解行为的概念；掌握创建行为的基本方法；了解使用时间轴制作动画的基本原理；学会使用时间轴制作简单动画的方法。知识细目5.1创建CSS样式5.2应用CSS样式

5.3添加行为5.4制作动态效果CSS样式的含义CSS样式面板创建CSS样式定义CSS样式属性编辑CSS样式应用CSS样式删除CSS样式重命名CSS样式链接外部CSS样式表行为的概念行为面板更改或删除行为添加行为动作名称及作用事件名称及作用时间轴面板制作直线动画制作曲线动画更改元素属性动画的其他操作目录前进结束后退5.1创建CSS样式打开“CSS样式”面板

按Shift+F11键打开“CSS样式”面板的方法选择“窗口→CSS样式”命令单击属性面板上的“CSS”按钮

CSS即层叠样式表，是一种格式化网页的标准方式，它通过设置CSS属性使网页元素对象获得不同的效果。“CSS样式”的含义

目录前进结束后退“CSS样式”面板

“附加样式表”：用来选择要链接或导入的外部样式表文件。“新建CSS规则”：用来创建新的CSS样式。“编辑样式”：打开样式表编辑对话框，对当前选中的CSS样式进行编辑。“删除CSS属性”：删除选定的样式或属性，并从它所应用于的所有元素中删除格式设置。目录前进结束后退使用“CSS样式”面板创建CSS样式打开“CSS样式”面板单击“新建CSS规则”按钮选择CSS样式的类型选择定义样式的位置设置CSS样式的属性完成样式的创建“新建CSS规则”对话框“新建CSS规则”对话框目录前进结束后退CSS样式的类型类：创建类属性应用于文本范围或文本块的自定义样式标签:重新定义特定HTML标签的默认格式设置高级:为具体某个标签组合或所有包含特定Id属性的标签定义格式设置,默认的“选择器”列表中包括a:active、a:hover、a:link和a:visited定义样式的位置样式表文件名：将新建的样式添加到该样式表中新建样式表文件：创建外部样式表仅对该文档：在当前文档中嵌入样式，不生成新的样式表文件目录前进结束后退定义CSS样式的属性（1）定义CSS样式“类型”属性“行高”：设置文本所在行的高度，选择“正常”时自动计算字体大小的行高，或输入一个确切的值。“修饰”：向文本添加下划线、上划线、删除线或使文本闪烁。目录前进结束后退（2）定义CSS样式“背景”属性“背景颜色”和“背景图像”：给选定的对象添加背景颜色和背景图像。“重复”：设置背景图像的重复方式。“附件”：设置图像是固定在原始位置还是随内容一起滚动。目录前进结束后退（3）定义CSS样式“区块”属性“单词间距”和“字母间距”：设置单词和字母的间距，选择“值”后可输入数值，并在右边的列表框中选择单位。“垂直对齐”：设置选中对象相对于上级对象或所在行垂直方向的对齐方式。“文本对齐”：设置首行文字在对象中的对齐方式。目录前进结束后退（4）定义CSS样式“方框”属性“填充”：指定元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。“边距”：指定一个元素的边框与另一个元素之间的间距。目录前进结束后退（5）定义CSS样式“边框”属性“样式”：设置边框的样式外观。样式的显示方式取决于浏览器，Dreamweaver

在“文档”窗口中将所有样式呈现为实线。“宽度”：设置元素边框的粗细。“颜色”：设置边框的颜色。可分别设置每条边的颜色，但显示方式取决于浏览器。目录前进结束后退（6）定义CSS样式“列表”属性“类型”：设置列表的标记。“项目符号图像”：为项目符号指定自定义图像。“位置”：设置列表标记的缩进方式。目录前进结束后退（7）定义CSS样式“定位”属性“类型”：设置对象的位置。“显示”：设置对象的可见性，包括“继承”、“可见”和“隐藏”。“Z轴”：设置对象的层叠顺序，包括“自动”和“值”两个选项，值越大，越靠上显示。“溢出”：设置内容超出容器时的处理方式。“定位”：设置放置对象的容器大小和位置。“剪辑”：定义内容的可见区域。目录前进结束后退（8）定义CSS样式“扩展”属性“分页”：设置打印时在样式所控制的对象之前或之后强行分页。“光标”：设置当指针位于样式所控制的对象上时改变指针图像。“过滤器”：对样式所控制的对象应用特殊效果。目录前进结束后退5.2

应用CSS样式编辑CSS样式

选择“窗口→CSS样式”命令，打开“CSS样式”面板，选择要编辑的CSS样式，执行以下操作：编辑CSS样式双击要编辑的样式名称在“CSS样式”面板的“属性”窗格中编辑单击“CSS样式”面板右下方的“编辑样式”目录前进结束后退应用CSS类样式

选中要应用CSS样式的对象，在“CSS样式”面板中右单击样式名称，在弹出的快捷菜单中选择“套用”命令。对于文本对象，也可以选中文本后，在其“属性”面板的“样式”下拉列表中选择需要的样式名称。对于图像、Flash动画、表格等页面对象，可在选中这些对象后，在“属性”面板的“类”下拉列表中选择需要的样式名称。提示

对于“标签”和“高级”样式，样式定义后将直接被应用到页面中相应的对象中，而“类”样式则必须选择对象并应用后才会生效。目录前进结束后退从选定内容删除类样式选择对象在“样式”或“类”中选择“无”删除CSS样式

选择对象单击“删除样式”或按Del键重命名CSS样式

选择对象右单击→“重命名类”目录前进结束后退链接外部CSS样式表“附加样式表”“浏览”或直接在“文件/URL”框中键入该样式表的路径提示创建类样式时，样式名称必须以句点开头，并且可以包含任何字母和数字组合。样式被编辑修改后，将会自动更新应用该样式的对象。样式被删除后，应用于该样式的所有对象也将去除所套用的格式。目录前进结束后退5.3添加行为行为是DreamweaverCS3预置的JavaScript程序库。每个行为包括一个动作和一个事件。事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。

“行为”的概念

目录前进结束后退“行为”面板

打开“行为”面板选择“窗口→行为”命令按Shift+F4快捷键目录前进结束后退添加行为

选择添加的对象打开行为面板单击“添加行为”

在“事件”列表中选择事件

设置动作参数

在弹出菜单中选择动作目录前进结束后退更改或删除行为

选择对象打开行为面板编辑动作参数双击动作的名称选中后按Enter键更改动作顺序单击“增加/降低事件值”按钮剪切并粘贴到其它动作之间删除当前行为单击“删除事件”按钮按Delete键目录前进结束后退动作名称及其作用

交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。恢复交换图像：将最后一组交换的图像恢复为以前的源文件。效果：为选中的对象添加增大/收缩、挤压、显示/隐藏、晃动、滑动、遮帘等效果。弹出信息：可显示一个带有用户指定信息的JavaScript警告框和一个“确定”按钮，使用此动作只能提供信息，而不能为用户提供选择。目录前进结束后退动作名称及其作用

打开浏览器窗口：可在一个新的窗口中打开URL，可指定新窗口的大小、特性和名称。播放声音：可在网页中播放声音，例如，当鼠标滑过某图像时可以播放一段音乐；或者当页面载入时播放音乐。改变属性：可通过改变图像、APDiv、表单等的某个属性来实现动态效果，例如，层的背景颜色或图像的宽或高。具体可更改哪个属性由当前选用的浏览器来决定。设置文本：可用于设置框架文本、状态栏文本和表单元素中的文本域文本。目录前进结束后退动作名称及其作用

预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。检查表单：可以为表单中各元素设置有效性规则，并检查指定文本域的内容以确保用户输入正确的数据类型，防止表单提交到服务器后，文本域中包含无效的数据。显示—隐藏元素：显示、隐藏或恢复一个或多个AP元素的默认可见性。调用JavaScript：发生事件时，调用特定的JavaScript函数。目录前进结束后退事件名称及其作用onLoad：载入对象时触发。onClick：鼠标单击时触发。onDblClick：鼠标双击时触发。onMouseDown：按下鼠标左键时触发。onMouseUp：鼠标左键按下后释放时触发。onMouseOver：鼠标指针移到某对象时触发。onMouseMove：鼠标移动时触发。onMouseOut：鼠标离开某对象时触发。onKeyPress：当键盘上某个键按下并且放开时触发。onKeyDown：当键盘上某个键按下时触发。onKeyUp：当键盘上某个键松开时触发。目录前进结束后退5.4利用时间轴制作动态效果“时间轴”面板选择“窗口→时间轴”命令或按Alt+F9快捷键，即可打开“时间轴”面板，如下图所示。时间轴面板目录前进结束后退“时间轴”面板

“自动播放”复选框：使时间轴在当前页从浏览器中加载时自动开始播放。“循环”复选框：使动画进行循环播放。“速率”：用来输入动画每秒钟播放的帧数。“动画条”：表示一个动画所占的帧数，上面标有该动画所在APDiv的名字。“关键帧”：定义动画条中已经为对象指定属性的帧，决定了动画的走向。“时间轴”下拉列表：列出了当前页面中所有时间轴动画的名字。“归位”按钮：将播放头移至时间轴中的第一帧。目录前进结束后退使用时间轴制作AP元素直线动画

（1）在页面内插入一个APDiv，然后在APDiv中插入一个图像、动画或文字等，（2）将插有图像或文字的APDiv拖动到动画的起始位置，生成一个动画条。（3）用鼠标拖动末端关键帧可改变动画帧数。（4）选中终止关键帧，在页面上将AP元素拖动到动画结束时的目标位置，如下图所示。（5）保存并预览网页。直线动画路径目录前进结束后退使用时间轴制作AP元素曲线动画方法1：在直线动画上添加关键帧制作曲线动画（1）先制作一个直线动画，选中动画条内要插入关键帧的位置，按住Ctrl键单击，将其转换为关键帧。（2）依次选中关键帧，拖动APDiv到新的目标位置，生成的曲线动画路径如下图所示。（3）保存并预览网页。曲线动画路径目录前进结束后退方法2：通过拖动路径创建曲线动画（1）在页面内插入一个APDiv，然后在APDiv内插入一个图像、动画或输入文本等，再将插有图像或文本的APDiv移到动画的起始位置。（2）选中该APDiv，选择“修改→时间轴→记录AP元素的路径”命令。（3）在网页设计窗口内，按照设计的曲线路径，拖动APDiv系统将自动生成一条曲线路径。（4）保存并预览网页。使用时间轴制作AP元素曲线动画

目录前进结束后退使用时间轴更改图像和AP元素的属性

（1）制作转换图像①在页面内插入一个图像，将该图像拖动到“时间轴”面板，生成动画条。②在“时间轴”面板中按下Ctrl键单击某帧，将当前帧转换为关键帧，更换该关键帧处的图像文件。③重复操作②，不断增加关键帧和更换图像文件。④保存并预览网页。目录前进结束后退（2）制作徐徐展开的图像①在页面内绘制一个APDiv并插入图像。②在属性面板设置APDiv的“溢出”属性为“hidden”。③将APDiv拖动“时间轴”面板的动画通道上形成动画条。④选中动画的起始帧，设置APDiv的“宽”为较小值。⑤保存并预览网页。徐徐展开的奥运卷轴使用时间轴更改图像和AP元素的属性

目录前进结束后退动画的其他操作

（1）动画的删除删除动画条：在“时间轴”面板中选中要删除的动画条，按Delete键或选择“编辑→剪切”命令。删除所有动画条：在“时间轴”面板中右击，在弹出的快捷菜单