1、 网页制作技术（三剑客）第 3章 动态网页制作技术实例集锦 本章的实例将大量使用到Dreamweaver的高级功能，如图层、行为、CSS、时间轴等操作较为复杂的组件，本章将不再对第2章的基础知识进行讲解，如遇到不理解的操作可翻阅第二章的对应内容，接下来的实例将会让读者充分感受到网页制作的魅力以及DreamweaverCS3的强大功能。课程描述 掌握层与行为的关系即使用方法掌握层与行为的关系即使用方法 理解理解CSSCSS的基本用法的基本用法了解时间轴的创建及简单用法了解时间轴的创建及简单用法理解理解CSSCSS滤镜滤镜理解理解spryspry的各种用法的各种用法了解了解Dreamweaver
2、Dreamweaver 扩展的安装和用法扩展的安装和用法 本章知识点 训练任务使用层与行为制作可移动对话框使用css制作新闻阅读页使用时间轴制作动态诗卷使用CSS滤镜制作图片特效使用spay制作渐隐菜单Dreamweaver扩展的安装与使用 制作可移动对话框FF任务一 操作要点1.参照教材熟悉参照教材熟悉CSS-P（层）的属性面板的各个功能。（层）的属性面板的各个功能。2.层拥有着最高的优先级（表格无法约束层，即表格中无法控制层，但层中可以插入表格，并控制层拥有着最高的优先级（表格无法约束层，即表格中无法控制层，但层中可以插入表格，并控制表格），也可将其理解为网页中的网页，图层的另一个特点在于
3、它可放置在网页中的任何一个位置，表格），也可将其理解为网页中的网页，图层的另一个特点在于它可放置在网页中的任何一个位置，因为其定位是使用的坐标，以实现一些特殊的效果。因为其定位是使用的坐标，以实现一些特殊的效果。3.层的定位分为层的定位分为“绝对定位绝对定位”和和“相对定位相对定位”两种，使用两种，使用“绘制层绘制层”功能绘制的层为绝对定位，当功能绘制的层为绝对定位，当鼠标光标处于某元素的某一位置时，使用鼠标光标处于某元素的某一位置时，使用“插入记录插入记录布局对象布局对象AP DIV”，插入的层只需注意一，插入的层只需注意一下其属性就会注意到，该层没有下其属性就会注意到，该层没有“左左”和和
4、“上上”两个参数，只要保持着两个参数为空，那么这个图两个参数，只要保持着两个参数为空，那么这个图层就是相对于插入点相对定位的。层就是相对于插入点相对定位的。4.层与层之间可以嵌套，方法为，将鼠标插入点放在一个图层中时，使用菜单操作层与层之间可以嵌套，方法为，将鼠标插入点放在一个图层中时，使用菜单操作“插入记录插入记录布布局对象局对象AP DIV”插入的层称为第一个图层的子图层，子图层的定位是随着父图层的改变而改变。插入的层称为第一个图层的子图层，子图层的定位是随着父图层的改变而改变。5.5.“行为行为”需要配合触发条件才能够执行，常用的触发条件有：需要配合触发条件才能够执行，常用的触发条件有：
5、onMouseOver（鼠标移动到目标上（鼠标移动到目标上触发）触发）onClick（鼠标单击触发）（鼠标单击触发）onload（打开网页时触发）（打开网页时触发）onDbClick（鼠标双击触发）。（鼠标双击触发）。使用css制作新闻阅读页FF任务二 操作要点本例通过制作一个新闻阅读页来介绍了本例通过制作一个新闻阅读页来介绍了Dreamweaver内置的内置的CSS编辑功能，那么到底编辑功能，那么到底CSS是什么呢？是什么呢？CSS 是层叠样式表是层叠样式表(Cascading Style Sheets)的缩写，其主要功能为将原的缩写，其主要功能为将原本用来指定网页中元素样式格式的语句写入到
6、一个外部样式文件中，从而实现了网页内本用来指定网页中元素样式格式的语句写入到一个外部样式文件中，从而实现了网页内容与表现得分离，举一个简单的例子：假如网站中有容与表现得分离，举一个简单的例子：假如网站中有100个网页，全部都是黑色背景，个网页，全部都是黑色背景，蓝色的表格边框，那要是把所有的背景都改成白色，或者表格边框修改为红色的话岂不蓝色的表格边框，那要是把所有的背景都改成白色，或者表格边框修改为红色的话岂不是要修改是要修改100次？有人会想到模版，那如果连网页的布局结构都完全不同只是单纯的对次？有人会想到模版，那如果连网页的布局结构都完全不同只是单纯的对应元素的外形，那模版就无能为力了，这
7、里就要用到应元素的外形，那模版就无能为力了，这里就要用到CSS层叠样式表（后面均简称层叠样式表（后面均简称CSS），把对网页背景颜色以及表格边框颜色的规定写入到一个），把对网页背景颜色以及表格边框颜色的规定写入到一个CSS文件中，然后在所文件中，然后在所有的网页中调用这个有的网页中调用这个CSS样式文件，那么，以后只要想对这两个部分进行修改，只需要样式文件，那么，以后只要想对这两个部分进行修改，只需要打开这个打开这个CSS文件，修改一下参数，那么所有的对应网页就都会自动应用新的设置，非文件，修改一下参数，那么所有的对应网页就都会自动应用新的设置，非常高效强大。常高效强大。FF任务三 时间轴制作
8、动态诗卷 本例通过制作会动的诗卷讲解了时间轴的创建于使用方法，该功能较为复杂，本例通过制作会动的诗卷讲解了时间轴的创建于使用方法，该功能较为复杂，下面详细解释一下时间轴属性面板的各下面详细解释一下时间轴属性面板的各个功能，个功能，“时间轴时间轴”：当前时间轴，点击下拉菜单可选择其他时间轴。：当前时间轴，点击下拉菜单可选择其他时间轴。“帧编号帧编号 ”：指示帧的序号。：指示帧的序号。“后退后退”和和“前进前进”按钮之间的数字是当前帧。按钮之间的数字是当前帧。“fps”fps”：控制动画的持续时间。默认为每秒：控制动画的持续时间。默认为每秒 15 15 帧，通过该速度来计算时间轴的播放时间。帧，通
9、过该速度来计算时间轴的播放时间。“动画条动画条 ”：显示每个对象的动画的持续时间。一行可以包含表示不同对象的多个条。不同：显示每个对象的动画的持续时间。一行可以包含表示不同对象的多个条。不同的动画条无法控制同一帧中的同一对象。的动画条无法控制同一帧中的同一对象。“关键帧关键帧”：是动画条中已经为对象指定属性（如位置）的帧。：是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver Dreamweaver 会计算关键帧之间帧的中间值。会计算关键帧之间帧的中间值。小圆标记表示关键帧。小圆标记表示关键帧。“自动播放自动播放”：选中后当前页面在载入时自动开始播放时间轴。：选中后当前页面在载入
10、时自动开始播放时间轴。“循环循环”：选中后页面在打开时当前时间轴可以无限循环播放。选中后页面在打开时当前时间轴可以无限循环播放。操作要点 使用CSS滤镜制作图片特效FF任务四 本例介绍了几个本例介绍了几个DreamweaverDreamweaver自带的无参数滤镜效果，他自带的无参数滤镜效果，他们的共同特点就是无需设置任何参数就可以直接使用，效们的共同特点就是无需设置任何参数就可以直接使用，效果也很明显，在制作网站时将这些果也很明显，在制作网站时将这些CSSCSS样式放在一个文件中，样式放在一个文件中，并在需要这些功能的网页中加载该并在需要这些功能的网页中加载该CSSCSS样式文件，就可以轻样
11、式文件，就可以轻松的使用这些滤镜效果了，省去很多处理图片的时间。松的使用这些滤镜效果了，省去很多处理图片的时间。操作要点 使用spay制作渐隐菜单FF任务五 本例中使用的是本例中使用的是DreamweaverCS3DreamweaverCS3默认支持的默认支持的7 7种效果中的两种，他们的用法基本上大同种效果中的两种，他们的用法基本上大同小异，但他们所能应用的元素却略有不同，下面列出各种效果的常用应用对象。小异，但他们所能应用的元素却略有不同，下面列出各种效果的常用应用对象。增大增大/收缩：可以应用在图层（收缩：可以应用在图层（DIVDIV）、图片（）、图片（IMAGEIMAGE）元素上，效果
12、为目标元素）元素上，效果为目标元素增大缩小。增大缩小。挤压：可以应用在图层在图层（挤压：可以应用在图层在图层（DIVDIV）、图片（）、图片（IMAGEIMAGE）元素上，效果为目标元素）元素上，效果为目标元素被挤压成很小尺寸。被挤压成很小尺寸。显示显示/渐隐：可以应用在图层（渐隐：可以应用在图层（DIVDIV）、图片（）、图片（IMAGEIMAGE）元素上，效果为目标元素）元素上，效果为目标元素淡入淡出。淡入淡出。晃动：可以应用在图层（晃动：可以应用在图层（DIVDIV）、图片（）、图片（IMAGEIMAGE）元素上，效果为目标元素左右晃）元素上，效果为目标元素左右晃动几下。动几下。滑动：可
13、以应用在图层（滑动：可以应用在图层（DIVDIV）元素上，效果为目标）元素上，效果为目标DIVDIV上滑或者下滑。上滑或者下滑。遮帘：可以应用在图层（遮帘：可以应用在图层（DIVDIV）元素上，效果为目标）元素上，效果为目标DIVDIV向上或下被遮蔽制定的高向上或下被遮蔽制定的高度或百分比，用法基本同度或百分比，用法基本同“滑动功能滑动功能”。高亮颜色：可以应用在图层（高亮颜色：可以应用在图层（DIVDIV）、图片（）、图片（IMAGEIMAGE）元素上（图片无效果），效）元素上（图片无效果），效果为目标果为目标DIVDIV背景色改变。背景色改变。操作要点 DWCS扩展的安装与使用FF任务六
14、本例使用自己安装的扩展插件制作了一个简单的收藏夹链接，由于本例使用自己安装的扩展插件制作了一个简单的收藏夹链接，由于DreamweaverDreamweaver的扩展插件多得数不胜数，插件功能、适用软件版本、用法各不的扩展插件多得数不胜数，插件功能、适用软件版本、用法各不相同，所以本例仅仅起到一个提示的目的，让读者知道插件的用处以及如何相同，所以本例仅仅起到一个提示的目的，让读者知道插件的用处以及如何安装，具体需要什么功能，读者可根据需要自行下载，基本上大多数的插件安装，具体需要什么功能，读者可根据需要自行下载，基本上大多数的插件都是免费提供使用的，仅有一小部分收费，由于并不是所有插件都有汉化
15、版都是免费提供使用的，仅有一小部分收费，由于并不是所有插件都有汉化版本，因此需要读者有一点英文基础，只要略懂英文，凭借插件的简单介绍就本，因此需要读者有一点英文基础，只要略懂英文，凭借插件的简单介绍就可以明白使用方法了。可以明白使用方法了。操作要点 层的特性都有哪些？除了层，还有那些元素适合应用各种“行为”？讨论研究一下软件提供的其他CSS都有什么效果 实验一下系统提供的其他SPAY插件效果，讨论一下他们都适合应用于那些地方。上网搜索一下DW的扩展插件，下载一些免费的效果应用于网站上。讨 论 本章主要讲解了层（AP DIV）、时间轴、行为、C S S 滤 镜 等 高 级 功 能，以 及 S p r y 控 件 这 一DreamweaverCS3的最新功能，通过这些功能，读者可以制作出各种各样的特殊网页效果，为自己的网站增加各种视觉体验，但这些功能使用上比较复杂，需要读者多多练习才能做到融会贯通，熟练使用在网页制作过程中。本章小结
