您当前的位置: 站长圈 > 网页前端

为什么要用CSS布局

来源:站长圈|0 作者:adminzzq 点击: 0
1,结构,表现,行为分离
结构:html代码.
表现:页面的外观呈现.用CSS语言来完成
行为:指用户与页面元素的交互.比如点按钮弹出对话提示.通常用javascript来体现
2,解决html代码可读性的问题.
在用table布局的时候,由于大量的table.tr,td重复嵌套,如果不借助于DW等可视化编辑器,阅读一份html文档比阅读一个php的类复杂的多,对于复杂的网页,简直就是一个不可能完成的任务.采用css布局的关键是要有一份结构良好的html文档.不仅人可读,机器也可读.
而且精简了大量的无意义的表现元素,提高了搜索引擎爬虫爬行的效率.能够在最短的时间内爬完整个页面.这对收录质量有一定的好处.
由于能高效的爬行,就会受到爬虫的喜欢,这对收录数量有一定的好处.很多推广的文章称,搜索引擎一般不抓取三层以上的表格嵌套,当然这一点没有得到搜索引擎官方的证实.但根据目前掌握的情况来看,爬虫遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面.
 
3,有以上两条足够我们在做网页的时候使用CSS布局.当然使用CSS布局还有其他的好处,大家可以搜索一下.这里就不多废话了.
 
二,工欲善其事,必先利其器.
使用CSS布局必备的几个软件:
1,浏览器:firefox,chrom,opera,ieTester.
firefox下载地址:http://firefox.com.cn/
chrom下载地址:http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI
opera下载地址:http://cn.opera.com/
ietester下载地址:http://www.my-debugbar.com/wiki/IETester/HomePage
 几个浏览器的作用:
2,插件:
firebug:对于网页开发人员将firebug称为神器并不为过.他是firefox的一个插件.ie和谷歌浏览器也有类似的插件,但是和firebug相比要差很多.
安装,简单功能演示.
3,编辑器:
由于我们的目的是要编写可读性良好的html文档,所以使用什么编辑器无所谓,自己喜欢就好.
我个人比较喜欢vim,editplus,phpstorm这几款编辑器.可能我们很多人喜欢使用dreamweaver,当然这也没问题.DW也是一款较好的网页编辑器.我个人认为DW的主要特点是:有用的功能太少.无用的功能太多.
 
三,使用css布局页面的布骤:
1,根据需求(也可以说:根据效果图)编写html,也就是结构了.
2,根据效果图编写css,也就是表现了.
3,编写js,也就是行为了.
 
四,编写html的规则:
1,编写一份html文档,首先我们不要忘记了写上文档申明.也就是告诉浏览器这个页面渲染的标准.
这里我们推荐使用最新html5文档申明.好处是:所有浏览器都认识,而且会引发所有浏览器以标准模式解析页面.他的写法是:
 
 
2,写了文档申明之后,就是html根元素了.
 
3,书写一个简单的html页面.顺便介绍常用的html的标签,强调注重标签的语义.
 
4,导入CSS文件.
1,外部样式.
2,内联样式.
3,行内样式.