第一篇:喜新厌旧,逐步习惯Xhtml+CSS2的布局方式
近来有很多网站用Xhtml1.0标准将站点重构,其中包括yahoo,163,CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上她们了,页面构建技术就是若干MM,我们也要来个喜新厌旧。
一、为什么要学Xhtml+CSS2
首先,标准的代码便于网页在各种浏览器中的顺利显示。
一些不规范代码的网页在IE下能正常显示的,在Firefox和Opera上可能就无法正常显示。在这一点上我们不得不说IE相比之下更有包容之心,虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器,但我们同样无法忽视Firefox、Opera等浏览器在逐渐增大的用户群,而这些人群多是对计算机较为精通的老鸟,被他们骂自己网站太垃圾的话我想滋味应该不好受,呵呵。
当然这也不是说使用table等做的网页就不符合标准(使用table带来的一些弊端下面也要谈到),只是当前不少人习惯用先用Photoshop(以下简写为PS)设计平面图,之后用Fireworks(以下简写为FW)或Imageready(以下简写为IR)做切割,之后在Dreamweaver(以下简写为DW)或是Forntpage(以下简写为FP)来生成html,这些可视化的软件固然方便,但由此带来的问题也是多多,这些软件多多少少会自动增减一些代码,如果没有查看代码的习惯,很容易导致一些不规范代码的产生。,由于使用FW或IR做出的切片一般对图片的特征无法做出直观的描述,所以这样做出的html给以后的维护也带来了麻烦。
其次,Xhtml + CSS2使页面布局更加简单
假如之前对页面进行布局或设置了一些相对复杂效果的话,通常的做法是采用大量的表格嵌套对一个页面进行布局,用单元格来描述区域,这样在WYSIWYG等软件中倒是比较直观,但这样影响的有几个方面,首先影响下载速度,因为table的显示不像DIV一样,table在浏览器中的显示是需要全部下载之后才能显示,所以会影响下载速度;其次对于手写代码来讲,这样的结构非常不直观,大堆的表格嵌套可能让习惯手写代码的设计师感觉头晕;另外,还可能牵扯到一个地方就是单元格的合并,假如你不小心搞错了一个colspan=”?”,那么整个页面的布局将面目全非。
而用CSS做布局,就像是在PS中对图层进行操作一样,利用CSS中相对和绝对的概念,整个页面的布局就轻松和方便多了
此外,Xhtml可以减小网页文件体积
使用Xhtml+CSS2构建网页其实一个很重要的目的就是提高浏览速度,虽说现在网速越来越大了,但谁不想自己的站点速度更快呢,有人还曾经说“世上最远的距离不是地球到太阳,而是中国电信到中国网通”,如果你在电信服务器上的站点被网通线路的用户浏览,网页文件大小势必也会影响浏览者的感受。而采用Xhtml来构建网页则利于你解决这个问题,经过笔者测试,实现同样的效果图,使用Xhtml构建的网页比使用传统table方式构建的页面体积减小1/2左右。相信很多人会喜欢身材苗条的MM,呵呵
二、不同层次的学习者如何快速入门
感受了以上几点,我开始逐渐习惯使用Xhtml+CSS2来构建网站,那么谈了这么多,究竟从哪里入门呢?这里,对于不同的人群,我建议以下几种方法快速入门:
对于html及css完全不了解的新手:首先建议你还是学习以下html,因为它当对简单一些,更易于入门,熟悉了一些html的基本语法之后,开始学习Xhtml的一些规范写法,这里推荐一些学习资料:
Xhtml中文参考:
http://www.standme.com/Xhtml.htm
HTML和XHTML常见问答:
http://www.transwiki.org/cn/xhtmlfaq.htm
有英文基础的可以查看这些页面:
XHTML™ basic:
http://www.w3.org/TR/xhtml-basic/
XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition):
http://www.w3.org/TR/xhtml1/
XHTML™ 1.1 - Module-based XHTML:
http://www.w3.org/TR/xhtml11/
XHTML™ 2.0:
http://www.w3.org/TR/xhtml2/
对于有html基础的朋友,推荐这篇阿捷写的文章:
循序渐进学习Xhtml+CSS2:
http://www.w3cn.org/article/step/index.html
通过一步步的逐渐由不够规范的html转变到Xhtml
对于有html及PHP语言基础的朋友,这里推荐一个快速搞定Xhtml的方法:
安装一个Wordpress,官方站点:www.wordpress.org,当前最新版本是1.5.2,之后用最短的时间熟悉wordpress的模板系统,改动以下wordpress的模板算是熟悉一下DIV和CSS2的感觉,之后找一个不错的页面,将wordpress的模板改成与之相同的。最后一步则是按照自己所学到的Xhtml+CSS2的知识做一套wordpress的模板出来,经过这三步,我想你的Xhtml+CSS2算是真正入门了。