网页制作案例教程 第2版 教学课件 高林 景秀2 第12章.pptVIP

第12章 网站美工设计及后台修改 ;12.1 网站主页版面设计 ;12.2 图像切片 ;12.2.1 切片的类型;12.2.2 创建切片;?图12-65 创建的切片 ; 三、基于图层创建切片 对于PSD格式分层的图像来说，可以根据图层来创建切片，创建的切片会包含图层中所有的图像内容，如果移动该图层或编辑其内容时，切片将自动跟随图层中的内容一起进行调整。在【图层】面板中选择需要创建切片的图层，如图12-67所示。执行【图层】/【新建基于图层的切片】命令，即可完成切片的创建，如图12-68所示。 ;?图12-67 选择图层 ;12.2.3 编辑切片; 四、划分切片 利用【切片选择】工具先选择需要划分的切片，如图12-69所示，单击属性栏中的按钮，在弹出的【划分切片】面板中设置好划分切片的方式及个数，如图12-70所示。单击按钮即可得到如图12-71所示的划分切片。 ;?图12-70 【划分切片】面板 ; 五、转换切片 由于自动切片和基于图层的切片会跟随着内容的变换而发生变换或自动更新，所以有时需要将自动切片和基于图层的切片转换为用户切片。转换方法为：选择【切片选择】工具 ，在切片区域内单击鼠标右键，在弹出的菜单中执行【提升到用户切片】命令，即可将自动切片和基于图层的切片转换成用户切片。 ; 六、查看编辑切片 【切片选项】对话框选择【切片选择】工具，直接在切片内双击鼠标左键即可弹出如图12-72所示的【切片选项】对话框。 在【切片类型】右侧一般设置“图像”选项，如果切片中包含有纯色活HTML文本，则应该设置“无图像”选项，这样优化输出后的切片则不包含图像数据，因此可以提供更快的下载速度。在【尺寸】下面的各参数设置区中还可以按照精确的数值来设置切片的大小。;?图12-72 【切片选项】对话框 ; 七、隐藏、显示和清除切片 当图像文件中创建了切片后，执行【视图】/【显示】/【切片】命令，则可以把切片隐藏，再次执行该命令可以把切片显示。执行【视图】/【清除切片】命令，则可以把切片在图像文件中清除。;12.3 存储网页图片 ;12.3.1 存储为JPG?格式图片 ;12.3.2 存储为GIF?格式图片 ;12.3.3 优化存储网页图片 ; 查看优化效果：对话框左上角为查看优化图片的四个选项卡。点击“原稿”选项卡，则显示的是图片未进行优化的原始效果；点击“优化”选项卡，则显示的是图片优化后的效果；点击“双联”选项卡，则可以同时显示图片的原稿和优化后的效果；点击“四联”选项卡，则可以同时显示图片的原稿和三个版本的优化效果。 查看图像的工具：在对话框左侧有6个工具按钮，分别用于查看图像的不同部分、放大或缩小视图、选择切片、设置颜色、隐藏和显示切片标记。 ; 优化设置：对话框的右侧为进行优化设置的区域。在【预设】列表中可以根据对图片质量的要求设置不同的优化格式，不同的优化格式，其下的优化设置选项也会不同，如图12-77所示分别为设置“GIF”格式和“JPEG”格式所显示的不同优化设置选项。 ;?图12-77 优化设置选项 ; 对于“GIF”格式的图片来说，可以适当设置“损耗”和减小“颜色”数量来得到较小的文件，一般设置步超过“10”的损耗值即可；对于“JPEG”格式的图片来说，可以适当降低图像的“品质”来得到较小的文件，一般设置为“40”左右即可。如果图像文件是删除了“背景”层而包含??透明区域的图层，在【杂边】右侧可以设置用于填充图像透明图层区域的背景色。; 【图像大小】选项卡：单击该选项，可以根据需要自定义输出图像的大小。 查看图像下载时间：载对话框的左下角显示了当前优化状态下图像文件的大小及下载该图片时所需要的下载时间。 所有选项如果设置完成，可以通过浏览器查看效果。在【存储为Web和设备所用格式】对话框左下角设置好【缩放级别】选项后单击右边的按钮即可在浏览器中浏览该图像效果，如图12-78所示。;?图12-78 在浏览器中浏览图像效果 ; 关闭该浏览器，单击 按钮，在弹出的【将优化结果存储为】对话框，如果在【保存类型】列表中设置“HTML和图像（*.html）”选项，文件存储后会把所有的切片图像文件保存并同时生成一个“*.html”网页文件；如果设置“仅限图像（*.j