网页设计与制作课件第10章
合集下载
网页设计与制作课件第10章
第10 章 声音和元件及其应用
10.1声音的导入和编辑 10.2 元件和实例及其应用 10.3 元件的应用实例 10.4视频的导入与编辑 10.5 本章小结
本章重点：
了解声音的编辑和应用的方法 掌握元件和实例的基本概念 掌握各类元件的创建、编辑和应用的方法
10.1声音的导入和编辑
10.1.1 声音的导入、添加和停止
图10-5 动画中的声音层
（3）选中起始关键帧，在【属性】面板中，对声 音的属性进行设置。在【声音】下拉列表中选择 与起始关键帧处相同的声音文件名。在【效果】 下拉列表中选择要对这段声音设置的效果，并可 根据需要单击【编辑】声音封套按钮，打开【编 辑封套】窗口，对声音进行编辑。在【同步】下 拉列表中选择【事件】或【开始】选项。 （4）选中结束关键帧，在【属性】面板中，对声 音的属性进行设置。在【声音】下拉列表中选择 与结束关键帧处相同的声音文件名。在【同步】 下拉列表中选择【停止】选项。 在动画播放时，每当播放到起始关键帧处，声音 就会按设置的效果播放；播放到结束关键帧处， 声音就会停止播放。
（4）根据所选的压缩选项，进行相关的导出设置。 （5）单击【测试】按钮，可以播放声音，试听声 音效果。单击【停止】按钮，可以停止声音测试。 （6）根据试听的声音效果，调整声音的导出设置， 直到获得理想的声音品质为止。 （7）设置完毕，单击【确定】按钮确认设置。 在【声音属性】对话框中,设置声音文件压缩格式 的方法如下。
图10-4 【ADPCM】格式的属性设置
1.设置【默认】的压缩选项 选择【默认】压缩格式，可以看到【声音属 性】对话框中无任何可选的设置，在导出动画时 可用【文件】|【发布设置】对话框中的相关选项、 参数作为声音文件的最终导出设置。 2.设置【ADPCM】的压缩选项 选择【ADPCM】的压缩格式，可以看到如 图10-4所示的【声音属性】对话框，其中属性设 置方法如下。 选中【预处理】复选框，可以将混合立体声转换 成单声道。如果声音文件已经是单声道的了，那 么此选项将不起作用。
10.1声音的导入和编辑 10.2 元件和实例及其应用 10.3 元件的应用实例 10.4视频的导入与编辑 10.5 本章小结
本章重点：
了解声音的编辑和应用的方法 掌握元件和实例的基本概念 掌握各类元件的创建、编辑和应用的方法
10.1声音的导入和编辑
10.1.1 声音的导入、添加和停止
图10-5 动画中的声音层
（3）选中起始关键帧，在【属性】面板中，对声 音的属性进行设置。在【声音】下拉列表中选择 与起始关键帧处相同的声音文件名。在【效果】 下拉列表中选择要对这段声音设置的效果，并可 根据需要单击【编辑】声音封套按钮，打开【编 辑封套】窗口，对声音进行编辑。在【同步】下 拉列表中选择【事件】或【开始】选项。 （4）选中结束关键帧，在【属性】面板中，对声 音的属性进行设置。在【声音】下拉列表中选择 与结束关键帧处相同的声音文件名。在【同步】 下拉列表中选择【停止】选项。 在动画播放时，每当播放到起始关键帧处，声音 就会按设置的效果播放；播放到结束关键帧处， 声音就会停止播放。
（4）根据所选的压缩选项，进行相关的导出设置。 （5）单击【测试】按钮，可以播放声音，试听声 音效果。单击【停止】按钮，可以停止声音测试。 （6）根据试听的声音效果，调整声音的导出设置， 直到获得理想的声音品质为止。 （7）设置完毕，单击【确定】按钮确认设置。 在【声音属性】对话框中,设置声音文件压缩格式 的方法如下。
图10-4 【ADPCM】格式的属性设置
1.设置【默认】的压缩选项 选择【默认】压缩格式，可以看到【声音属 性】对话框中无任何可选的设置，在导出动画时 可用【文件】|【发布设置】对话框中的相关选项、 参数作为声音文件的最终导出设置。 2.设置【ADPCM】的压缩选项 选择【ADPCM】的压缩格式，可以看到如 图10-4所示的【声音属性】对话框，其中属性设 置方法如下。 选中【预处理】复选框，可以将混合立体声转换 成单声道。如果声音文件已经是单声道的了，那 么此选项将不起作用。
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
网页制作教程第10课flash精品PPT课件
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
本章要点
➢创建元件 ➢“库”面板 ➢创建和编辑元件实例
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
元件的创建
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
复制使用某对象的效果
复制使用某对象的效果
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
元件的概念
➢在Flash中可以创建的元件分为图形元件、 按钮元件和影片剪辑元件3种类型。元 件中的动画可以独立于主场景中的动画 进行播放。由于元件具有可以反复使用 的特点，因而不必重复制作相同的部分， 从而大大提高了工作效率。在Flash中使 用元件主要有以下优点：
图形元件
➢图形元件用于静态图像，还可用于创建连接 到时间轴的可以重复使用的动画片段使图形 元件与时间轴同步运行。但交互式控件和声 音在图形元件的动画序列中不起作用。
➢图形元件是Flash电影中最基本的元件，主要 用于建立和储存独立的图形内容，也可以用 来制作动画，但当把图形元件拖到舞台或其 他元件中时，不能在“属性”面板中设置其 实例名称，也不能为其添加脚本。
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作-PPT课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
网页设计与制作课件第10章
可以结合键盘上的【Shift】或【Ctrl】键同时选中多个文件或文件夹。例如， 要选择一组连续的文件，可按住【Shift】键，然后分别单击第一个和最后一个 文件。要选择一组不连续的文件，可按住【Ctrl】键，然后分别单击各个文件。
项目十 测试和发布网站
4
步骤 02
在选中的文件或文件夹上单击鼠标右键，在 弹出的快捷菜单中选择“检查链接”>“选择 文件/文件夹”菜单，如右图所示。
目录页
CONTENTS PAGE
项目十 测试和发布网站
案例一 案例二
申请域名和虚拟空间——域名和虚拟空间
案例三
发布企业网站——发布网站
案例说明
为确保各网页在浏览器中均能正常显示，各链接 均能正常跳转，在制作好网站后，还要对站点进 行本地测试。本案例主要学习网页链接的检查及 修复等。
项目十 测试和发布网站
检查结果同样显示在文档窗口下方的“链接 检查器”面板中，如下图所示。
在“链接检查器”面板中单击 按 钮，然后在下拉菜单中选择“检查 整个当前本地站点的链接”，同样 可以检查站点范围的链接。
项目十 测试和发布网站
6
二、修复网页链接
修复网页链接主要是指为有问题的链接重新设置链接文件，或找到链接文件，此处主要指前者。
务器பைடு நூலகம்能。
项目十 测试和发布网站
15
案例实施
步骤 01
步骤 06
项目十 测试和发布网站
10
案例实施
步骤 07
一、网页、网站和主页
在“链接检查器”面板“显示”下拉列表中选择“孤立的文件”，则检查结果中显示网 站中所有的孤立文件，对这些孤立文件进行逐一检查，看是否有需要链接到其他网页的， 如下图所示。
《网页设计与制作实例教程》课件第10章
第10章
2020/6/30
内容提要
在网页设计中，分静态网页和动态网页。对于HTML格式的 网页，通常被称为“静态网页”，早期的网站一般都是由静态网 页制作的，更新起来较为麻烦。动态网页则是含有后台数据库， 可以进行交互，容易更新的网页。
第10章 网页设计实例
教学目录
01 制作静态网页
02
制作动态网页
D．建立网站前必须要建立站点，修改某网页内容时，也必须打开站点，然后修改站点
内的网页
4．在Dreamweaver 中，关于插入到页面中的Flash 动画说法错误的是（ ）。
A．.fla文件尚未在Flash 中发布，不能导入到Dreamweaver 中
B．Flash 在Dreamweaver 的编辑状态下可以预览动画
第10章 网页设计实例
10.2 制作动态网页
教学内容
10.2.3 制作前台网页
标准的动态网站一般分为2个部分，一部分网页可展示给浏览者，也 就是我们所说的前台网页，而另一部分则用于网站管理（网站后台网页） ，这部分内容没有授权许可，是不可进行浏览。
实例7 制作“花季文学”网首页
“花季文学”网的首页是用来显示数据库中文章的标题，完成后如下 图所示。
</tr> <tr>
<td>Dreamweaver网页设计</td> <td>2007年9月1日</td> <td>302</td> </tr> </table> </body> A．该表格有2行、3列 B．该表格有3行、3列 C．该表格有3行、2列 D．该表格有2行、2列
教学内容
2020/6/30
内容提要
在网页设计中，分静态网页和动态网页。对于HTML格式的 网页，通常被称为“静态网页”，早期的网站一般都是由静态网 页制作的，更新起来较为麻烦。动态网页则是含有后台数据库， 可以进行交互，容易更新的网页。
第10章 网页设计实例
教学目录
01 制作静态网页
02
制作动态网页
D．建立网站前必须要建立站点，修改某网页内容时，也必须打开站点，然后修改站点
内的网页
4．在Dreamweaver 中，关于插入到页面中的Flash 动画说法错误的是（ ）。
A．.fla文件尚未在Flash 中发布，不能导入到Dreamweaver 中
B．Flash 在Dreamweaver 的编辑状态下可以预览动画
第10章 网页设计实例
10.2 制作动态网页
教学内容
10.2.3 制作前台网页
标准的动态网站一般分为2个部分，一部分网页可展示给浏览者，也 就是我们所说的前台网页，而另一部分则用于网站管理（网站后台网页） ，这部分内容没有授权许可，是不可进行浏览。
实例7 制作“花季文学”网首页
“花季文学”网的首页是用来显示数据库中文章的标题，完成后如下 图所示。
</tr> <tr>
<td>Dreamweaver网页设计</td> <td>2007年9月1日</td> <td>302</td> </tr> </table> </body> A．该表格有2行、3列 B．该表格有3行、3列 C．该表格有3行、2列 D．该表格有2行、2列
教学内容
教学课件电子商务网页设计与制作10.2任务一制作电商网站轮播图动画
01 打开一个素材文件，浏览页面效果。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。
网页设计与制作PPT课件
8/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
菜单栏
工具箱
起始页
功能面板组合
属性面板
返回
10.1.2 制作漂亮的广告词
目标案例
10.1.2 制作漂亮的广告词
使用Fireworks制作漂亮的广告词文字“保护水资源，生命真永远。”，广 告词文字效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：打开Fireworks 8的操作界面，在“起始页”对话框中单击 “Fireworks文件”选项，打开“新建文档”对话框，或执行【文件】→【新建】 菜单命令打开“新建文档”对话框，对新建文档内容进行设置 。
制作一个由字母“A”变为字母“B”的变形动画。
目标案例
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：执行【文件】→【新建】菜单命令，新建一个文档窗口，利用“文 本工具” 按钮在舞台上输入一个文字“A”。
步骤2：执行【修改】→【分离】菜单命令，将文本转换为矢量图形 。 步骤3：在“时间轴”面板的第45帧处插入“关键帧”，然后在舞台中按照 步骤1和步骤2制作矢量图形“B”。 步骤4：在“时间轴”面板控制区第1关键帧处单击鼠标左键，在“属性”面 板的“补间”下拉列表中选择“形状” 。 步骤5：执行【控制】→【播放】菜单命令或按【Enter】键，就会看到一个 字母“A”由左向右移动变成字母“B”。保存动画。
Fireworks与Dreamweaver互动应用
• 10.2 动画的制作和优化
•
10.2.1 Flash简介
•
10.2.2 创建运动动画
•
10.2.3 变形动画
•
10.2.4 Flash与Dreamweaver互动应用
10.1.1 Fireworks 8 简介
知识点评
Fireworks是集创建、编辑和优化图像为一体的软件，它不仅可以创建和编辑位图和
矢量图，而且可以优化图像。
运行Fireworks 8以后看到操作界面，其顶部是菜单栏，包含了该软件中大部分的命
令选项。左侧是工具箱，其中的按钮用来对图形、图像、颜色、文本等对象进行编辑和处
理。中间是“起始页”对话框，右侧是功能面板的组合，底部是“属性”面板，用来设置
当前所编辑对象的各项属性参数。如下图所示。
上一页 下一页 返回
知识点评
制作运动动画时要注意如下几点。 （1）动画的帧频是每秒12帧播放。 （2）在制作运动动画过程中，必须把舞台中的素材转换成元件。 （3）在“时间轴”面板控制区内，关键帧之间的中间帧是软件自动添加。 （4）“.fla”是Flash动画的源文件格式。
上一页 返回
10.2.3 变形动画
本章任务
使用Fireworks制作广告词和像框 使用Fireworks对图像进行优化 使用Flash制作运动动画、变色动画和变形动画
关闭
本章内容
• 10.1 图像的制作与优化
•
10.1.1 Fireworks 8 简介
•
10.1.2 制作漂亮的广告词
•
10.1.3 Fireworks中的图像优化
•
在“起始页”对话框中单击 “Flash文档”项，或执行【文件】→【新建】 菜单命令打开“新建文档”对话框，然后在对话框中单击“确定”按钮，便打开 一个场景文档窗口，在该窗口中包含时间轴和舞台。如下图所示。
时间轴面板
动画是由一帧一帧的画面形成的，帧是动画最基本的单元，因此简单地说， 动画中单幅的画面就是帧。在Flash中只要决定动画对象在运动过程中的关键状 态。中间帧是由Flash软件自动计算得出。在Flash中可以将动画分为4大类：运 动动画、变形动画、变色动画和逐帧动画。
步骤2：单击“确定”按钮后，打开新建文档窗口 。 步骤3：在Fireworks 8操作界面的左侧工具箱中单击“文本”工具按钮 ， 在新建文档的窗口中单击鼠标左键，输入文本 。 步骤4：选中输入文字，在“属性”面板的“字体”下拉列表中选择“华文 新魏”，在“大小”选项文本框内输入“62”。在“颜色”调色板中选择黑色 “#000000”，并且单击字体加粗按钮 ，其他选项为默认设置即可 。 步骤5：选中画布上的文本，在操作界面右侧的“资源”/“样式”面板中，单 击其中一个样式例如Style 25 。
变形动画和运动动画的区别是，变形动画只能是矢量图形，而不能将矢量 图形转换为元件。
上一页 下一页 返回
10.2.4 Flash与Dreamweaver互动应用 知识点评
在Dreamweaver中可以直接调用Flash对网页中插入的图像或动画进行编辑。 在“插入”面板中单击“媒体”按钮，再单击“Flash”选项，就可以调用Flash 软件，如下图所示。
下一页 返回
操作步骤
步骤1：打开Fireworks 8的操作界面，执行【文件】→【打开】菜单命令 。 步骤2：在“打开”对话框中，选中要优化的图像，单击“打开”按钮 。 步骤3：在工作窗口中图像被打开，执行【窗口】→【优化】菜单命令，或 快捷键【F6】，打开“优化”面板 。 步骤4：在“优化”面板中单击第一个下拉列表框，在下拉列表中选择“GIF 接近网页256色” 。 步骤5：在“优化”面板中有许多参数值，单击各个设置栏的下拉列表项目， 可以调整优化效果 。 步骤6：执行【文件】→【导出】菜单命令，打开“导出”对话框，在“导 出”对话框中输入文件名，单击“导出”命令将图像导出 。 步骤7：打开导出文件的文件夹，可以发现优化后的图片大小为114K，而优 化前的大小为619K，可见优化效果对制作网页上的图像是非常重要的。
在导出图像时，“GIF”、“GIF动画”和“JPEG”这3种是常用的，要根据 不同的图像来选择，一般透明图像选择GIF格式，照片选择JPEG格式。
上一页 返回
10.1.3 Fireworks中的图像优化
目标案例
在制作网站主页广告条进行优化，观察图像优化后的效果，如下图所示。
打 开 源 文 件
最 终 效 果 预 览
上一页 下一页 返回
操作步骤
步骤6：打开“转换为元件”对话框，在“名称”文本框输入“圆”，“类 型”选项中选择“图形”，单击“确定”按钮完成转换。
步骤7：在“时间轴”面板中的第45帧处单击鼠标右键，在弹出的快捷菜单 中选择“插入关键帧”。
步骤8：在第45帧插入关键帧，并将舞台中的圆平移至右边，然后使用工具 箱中的“任意变形工具”按钮 将圆缩小 。
1．选中
2．单击 下一页 返回
知识点评
在Fireworks窗口中可以看见，在Dreamweaver选中的图像被打开了，图像 编辑区有“编辑自Dreamweaver”字样，表明该图像来自Dreamweaver。对图像 进行编辑和优化后，单击“完成”按钮，Fireworks编辑窗口也自动关闭。如图 10-22所示。
3．单击
上一页 返回
10.2.1 Flash简介
知识点评
作为同一个公司的产品，Flash拥有Dreamweaver和Fireworks相似的界面。 这为我们熟悉和使用Flash软件提供了很大的帮助。
运行Flash 8后，其操作界面如下图所示。
菜单栏
工具箱
起始页
功能面板组 合
属性面板
下一页 返回
知识点评
上一页 返回
10.2.2 创建运动动画
制作运动的圆，如下图所示。
目标案例
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：在Flash 8中，执行【文件】→【新建】菜单命令，打开“新建文档” 对话框，单击“确定”按钮 。
步骤2：执行【修改】→【文档】菜单命令，或单击“属性”面板“大小” 右边的
按钮，打开“文档属性”对话框 。 步骤3：在“文档属性”对话框中的参数都是默认参数，可根据自己需要将 “宽”和“高”改为“600像素”和“150像素”，然后单击“确定”按钮 。 步骤4：利用工具箱中的“椭圆”工具 按钮，在舞台中画一个圆形，然后 利用“文本”工具 按钮在圆形上输入一个文字 。 步骤5：单击工具箱中的“选择工具” 按钮，将舞台中的图形和文字全部 选中，然后执行【修改】→【转换为元件】菜单命令 。
步骤9：在“时间轴”面板控制区第1关键帧处单击鼠标左键，在“属性”面 板中“补间”下拉列表中选择“动画” 。
步骤10：为了使圆形滚动起来，单击第1关键帧，在“属性”面板中“旋转” 下拉列表中选择“顺时针”选项，在其右边文本框输入“5”次 。
步骤11：执行菜单栏中的【控制】→【播放】命令或按【Enter】键，就会 看到一个渐小的圆由左向右边滚动。
上一页 返回
10.1.4 Fireworks与Dreamweaver互动应用 知识点评
在Dreamweaver操作中，随时可以打开Fireworks，对网页中的图像进行编辑 和优化时，选中Dreamweaver窗口中的图像，然后在“属性”面板中单击“编辑” 右边按钮 ，即可打开Fireworks。如下图所示。
1．选择Flash
下一页 返回
知识点评
单击“Flash”选项后，弹出“选择文件”对话框，在该对话框中选中要编辑 的动画文件，单击“确定”按钮，如下图所示。
2.选择文件
3.单击
选中插入的Flash文件后，单击“属性”面板中的“编辑”
按钮，可
以打开Flash软件进行编辑，同时动画文件处于编辑状态，如下图所示。
上一页 下一页 返回
本章小结
4.单击
本章讲述了Fireworks 8的工具、属性和样式的使用，重点讲解了图像的优 化。在Flash 8 中讲解了图形的创建、编辑，介绍了运动动画和变形动画的制作 过程。希望通过本章的讲解，帮助大家掌握Fireworks 8和Flash 8的基本操作。
上一页 返回
对话框 。
步骤10：在“图像预览”对话框的“格式”下拉列表中选择“JPEG”，在