随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,而52CSS.com也立足于CSS网页布局技巧的普及,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉,比较上手; 但是,它却阻碍了一种更好的,更有亲和力的,更灵活的,而且功能更强大的网站设计方法——DIV+CSS。
CSS网页布局的意义体现在如下方面:
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。
二、降低流量费用
页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一:保持视觉的一致性;
以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优势。由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。
说了这么多CSS网页布局的意义与优点,同时也不能轻视
CSS网页布局的副作用:
一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器
中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
四、
DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至
不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格
布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构,内容,相关网站链
接等因素始终是网站优化最重要的指标。
分享到:
相关推荐
div css 网页 布局 模版 三行一列的 具体的下载后看吧
利用div css进行网页布局的精点教材,欢饮下载
DIVCSS网页布局实例:十步学会用CSS建站.pdf
DIV CSS网页布局经典
变幻之美DivCSS网页布局揭秘-案例实战篇源码
div css 网站布局实录,有各种布局的实例demo!
CSS揭秘绝对是网页前端初学者必备必须的好书,实践出真知嘛,内含有配套源码,如果有问题无法解决,可以参照源码纠错
div+css布局大全 B/S项目表现层也很重要!
《变幻之美:Div+CSS网页布局揭秘(案例实战篇)》通过作者原创的4个案例,细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果分析,以及最终CSS页面...
DIV+CSS网页布局与美化,div,css,web2.0
变幻之美-DivCSS网页布局揭秘(案例实战篇)案例源码
DIV+CSS 网页布局常用基础知识DIV+CSS 网页布局常用基础知识
资源名称:变幻之美—Div CSS网页布局揭秘(案例实战篇)内容简介:本书通过作者原创的4个案例,细致地介绍了基于Web标准的Div CSS网页布局的实现方法。每个案例均按照效果图设计、效果图切割、HTML代码编写、页面效果...
div css布局大全,想了解布局的话不妨看一看。 div css div css。
《变幻之美 DivCSS网页布局揭秘》源文件
div+css网页布局设计模板源代码。比较精炼,纯div和css布局,色彩搭配的很好。共6个网站。
Div+CSS网页样式与布局从入门到精通的配套实例
下面我们就开始一步一步使用DIV CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWork 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全DIV+CSS布局大全