DIV布局入门

从03年学习网页设计开始的几年里,一直在用TABLE布局网站,也就自然而然的形成一套固定的思路。一直到08年,逐渐开始学习了网页标准化的布局思路和方法,在这场思路转变的过程中,从刚刚开始感觉有点不知所措之外,慢慢的从最基础的标签学起,一步一步走了过来。后来感觉到在使用DIV布局已经成为一种习惯,越来越感觉到得心应手了。总结一下整个学习过程,把这个思路写出来,希望能对初学者有所启发。

传统的表格布局的特点

1.表格布局的根本是结构层和表现层混杂在了一起,当我们只修改一些简单页面时,或者感觉没有什么影响。但如果在哪一天,我们需要重复修改成百上千的页面,问题就接踵而来了。假如由于某些原因我们需要把背景替换成黑色,边框变成1px黄色,文字变成白色,所有文字居中。使用表格布局的网页,可能就要一页一页的去修改。

2.我们在使用表格布局的时候通常会一个表格加一个表格嵌套的写下去,这样的代码冗长繁琐,维护麻烦,重复代码较多,增加了带宽的消耗和成本。

3.表格布局由于表现形式的要求,经常会出现表格的多重嵌套,而浏览器对于表格的解析是将一个表格全部全部下载解析后才会呈现出来,过多的嵌套严重影响网页打开的速度。

使用WEB标准布局的优势

1.数据的多样显示。制作的网站可以调用不同的样式表适应不同的设备,做到内容与设备无关。

2.保持整个站点的视觉一致性变得非常简单,在网站改版修改样式表就可以轻松改版。

3.由于结构清晰,网站数据的集成、更新和页面处理更加方便灵活。

4.代码简洁,对于页面打开速度有很大的改善。

5.关于两者的更多特点请看DIV布局和table布局的区别

DIV布局入门知识

刚开始的时候理解结构和表现的不同之处可能很困难,特别是初学的时候不习惯于思考文档的语义结构时。当结构和表现分离后,用CSS文档来控制表现就是很容易的一件事了。理论上讲,我们应该用一个HTML文档来保存内容与结构,用一个CSS文档来控制整个文档的表现。抽象点说,内容可以理解成最基础层,然后是附加上去结构层和表现层,最后再给他们加上“行为”,这样一个基本的网站页面就布局完成了。下面分别说下内容、结构、表现和行为的概念。

1.内容:内容就是页面实际要传达的真正信息,可以包含数据、文档或者图片等。注意这里强调的“真正”,是指纯粹的数据信息本身。比如一个不包含任何辅助的信息,比如导航菜单、装饰性图片、完全没有经过排版的古诗等。举个例子:我的博客的导航菜单“首页,SEO专题,WEB标准专题,关于我”些就是属于真正要传达的信息,这就是所谓的“内容”。

2.结构(Structure):我们可以看到上面的文本菜单是不经过排版的随便放置的,让人难以阅读和理解,我们必须给它格式化一下。比如我们看到许多古诗通常有标题、作者、章、节、段落和列表等内容,所有这些就是页面的结构。结构使页面内容更加具有逻辑性和易用性。

3.表现(Presentation):我们虽然定义了结构,但是内容还是原来的样式没有改变,例如导航的字体没有变大,导航也没有背景,没有任何修饰。所有这些用来改变内容外观的东西,我们称之为“表现”。下面的图片就是对上面的内容文本用表现处理过后的效果:
关于“表现”的范例图片

4.行为(Behavior):行为就是对内容的交互及操作效果。例如,我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来,可以判断一些表单提交,可以响应读者的一些操作等。我们在上网时经常遇到的留言版像这类动作都会用到行为。

小提示:网页标准并不是完全不使用表格

在我刚接触网页标准时,我进入了一个误区,那就是在布局网站时完全不再使用table标签。后来在遇到一些数据表时,比如公司员工联系表,产品与型号对应表等,发现在这个时候表格非常好用。园子想提醒大家,对于表格型数据,还是应该使用table。在HTML和XHTML里,表格不仅仅是行(row)和单元格(cell),还有很多其他元素,运用好这些元素,你就可以更好的设计出有亲合力的表格布局。

发表评论