页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。

HTML代码如下：

代码段2

<!--CONTAINER STARTS-->
<div id="container">
  <!--HEADER/NAVIGATION STARTS-->
  <div id="top">

  </div>
  <!--HEADER/NAVIGATION ENDS-->
  <!--WELCOME AREA STARTS-->
  <div id="welcome">

  </div>
  <!--WELCOME AREA ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">

  </div>
  <!--SIDEBAR ENDS-->
  <!--CONTENT STARTS-->
  <div id="content">

  </div>
  <!--CONTENT ENDS-->
  <!--FOOTER STARTS-->
  <div id="footer">

  </div>
  <!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->

模板背景切片

7 在我们把各个div转成代码之前，我们首先在页面中加入背景。用Photoshop打开PSD文件，用矩形选框工具（M）选定头部/导航和背景的一点区域；选定的宽度可以只有1px

（因为我们将会在后面使用css来水平重复它）。

8 在选定区域的底部，用滴管工具（I）记录下色彩的16进制值。

9 选定好之后，点编辑 > 合并拷贝，创建一个新Photoshop文件（Ctrl+N），然后将选定区域复制到新文档中。通常新建Photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他

们是一致的。

10 在新Photoshop文档中，点文件 > 另存为 web 和设备所用格式（Alt+Shift+Ctrl+S），选择PNG-8格式，保存文件为background.png，保存在images目录下。