《制作具有动态特效的网页教学课件.ppt》由会员分享，可在线阅读，更多相关《制作具有动态特效的网页教学课件.ppt（24页珍藏版）》请在三一文库上搜索。
1、华东师范大学计算中心,1,5.6 制作具有动态特效的网页,1. 层和时间轴动画 2. Dreamweaver的Behaviors（行为）概述,华东师范大学计算中心,2,1. 层和时间轴动画,在Dreamweaver中，使用时间轴（也被称为时间线），可以非常方便地制作网页中的浮动图标动画，不需要手动编写脚本代码 时间轴根据时间的推移移动层的位置，以此来实现动画效果 时间轴只能移动层，如果希望能使图像、文本或其他任何类型的内容移动，需要将这些内容插入层中，然后再使用时间轴创建层动画,华东师范大学计算中心,3,创建层动画,调出【时间轴面板】 打开菜单【窗口】【时间轴】，在下方显示出【时间轴面板】 创
2、建层 在创建层动画之前，需要先创建层，并在层中添加动画、文本等其他任何类型的内容 将层移至动画开始时应处的位置,华东师范大学计算中心,4,创建层动画,选中之前创建的层（选中层后，在层的周围将出现调整柄） 创建动画条 打开菜单【修改】【时间轴】【在时间轴上添加对象】，在时间轴的第一个通道中创建了一个动画条 默认动画为15帧，可根据需要拖曳调整长度,华东师范大学计算中心,5,创建层动画,沿直线运动动画 单击位于条末端的关键帧标记，使该关键帧处于选中状态，然后在页面中将层移至动画结束时应处于的位置 在【文档】窗口中将出现一条线，它表示着动画的移动轨迹 选中【时间轴】上自动播放和循环复选框，这样打开网
3、页时就自动、重复播放动画 F12观看效果,华东师范大学计算中心,6,创建层动画,沿曲线运动动画 创建关键帧 在前一步的基础上，如果要让层沿曲线移动，先选择其动画条，然后按住Ctrl键并单击动画条中的一个帧，这样就在单击的帧处添加了一个关键帧。 然后，选中该添加的关键帧，在【文档】窗口中将层移至另一个位置。移动轨迹就会变为曲线。,华东师范大学计算中心,7,创建层动画,沿复杂的曲线运动动画 如果希望为动画创建更为复杂的移动轨迹，更为有效的方法是记录拖动层时经过的轨迹 新建网页，重新创建层，但不再创建动画条，而是直接录制层路径 打开菜单【修改】【时间轴】【录制层路径】 直接拖曳层，产生复杂运动路径,
4、华东师范大学计算中心,8,创建层动画,注意 层动画是由HTML语言+脚本方式实现，因此不可能像Flash动画那样灵活 制作动画过程中尽量不要处理其他操作，防止脚本生成错误 动画不要太复杂，复杂的动画需要大量的脚本支持，不但增加网页大小，而且过多的脚本容易影响浏览速度,华东师范大学计算中心,9,2. Behaviors（行为）概述,行为是事件和该事件所触发的动作的组合 事件是由浏览器生成的消息，指示浏览该网页的用户执行了某种操作 动作由预先编写的JavaScript代码组成。这些代码执行特定的任务 Dreamweaver中预置了丰富的动作 在将行为附加到页元素之后，只要该元素发生了指定的事件，浏
5、览器就会调用与该事件关联的动作,华东师范大学计算中心,10,用层和行为制作动画示例,层的显示和隐藏动画示例,华东师范大学计算中心,11,用层和行为制作动画示例,创建层 创建两个层（名为Layer1和Layer2），并在层中插入两幅不同的图片 调整层 调整层和图片大小，使两个层大小相同，并使Layer2覆盖Layer1 如果移动层时，两个层不能覆盖，请检查【CSS面板】的【层】选项卡中【防止重叠】功能是否启用,华东师范大学计算中心,12,用层和行为制作动画示例,插入表格 在网页中插入一个2行1列的表格 在第一行输入文本“查看图片1”，对该文本创建无址链接 创建无址链接方法：选中该行文本，在【属性
6、检查器】的链接中输入“” 在第二行中输入文本“查看图片2”，对该文本创建无址链接,华东师范大学计算中心,13,用层和行为制作动画示例,添加行为 打开【窗口】【标签检查器】，在【浮动面板组】中显示【标签检查器】，单击【标签检查器】的【行为】选项卡，并使其显示所有事件 选中链接“查看图片1”，在【标签检查器】中可以看到该链接的所有事件，选中onClick事件 单击【添加行为】按钮，在弹出的预置行为中选择“显示-隐藏层”,华东师范大学计算中心,14,用层和行为制作动画示例,设置行为 在弹出的【显示-隐藏层】对话框中，设置层layer1为显示，层layer2为隐藏 再添加行为 再为链接“查看图片2”链
7、接的onClick事件设置动作 过程与上述相同，区别只在弹出的【显示-隐藏层】对话框中，设置层layer1为隐藏，层layer2为显示,华东师范大学计算中心,15,2. 网页布局规划,网页布局涉及的基本内容 页面大小 ,根据显示器分辨率选择，一定要适应当前主流分辨率 整体造型及配色方案 ,使用相应的造型及配色方案，可以给用户协调一致的感觉 页眉 ，通常定义网站标题、网站标志及广告等 页脚 ，通常包含网站设计信息、网站开发者信息及版权等 文本 ，文本是网页的主体 图片的使用 Flash动画 ，体积较小、画质清晰等优点，适合于网页 其他多媒体的使用,华东师范大学计算中心,16,网页布局的常用技术
8、层叠样式表（CSS） ，能精确指定某些标签的外观等属性，也可以自定义某种样式以供页面元素使用。借助CSS技术，可以非常方便的统一网站所有页面的风格。当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间 表格布局 ，使用表格可以非常方便的实现文字对齐、图文混排等布局问题。目前，大多数网站都使用了表格布局 框架布局 ，框架布局将不同对象放置在不同页面中加以处理 层布局 ，层就像是一个容器，各对象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能,华东师范大学计算中心,17,3. 导航设计,常见导航条的设计有两种形式：横导航条与竖导航条。 横导航
9、条，一般置于网页顶部，这类导航条较常见，多用于网站的首页导航。在其基础上，又发展出下拉菜单式导航系统 竖导航条，一般置于网页左侧，多用于条目较多的网页。树型导航系统在此基础上发展而来，多用于分层列表式结构,华东师范大学计算中心,18,4. 色彩搭配,光的三原色 (RGB) HSB颜色模型。H表示色相，S代表饱和度，B代表亮度 一般情况下，一个网站的标准色彩不宜超过3种，太多则让人觉得眼花缭乱,华东师范大学计算中心,19,网页色彩搭配技巧,用一种颜色 通过调整透明度或饱和度，产生新的颜色 色彩统一，有层次感 用两种互成对比色的色彩 用一个色系 背景色与前文的对比尽量大，也不以花纹复杂的图案作背景
10、 围绕网页的主题选颜色 背景色不要太深，显得过于厚重，但黑色背景衬托亮丽文本或图案，会有另类感觉,华东师范大学计算中心,20,5 网页浏览原理及发布,浏览器（browser） Web服务器（Web Server）,华东师范大学计算中心,21,网站的发布需要正确的安装和配置Web服务器 Windows中的Web服务器软件 Internet信息服务（Internet Information Services，IIS） 目前很多大型网站（如网易）都提供了个人主页服务，不再需要每位用户都配置Web服务器。用户只需要将制作完成的网页传输到网站的个人目录下，即可供他人访问,华东师范大学计算中心,22,In
11、ternet信息服务1,安装完IIS后，打开【开始】菜单【控制面板】【管理工具】【Internet 信息服务】 IIS中【默认Web站点】功能所使用的默认目录为C:Inetpubwwwroot 将制作好的整个网站文件夹（如mywebsite）复制到其默认目录下即可 或者可以在IIS中创建“虚拟目录”将其指向已经制作完成的网站文件夹,华东师范大学计算中心,23,Internet信息服务2,用户在浏览器的地址栏中输入：http:/222.204.252.240/mywebsite/index.htm即可访问mywebsite网站 222.204.252.240是Web服务器的IP地址 index.htm文件表示需要访问的网页文件。,华东师范大学计算中心,24,作业与实验内容,作业 07版教材P245, 5.5.3习题与思考 07版教材P248, 5.6.3习题与思考 实验 07版教材P371，实验5-3表单的实验 07版教材P371 实验5-3表单的实验 实验5-5、实验5-6、实验5-7、实验5-8,