第9章 图像和动画的制作与优化教学课件 网页制作基础教程(Dreamweaver CS6 第2版) .pptx
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《第9章 图像和动画的制作与优化教学课件 网页制作基础教程(Dreamweaver CS6 第2版) .pptx》由会员分享,可在线阅读,更多相关《第9章 图像和动画的制作与优化教学课件 网页制作基础教程(Dreamweaver CS6 第2版) .pptx(46页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第9章 图像和动画的制作与优化教学课件 网页制作基础教程(Dreamweaver CS6 第2版)工信版主 编 黄洪杰 电子工业出版社网页制作基础教程(Dreamweaver CS6 第2版)电子教案第9章 图像和动画的制作与优化 图像和动画在网页制作中非常重要,掌握图像和动画的制作与优化方法也就非常必要。项目1 图像的制作与优化 Fireworks是集创建、编辑和优化网页图形为一体的应用软件,它不仅可以创建与编辑位图和矢量图,而且可以通过修剪和优化图形图像来减小文件的大小。而在不影响图形图像质量的情况下,文件的体积越小,网页的下载速度就越快。这也是Fireworks大受欢迎的原因之一。子项目
2、1 Fireworks概述Fireworks拥有与Dreamweaver相似的操作界面,同样由编辑区域、属性面板和浮动面板等组成。单击菜单栏上的“文件”,在下拉菜单中选择“新建”命令,打开“新建文档”对话框,在“新建文档”对话框中,可以通过更改宽度和高度的值,来更改画布的大小,还可以对分辨率和画布颜色进行修改。最后单击“确定”。子项目1 Fireworks概述窗口左边的工具面板分为六个区域,分别有不同的功能。在该面板上集成了编辑图像所需的各种工具,只需要在面板上选择相应的工具就可以对矢量图、位图进行操作,这样就省去了在位图和矢量图之间的切换操作。子项目1 Fireworks概述 和Dreamw
3、eaver的属性面板一样,Fireworks的属性面板也是一个包含各种选项的动态面板。随着操作内容的变化,属性面板上的内容也随着发生相应的变化。子项目1 Fireworks概述在默认的情况下,Dreamweaver的面板组停放在工作区的右侧。我们可以取消面板组,以及叠放面板,排列面板顺序等操作。在该面板组中可以完成许多高性能操作。子项目1 Fireworks概述在窗口中间是画布,它是对图像进行绘制、修改或编辑的地方。从图中可以发现它提供了四种预览模式:原始、预览、2幅和4幅。具体的使用可以在下面的实例中给予说明。子项目1 Fireworks概述更改画布单击菜单栏上的“修改”,弹出其子菜单,然后
4、移动鼠标指针到画布上,在弹出其子菜单后,单击“画布大小”命令。在对话框中输入宽和高的值,单击“确定”按钮。子项目2 在Fireworks制作图片 子项目2 在Fireworks制作图片 在“工具”面板的“矢量”区中单击“文本”工具,然后在编辑区中单击鼠标,出现一个有光标闪动的文本框。在文本框中输入 文字。在“属性”面板中单击字体栏的下拉按钮,在下拉列表中选择“字体,然后单击字号栏右边的下拉按钮,拖动滑动指针,设置字号。在编辑区域单击鼠标,文字变成设置的效果。在“工具”面板的“选择”区中单击“选取”工具,然后在编辑区域中拖动文本框到合适的位置,使文字看起来更美观。选中文本框,打开“Asset”面
5、板的“样式”选项卡,最后在“样式”选项卡中选择一种样式,改变了样式后。子项目2 在Fireworks制作图片 在“页面和层和帧和历史”面板的“层”选项卡中单击“选项”按钮,在弹出的菜单中选中“新建层”命令。在弹出的“新建层”对话框中输入名称,也可以采用默认的名字,单击“确定”按钮,完成新建层命令。子项目2 在Fireworks制作图片 选中新建的层2,在“工具”面板的“矢量”区中单击“文本”工具,然后在编辑区中单击鼠标,出现一个有光标闪动的文本框,注意不要在“我 我班”的文本框中单击,这时可以发现在“层2”下出现一个可编辑文本图标。输入文字,如图。子项目2 在Fireworks制作图片 单击菜
6、单栏上的“文件”,在弹出的下拉菜单中单击“保存”命令,对文件进行保存,注意保存的文件名类型为“PNG”,。选择字体的颜色为红色,调整该文本框的位置,完成图片的制作。子项目2 在Fireworks制作图片 子项目3 Fireworks中优化图片 除了可以直接制作图片以外,Fireworks还可以对已有的图片进行优化,使图片在不影响视觉效果的情况下,体积更小,更有利于网络传输。单击菜单栏上的文件,打开“文件”菜单,在下拉菜单中单击“打开”命令,在“打开”对话框中,单击“查找范围”框,在下拉列表中找到存放图片文件的文件夹,然后选种要优化的文件,最后单击“打开”按钮。子项目3 Fireworks中优化
7、图片 在窗口右边的面板组中单击“优化”面板的“小三角”按钮,将“优化”面板展开。在“优化”面板中单击“设置”框,在下拉列表中选择“GIF接近256”,将图片优化成GIF文件,图片颜色为256色。子项目3 Fireworks中优化图片单击文件菜单,在下拉菜单中选择“导出”命令,打开“导出”对话框。在“导出”对话框中输入文件名,单击“保存”命令。打开保存文件的文件夹,可以发现优化的效果是非常明显的。网站的制作过程一般可分为网页组件制作准备、网页制作和网页管理三个阶段。在网页组件制作准备阶段主要使用Fireworks对图片进行处理,其他两个阶段主要采用Dreamweaver 进行操作。通过两个软件的
8、整合可以实现网站的决大部分操作。除了这种整合应用以外,在Dreamweaver中随时可以打开Fireworks,对网页中的图片进行编辑和优化。子项目4 Fireworks与Dreamweaver 整合应用子项目4 Fireworks与Dreamweaver 整合应用 在Dreamweaver窗口中,选中图片,然后在“属性”面板中单击“编辑”按钮,打开Fireworks。在Fireworks窗口中可以发现,图形文件被打开,特别是图片编辑区有“编辑自Dreamwea”的字样,表明该图片来自Dreamweaver。对图片进行编辑或优化后,单击“完成”按钮,Fireworks编辑窗口自动关闭,同时Fi
9、reworks程序窗口最小化。Dreamweaver窗口中图片显示编辑后的样子。项目2 动画的制作与优化 现在的网络可以说是Flash时代,越来越多的人喜欢Flash动画;越来越多的网站使用Flash制作的动画。不知Flash为何物,会直接被人认为是网络盲,甚至是电脑盲。Flash功能强大,不仅仅是制作动画,甚至有人直接用它来制作网页。特别值得一提的是,它与Dreamweaver、Fireworks等软件整合使用天衣无缝。子项目2 Flash简介 Flash为广大用户提供了三种不同的使用模式,我们多采用一般用户模式,设计者模式是专为动画设计师准备的;而开发者模式是给程序开发人员使用的。采用不同
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第9章 图像和动画的制作与优化教学课件 网页制作基础教程Dreamweaver CS6 第2版 图像 动画 制作 优化 教学 课件 网页 基础教程 Dreamweaver
![提示](https://www.taowenge.com/images/bang_tan.gif)
链接地址:https://www.taowenge.com/p-90570916.html
限制150内