5.6 制作具有动态特效的网页 1. 层和时间轴动画 2. Dreamweaver的Behaviors（行为）概述 华东师范大学计算中心

1. 层和时间轴动画 在Dreamweaver中，使用时间轴（也被称为时间线），可以非常方便地制作网页中的浮动图标动画，不需要手动编写脚本代码 时间轴根据时间的推移移动层的位置，以此来实现动画效果 时间轴只能移动层，如果希望能使图像、文本或其他任何类型的内容移动，需要将这些内容插入层中，然后再使用时间轴创建层动画 华东师范大学计算中心

创建层动画 调出【时间轴面板】 创建层 打开菜单【窗口】【时间轴】，在下方显示出【时间轴面板】 在创建层动画之前，需要先创建层，并在层中添加动画、文本等其他任何类型的内容 将层移至动画开始时应处的位置 华东师范大学计算中心

创建层动画 选中之前创建的层（选中层后，在层的周围将出现调整柄） 创建动画条 打开菜单【修改】【时间轴】【在时间轴上添加对象】，在时间轴的第一个通道中创建了一个动画条 默认动画为15帧，可根据需要拖曳调整长度 华东师范大学计算中心

创建层动画 沿直线运动动画 单击位于条末端的关键帧标记，使该关键帧处于选中状态，然后在页面中将层移至动画结束时应处于的位置 在【文档】窗口中将出现一条线，它表示着动画的移动轨迹 选中【时间轴】上自动播放和循环复选框，这样打开网页时就自动、重复播放动画 F12观看效果 移动轨迹 华东师范大学计算中心

创建层动画 沿曲线运动动画 创建关键帧 在前一步的基础上，如果要让层沿曲线移动，先选择其动画条，然后按住Ctrl键并单击动画条中的一个帧，这样就在单击的帧处添加了一个关键帧。 然后，选中该添加的关键帧，在【文档】窗口中将层移至另一个位置。移动轨迹就会变为曲线。 华东师范大学计算中心

创建层动画 沿复杂的曲线运动动画 如果希望为动画创建更为复杂的移动轨迹，更为有效的方法是记录拖动层时经过的轨迹 新建网页，重新创建层，但不再创建动画条，而是直接录制层路径 打开菜单【修改】【时间轴】【录制层路径】 直接拖曳层，产生复杂运动路径 华东师范大学计算中心

创建层动画 注意 层动画是由HTML语言+脚本方式实现，因此不可能像Flash动画那样灵活 制作动画过程中尽量不要处理其他操作，防止脚本生成错误 动画不要太复杂，复杂的动画需要大量的脚本支持，不但增加网页大小，而且过多的脚本容易影响浏览速度 华东师范大学计算中心

2. Behaviors（行为）概述 行为是事件和该事件所触发的动作的组合 事件是由浏览器生成的消息，指示浏览该网页的用户执行了某种操作 动作由预先编写的JavaScript代码组成。这些代码执行特定的任务 Dreamweaver中预置了丰富的动作 在将行为附加到页元素之后，只要该元素发生了指定的事件，浏览器就会调用与该事件关联的动作 华东师范大学计算中心

用层和行为制作动画示例 层的显示和隐藏动画示例 华东师范大学计算中心

用层和行为制作动画示例 创建层 调整层 创建两个层（名为Layer1和Layer2），并在层中插入两幅不同的图片 如果移动层时，两个层不能覆盖，请检查【CSS面板】的【层】选项卡中【防止重叠】功能是否启用 华东师范大学计算中心

用层和行为制作动画示例 插入表格 在网页中插入一个2行1列的表格 在第一行输入文本“查看图片1”，对该文本创建无址链接 创建无址链接方法：选中该行文本，在【属性检查器】的链接中输入“＃” 在第二行中输入文本“查看图片2”，对该文本创建无址链接 华东师范大学计算中心

用层和行为制作动画示例 添加行为 打开【窗口】【标签检查器】，在【浮动面板组】中显示【标签检查器】，单击【标签检查器】的【行为】选项卡，并使其显示所有事件 选中链接“查看图片1”，在【标签检查器】中可以看到该链接的所有事件，选中onClick事件 单击【添加行为】按钮，在弹出的预置行为中选择“显示-隐藏层” 各种事件 添加行为 删除行为 华东师范大学计算中心

