本节采用了第7章中的网页设计完成图，将该网页界面在Photoshop中继续进行编辑，通过建立切片、设置链接、优化图像、存储为Web所用的HTML格式等操作，最终完成网页的发布。图18-51所示为本实例的完成效果。

图18-1  本实例完成效果

技术提示

在实例制作中使用“切片”工具对网页进行切片划分，然后使用“切片选择”工具选择需要链接的切片，并设置链接地址。接着在“存储为Web所用格式”对话框中对网页进行优化，最终完成网页的发布。图18-2所示为本实例的制作概览。

图18-2  实例的制作概览

制作步骤

（1）运行Photoshop，执行“文件”→“打开”命令，打开本书附带光盘\Chapter-18\“艺术中心网页.jpg”文件，如图18-3所示。

图18-3  打开图像

（2）在工具箱中选择“切片工具”，然后在画面中拖出一个矩形框，松开鼠标后即可得到一个用户切片，如图18-4所示。

图18-4  对图像进行切片划分

（3）在工具箱中选择“切片选择工具”，如图18-5所示。

图18-5  选择切片选择工具

（4）当选择了“切片选择工具”后，并在画面中选择一个用户切片，其选项栏如图18-6所示。

图18-6  “切片”工具选项栏

（5）在选项栏中单击“显示自动切片”按钮，文档中用户切片图像周围将产生几个自动切片，如图18-7所示。

图18-7  图像周围将产生自动切片

（6）如果在选项栏中单击“划分”按钮，将弹出的“划分切片”对话框，设置该对话框可在选择的切片中根据需要进行切片划分，如图18-8所示。

图18-8  设置“划分切片”对话框

（7）如果在选项栏中单击“提升”按钮，即可将所选择的自动切片转换为用户切片，图18-9所示为首先使用“切片选择工具”单击图像中的自动切片，然后单击选项栏中的“提升”按钮，将其转换为用户切片。

图18-9  将自动切片转换为用户切片

（8）接下来返回到步骤（5）中的状态，然后对图像进行链接设置。图18-10所示为在“切片选择工具”选项栏中单击“为当前切片设置选项”按钮，弹出“切片选项”对话框。

图18-10  “切片选项”对话框

提示：该文件放置在本书附带光盘中，读者可打开本书附带光盘\Chapter-18\“链接文件.jpg”文件进行查看。

图18-11  为用户切片添加链接路径

（10）然后，执行“文件”→“存储为Web所用格式”命令，将弹出“存储为Web所用格式”对话框，然后再对话框中单击面积最大的切片，将其选择，如图18-12所示。

图18-12  “存储为Web所用格式”对话框

（11）在“存储为Web所用格式”对话框中单击“优化”选项卡，来查看应用了当前优化设置的图像，这时，由于当前优化设置默认为GIF文件格式，因此“优化”选项卡中画面的质量明显比“原稿”选项卡中的画面质量有所降低，如图18-13所示。

图18-13  选择“优化”选项卡

（12）接下来将对所选切片进行优化设置。在这里为了保证画面的显示质量，采用了JPEG文件格式的优化选项，图18-14所示为JPEG格式的“优化”面板的参数设置。

图18-14  采用JPEG文件格式的优化方式

（13）在“存储为Web所用格式”对话框中单击“存储”按钮，将文档存储为html格式，其路径为：D:\附带光盘\Chapter-18\“艺术中心网页.html”，如图18-15所示。

图18-15  “将优化结果存储为”对话框

（14）当在“将优化结果存储为”对话框中单击“保存”按钮后，将弹出一个警告对话框，这是由于网页的文件名称为中文所造成的，单击“确定”按钮即可，如图18-16所示。

提示：这里为了方便读者阅读和操作，故采用中文网页文件名称，如果读者要将网页发布到互联网，请不要使用中文字符设置网页名称。

图18-16  警告对话框

（15）这时打开D:\附带光盘\Chapter-18文件夹，里面就多出了“艺术中心网页.html”文件和“images”文件夹，如图18-17所示。“images”文件夹中则包含了网页的所有切片图像。

图18-17  打开文件夹

（16）使用鼠标双击“艺术中心网页.html”文件，即可在网页浏览器中预览网页文件，如图18-18所示。

图18-18  在网页浏览器中预览网页文件

（17）将鼠标指针放置到具有链接设置的切片图像处单击，浏览器即可跳转到链接文件，这样说明链接地址正确，完成本实例的全部制作，如图18-19所示。读者也可打开本书附带光盘\Chapter-18\“艺术中心网页.html”文件进行查看。

图18-19  测试链接文件地址是否正确