制作具有动态特效的网页教学课件.ppt

《制作具有动态特效的网页教学课件.ppt》由会员分享，可在线阅读，更多相关《制作具有动态特效的网页教学课件.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、计算机技术应用计算机技术应用第五章第五章制作具有动态特效的网页教学课件 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望计算机技术应用计算机技术应用第五章第五章1.层和时间轴动画层和时间轴动画 在在Dreamweaver中，使用时间轴（也被称为时中，使用时间轴（也被称为时间线），可以非常方便地制作网页中的浮动图间线），可以非常方便地制作网页中的浮动图标动画，不需要手动编写脚本代码标动画，不需要手动编写脚本代码时间轴根据时间的推移移动层的位置，以此来时间轴根据时间的推

2、移移动层的位置，以此来实现动画效果实现动画效果时间轴时间轴只能移动层只能移动层，如果希望能使图像、文本，如果希望能使图像、文本或其他任何类型的内容移动，需要将这些内容或其他任何类型的内容移动，需要将这些内容插入层中，然后再使用时间轴创建层动画插入层中，然后再使用时间轴创建层动画2华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建层动画创建层动画调出【时间轴面板】调出【时间轴面板】打开菜单【窗口】打开菜单【窗口】【时间轴】，在下方显示出【时间轴】，在下方显示出【时间轴面板】时间轴面板】创建层创建层在创建层动画之前，需要先创建层，并在层中添加在创建层动画之前，需要

3、先创建层，并在层中添加动画、文本等其他任何类型的内容动画、文本等其他任何类型的内容将层移至动画开始时应处的位置将层移至动画开始时应处的位置 3华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章创建层动画创建层动画选中之前创建的层（选中层后，在层的周围将选中之前创建的层（选中层后，在层的周围将出现调整柄）出现调整柄）创建动画条创建动画条打开菜单【修改】打开菜单【修改】【时间轴】【时间轴】【在时间轴上添【在时间轴上添加对象】，在时间轴的第一个通道中创建了一个动加对象】，在时间轴的第一个通道中创建了一个动画条画条 默认动画为默认动画为15帧，可根据需要拖曳调整长度帧，可

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

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

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

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

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

9、技术应用第五章第五章用层和行为制作动画示例用层和行为制作动画示例层的显示和隐藏动画示例层的显示和隐藏动画示例10华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章用层和行为制作动画示例用层和行为制作动画示例创建层创建层创建两个层（名为创建两个层（名为Layer1和和Layer2），并在层中插），并在层中插入两幅不同的图片入两幅不同的图片调整层调整层调整层和图片大小，使两个层大小相同，并使调整层和图片大小，使两个层大小相同，并使Layer2覆盖覆盖Layer1如果移动层时，两个层不能覆盖，请检查【如果移动层时，两个层不能覆盖，请检查【CSS面面板】的【层】选项卡中【

10、防止重叠】功能是否启用板】的【层】选项卡中【防止重叠】功能是否启用 11华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章用层和行为制作动画示例用层和行为制作动画示例插入表格插入表格在网页中插入一个在网页中插入一个2行行1列的表格列的表格在第一行输入文本在第一行输入文本“查看图片查看图片1”，对该文本，对该文本创建无址链接创建无址链接创建无址链接方法：选中该行文本，在【属性检创建无址链接方法：选中该行文本，在【属性检查器】的链接中输入查器】的链接中输入“”在第二行中输入文本在第二行中输入文本“查看图片查看图片2”，对该文，对该文本创建无址链接本创建无址链接12华东

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

12、为中选择的预置行为中选择“显示显示-隐藏隐藏层层”各种事件添加行为删除行为13华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章用层和行为制作动画示例用层和行为制作动画示例设置行为设置行为在弹出的【显示在弹出的【显示-隐藏层】对话框中，设置层隐藏层】对话框中，设置层layer1为显示，层为显示，层layer2为隐藏为隐藏 再添加行为再添加行为再为链接再为链接“查看图片查看图片2”链接的链接的onClick事件设置动作事件设置动作过程与上述相同，区别只在弹出的【显示过程与上述相同，区别只在弹出的【显示-隐藏层】对话隐藏层】对话框中，设置层框中，设置层layer1为隐

13、藏，层为隐藏，层layer2为显示为显示14华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章2.网页布局规划网页布局规划 网页布局涉及的基本内容网页布局涉及的基本内容页面大小页面大小,根据显示器分辨率选择，一定要适应当前主根据显示器分辨率选择，一定要适应当前主流分辨率流分辨率 整体造型及配色方案整体造型及配色方案,使用相应的造型及配色方案，可使用相应的造型及配色方案，可以给用户协调一致的感觉以给用户协调一致的感觉页眉页眉，通常定义网站标题、网站标志及广告等，通常定义网站标题、网站标志及广告等 页脚页脚，通常包含网站设计信息、网站开发者信息及版，通常包含网站设计信