用层和行为制作动画示例 设置行为 再添加行为 在弹出的【显示-隐藏层】对话框中，设置层layer1为显示，层layer2为隐藏 再为链接“查看图片2”链接的onClick事件设置动作 过程与上述相同，区别只在弹出的【显示-隐藏层】对话框中，设置层layer1为隐藏，层layer2为显示 华东师范大学计算中心

2. 网页布局规划 网页布局涉及的基本内容 页面大小 ,根据显示器分辨率选择，一定要适应当前主流分辨率 整体造型及配色方案 ,使用相应的造型及配色方案，可以给用户协调一致的感觉 页眉 ，通常定义网站标题、网站标志及广告等 页脚 ，通常包含网站设计信息、网站开发者信息及版权等 文本 ，文本是网页的主体 图片的使用 Flash动画 ，体积较小、画质清晰等优点，适合于网页 其他多媒体的使用 华东师范大学计算中心

网页布局的常用技术 层叠样式表（CSS） ，能精确指定某些标签的外观等属性，也可以自定义某种样式以供页面元素使用。借助CSS技术，可以非常方便的统一网站所有页面的风格。当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间 表格布局 ，使用表格可以非常方便的实现文字对齐、图文混排等布局问题。目前，大多数网站都使用了表格布局 框架布局 ，框架布局将不同对象放置在不同页面中加以处理 层布局 ，层就像是一个容器，各对象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能 华东师范大学计算中心

3. 导航设计 常见导航条的设计有两种形式：横导航条与竖导航条。 横导航条，一般置于网页顶部，这类导航条较常见，多用于网站的首页导航。在其基础上，又发展出下拉菜单式导航系统 竖导航条，一般置于网页左侧，多用于条目较多的网页。树型导航系统在此基础上发展而来，多用于分层列表式结构 华东师范大学计算中心

4. 色彩搭配 光的三原色 (RGB) HSB颜色模型。H表示色相，S代表饱和度，B代表亮度 一般情况下，一个网站的标准色彩不宜超过3种，太多则让人觉得眼花缭乱 华东师范大学计算中心

网页色彩搭配技巧 用一种颜色 用两种互成对比色的色彩 用一个色系 背景色与前文的对比尽量大，也不以花纹复杂的图案作背景 围绕网页的主题选颜色 通过调整透明度或饱和度，产生新的颜色 色彩统一，有层次感 用两种互成对比色的色彩 用一个色系 背景色与前文的对比尽量大，也不以花纹复杂的图案作背景 围绕网页的主题选颜色 背景色不要太深，显得过于厚重，但黑色背景衬托亮丽文本或图案，会有另类感觉 华东师范大学计算中心

5 网页浏览原理及发布 浏览器（browser） Web服务器（Web Server） 华东师范大学计算中心

网站的发布需要正确的安装和配置Web服务器 Windows中的Web服务器软件 Internet信息服务（Internet Information Services，IIS） 目前很多大型网站（如网易）都提供了个人主页服务，不再需要每位用户都配置Web服务器。用户只需要将制作完成的网页传输到网站的个人目录下，即可供他人访问 华东师范大学计算中心

Internet信息服务1 安装完IIS后，打开【开始】菜单【控制面板】【管理工具】【Internet 信息服务】 IIS中【默认Web站点】功能所使用的默认目录为C:\Inetpub\wwwroot 将制作好的整个网站文件夹（如mywebsite）复制到其默认目录下即可 或者可以在IIS中创建“虚拟目录”将其指向已经制作完成的网站文件夹 华东师范大学计算中心

Internet信息服务2 用户在浏览器的地址栏中输入：http://222.204.252.240/mywebsite/index.htm即可访问mywebsite网站 222.204.252.240是Web服务器的IP地址 index.htm文件表示需要访问的网页文件。 华东师范大学计算中心

作业与实验内容 作业 实验 07版教材P245, 5.5.3习题与思考 07版教材P248, 5.6.3习题与思考 实验5-3表单的实验 实验5-5、实验5-6、实验5-7、实验5-8 华东师范大学计算中心