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

第12章 网站美工设计及后台修改 本章我们通过一个房地产项目的网站主页设计为例，来向读者介绍网站主页版面设计的流程和方法。对于利用Photoshop直接优化存储网页图片已经是众多网页美工设计人员所采用的方法了，所以本章最后还安排了切片和存储网页图片的有关知识内容，其中包括切片的类型、创建切片、编辑切片和存储网页图片等。 12.1 网站主页版面设计 网页在开始制作并发布之前，如果先利用Photoshop设计出其版面结构来，再利用相关的网页制作软件上传并发布，可以在保证网页美观漂亮的前提下节省很多制作时间。 具体操作步骤详见教材。 12.2 图像切片 根据网站设计的要求，用于网页的图片与普通图片不同，网页图片要求在保证图片质量的前提下，要尽量减小图像文件的大小，从而减少图片在网页中的显示时间。 利用Photoshop提供的图像切片功能，可以把设计好的网页版面按照不同的功能划分为各个大小不同的矩形区域，当优化保存网页图片时，各个切片将作为独立的文件把图片保存，这样进行优化过的图片，在网页上显示时可以提高图片的显示速度。本节来介绍有关切片的知识内容。 12.2.1 切片的类型 图像的切片分为以下三种类型。 （1）用户切片：用【切片】工具创建的切片为用户切片，切片的四周以实线表示。 （2）基于图层的切片：执行【图层】/【新建基于图层的切片】命令创建的切片为基于图层的切片。 （3）自动切片：在创建用户切片和基于图层的切片时，图像中剩余的区域将自动添加切片，称为自动切片，其四周以虚线表示。 12.2.2 创建切片 图像切片的创建方法有以下三种。 一、用切片工具创建切片 将附盘中相应目录下名为“网站主页.psd”文件打开，在工具箱中选择【切片】工具，在画面中按下鼠标左键拖曳，释放鼠标后即可绘制出如图12-65所示的切片。 二、基于参考线创建切片 如果图像文件中按照切片的位置需要添加了参考线，在工具箱中选择了 工具后单击属性栏中的 按钮，即可根据参考线添加切片，如图12-66所示。 三、基于图层创建切片 对于PSD格式分层的图像来说，可以根据图层来创建切片，创建的切片会包含图层中所有的图像内容，如果移动该图层或编辑其内容时，切片将自动跟随图层中的内容一起进行调整。在【图层】面板中选择需要创建切片的图层，如图12-67所示。执行【图层】/【新建基于图层的切片】命令，即可完成切片的创建，如图12-68所示。 12.2.3 编辑切片 下面来介绍切片的各种编辑操作。 一、选择切片 选择【切片选择】工具，直接在自动切片区域单击，即可把切片选择。 二、调整切片 在被选择的切片四周会显示控制点，直接拖动控制点即可改变切片区域大小。 三、删除切片 直接按Delete键，即可把选择的切片删除，执行【视图】/【清除切片】命令，可以删除图像中的所有切片。 七、隐藏、显示和清除切片 当图像文件中创建了切片后，执行【视图】/【显示】/【切片】命令，则可以把切片隐藏，再次执行该命令可以把切片显示。执行【视图】/【清除切片】命令，则可以把切片在图像文件中清除。 12.3 存储网页图片 在Photoshop中用于存储为网页图片的方法有两种，一种是不保留添加到文件中的任何有关Web特性图片的普通存储，另一种是存储有关Web特性图片的优化存储。 优化设置：对话框的右侧为进行优化设置的区域。在【预设】列表中可以根据对图片质量的要求设置不同的优化格式，不同的优化格式，其下的优化设置选项也会不同，如图12-77所示分别为设置“GIF”格式和“JPEG”格式所显示的不同优化设置选项。 对于“GIF”格式的图片来说，可以适当设置“损耗”和减小“颜色”数量来得到较小的文件，一般设置步超过“10”的损耗值即可；对于“JPEG”格式的图片来说，可以适当降低图像的“品质”来得到较小的文件，一般设置为“40”左右即可。如果图像文件是删除了“背景”层而包含有透明区域的图层，在【杂边】右侧可以设置用于填充图像透明图层区域的背景色。