2.2　布局规划及切图

任何网站制作前都要先做好布局规划和图片切割，制作时才能迅速找到目标文件的位置并正确引用文件的路径。布局规划和切图不会占用很长时间，但却是制作网站的必要步骤和基本功。

本节主要介绍企业网站的页面布局规划、页面图片切割并导出图片。这些工作是制作本章案例前的必要步骤。

2.2.1　页面布局规划

根据前面对网站效果图的分析，为了后面写出清晰简洁的XHTML代码，对页面的整体结构进行了提炼，得到了页面的大致布局图，如图2.7所示。

2.2.2　切割首页及导出图片

切图片既要准确又要尽可能小，图片切得是否精确直接影响CSS的编写质量，进而影响页面效果。

首页需要切割的图片包括企业标志logo.gif、邮箱小图标icon-mail.png、日期与邮箱之间的竖线top_line.gif、导航的背景nav_bg.gif、banner图片banner.jpg、公司简介中的图片pix1.gif、公司新闻列表中的日期小图标icon-date.gif。主体内容的背景图片bd-bg.gif、页脚背景图片ft-bg.gif、整个页面背景bg.gif。如图2.8所示是首页在Photoshop中的所有切片。

如图2.8所示，每个被切到的图片在Photoshop中都由一个数字表示其对应的切片的序号，比如ft-bg.gif对应的切片的序号是37。

2.2.3　切割内页及导出图片

公司产品页的页面头部与首页的页面头部相同，所以这部分图片就不需要重复切割。只需要切割产品页的内容部分即可。如图2.9所示是公司产品页在Photoshop中的所有切片：产品特色中的三张图片依次切下来，分别是pix2.jpg、pix3.jpg和pix4.jpg；服务项目中切下来的是三角形小图标bullet2.gif。