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

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