《中职—网页设计与制作 课件第7章》由会员分享，可在线阅读，更多相关《中职—网页设计与制作 课件第7章（53页珍藏版）》请在金锄头文库上搜索。
1、第7章 网页图形处理工具FireworkslAdobe Fireworks是一款专为网页图形设计的图形编辑软件，它大大简化了网页图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks可以轻松地完成图片制作、大图优化、切片等工作，是创建与优化Web图像和快速构建网站与Web界面原型的理想工具。本章节具体内容包括：7.1 Fireworks的操作界面的操作界面7.2 公司网站公司网站Logo和按钮设计和按钮设计7.3 公司网站的图片处理公司网站的图片处理7.4 公司公司“周年大酬宾周年大酬宾”整图网页设计整图网页设计7.1 Fireworks基本操作l任务导入对Firework
2、s这样一个网页图形处理软件，如何使用它制作网页中的Logo、按钮以及处理其他图片呢？小赵感觉有点无从下手。老张告诉他不要着急，“工欲善其事，必先利其器”，首先就是熟悉个软件的基本操作。l学习目标： 1）了解Fireworks工作界面的布局。 2）能熟练建立、保存Fireworks文件。 7.1.1 启动Fireworks l在Windows桌面上，双击Fireworks的快捷方式图标，即可启动Fireworks。启动后的界面如图所示。 Fireworks启动后的界面 7.1.2 Fireworks工作界面 l启动Fireworks后，系统将弹出Fireworks工作窗口，并自动建立一个名为“未
3、命名-1”的空文档，如图7-4所示。其操作界面由标题栏、菜单栏、工具栏、文档窗口、面板组、属性栏等部分组成。 Fireworks工作界面 7.1.3 保存Fireworks文档 l完成Fireworks编辑后，同其他软件一样，单击“文件”菜单“保存”或“另存为”项。l如果选择“保存”，只能存为Fireworks可编辑的PNG格式。l如果选择“另存为”，则可以保存为其他支持的格式，如常见的GIF格式、JEPG格式等。7.1 思考与练习 l1. 建立一个Fireworks新文档有哪几种方法？l2. 打开Fireworks，进行下面的操作：1.文件建立：进入Fireworks，建立一个新文档（500
4、300）。2.使用工具栏的文本工具写下你的班级和姓名，字体格式为加粗、黑体、25号字，颜色为红色。3.用你的姓名命名保存该文档（如：张三.png），要求保存为Fireworks专用格式的png，并另存为普通PNG格式，然后比较这两个文件的大小。4.试着保存为其他类型的图片格式，如常用的GIF格式、JEPG格式、BMP格式等，并观察它们的图片质量和大小。7.2 网站Logo、按钮和静态Banner设计 l 任务导入：如果在网站中只有文字做链接的话太单调了，小赵想为网站设计一个Logo及一些漂亮的按钮图标。本任务将学习在Fireworks中制作Logo、按钮、静态Banner的制作方法。l 学习目
5、标： 1）掌握Fireworks工具栏中常用工具的操作。 2）学会制作简单的网站Logo。 3）学会制作网站按钮。 4）学会制作网站静态Banner。7.2.1 制作网站Logo（一）l以叶行科技公司为例，学习制作网站Logo的方法。制作效果如图所示。网站Logo制作效果 7.2.1 制作网站Logo（二）l 新建文档 新建一个Fireworks文档（PNG），设置为（宽度186，高度63，分辨率72，画布颜色为白色），如图所示。新建文档 7.2.1 制作网站Logo（三）l 导入外部素材l点击“文件”菜单“导入”，在“导入”对话框中，浏览找到你所需要的素材文件，如图所示，单击“打开”按钮，将
6、所有素材导入到编辑区域内。并调整到合适的位置。素材导入 “导入”对话框 7.2.1 制作网站Logo（四）l输入文本使用工具栏中的文本工具，在工作区输入公司名称和网址：“叶行软件公司”、“WWW.YEXING.COM.CN”，调整到合适的位置，如图7-14所示。 输入文本 7.2.1 制作网站Logo（五）l调整属性1）选中“叶行科技公司”文本，在文本属性面板中，对输入的文本进行美化处理，包括字体、颜色、投影等效果。2）同样地，选中“WWW.YEXING.COM.CN”文本，在文本属性面板中，对输入的文本进行美化处理。3）双击文本，按住鼠标左键不放分别选择不同的文本并设置为不同的颜色。其中，“
7、叶行”颜色为“#FF6600”，“科技公司”颜色为“#41A622”，英文“YEXING”颜色为“#CC0000”，其余英文为黑色。4）添加Photoshop动态效果，可以让文本更具动感。单击文本属性栏中滤镜旁边的加号 ，在弹出菜单中选择“Photoshop动态效果”，在弹出的“Photoshop动态效果”对话框中选中“阴影”效果，并设置右边“阴影效果”属性值。 7.2.1 制作网站Logo（六）l完成保存 至此，Logo制作完成，点击保存为可编辑的Fireworks png格式，以备下次修改使用。当然也可以另存为其他格式的图片，直接应用到网站中。7.2.2 制作网站按钮（一） l以叶行科技公
8、司网站为例，学习制作网站按钮的方法。制作效果如图所示。l新建文档新建一个Fireworks文档（PNG），宽为180，高为226，分辨率为72，画布颜色为白色，如图所示 。网站按钮效果 “新建文档”对话框 7.2.2 制作网站按钮（二）l设计制作按钮背景 1）单击工具栏中的“矩形工具 ”，在弹出的列表菜单选择“圆角矩形工具”。2）此时在工具区会出现一个十字型图标“ ”，按住鼠标左键不放，在工具区拖动画出一个圆角矩形，选中它并调整它的大小、坐标以及颜色。3）在属性面板中，对圆角矩形进行设置。4）选中圆角矩形，按住键盘上的Ctrl+C键，然后再按Ctrl+V键，完成复制粘贴过程。紧接着用键盘上的上
9、下左右键调整新圆角矩形的坐标位置（X：15，Y：81）。5）同样地，再复制两个圆角矩形出来，调整好它们到合适的位置。6）按住键盘上的Shift键不放，依次选中4个圆角矩形，并设置它们的属性。7.2.2 制作网站按钮（三）l导入素材 1）点击工作区空白区域，取消选择。2）把“素材文件夹”下“按钮素材”下的4个颜色小球导入到工具区中，并调整到合适的位置。3）再导入素材“白色小箭头”，并依次放置到每个小球上。4）最后导入其他的两个素材，放置好位置。如图所示。导入素材并调整到合适的位置 7.2.2 制作网站按钮（四）l设置文本 1）分别输入文本“历史客户”“订单查询”“在线支付”“合作伙伴”，调整到合
10、适的位置。2）用Shift键把它们同时选中，设置它们的共同属性，属性栏设置如图所示。3）再分别设置它们各自的颜色，首字为黑色，剩下三个字为白色，效果如图所示。4）加入Photoshop动态阴影效果。按住键盘Shift键依次选中四个文本，同时赋予它们阴影效果，最终完成按钮组的制作。 调整文本颜色 7.2.2 制作网站按钮（五）l完成保存 至此，Logo制作完成，点击保存为可编辑的Fireworks png格式，以备下次修改使用。也可以另存为其他格式的图片，直接应用到网站中。7.2.3 设计网站静态Banner （一）l下面以制作“叶行”网站为例，学习制作网站静态Banner的方法，将完成的效果如
11、图所示。网站静态Banner制作效果 7.2.3 设计网站静态Banner （二）l新建文档并设置背景1）新建一个Fireworks文档（PNG），宽792，高188.分辨率72，画布颜色白色 2）制作Banner背景画一个790185的圆角矩形（颜色为#15B0E8），调整边角，置于画布的中央，坐标为（X：3，Y：2），将“Banner素材”下的“透明流光”文件导入到画布，坐标为（X：0，Y：46）。7.2.3 设计网站静态Banner （三）l设置文本 1）输入文本“我最行”，并设置其颜色同透明流光的颜色一致（#73D0F1，也可使用取色器）。 单击“缩放”工具 右下角的小三角形，在弹出菜
12、单中选择“倾斜工具”，调整文本的倾斜度，使之与透明流光平行。2）输入文本“选择 叶行 ，因为我们更专业”。设置“叶行”字体为叶根友特色简体（黑色、25号字），其他为黑体（白色、20号字），字符间距为3，并设置Photoshop动态效果。 调整文本倾斜度 7.2.3 设计网站静态Banner （四）l导入素材，制作完成 导入Banner素材文件夹下的其他外部素材文件“卡通箭头”、“英文说明文字”、“绿色标志”到画布中，并且调整到适当位置，如图7-36所示，最后Banner制作完成。导入其他外部素材 7.2.4 Fireworks与Dreamweaver结合制作动态导航效果 1）在Firework
13、s中做出一个按钮（自由设计），是鼠标未经过前的状态，并且导出为“01.JPEG”图片。2）修改这个按钮，设计鼠标经过后的状态，并导出为“02.JPEG”。3）使用这两幅图片素材，在Dreamweaver中制作鼠标变换图像，浏览效果。鼠标经过前后的按钮效果 7.2 知识拓展 l运用PNG图像素材 通过实例，我们可能注意到了在导入的素材中都是PNG格式的，这是因为PNG格式的图像背景是透明的，这样就加强了它的可运用性，不需要再进行“抠图”等处理，所以用Fireworks设计时，可以从网上下载大量的PNG图像用作设计时使用。在网上发现喜欢的PNG图像，右键单击，在快捷菜单中点击“图像另存为”就可以下
14、载下来。l运用Fireworks样式 在Fireworks中，提供了大量的样式，只需轻轻一点，便可得到漂亮的效果。这些样式对图形和文本都有效，用来制作按钮更是方便漂亮得多，而且使用某种样式后，还可以对此种样式进行编辑和修改，同时还可以自己设定喜欢的样式，下一次需要该效果时，直接引用就行了。7.2 思考与练习 1. 建立Fireworks新文档有哪几种方法？2. 使用教材提供的相关素材，用Fireworks设计一个网站logo，效果如图所示。logo效果图 7.3 网站图片处理 l任务导入 在网站上经常会使用很多图片，小赵发现目前手头上的这些图片文件都很大，没有经过优化处理，小赵想将这些图片在显
15、示质量不下降的情况下进行优化。本任务将学习Fireworks强大的图片处理功能。l学习目标 1）了解图片的多种格式。 2）掌握图片的美化处理方法。 3）学会图片的优化输出。7.3.1 常见图片格式 （1）BMP Windows系统下的标准位图格式，未经过压缩，这种图像文件比较大。平时我们用画图程序画出的图形的格式就是这一种。（2）GIF 分为静态GIF和动画GIF两种，“体型”娇小，网上很多小动画都是GIF格式。GIF其实是将多幅图像保存为一个图像文件，从而形成动画。（3）JPEG（JPG） 是应用最广的图片格式之一，这种图片是经过压缩而来的，文件较小，便于在网络上传输，网页上大部分图片就是这
16、种格式。（4）PSD 图像处理软件Photoshop的专用图像格式，图像文件较大。文件扩展名是.psd，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件格式。PSD文件有时容量会很大，但由于可以保留所有原始信息，在图像处理中对于尚未制作完成的图像，选用PSD格式保存是最佳的选择。（5）PNG 与JPG格式类似，网页中很多图片都是这种格式，支持图像透明。原名称为“可移植性网络图像”，是网上接受的最新图像文件格式。7.3.2 美化图片（一） l用Fireworks处理网页图片主要包括：图片裁剪处理、图片缩小放大处理、图片滤镜效果添加（亮度、对比度、模糊、锐化、内外阴影、内外发光等），等同于用Photoshop处理图片的过程，在这里不再一一做出实例讲解。 下面学习使用Fireworks蒙版制作图片窗格效果，如图所示。图片窗格效果 7.3.2 美化图片（二）1）单击“文件”菜单“图像处理素材”“人物”素材，并设置画布颜色为白色。2）使用圆角矩形工具在工作区画出正圆角矩形（长:60px，宽:60px，笔触：#ccccccc，填充色：#ffffff），并放置好位置（X轴
