页面设计中应该注意的问题
一、页面布局
在设计页面时，我们习惯将将整个页面的宽高量好，再用一个大的div包裹整个页面，其实这个是很不可取的，原因在于一个页面是一块块lodding出来的，如果将所有内容包含在一个大块中的话，用户就得等到一大块全部lodding完菜可以看见页面，这样不仅影响页面加载速度，同样也影响了用户体验。同理，在tableb布局时，lodding只有读到table的闭合标签才能lodding完，这样都是很影响用户体验的，所以我们在制作页面时，布局是非常重要的，最好一块一块往下排列制作，页面才会一块一块往下排着lodding出来，这样至少在页面lodding过程中用户会看到一些信息。
二、logo部分
一个页面最主要的部分就是logo部分，在制作时应采用嵌套：
<h1>
<a href="###">
<img src="images/logo.png" alt="">
</a>
</h1>
这样嵌套的原因在以下3点：
1、h1代表权重比最高的标题，理论上讲一个页面中只有h1标签最合理，当然要放在权重性最高的位置，所以我们将logo的第一层设为h1，也能让爬虫更好的解析出来。
2、一般页面的logo都是链接，a标签也是锚文本，所以我们要将第二层嵌套设为a标签。
3、由于img标签具有alt的属性，所以logo不要用背景图，要用img标签，alt中添加关键字，这对于页面优化和搜索引擎都是非常有帮助的。
三、banner部分
Banner指页面中的导航，虽然大多数导航都是横向的，其实导航还是列表的形式，所以在做导航时我们要用li标签将a标签包裹起来，再向左浮动就好了。
五、内容部分
这里我总结了一些页面制作过程中的注意事项;
1、上面说到logo要使用h1标签嵌套，h1-h5都要在初始化时设定margin：0；否则会出现默认的上间距。
2、Html里面是不能有空标签的，哪怕是clear，我们也应该在空标签中放上 ； 这样是为了防止兼容问题的存在。
3、Class名不能以数字开头，最好要根据命名规范外加网页信息进行命名。
常用的css命名：
4、a标签不要嵌套块级标签，更不能嵌套a标签。
5、任何标签的嵌套最好不要超过四层。
6、字体设置最好分开写，各浏览器解析不一样，背景设置最好集合写。
7、清浮动是一定要注意的，http://www.jb51.net/css/67471.html
8、对标签设置完relative后还可以用margin，但是不能再浮动了，设置完absolute后padding对它就不好用了。
9、一个ul列表中其中一个li的内容是图片其他li都是文字，我们给ul设了行高，那么IE6里面只有字体设置了行高才有作用，图片是不会有变化的。
10、先设置字体再设行高有效，先设置行高，再设置字体是无效的。
11、父子之间最好用padding控制，兼容性很好，兄弟之间的间距一定要用margin控制。
12、IE浏览器是不读取单数的，所以在设置字体大小的时候，为了考虑到兼容性问题都要设置成双数的。
13、已经在使用css在制作页面时，在html中就最好不要再出现style命令了。
14、对于一些没有意义的背景小图我们最好截取保存为gif格式，选择像素要求不是最高，清晰度好点儿就可以了，大图的话一般保存为jpg格式，对于页面中的logo、广告这类的一定要选择像素高的，介于上面来两种格式之间的png就很不错。
六、制作过程中遇到的问题解析：
在制作博客图的头部时，为什么只给块设置了半透明，字体为什么也跟着半透明了？
一张背景图上层要实现半透明，而半透明上又有几行文字，我们第一反应就是用半透明层嵌套几行文字实现效果，其实是不对的，这样的情况下半透明层和文本层是父子关系，所以当背景层使用滤镜的同时字体也会跟着产生相同的半透明效果，我们应该把这两部分设置为同级标签的格式，而不是父子嵌套，文本层采用position定位，这样不会再有字体变得半透明。
七、精简代码总结
1、三层嵌套
Html代码为：
<div class="center">
<div class="left">
<div class="right"><i>文本</i></div>
</div>
</div>
Css代码为：
.center{200px; margin: 200px auto;}
.center i{background:url(images/yuan.gif) 15px 0px no-repeat;padding:0 41px; font-style: normal;}
.right{height:26px;}
.center{background:url(images/buttom_center.gif) 0 0 repeat-x;}
.left{background:url(images/buttom_left.gif) 0 0 no-repeat;}
.right{background:url(images/buttom_right.gif) right 0 no-repeat;}
2、四层嵌套
Html代码为：
<div class="div">
<div class="left"></div>
<div class="center"><i>文本</i></div>
<div class="right"></div>
</div>
Css代码为：
.div{200px;height: 26px;} /* 可以去掉div */
.left,.right{ 36px; height: 26px;}
.center{128px;height: 26px;}
.left{background: url(images/buttom_left.gif) 0 0 no-repeat;}
.center{background: url(images/buttom_center.gif) 0 0 repeat-x;}
.right{background: url(images/buttom_right.gif) 0 0 no-repeat;}
.left,.center,.right{float: left;}
在三层嵌套中，一二层都不设高，而在最高层设高，就可以把上两层支撑开，非常得节省代码，兼容性也同样稳固。