2.5　制作中需要注意的问题

通过对本章案例中的企业网站的分析和制作，总结了以下三点在制作中需要注意的问题。

1. XHTML和CSS文件注释

文件注释必不可少，但是要适可而止。注释太多会增大文件的大小，受带宽影响，用户在浏览网页时增加了等待时间，造成不好的用户体验。网站在上线前先要在测试服务器上进行测试，测试好没有问题后，将相关的CSS文件、JavaScript文件先删除注释，然后进行压缩。这些文件的压缩可以利用下载相关工具实现，也可以使用在线压缩工具实现。

2. 清除浮动的方法

在制作过程中如果应该清除浮动的地方没有很好地清除，会在容器的盒模型上产生很多负作用，没法实现正确的页面效果。这些负作用包括：

• 背景不能显示。
• 由于浮动产生，如果对父级元素设置了背景，而父级元素不能被撑开，所以导致CSS背景不能显示。
• 边框不能撑开。
• 如果父元素设置了CSS边框属性，由于子元素里使用了float属性，产生浮动，父元素不能被撑开，导致边框不能随内容而被撑开。
• margin和padding设置值不能正确显示。

由于浮动导致父元素和子元素之间设置的padding、margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

以两个div容器为例，代码2-16为没有清除浮动时的代码，图2.13是在浏览器中的效果。

代码2-16

01    <style type="text/css">
02    .box{border:3px solid red;width:200px;}
03    .a{float:left;border:2px solid black;width:200px;height:100px;}
04    </style>
05    <div class="box">
06        容器box<div class="a">容器a</div>
07    </div>

图2.13　未清除浮动时在浏览器中的效果

如图2.13所示，容器box没有包含容器a，但是在XHTML中，容器box是应该包含容器a的。

清除浮动有很多方法，主要有下面3种。

（1）在结尾处加空div标签clear:both

在父元素的结尾处添加一个空div，利用在这个空div上增加CSS样式clear:both来清除浮动，让父元素能自动获取到高度，如代码2-17所示。

代码2-17

01    <style type="text/css">
02    .box{border:3px solid red;width:200px;}
03    .a{float:left;border:2px solid black;width:200px;height:100px;}
04    .clear{clear:both;}
05    </style>
06    <div class="box">
07        容器box<div class="a">容器a</div>
08        <div class="clear"></div>
09    </div>

缺点是如果页面浮动布局多，就要增加很多空div，而这些空div不但没有任何语义，而且增加了XHTML文件大小，因此不推荐使用。

（2）在父级div定义overflow:hidden

使用overflow:hidden时，浏览器会自动检查浮动区域的高度，从而使父容器的高度能包含子容器的高度，如代码2-18所示。

代码2-18

01    <style type="text/css">
02    .box{border:3px solid red;width:200px;overflow:hidden;}
03    .a{float:left;border:2px solid black;width:200px;height:100px;}
04    </style>
05    <div class="box">
06        容器box<div class="a">容器a</div>
07    </div>

缺点是：和position配合使用时需要注意，超出的尺寸会被隐藏。在没有使用position时可以使用。

（3）在父级div定义伪类:after和zoom

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。这个方法来源于http://www.positioniseverything.net/easyclearing.html，通过after的伪类:after和IE hack来实现，完全兼容于当前主流浏览器，如代码2-19所示。

代码2-19

<style type="text/css">
.cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
*.cf{zoom:1;}
.box{border:3px solid red;width:200px;overflow:hidden;}
.a{float:left;border:2px solid black;width:200px;height:100px;}
</style>
<div class="box cf">
    容器box<div class="a">容器a</div>
</div>

缺点是代码多，可以定义公共类，以减少CSS代码。

使用以上三种方法都可以清除浮动，清除浮动后在浏览器中的效果如图2.14所示。

图2.14　清除浮动后在浏览器中的效果

3. 切割效果图的方法

切图方法有多种，可以使用Photoshop或Fireworks自带的切片工具，也可以用QQ的截屏或者创建新文件，把需要的部分复制过来保存都可以，关键看个人喜好。 gtpMATSHBc8iA2ldSwPLBRQP8RxvSXYuQ9zDhK15Azf4qc/26CRSnaAlnPnEPNnY