网页制作技术 教学课件 ppt 作者 三剑客电子教案及素材 教学课件 ppt 作者 刘子轶 第3章.ppt

《网页制作技术 教学课件 ppt 作者 三剑客电子教案及素材 教学课件 ppt 作者 刘子轶 第3章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作技术（三剑客）第3章动态网页制作技术实例集锦本章的实例将大量使用到Dreamweaver的高级功能，如图层、行为、CSS、时间轴等操作较为复杂的组件，本章将不再对第2章的基础知识进行讲解，如遇到不理解的操作可翻阅第二章的对应内容，接下来的实例将会让读者充分感受到网页制作的魅力以及DreamweaverCS3的强大功能。课程描述掌握层与行为的关系即使用方法理解CSS的基本用法了解时间轴的创建及简单用法理解CSS滤镜理解spry的各种用法了解Dreamweaver扩展的安装和用法本章知识点训练任务使用层与行为制作可移动对话框使用css制作新闻阅读页使用时间轴

2、制作动态诗卷使用CSS滤镜制作图片特效使用spay制作渐隐菜单Dreamweaver扩展的安装与使用制作可移动对话框F任务一打开源文件操作要点参照教材熟悉CSS-P（层）的属性面板的各个功能。层拥有着最高的优先级（表格无法约束层，即表格中无法控制层，但层中可以插入表格，并控制表格），也可将其理解为网页中的网页，图层的另一个特点在于它可放置在网页中的任何一个位置，因为其定位是使用的坐标，以实现一些特殊的效果。层的定位分为“绝对定位”和“相对定位”两种，使用“绘制层”功能绘制的层为绝对定位，当鼠标光标处于某元素的某一位置时，使用“插入记录→布局对象→APDIV”，插

3、入的层只需注意一下其属性就会注意到，该层没有“左”和“上”两个参数，只要保持着两个参数为空，那么这个图层就是相对于插入点相对定位的。层与层之间可以嵌套，方法为，将鼠标插入点放在一个图层中时，使用菜单操作“插入记录→布局对象→APDIV”插入的层称为第一个图层的子图层，子图层的定位是随着父图层的改变而改变。“行为”需要配合触发条件才能够执行，常用的触发条件有：onMouseOver（鼠标移动到目标上触发）onClick（鼠标单击触发）onload（打开网页时触发）onDbClick（鼠标双击触发）。使用css制作新闻阅读页F任务二打开源文件操作要点本例通过制作一个

4、新闻阅读页来介绍了Dreamweaver内置的CSS编辑功能，那么到底CSS是什么呢？CSS是层叠样式表(CascadingStyleSheets)的缩写，其主要功能为将原本用来指定网页中元素样式格式的语句写入到一个外部样式文件中，从而实现了网页内容与表现得分离，举一个简单的例子：假如网站中有100个网页，全部都是黑色背景，蓝色的表格边框，那要是把所有的背景都改成白色，或者表格边框修改为红色的话岂不是要修改100次？有人会想到模版，那如果连网页的布局结构都完全不同只是单纯的对应元素的外形，那模版就无能为力了，这里就要用到CSS层叠样式表（后面均简称CSS），把对

5、网页背景颜色以及表格边框颜色的规定写入到一个CSS文件中，然后在所有的网页中调用这个CSS样式文件，那么，以后只要想对这两个部分进行修改，只需要打开这个CSS文件，修改一下参数，那么所有的对应网页就都会自动应用新的设置，非常高效强大。F任务三打开源文件时间轴制作动态诗卷本例通过制作会动的诗卷讲解了时间轴的创建于使用方法，该功能较为复杂，下面详细解释一下时间轴属性面板的各个功能，●“时间轴”：当前时间轴，点击下拉菜单可选择其他时间轴。●“帧编号”：指示帧的序号。“后退”和“前进”按钮之间的数字是当前帧。●“fps”：控制动画的持续时间。默认为每秒15帧，通过该速度

6、来计算时间轴的播放时间。●“动画条”：显示每个对象的动画的持续时间。一行可以包含表示不同对象的多个条。不同的动画条无法控制同一帧中的同一对象。●“关键帧”：是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。●“自动播放”：选中后当前页面在载入时自动开始播放时间轴。●“循环”：选中后页面在打开时当前时间轴可以无限循环播放。操作要点使用CSS滤镜制作图片特效F任务四打开源文件本例介绍了几个Dreamweaver自带的无参数滤镜效果，他们的共同特点就是无需设置任何参数就可以直接使用，效果也很明显，在制作网

7、站时将这些CSS样式放在一个文件中，并在需要这些功能的网页中加载该CSS样式文件，就可以轻松的使用这些滤镜效果了，省去很多处理图片的时间。操作要点使用spay制作渐隐菜单F任务五打开源文件本例中使用的是DreamweaverCS3默认支持的7种效果中的两种，他们的用法基本上大同小异，但他们所能应用的元素却略有不同，下面列出各种效果的常用应用对象。●增大/收缩：可以应用在图层（DIV）、图片（IMAGE）元素上，效果为目标元素增大缩小。●挤压：可以应用在图层在图层（DIV）、图片（IMAGE）元素上，效果为目标元素被挤压成很小尺寸。●显示/渐隐：可以应用在图层（D

8、IV）、图片（IMAGE