欢迎图片的切片

21 转到PSD文件，关闭除了有渐变效果深蓝背景的其他所有图层（点击图层左边的眼睛图标）。

22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

23 将这个深蓝背景转成web图片content_background.png，放在images目录下。使用同样的方法，关闭除了欢迎图片图层的其他图层，切片蓝点和欢迎图片（见一下参考）。

新区域的HTML类似如下。

代码段8

<!--WELCOME AREA STARTS-->
<div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">

  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

24 在#welcome-text div中文名增加一些欢迎文字。使用<h2>标签给欢迎文字增加标题，然后在以下添加无序列表。

25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。

合起来，HTML代码如下。

代码段9

<!--WELCOME AREA STARTS-->
  <div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">
    <h2>welcome to <span>yourwebsite!</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur[...]</p>
    <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

样式化欢迎区域

26 现在样式化欢迎区域。复制以下代码到CSS中，后面有对代码的解释。

代码段10

#welcome {
  float: left;
  width: 850px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 326px;
  padding-top: 40px;
}
h2 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
}
.heading-color2 { color: #9a9a9a; }
#welcome-text {
  width: 406px;
  line-height: 18px;
  padding-top: 50px;
  float: left;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
.list li {
  text-decoration: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  list-style-type: none;
  float: left;
  width: 180px;
  padding-left: 20px;
  margin-top: 10px;
  background-position: left center;
}
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}

代码段10的解释

让我们来详解一下上面的代码。首先，我们通过background属性（content_background.png）给#welcome加入渐变背景，并且是不重复的（repeat: no-repeat）。让后给这个div一个固定的宽度高度；宽度为模板内容宽度（850px）,高度为欢迎图片的高度（236px）。

通过text-transform属性让<h2>内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。

无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。

最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固定的宽度高度值。

3D分割线切片

27 对于3D分割线，我打算通过加入类为separator的div，可以实现复用。使用矩形选框工具（M）选定区域宽度不能大于850px，高度不能超出3D分割线本身的大小。

28 用之前的方法将选区存为images目录下的separator.png。

3D分割线转换成代码

29 对于分割线的HTML和CSS相当简单。在index.html中#welcome下面插入div。将&nbsp;放入.separator的div中。

代码段11

<!--WELCOME AREA ENDS-->
  <!--SEPARATOR STARTS-->
  <div>&nbsp;</div>
  <!--SEPARATOR ENDS-->

30 CSS文件中加入如下代码。

代码段12

.separator {
  background-image: url(images/separator.png);
  background-repeat: no-repeat;
  float: left;
  height: 17px;
  width: 850px;
  margin-top: 20px;
  margin-bottom: 20px;
}

代码段12的解释

我们将.separator的background-image设定为separator.png。给定宽度850，然后向左浮动。height值等于separator.png的高度。然后给顶部和底部

margin设为20px，让它们彼此之间有一定的间歇。

侧边栏切片

31 对于侧边栏，我们仅需要侧边栏框。这个教程中侧边栏框大小是固定的，但是如果需要可以很容易的扩展（这部分叫给大家自己完成）。使用矩形选框工具（M）选定这个侧边栏框；我的

选定范围是259 x 259px.

32 存为images目录下的contentbox.png。

33 使用矩形选框工具，设定宽度为1px，高度为2px。选定文字之间的分割线部分。

32 和往常一样，存为images目录下的divider.png 。选定很小是因为下面将通过CSS将其水平重复。