CSS+DIV布局之道

时间:2022-11-12 08:40:23


以前用CSS+DIV做过两个小项目,感觉并不是很通畅,觉得有必要在这方面补补课,最近又用CSS+DIV山寨了几个界面,算是练手吧,现在思路清晰多了,和大家分享。

 

一、为什么采用CSS+DIV布局?简单谈几点?


首先,CSS+DIV布局对搜索引擎友好,为什么友好?是因为CSS+Div布局的代码简单,提高spider爬行效率,能在较短的时间内爬完整个页面,这样对收录质量有好处。真正的网站优化不只是为了追求收录,还需要良好的用户体验,代码简单自然会有良好的响应速度,对提高用户体验很有帮助。

 

例如:结合CSSXHTML来制作导航菜单会比使用Javascript或图片来实现同样效果更加节省代码(CSS可以结合一些图片来制作导航而且代码量很小,而完全使用图片的导航代码量也要多很多)

另外如果尽可能完善到能通过W3C验证,与普通表格组成页面的网站相比,使用XTML架构的网站排名状况要好。

 

其次,内容与样式分离,修改设计效率高。到CSS里找到相应的IDclass或标记修改属性值即可,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。而且可以实现一键切换整个页面风格。

 

还有视觉方面,以往表格嵌套的制作方法,使得页面与页面或者区域与区域之间的显示效果会有所偏差;而使用DIV+CSS的制件方法,将所有的页面或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。使用CSS来设计导航菜单并不会限制你的设计。事实上,CSS会提供更加灵活的导航设计方案,当用CSS来设置背景图时也能实现各种视觉效果。

 

二、采用CSS+DIV布局,从何做起。

 

当你从美工那里(如果没有美工,我们后面谈)拿到一个页面的草图,准备用CSS+DIV实现这个页面,那么一般要经过这么三个步骤:

分析构架,模块拆分,整体调整。

 

第一步、分析构架

 

例如,分析下面这个页面

CSS+DIV布局之道


我们应该把他的内容忽略掉,直接提取出这个页面的骨架,也就是这个页面的排版构架。见下图。


CSS+DIV布局之道


其他常用的布局,大概也就是下面这几个,你就从网上看吧,大概都差不多,无非就这么几块倒来倒去。


CSS+DIV布局之道


第二步,模块拆分

 

这里主要是分析框架中都有哪几部分,也就是考虑这个页面由哪些元素构成。方便我们实施DIV分块。

 

从上图,我们也很容易看出,这个页面主要有四个部分:导航和顶端banner,左侧列表,内容区,脚注(草图中省去了,太长了)

 

Div分块结束后,然后再针对内容加入CSS样式。

 

第三步,整体调整


这里无非就是对于整个页面边边角角的把握。一些收尾工作吧。

 

 

三、一些小建议,也是用CSS+DIV做页面的一点心得。

 

1、如果没有美工给你提供界面的草图。个人又没有没学基础,或者缺少灵感,建议,从网上找一个差不多的界面,实行高仿(或者找一个免费的模板),当然不要总是对一个界面下手(小心侵权)。这样效率高,页面效果也不会太差,太差得你也看不上是吧。或者,你不想从头设计页面的某个部分,例如导航菜单,那么有大量的免费资源可以拿来使用。

 

拿来主义虽好,但我可不提倡,因为这样会和其它网站使用同样的风格。不过有一些菜单可以自定义样式来符合你自己的网站风格。

 

2、如果要做全浏览器兼容网站,那么一定要边开发,边检查浏览器兼容,为什么?如果你在一个浏览器上开发完一个界面,甚至所有界面,那么忽然换一个浏览器测试,出了问题,如果小问题还好,如果是位置等一些问题,你会发现,它会打乱你整个页面的布局,等于你又要从头开始检查,一点点改过来,我试过,麻烦得要死。

 

没办法,这是CSS现在最主要的缺点:并非所有的CSS元素与所有的浏览器兼容。正因为如此,我们必须写一些自定义CSS来解决问题。这也是它与table布局的主要区别之一。

 

3、火狐和谷歌提供的开发人员工具,例如firebug等,一定要会使,无论是研究别人的页面,还是维护自己的页面,都会为你的开发带来事半功倍的效果。

 

4、做好积累工作,在开发过程中用到的小技巧,特效或者处理一些浏览器兼容的方法,一定要记录下来,积极分享,于人于己都有好处。

 

5、要使你的页面尽可能的轻,能用小图,不用大图,能用小图repeat-x,绝对不要用一整张大图。至于精简代码的好处,前面已经提到。