本节课要学习使用Photoshop对网页设计图进行切片。网页设计图可以通过网络搜索下载获取，也可以自行设计（本节课所用到的网页设计图在课程底部可以下载）。通常网页设计的作品都是Photoshop源文件PSD格式，本节课程为了简化操作，使用了JPG图片格式。

通常一个网页的宽度为960像素-1200像素大小，早先受显示器的影响也有760左右像素宽度的网页，也有追求全屏效果使用100%宽度像素的网页设计。本节课我们所使用的宽度为960像素，如果是自行设计的网页，应当选择适应的页面宽度，如960px，980px，1200px等。

网页结构采用简单的四个部分：头部，放置课题名称；导航，为页面之间互相跳转的链接；内容区域；底部，放置版权信息等。具体结构如下图。

一、使用Photoshop打开网页设计图片“中国水墨风格.jpg”。

二、从顶部标尺位置拖动三根参考线，将网页分成四个区域。（此四个区域对应上面网页结构图中的头部、导航、内容和底部）

三、使用快速工具栏中的“切片工具”，再使用“基于参考线的切片”功能，将网页分割成4个版块。

四、再使用快速工具栏中的“切片选择工具”，依次双击选择每一个切片，修改切片名称，适当调整切片的高度。

将顶部切片名称修改为 “header_bg”，高度为246；将第二块切片名称修改为 “nav_bg”，高度为32；将第三块切片名称修改为“main_bg”；将最后一块切片名称修改为“footer_bg”。

五、使用菜单中的“文件”菜单下的“存储为web所用格式”功能，

将图片格式设置成“JPEG”，质量设计为“80”,点击"save"进行保存，

再将保存类型设置为“Images Only”，将Slices选择为“All Slices”（或者是“所有切片”），再点击保存。

这时，在桌面上会看到一个"images"目录，目录里面有我们所切片出来的四个图片，分别为header_bg.jpg，nav_bg.jpg，main_bg.jpg和footer_bg.jpg。

至此，对网页设计进行切片的工作，就完成了。

网页切片要看具体的网页设计结构，对于简单的页面，切片很容易，对于相对复杂的页面结构，则相对复杂很多。