Div+CSS布局应该注重语义、注重代码的重用性!

css

  普通的一个页面无非就是HTML以及CSS和JS等脚本组成,相对以前来说,大家都是用表格(table)来实现页面的布局,而现在呢,追求的是用层(div)来布局了。很多朋友说用层(div)布局跟用表格(table)布局的差别很大,这个我同意,因为表格(table)是用来体现二维数据的。但是既然我们以前能用,而且一直在用,也就说明表格(table)布局还是可以的。但是为什么我们现在要用用层(div)来布局呢?因为我们要让HTML的每个标签都能在语义上很好的体现出来,即使看源代码也能很明了它的作用。

  想想以前,什么CSS样式、什么HTML代码都不管,只要能在FrontPage或者DreamWeaver上制作出页面上要体现的效果就可以了。而现在呢,大家放弃了FrontPage,为什么?因为FrontPage会产生很多无用的代码,影响代码的可读性。既然注意到了这点,那么现在的重构,标准,是为了什么呢,还不是为了在代码上的一个可读性吗?

  都说重构后的站是要把表现和结构分离,那把所有表现跟结构都分离就完事了吗?不!我们还要把表现的内容利用,而且是反复利用,不是用过一次就不要了。如果把要表现的内容当做一次性筷子用过一次后就不要了,那重构你的站点似乎意义不大,反而让你的样式文件变多变大。要把表现的内容反复利用起来,在结构上要做的事情也将影响到样式的调用,而且如果能将每个结构的语义用很贴切的标签来体现,那对源代码的可读性也是一个很大的提升。

  曾经看过一位朋友重构后的站点,他是一个<div></div>将页面所有的内容都包含在里面,当时我就在想,这样做有什么意义呢?是不是跟当初的用一个<table></table>将页面的所有内容包含在里面一样呢?这样做并不是说不可以,也并没有错,只是我们在结构上并不需要这样做,不是吗?一般最常见的是上(头部)中(内容)下(版权信息)三个部分,相对这样的,我们可以用三个<div></div>来实现。

<div id=”pageTop”></div>
<div id=”pageContent”></div>
<div id=”pageBottom”></div>

  相对这样来说,总比<div></div>一个大大的框来约束内容来得强。

  最后要说一下的就是,现在浏览器不统一,支持的内容不同,虽然我们可以用hack的方法来实现我们要的东西,不过我们为什么不稍做点牺牲呢。如果对版面的影响不大的话,是否可以放弃使用hack的方法呢?难道你的客户会去用不同的浏览器看看效果做对比吗?hack用得多了,只会对后期的修改上带来麻烦。

  按飞飞说的,偶这里都是P话,总结可以是一句话:那就是要注重语义。注重代码的重用性。
  表达能力不行,大家请勿见怪。没写过啥东西。

时间: 2024-12-22 10:42:32

Div+CSS布局应该注重语义、注重代码的重用性!的相关文章

Div+CSS布局的优点

介绍Div+CSS的优点,阿里西西建议各位朋友,做站时最好采用Div+CSS布局.  业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?       Div 全称 division 意为"区分"使用 DIV 的方法跟使用其他 tag 的方法一样.       <DIV>welcome tu alix

左右两栏div+css布局示例

左右两栏div+css布局示例 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

div+css布局优化中的整体布局

在div+css布局中,一般都这样来整体构架的 <div id="header"></div><div id="center"></div><div id="footer"></div> 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: <div id="header"> <

Div+CSS布局入门教程(二) -- 写入整体层结构与CSS

css|教程|入门教程 二.写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第

WEB标准教程:Div+CSS布局入门教程

css|web|web标准|教程|入门教程 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

基于XHTML标准DIV+CSS布局对SEO的影响

css|seo|xhtml|标准 前两天发完<SEO参考:DIV+CSS三行两列经典布局>一文,不少朋友在MSN上问我,使用XHTML标准的DIV+CSS布局对于SEO到底有什么作用.这两天简单总结了一下,写出来供参考. XHTML技术问题请参考相关网站研究,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二

网页设计基础:Div+CSS布局入门教程

css|教程|入门教程|设计|网页|网页设计 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

如何使文本在DIV+CSS布局中垂直居中

css DIV+CSS布局中垂直居中的实现. <html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><