任务六：Photoshop切片操作主讲人：时间：

目录CONTENTS01课程导入02任务实施03任务拓展04学习任务单05总结与回顾

课程导入PART01网页设计中，切片操作是将设计稿转化为实际网页的关键步骤。通过切片，能把复杂的网页效果图分割成多个小图片，便于在网页排版软件中进行布局和展示。网页设计基础合理的切片可以减小网页体积，提高网页的加载速度。将网页元素切成小图片，尤其是1像素宽的切片，能有效优化网页性能，提升用户体验。提高网页性能便于后期维护切片后的图片便于单独修改和更新，当网页需要调整某个部分时，只需修改对应的切片图片，而不需要重新设计整个网页。与其他软件协作切片操作是Photoshop与Dreamweaver等网页排版软件协作的桥梁。切片生成的图片可以直接导入到网页排版软件中进行封装，实现前后端的有效衔接。切片操作的重要性

学生需了解网页的前后台构成，以及Photoshop切片在网页制作中的作用；掌握切片工具的使用方法，包括绘制切片、查看切片大小等；熟悉切片导出的格式和设置。知识目标能够熟练使用切片工具对网页效果图进行切片，准确绘制Banner切片、导航栏切片和栏目标题切片；掌握切片导出为不同格式（如JPEG、GIF、HTML）的操作流程；学会检验和调整切片的尺寸大小。技能目标重点掌握1像素宽切片的应用，理解其在网页排版中提高浏览速度和实现渐变填充效果的原理；熟练掌握将切片导出为HTML网页文件的操作步骤。重点掌握内容通过本课程的学习，学生能够独立完成网页效果图的切片操作，将切片导出为合适的格式，并在浏览器或网页排版软件中进行查看和编辑，为网页制作打下坚实的基础。学习成果预期课程目标与重点

任务实施PART02

操作步骤启动Photoshop软件，单击“文件→打开”菜单命令，在弹出的对话框中选择已设计好的网页效果图文件，然后单击“打开”按钮，将文件导入到Photoshop中。实践操作体验让学生自己打开一个网页效果图文件，熟悉打开文件的操作流程，观察图像的基本信息和布局。文件格式与要求介绍适合用于切片操作的网页效果图文件格式，如PSD、JPEG等。强调文件的分辨率和色彩模式应符合网页制作的要求，一般分辨率为72dpi，色彩模式为RGB。图像检查与调整提醒学生在打开文件后，检查图像的整体布局和元素分布，确保图像清晰、完整。如有需要，可以对图像进行简单的调整，如裁剪、调色等。打开文件

讲解如何在工具箱中选择切片工具，以及切片工具的图标和快捷键（通常为C）。切片工具的选择详细演示使用切片工具在Banner图片上绘制切片的操作步骤，确保切片的尺寸大小与Banner图片相当。强调绘制时要准确对齐图片边缘，保证切片的准确性。绘制Banner切片介绍如何对绘制好的Banner切片进行调整和优化，如移动切片位置、调整切片大小等。可以通过切片工具的选项栏进行操作，也可以使用鼠标拖动切片边缘进行微调。切片的调整与优化让学生使用切片工具在打开的网页效果图上绘制Banner切片，并进行调整和优化，感受切片绘制的过程和效果。实践操作练习建立Banner切片

查看切片大小的方法演示使用切片工具，在切片上双击，打开“切片选项”对话框的操作步骤。在对话框中，可以查看切片的宽度、高度尺寸大小等详细信息。根据需求调整切片尺寸讲解如何根据网页设计的需求，对切片尺寸进行调整。如果切片尺寸不合适，可以通过“切片选项”对话框或直接在图像上拖动切片边缘进行修改。切片尺寸的重要性强调切片尺寸在网页排版中的重要性，准确的切片尺寸可以确保网页元素的布局和显示效果符合设计要求。提醒学生在切片过程中要注意控制切片的尺寸。实践操作体验让学生查看自己绘制的Banner切片的尺寸大小，并根据需求进行适当调整，熟悉查看和调整切片尺寸的操作。查看“切片”大小

深入讲解1像素宽切片在网页排版中的应用原理，它可以沿纵向或横向平铺，实现完整的一行或一整列图片的切片效果，大大提高网页的浏览速度。1像素宽切片的应用原理介绍如何对绘制好的导航栏切片进行排列和布局，使其在网页中呈现出整齐、美观的效果。可以通过切片工具的选项栏进行对齐和分布操作。切片的排列与布局演示使用切片工具在导航栏上绘制1像素宽切片的操作步骤，确保切片的位置和宽度符合设计要求。提醒学生在绘制时要注意切片的连续性和准确性。绘制导航栏切片让学生使用切片工具在网页效果图的导航栏上绘制1像素宽切片，并进行排列和布局，体验1像素宽切片的应用效果。实践操作练习建立导航栏切片

实现渐变填充效果的原理讲解使用1像素宽切片实现标题栏上渐变填充效果的原理，通过在Dreamweaver中将1像素图片作为单元格背景图片进行平铺，可以模拟出渐变效果。切片的颜色与渐变设置介绍如何在Photoshop中对栏目标题切片的颜色和渐变