3.2　布局规划及切图

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

3.2.1　页面布局规划

个人网站属于小型网站，图片较少，形式简单，页面层级较少。

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

3.2.2　切割首页及导出图片

首页需要切割的图片包括三张整体背景图bg.jpg、body_bg.jpg和doc_bg.jpg，站内搜索背景图片search.jpg，上下翻页按钮ico_next.png和ico_prev.png，导航按钮nav_01.png、nav_02.png和nav_03.png，博客列表背景图catalog_bg.jpg、catalog_bg_top.jpg和catalog_bg_bom.jpg，博文列表导图pic1.jpg和pic2.jpg。如图3.7所示是首页在Photoshop中的所有切片。

3.2.3　切割内页及导出图片

博客正文页的头部、导航、上下翻页按钮与首页相同，所以这几部分的图片就不需要重复切割了。只需要切割内页的正文和评论部分的图片即可，包括正文背景图text_bg.jpg、text_bg_top.jpg和text_bg_bom.jpg，评论数量背景图on.png，发表评论的用户头像head1.jpg和head2.jpg。page.psd在Photoshop中的所有切片如图3.8所示。