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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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