网页设计基础教程与上机指导综合处理网页图像.pptx

教学提示和教学目标教学提示：Fireworks8是用来设计和制作专业化网页图形的终极解决方案。切片是Fireworks8中用于创建交互性的基本构造块。切片是网页对象它们不是以图像的形式存在，而是最终以HTML代码的形式出现。可以通过【层】面板中的【网页】层查看、选择和重命名它们。本章讲述切片的创建、图像热区、创建网页图像素材、调整图像的色阶和导入滤镜等基本操作。教学目标：掌握创建图像的切片和热区掌握创建网页图像素材掌握色彩调整与滤镜效果掌握制作网页立体按钮第1页/共17页24.1 创建图像切片和热区切片是组成图像的一个矩形区域。在这个区域上，可以建立链接、翻转和动画，从而在最后的Web页面上看到这些效果。热点是指网页图形中链接到URL的区域。Web设计人员有时使用热点为较大图形中的各个小部分产生交互。24.1.1创建切片24.1.2编辑切片24.1.3导出切片24.1.4创建图像热区第2页/共17页24.1.1 创建切片创建切片可以使用两种方法，一种是使用菜单命令的方法，可以按照层的放置创建切片；另一种是通过使用工具箱中的【切片】工具，自定义创建切片。1.使用菜单命令创建切片2.利用【切片】工具创建切片第3页/共17页24.1.2 编辑切片创建切片对象以后，可对其进行编辑以便使之符合要求。编辑切片对象主要包括显示和隐藏切片、移动切片、改变切片对象的大小以及调整切片对象的颜色等内容。1.修改切片大小和颜色(1)如果切片大小不合适，可以使用【指针】工具拖动切片引导线调整切片大小。(2)选中要更改颜色的切片，在【属性】面板中单击颜色框，在弹出的调色板中设置切片的颜色。2.显示隐藏切片单击工具箱中的【隐藏切片和热点】工具按钮，就可以隐藏切片对象。如果要重新显示，可以单击工具箱中的【显示切片和热点】工具按钮，也可以通过控制网页图层的显示和隐藏来控制切片对象的显示和隐藏，如图24.3所示是单击网页层左侧的【显示/隐藏图层】按钮隐藏了切片后的效果。第4页/共17页24.1.3 导出切片在编辑完切片以后，就要导出切片，导出切片的具体操作步骤如下。(1)打开如图24.4所示的切片对象。(2)选择【文件】|【导出】命令，弹出【导出】对话框，如图24.5所示。在【切片】下拉列表中有3个选项。【导出切片】：表示根据切片对象导出多个切片文件。【无】：表示不生成切片文件，只是将文件导出为一个图像文件。【沿辅助线切片】：表示依据文件中现有切片向导导出切片。(3)设置完毕，单击【导出】按钮，即可将切片导出。第5页/共17页24.1.4 创建图像热区在原图形中标识出可作为导航点的区域后，就可以创建热点。(1)打开一个需要添加图像热区的图像。(2)选择工具箱中的【热点】工具，可以看见3种类型的热点工具，即【矩形热点】工具、【圆形热点】工具和【多边形热点】工具。(3)根据绘制热点的图像的形状选择相应的热点功能，在图像中需要创建热点的位置，拖动鼠标，绘制热点，如图24.8所示。第6页/共17页24.2 创建网页图像素材在制作网页过程中需要大量的网页图像素材，可以使用Photoshop制作网页图像素材，同样也可以使用Fireworks制作网页图像素材。24.2.1创建网页按钮24.2.2创建弹出菜单第7页/共17页24.2.1 创建网页按钮按钮是网页中的重要元素之一，在网页中发挥着十分重要的作用。它主要起着两个作用：第一个是起到提示性的作用，有提示性文本或者图形来告诉浏览者单击后有什么作用；第二是动态响应的作用，即当浏览者进行不同的操作时，按钮能够呈现出不同的效果。第8页/共17页24.2.2 创建弹出菜单在网页上利用弹出菜单可以节省网页空间，利用Fireworks可以创建弹出菜单，具体操作步骤如下。第9页/共17页24.3 色彩调整与滤镜效果可以使用【属性】面板将一个或多个动态滤镜应用于所选对象。每次给对象添加新动态滤镜时，此新滤镜便添加到【属性】面板的【添加滤镜】弹出菜单的列表中。可以打开或关闭每种动态滤镜。24.3.1调整图像的色阶24.3.2调整图像的亮度和对比度24.3.3调整色相和饱和度24.3.4模糊图像24.3.5锐化图像24.3.6导入滤镜效果第10页/共17页24.3.1 调整图像的色阶【色阶】滤镜可以调整图像的亮部、中间调和暗部的色域，单击【滤境】右边的()按钮，在弹出的菜单中选择【调整颜色】|【色阶】命令，弹出如图24.32所示的【色阶】对话框，在对话框中调整图像的色阶。左侧有两个区域用来设置图像的输入色阶和输出色阶，拖动滑块即可改变它们的数值。在对话框的右侧有3个吸管形状的按钮，它们分别可以取【亮部颜色】、【中间调颜色】和【暗部颜色】。如果在此对话框中单击【自动】按钮，相当于选择【自动色阶】选项。设置好参数后，单击【确定】按钮即可。第11页/共17页24.3.2 调整图像的亮度和对比度【亮度/对比度】功能可以修改图像中像素的对比度或亮度。这将影响图像的亮度和色调。校正太暗或太亮的图像时通常使用【亮度/对比度】滤镜，具体操作步骤如下。(1)单击【滤境】右边的()按钮，在弹出的菜单中选择【调整颜色】|【亮度/对比度】命令。弹出如图24.36所示的【亮度/对比度】对话框，在对话框中调整图像的亮度/对比度。(2)拖动【亮度】下面的滑块或者在文本框中输入数值。当调整数值为正值时，图像增加亮度；当数值为负值时，图像降低亮度。拖动【对比度】下面的滑块或者在文本框中输入数值。当数值为正值时，增加对比度，当数值为负值时，减少对比度。(3)设置完毕，单击【确定】按钮。第12页/共17页24.3.3 调整色相和饱和度可以通过调整图像色相和饱和度等参数，使图像产生不同的效果，具体操作步骤如下。(1)单击【属性】面板中【滤镜】右边的()按钮，在弹出的菜单中选择【调整颜色】|【色相/饱和度】命令，弹出如图24.39所示的【色相/饱和度】对话框。(2)拖动【色相】、【饱和度】和【亮度】上的滑块或者在文本框中输入数值，可以改变图像的色相、饱和度和亮度，这时可以在文档窗口中看到调整后的效果。(3)设置完毕，单击【确定】按钮。第13页/共17页24.3.4 模糊图像模糊滤镜可以通过使边缘过于清晰或对比度过于强烈的区域产生模糊效果来柔化边缘。该滤镜没有对话框，单击命令，即可应用，具体操作步骤如下。(1)单击【属性】面板中【滤镜】右边的()按钮，在弹出的菜单中选择【模糊】|【模糊】命令。(2)分别选择选项3次，如图24.41所示分别是模糊前和模糊后的效果。第14页/共17页24.3.5 锐化图像使用【锐化】滤镜，可以使当前的图像增大邻近像素的对比度，对模糊图像的焦点进行调整，具体操作步骤如下。(1)单击【属性】面板中【滤镜】右边的()按钮，在弹出的菜单中选择【锐化】|【锐化】命令。(2)分别选择选项2次，如图24.43所示分别是锐化前和锐化后的效果。第15页/共17页24.3.6 导入滤镜效果(1)打开图像。(2)单击【属性】面板中【滤镜】右边的()按钮，在弹出的下拉菜单中选择AlienSkinSplatLE|Edges命令。(3)弹出Edges对话框，在对话框中选择settings|ThickLines命令，并在对话框中设置如图24.46所示的参数。(4)单击OK按钮。第16页/共17页感谢您的观看！第17页/共17页