伴随着"div+css"在互联网的流行,“网站重构”的春风吹遍了华夏大地,一时间互联网上风声鹤唳,“div+CSS”俨然已成为一种网站制作过程中采用一种布局的“时尚”,数一万计的网站都不约而同地开始了自己的“网站重构”。然而打开这些网站的源代码,看到哪些形形色色源代码,却时常令人哑然失笑——
当我们看到有嵌套6、7层的div布局,有成百上千的表现css……现在关于div+css标准的书籍也是越来越多,除了极少数标有“高级技巧”的书籍之外,则很少有人不会在自己著作的前几章强调这样的一句话——“结构与表现的分离”。但是我们来看一看这些书籍的读者们,又有几个人认认真真地读过前几章呢?更多的人则直接跳过那些乏味的结构讲解,一头扎到貌似高深的布局技巧与div+css中去呢?
其实采用div+CSS这种方式来进行网站制作方式从一开始就误导了很多人,急功近利的心态则更是造成这种现象的罪魁祸首。
一个习惯了table布局的网站制作接触标准的第一步,本来就是不应该是去盲目寻求div+CSS进行网站制作技巧,而是努力改变自己的思维方式。
下面将结合我的切身体会谈一谈顺应标准的思维方式,其中有不少是我曾经走过的弯路,希望对刚刚接触标准的XDJM们有些帮助:
1、“代码精简”是营销手段,不是宗旨
“使用div+css布局比table布局html代码精简很多”,我在很多网站和书籍上都见到过这样句话。这句话本身是没有错误的,可以“代码精简”的确是网站制作化所带来的好处之一。然而切记,它只是“好处之一”,而不是“唯一好处”,更不是宗旨。“代码精简”更多的时候是我们用来说服那些顽固不化的老板的营销手段。网站制作标准化的唯一宗旨是“结构与表现的分离”,而绝对不是为了节省代码而节省代码。我曾经也因为网站边框甚至主体内容的表现形式统一而采用了统一的class (至今还有一些书是这样教的),这样的确比分别命名id更节省代码,然而这样做的代价是代码失去了良好的结构。失去良好html结构的后果是:一、html源代码没有了可读性;二、网站增加了未知的维护成本。试想,当某一块内容因为需要而作出表现形式的变动,比如说要修改某一个地方链接的颜色等等,我们就不得不去修改页面源文件,增加额外的css样式,工作量比起只需要调整id分组就大了很多。而且长此以往下去,结构将会变的越来越差,形成难以逆转的恶性循环。
还有一种情况就是,出现在id的命名方面,也是我曾经犯过的错误。那时为了“代码的精简”,而把主菜单命名为“mm”,二级菜单命名为“m2”,三级菜单为“m3”,导致的结果则是严重降低了网页的可读性,使其他同事很难接手,图省事却累了自己。同理,文件及文件夹命名方面也不宜过简,像一本叫做《网站重构》的书籍里建议把所有图片都用“i”目录存放,我本人以为这并不可取,除非你能为这种高度缩写的目录结构撰写详细说明并保证每个相关人员包括其他制作人员、开发、甚至懂行的老板……都能理解和执行,否则那样做只会给你自己增添不必要的麻烦。
2、ID是狙击枪,class 是双刃剑
想要做好网页结构,id与class 都是必须熟练掌握的,所谓“两手抓,两手都要硬”。ID就象狙击枪一样,可以帮助我们精准地定位要想要加载样式的元素;而class 则是侠客的佩剑,信手拈来更加轻盈灵便,两者的有效结合能够才能制作出结构良好页且表现丰富的网页。然而现在有一种错误的观点,就是用class 完全来代替id,事实上许多网页源代码也的确如此,打开来通篇css样式,找不到一个id。造成这种现象的原因是很多种多样的,然而自用table布局的时代传下来的根深蒂固的“CSS=class”的观念才是本因。的确,class 比id用途更广更灵活,但同时我们也必须意识到,class 对于构建良好的网页结构远不如id有效。id的强制唯一性使得我们可以很容易通过id检索到我们需要的任意模块,而class则没有这个优势。虽然我们可以为模块定义唯一的class名,但这样的前提是--只有网站制作的作者本人才可以动网页样式。否则换一个稍微懒一些伙计,看到样式相同便直接把前面的class拿来套用,其结果就是我们发现网页里有十几个模块都叫做“gonggao”或者“xinwen”,以至于为了区分还不得不加上大量的html注释,这样的网站结构显然并不是我们想要的。再者就是前面提到的,通过通用class所精简下来的代码,又不得不在每个单独定义的class中挥霍掉。
3、并不是所有的内容都需要div做“容器”
在看过很多网站之后,我发现一个问题,有的网站的主菜单是采用
地址:西安市莲湖路37号省外贸大楼623室 全国统一服务热线:400-600-7112
CopyRight@2009-2012 Qianxinet.com 版权所有 西安千喜网络科技有限公司