14、息、网站开发者信息及版权等权等文本文本，文本是网页的主体，文本是网页的主体 图片的使用图片的使用Flash动画动画，体积较小、画质清晰等优点，适合于网页，体积较小、画质清晰等优点，适合于网页 其他多媒体的使用其他多媒体的使用15华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章网页布局的常用技术网页布局的常用技术层叠样式表（层叠样式表（CSS），能精确指定某些标签的外观等，能精确指定某些标签的外观等属性，也可以自定义某种样式以供页面元素使用。借属性，也可以自定义某种样式以供页面元素使用。借助助CSS技术，可以非常方便的统一网站所有页面的风技术，可以非常方便的统一网

15、站所有页面的风格。当一个文件包含了所有的样式信息时，样式表还格。当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间可以减少下载的时间表格布局表格布局，使用表格可以非常方便的实现文字对齐、，使用表格可以非常方便的实现文字对齐、图文混排等布局问题。目前，大多数网站都使用了表图文混排等布局问题。目前，大多数网站都使用了表格布局格布局框架布局框架布局，框架布局将不同对象放置在不同页面中，框架布局将不同对象放置在不同页面中加以处理加以处理层布局层布局，层就像是一个容器，各对象放置在层中布，层就像是一个容器，各对象放置在层中布局。层不仅具有表格的平面布局功能，而且还可以在局。层不仅具有表格的平面

16、布局功能，而且还可以在垂直方向上相互重叠，具有空间排版的功能垂直方向上相互重叠，具有空间排版的功能16华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章3.导航设计导航设计 常见导航条的设计有两种形式：常见导航条的设计有两种形式：横导航条与竖导航条。横导航条与竖导航条。横导航条，一般置于网页顶部，横导航条，一般置于网页顶部，这类导航条较常见，多用于网站这类导航条较常见，多用于网站的首页导航。在其基础上，又发的首页导航。在其基础上，又发展出下拉菜单式导航系统展出下拉菜单式导航系统 竖导航条，一般置于网页左侧，竖导航条，一般置于网页左侧，多用于条目较多的网页。树型导多

17、用于条目较多的网页。树型导航系统在此基础上发展而来，多航系统在此基础上发展而来，多用于分层列表式结构用于分层列表式结构 17华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章4.色彩搭配色彩搭配 光的三原色光的三原色(RGB)HSB颜色模型。颜色模型。H表示色相，表示色相，S代表饱和度，代表饱和度，B代表亮度代表亮度一般情况下，一个网站的标准色彩不宜超过一般情况下，一个网站的标准色彩不宜超过3种，太多则让人觉得眼花缭乱种，太多则让人觉得眼花缭乱18华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章网页色彩搭配技巧网页色彩搭配技巧用一种

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

19、浏览器（浏览器（browser）Web服务器（服务器（Web Server）20华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章网站的发布需要正确的安装和配置网站的发布需要正确的安装和配置Web服务器服务器Windows中的中的Web服务器软件服务器软件Internet信息服务（信息服务（Internet Information Services，IIS）目前很多大型网站（如网易）都提供了个人主目前很多大型网站（如网易）都提供了个人主页服务，不再需要每位用户都配置页服务，不再需要每位用户都配置Web服务器。服务器。用户只需要将制作完成的网页传输到网站的个用户只需

20、要将制作完成的网页传输到网站的个人目录下，即可供他人访问人目录下，即可供他人访问 21华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章Internet信息服务信息服务1安装完安装完IIS后，打开【开始】菜单后，打开【开始】菜单【控制面板】【控制面板】【管理工具】【管理工具】【Internet 信息服务】信息服务】IIS中【默认中【默认Web站点】功能所使用的默认目录为站点】功能所使用的默认目录为C:Inetpubwwwroot将制作好的整个网站文件夹（如将制作好的整个网站文件夹（如mywebsite）复制到其）复制到其默认目录下即可默认目录下即可或者可以在或者可

21、以在IIS中创建中创建“虚拟目录虚拟目录”将其指向已经制作将其指向已经制作完成的网站文件夹完成的网站文件夹 22华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章Internet信息服务信息服务2用户在浏览器的地用户在浏览器的地址栏中输入：址栏中输入：http:/222.204.252.240/mywebsite/index.htm即可访问即可访问mywebsite网站网站222.204.252.240是是Web服务器的服务器的IP地址地址index.htm文件表示文件表示需要访问的网页文件。需要访问的网页文件。23华东师范大学计算中心华东师范大学计算中心计算机技术应用计算机技术应用第五章第五章作业与实验内容作业与实验内容作业作业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-824华东师范大学计算中心华东师范大学计算中心