3.1 知识准备

3.1.1 网站版面“切图”的含义

在网站建设行业中，并没有对网站版面“切图”进行统一的定义，但是“切图”这个词经常会出现，比如在面试网页设计师岗位或美工岗位时，面试官通常会问：“你会不会切图？”因为“切图”技术是这两个工作岗位的核心内容之一。读者需要注意，此处的“切图”并不是传统意义上的使用工具对版面进行裁切，而是指把网站版面图转换为静态页面的过程。在转换的过程中需要使用相关的工具（如Photoshop、Fireworks、Dreamweaver等）和相关知识技术（如HTML语言、JavaScript语言、CSS、DIV+CSS网页布局技术等）。

在中小型网站建设公司或从事网站建设的科技公司，网页设计师（也称为美工）的工作职责就是根据客户的需求设计网站的版面，并利用“切图”技术形成静态网页。而在大型网站建设公司，按照工作过程划分的职位更细，如平面设计师（或界面设计师）主要负责设计网站版面图，网页设计师负责把网站版面图利用“切图”技术转换成静态网页。

3.1.2 网站版面“切图”的流程

在网站建设行业，网站版面“切图”通常按图3-1所示的流程进行。

1．分析版面、版位

使用相关工具打开网站版面图，根据CSS盒子模型的知识，按照自上而下、从左至右的顺序分析网站版面结构和版位结构，为了便于对版位进行描述，可以结合版位内容给版位取名，例如“新闻动态”版位，分析的结果通常通过CSS盒子模型来表示。

2．切出（或导出）版位图片

根据版位的结构，使用工具将需“切”出来的图片“切”出来，并保存在相应的目录中。

3．编写版位“结构和内容”代码

将版位的图片“切”出来后，使用HTML语言编写页面的结构并输入版位内容。

4．编写版位具体表现的代码

根据版面的效果图，编写CSS代码实现版面版位的表现效果。

3.1.3 DIV+CSS布局的核心技术

1．盒子模型

盒子模型是HTML+CSS中最核心的基础知识，只有真正理解盒子模型的概念，才能更好地进行排版和页面布局。在CSS盒子模型理论中，所有页面中的元素都可以被看成一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此，需要从两个方面来理解盒子模型：一是理解一个盒子的内部结构；二是理解多个盒子之间的相互关系。盒子模型是由内容（content）、内边距（padding）、外边距（margin）和边框（border）这4个属性组成。此外，还有宽度（width）和高度（height）两大辅助性属性。图3-2所示为一个CSS盒子模型的内部结构。通过分析可知，一个元素的实际宽度（盒子的宽度）=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。

（1）内容区。

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有3个属性：宽度（width）、高度（height）和溢出（overflow）。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言的，并不包括padding部分，当内容信息太多超出内容区所占范围时，可以使用溢出（overflow）属性来指定处理方法。

（2）内边距。

内边距是指内容区和边框之间的空间。内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right，以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离。

（3）边框。

在CSS盒子模型中，边框属性有border-width、border-style、border-color，以及综合了3种属性的简洁边框属性border。其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

（4）外边距。

外边距指的是两个盒子之间的距离。它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。外边距的属性也有5种，即margin-top、margin-bottom、margin-left、margin-right，以及综合了以上4个方向的简洁内边距属性margin。同时，CSS允许给外边距属性指定负数值。当指定负外边距值时，整个盒子将向指定负值的相反方向移动，由此可以产生盒子的重叠效果，这就是通常所说的“负margin技术”。

2．浮动

（1）浮动的含义。

浮动属性产生之初是为了实现“文字环绕”的效果。浮动让元素脱离文档流，向父容器的左边或右边移动，直到碰到包含容器的边框、内边距元素或其他浮动元素。文本和行内元素将环绕浮动元素。

（2）浮动元素的特性。

浮动的元素具有脱离文档流、包裹性和破坏性的特征。

① 脱离文档流是指浮动元素不会影响普通元素的布局。

② 包裹性指的是元素尺寸刚好容纳内容。浮动之所以会产生包裹性这样的效果，是因为float属性会改变元素display属性最终的计算值，示例代码如下。

CSS代码如下：

HTML代码如下：

效果如图3-3所示。

③ 破坏性是指元素浮动后可能导致父元素高度塌陷，因为浮动元素从文档正常流中被移除了，但父元素还处在正常流中，示例代码如下。

CSS代码如下：

HTML代码如下：

效果如图3-4所示。

当将盒子box3设置为浮动后（即在box3的CSS代码中增加属性float:left），父级盒子box1发生了高度塌陷现象，效果如图3-5所示。

（3）清除浮动。

将元素设置为浮动后会产生浮动的效果，同时也会影响到前后标签、父级标签的位置以及width和height属性。而且同样的代码，在各种浏览器中的显示效果也有可能不相同。以下是清除浮动的几种方法。

① 父级DIV定义height。

原理：父级DIV定义height，解决了父级DIV无法自动获取高度的问题。

优点：简单，代码少，容易掌握。

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级DIV高度不一样，会产生问题。

建议：只建议在高度固定的布局时使用。

② 结尾处加空DIV标签<div style="clear:both"></div>。

原理：添加一个空DIV，利用CSS的clear:both属性清除浮动，让父级DIV能自动获取高度。

优点：简单，代码少，浏览器支持性好，不容易出现问题。

缺点：不少初学者不理解原理，如果页面浮动布局较多，需增加很多空DIV。

建议：不推荐使用。

③ 父级DIV定义伪类：after和zoom。

用第3种方法清除浮动代码如下。

原理：IE 8以上和非IE浏览器才支持after，原理与方法②有点类似，zoom（IE专有属性）可解决IE 6、IE 7的浮动问题。

优点：浏览器支持性好，不容易出现怪问题（目前，大型网站都使用，如腾讯、网易、新浪等）。

缺点：代码多，不少初学者不理解原理，要两句代码结合使用才能让主流浏览器支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

④ 父级DIV定义overflow:hidden。

原理：必须定义width或zoom:1，不能同时定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持性好。

缺点：不能和position配合使用，因为超出的尺寸会被隐藏。

建议：只推荐给没有使用position或对overflow:hidden理解比较深的用户使用。

⑤ 父级DIV定义overflow:auto。

原理：必须定义width或zoom:1，不能同时定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持性好。

缺点：内部宽高超过父级DIV时，会出现滚动条。

建议：不推荐使用，当需要出现滚动条或者确保代码不会出现滚动条时可使用。

3.1.4 网站版面版位与CSS盒子模型关系

在进行版面“切图”的过程中，要能够根据版面版位的情况分析该版位的CSS盒子模型，再根据CSS盒子模型编写页面代码。掌握这种实施过程至关重要，下面以某网站版面的版位为例讲解实施过程，某网站版面的版位效果图如图3-6所示。

分析版面版位：根据图3-6的效果和CSS盒子模型理论，从整体布局上看，该版位是一个长方形盒子，左边放置了产品类别盒子，右边放置了在线留言盒子。产品类别盒子由上和下两个盒子组成。上面的盒子用于输出文本“产品类别”，下面的盒子用于输出产品类别标题；在线留言的盒子中，第一个用于输出“客户服务 微笑服务 客户至上”图片，第二个用于输出留言标题，依此类推。

形成CSS盒子模型：根据上述的分析，形成CSS盒子模型示意图，如图3-7所示。