重构之美
在网上看到的一篇贴子，原址在这儿把一些有用的知识点给剪下来，以备学习标准化时用得着
------------------------------------------------------------------------------------
重构之美－迎接网站标准化设计的来临
作者：爆牙齿 yuntiandevelop@163.com 首发蓝色理想经典论坛
写下这个题目，好大啊，我不知道我能不能说清楚，毕竟我真正接触标准才不到一个月，实践也才刚进行了3天，完成了本人第一个标准化网页，如下图所示。在下一步工作，将这个门户站点全面标准化架设之前，我想和大家交流交流，带动一下新手，请教一下高手，为标准的推广尽点微薄的力量。
页面还有很多细节未处理设计，比如页头，还有部分版块未加，色调还未最终定稿，不过大体的感觉已经有了，排版结构也基本差不多了。点击可放大（在地址栏中将_s去掉）。
在怀疑中选择
记不得是六月的哪一天了，我例行公事般的在网上游荡，一句话蹦入我眼帘：99％的网站是过时的。开什么玩笑！对于从事互联网网站行业的我，这自然是个大事，下面的事就不用说了，很快，'网站重构'这四个字进驻我的脑海。
跑了几次书店，书没到。于是我只好在网上看些其他相关文章和讨论，很是饥渴。终于在七月十号左右我看见书摆上了成都西南书城、都乐电子书店的书架，迫不及待的在西南书城地上坐下，翻开书……（还是都乐好啊，有椅子还有桌子，随便你看、抄）说老实话，我对重构这本书是失望的，不知道是原书问题还是翻译问题，很杂乱，东拉西扯的。头几章我看得比较仔细，很快就越翻越快，距技术那部分还有很大篇幅的地方，我已经不耐烦了，扔掉，非常抱歉，阿捷。其实我是非常感激你的，不管怎么说，最终我走进了标准设计。（我的习惯，在对新事物做出选择和决定以前，我不会去碰技术方面，我需要从概念上全面审视它，一旦我觉得有前景，值，我才会着手于技术的学习，并义无反顾的走下去，毕竟方向是很重要的，而技术再难都可以被攻破，时间实在太珍贵了。）放下书，头脑比较乱，这就是重构？感觉就像一个新的泡泡被吹了起来，标准是有价值的，但是有那么夸张吗？我们来看看它所宣传的优势：
1、节约带宽。
这个算什么优势？让我想起了曾经使用压缩网页代码工具、曾经为一个JPG的图片1％的调整压缩比以获得最佳效果最小大小的时代，随着互联网的高速发展，这些都成为了过去时，它们对网站速度的影响越来越小，小到可以忽略。没人再用压缩代码工具了吧，曾经为在压缩比为54％、55％之间都要比较半天的我现在基本上通通设定为80％，唯一保留的是还在JPG和GIF中保持选择，那也更多的是为了质量，而非大小。
2、完全兼容各种浏览器（实践过程中发现，其实也不是，相信还没表格兼容性好）。
在IE统率98%以上的江山下，它就是标准，不要说国外有很多人用其他浏览器，那也是相对于中国而言，我相信国外还有更多更多更多的人用IE。其实浏览器的兼容性很早就在谈，但IE实在太普及了，现在翻出来重提感觉意义也不大。你相信IE会垮掉吗？你相信短期内LINUX会普及到桌面吗，还要超过WINDOWS。所以，翻旧帐而已，算什么优势？
3、盲人阅读器。
我靠，我都要笑出声了。走开走开。（别骂我歧视哈，我说事实而已）
4、方便的改版。
是吗？我怀疑，而后实际上也是不可能的。我们来看看，首先说明，标准的定义是抛弃表格布局。
第一种改版方式：版式不变，变色彩。
这种情况下，DIV比表格有优势吗？我是说布局上。我很早就开始都使用CSS来控制所有色彩，当然包括表格背景，用表格布局的网站我同样可以只改动样式表。（后来的实践证明，这种情况下表格还有优势，因为他的样式表很简单，而DIV的样式表很复杂，尤其是在对整个网站而非单个页面。如果一个大网站全部标准化，他的样式表将数倍甚至十几倍于用表格布局的样式表。你认为谁快谁慢？？？）
第二种情况：包括结构在内全变。
这种情况下，做为表格布局的网站需要按照新的设计稿重新画表格进行设计。难道标准化的网站就可以只修改样式表吗？（当时我表示怀疑，而后的实践证实了，不可能的，DIV的设计是有针对性的，结构变，DIV、UL、LI、SPAN、P等等全部都要跟着变，样式表得全新设计，那和修改就不一样了。我相信那个一个页面，百多样式表的模范代表，里面不会有2个结构完全相同只是数据不同的样式表。那样的话就回到了第一种改版方式。）
另外还有一点，关于图片的问题，不管那种方式都是不可能改变图片的色彩和大小，所以一旦改版，所有的图片几乎都要变，改动越大变得越多。
除非网站只使用色块，不用图片、FLASH等或很有改版针对性的少量使用，那么方便的改版……梦想吧。（PNG的透明模式是个不错的东西，不过他也只解决了色彩的问题，而且IE哪年哪月支持还遥不可及。）
5、支持手机、PDA等无线设备的访问，并兼容未来的新设备。
这个是唯一一个让我觉得有价值的地方。但是……后面谈。
6、在设计上绝对优于表格的控制。
这个是在后来的实践中我发现的，也是最终将我吸引到标准化设计中来的最重要的因素。表格我用了近五年，可谓炉火纯青了，而DIV让我知道了原来页面上每个象素都是可以在掌握之中的，那种精确是表格代替不了的，一句话概括一下吧：基于表格的设计思路是二维的，是平面的，而基于DIV的设计思路是三维的，是立体的，真的是天马行空，随心所欲！其实我最初在DW3的时候用过半年的层，原因简单，它是三维的，而且可以拖动，但是很快我发现层糟糕的定位让我根本无法控制它，当时不知道是离开了样式表的原因，唉，如果当时，2000年哦，我研究进去，发掘出CSS的话，啊哈哈哈哈哈哈……
7、还有一些优势是实践中体会出来的，如果有机会，以后再一点一点的说。
经过一阵思考，我在想一个问题，那就是XML，书中很多次的提到它，而且也很明白的说，标准的意义是以便以后平滑的过渡到XML。XML不是新东西，两年前就被炒过一次，实际上对于当时来说，过于超前了，就是对于现在来说，对于前台也是很超前的。通过重构一书，我走近了XML，以前总感觉XML很远，概念也比较模糊。对于一种过渡技术，我是不喜欢的，于是放下重构后，我走向XML和XSL的书架，那才是终点，那才有挑战性。
但是一个很现实的问题，目前大量网站根本无法直接走向XML，过渡是必须的，于是我依然关注标准化，但我一直没有动手也没动脑，只是关注，因为大量基于标准设计的网站设计都很糟糕，一些比较界面比较优秀的设计都出现在个人网站上，很少，而且多数是国外的网站，我们知道，英文的表现力比中文强太多，所以我一直很犹豫，作为一个设计师，我肯定无法为了新技术而抛弃界面的美观与友好，UI在日益重视的用户体验设计上举足轻重，更何况还有品牌、VI等平面设计理念在里面，怎么可能放弃，再说了，标准宣传的优势我已经几乎否定了。另外，如果标准只能用于小型的个人网站或企业网站的化，那么标准的普及将受很大的影响（这也是标准推广中需要考虑的，我们现在是农村包围城市，是自下而上的进行推广，但是我总觉得如果能由门户网站带头进行推广，充分发挥门户网站的影响力，自上而下的推广的话，效果肯定会好很多。），我一直希望看见一个界面美观的，中文的标准化的门户网站，但是没有。
直到一天，我在看了一篇文章和一个网站后，一切都变了。这片文章就是阿捷的《理解表现与结构相分离》，这个网站是www.themaninblue.com。我个人觉得阿捷这篇文章写得相当不错，建议每个设计师都认真看看。我们越来越多的使用样式表控制整个站点，恨不得将每个表现都写进样式表，最初是字体大小，然后是字体色彩，然后是边框，然后是单元格背景色，然后等等，目的是什么？表面上是为了方便于控制和修改，实质上我们是在潜意识的，不知不觉将表现和内容分离。但是由于表格布局的原因，我们始终无法做到将表现与内容彻底分离，依然有很多仅仅是为了美观，为了方便，为了炫耀等等和内容无关的表现借助表格和内容混杂在了一起，如胶如漆，好不缠绵。这不得不让我重新审视标准，尽管他宣称的诸多优势感觉很缥缈，但是它这个最基础的概念确是相当实在的。而那个国外的站点则让我看见了在标准上实现设计的希望，而且他对分辨率的自适应也让我为之一振，虽然表格也可以用百分比来兼容分辨率，但百分比是很难准确定位的，我几乎就没使用过用百分比来控制表格。
很快，这个网站就躺在我硬盘里了，打开他的所有CSS，打开他的首页开始研究，尽管刚开始看还是比较茫然，但是经过粗略的看了它几个DIV的实现方式，感觉似乎也不是很难，于是我很狂的对徒弟说到：一周内熟悉，一个月内精通。我终于下定决心走向标准化设计道路。
正好，我们的网站面临改版，我决定将标准全面应用于新网站，在提交老总的计划中我写到这么一条：
……
2、学习重构技术并全面用于新网站的建设，实现国内第一个全面使用web标准的门户站点。（由于我还完全不会，所以这个呢，视开发过程中具体情况而定，若确实太难，则放弃。毕竟目前重构技术应用只是出现在简单的个人网站中。）
……
依然有所保留，依然有所畏惧，毕竟一夜间，积累了5年的表格排版技术化为灰烬，还是不是那么舒服的，但是决心已下，唯有全力以赴。
抓紧时间在7月27日完成改版设计稿，7月28日一早，打开Editplus、DW、IE、Opera、Mozilla，打开沈小雨的样式表手册、硬盘上的themaninblue与macromedia两个网站，双手一搓，开始了我的第一次标准化设计。
---------------------------------------------------------------------------------------
在设计过程中，由于第一次接触，所以这一秒否定上一秒的事情很频繁，随着设计的深入，了解的深入，我不断的向前修改、整理我的代码，自我否定了一次又一次。所以在写下面文章之前，我想，如果我给大家一个通过了验证后的代码意义不大，这样的代码应该随处能找到，所以我想我还是重头到尾把过程写下来，包括各种错误，我故意留下来，就是要让你看见我犯过的错误（失败我都不怕，更不会怕错误），然后再让你看见我是怎么改过来的（当然很可能我改得也不怎么好，但是我一直在改！）。
我是一个典型的初学者，而且是那种爬还不会就想破百米记录了。通过验证后回头看，我犯的错误很多都是不常见滴（太低级了），因此我声明一下：
高手们啊，对于下面文章中错误的代码或凌乱的结构，私下狂笑一下就行了哈……英雄，放过我吧。估计你看了我的代码你就知道我的双手有多新，是多么的洁白无暇，你会于心不忍的。
比我还新的新手请注意：代码几乎毫无借鉴的价值。
不过呢，我在三天内从零圈圈到完成这个首页，将表现与结构完全分离，并且三大浏览器显示效果几乎一样，CSS通过认证，只是页面文件不能通过认证而已。所以对于新手，应该还是有不少思路可以学习。
最后，我不想过多的纠缠在代码上，自己实践或者看书会收获更大。更多的，我希望能在这种全新的设计思路上进行探讨。我会把我的思路表达出来，也希望大家一起在这个方面多讨论。我说过，技术是为思想服务的，所以思想的正确性非常重要。为了避免某些人在这句话中钻牛角，补上一句：当然，技术的高低要反过来限制思想的宽度和深度。
第一天 轻松上路
所有工具打开了，第一件事设置目录结构，在IIS中设置站点，考虑到以后可能的多风格问题，在样式表和图片目录下分别建立DEFAULT目录。
好了，什么都不想，先试一下：
我的第一个#开头样式，以前都是用.开头或者不开头的。现在都不完全清楚#和.的准确概念。#用id针对引用，.用class针对引用，不开头的全局引用。
后面代码请自己复制到下面调试框中相应位置查看。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
OH YES！甚至无需设置宽度就自适应分辨率。
咦，色块没贴边。简单，样式表中加上：
body
{
margin: 0;
}
第一个不兼容问题出现，IE、Mozilla正常，Opera依旧不贴边，想了想，在body中添加 padding: 0; 一试，成功。愉快。
热完身，打开设计稿，开始研究。
页头到阴影前为止，因为要在程序中包含。先攻页头。
我需要页头两边自适应分辨率，自然需要嵌套居中的770DIV，这里就有选择：（导航下的白色背景是一个很淡的渐变，显然不能用背景色）
1、包括阴影从上到下四个DIV，然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
2、两个DIV，因为阴影得平铺，估计还要使用z-index，所以必定单独一个。
3、三个DIV，阴影一个，导航一个，上面一个。
1号最终会有6个DIV，其中要单独为一个小色条设置一个DIV，不值。2号感觉不便于将导航独立出来，最终选择3号。小色条被包含在导航DIV中，便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺，‘LOGO’虽然是网站名，但属于表现，通过CSS手册知道背景可以不平铺，爽，于是设为背景，居中，不平铺。看了下position的属性，大概理解relative是指不浮动，顺序向下排， absolute是浮动，相对上层的定位。DIV的居中问题，查看其他代码知道是设置margin: 0 auto;
OK，写代码如下：
[height: 43px;]这里本来是45px，但设了padding之后被撑大，由此知道了padding要影响高和宽，后来知道margin和border也一样，所以有些时候要高宽设置要做相应的裁减。
好了，页头的大局搞定，现在开始做导航，先分析。
如果用表格，很简单，两行十列，spacing为3，然后就是切图，每个图片左和右多切1px背景色，做botton。但是离开表格我就不知道怎么办了，多谢阿捷的一篇文章，我学习后知道了display: block;的使用，详细用法大家可以去看阿捷的《不用表格的菜单》和手册，这里我简单说一下我的理解：许多块元素默认是垂直显示，就像你有一堆方块，你列出来交给浏览器，浏览器的显示是从上到下顺序排列，而display: block;就是让浏览器水平排列这些方块，并且，遇到所在嵌套的边界就自动换行继续排列。好，现在我就将导航中的一个栏目设置为一个方块，然后不断重复直到我有17个方块，通过设置它的宽度，让它在水平排到第十个方块时到达globalnavmenu（770px）的右边界，它就自动换行了，这样导航条就出来了。方块的宽度不用计算，直接从设计稿中取，我的设计稿是很精确的。这里有个问题，由于globalnavmenu这个div是包含了小色块，默认的垂直居中显然不行，要在白色块中垂直居中才行。（看来啊，我还是没躲过，本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题，结果还是要影响导航条的定位，而且更麻烦，印证了我常说的一句‘个人名言’：困难是躲不过的，它总是会换个时间或空间重新摆到你面前，直到你迈过它才会消失。）解决办法，很明显要使用padding或margin，我选择了对方块使用margin。这又导致新问题，第一排的margin-top明显要比第二排的大，那么就不能对17个方块使用一个样式，我解决办法是上下各一个。栏目名字顺序置于方块中，通过调整上下padding垂直居中于方块。于是代码如下：
可以对方块加连接，就像对td加连接一样，更优越的是方块的a: hover可以定义样式，比如换方块的背景和色彩等各种样式，那太好了，以前需要用JS实现的响应mouseover事件就太简单了。（说明：翻转的图片、色彩、FLASH等都是属于表现，内容一般只有文字，所以图片应该设置成背景，这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接，这种做法是一种形似而神不是的伪标准，建议再认真读读《理解表现与结构相分离》，如果要使用字体，那么也应该将这种图片设为背景，再在相应位置隐藏相应文本。建议看看Micromedia的网站，他是怎么处理他全FLASH的页头导航？他将整个页头做了一个普通页头，然后隐藏了。浏览器不支持FLASH或文本浏览时，普通页头就出来了。）加入以下代码实现：
好了，导航出来了，但是发现样式表重复很多，后来通过测试知道，下层继承上层的样式，哎呀概念我不说了，我说不准确，ajie帮我说吧。所以清除多于的代码，尽量减少重复且无意义的代码，字体在body中定义，加上控制字体在 li中padding，图片位置的样式，重新整理代码为：
剩下的就是反复调试，这里由于这是以前的代码加修改后的图片，所以有问题，我稍稍调了一下，还不准确。
搞定了，页头基本上完毕，下面是阴影，阴影我用了一下absolute，因为要置与广告下，对absolute的理解也不是很透彻，使用过程中，发现 div完全不居于现有的排版，它可在上重叠，也可以在下重叠，结合曾经用过的层的z-index，我对absolute的理解是它使一块脱离然后飞起来飘，更形象的理解是：你在一个平面内排版，absolute就使某一块脱离这个平面，可上可下，在于z-index的设置，既然飞起来了，不同z- index之间就不存在margin了。
将广告图片和其上阴影一起切下，开始做内容，一样，首先分析。
这里根据设计稿，我将内容分成三块，上中下三个大div，第一个div到草绿色结束，先攻它。
广告我暂时看作内容非表现，所以直接插入img，没什么说明。
然后自然是左边一块放登陆，右边一块放内容新闻，我嵌套div，这里学习 float的使用，简单，我看过向左走、向右走滴，过程中我还定义过float: center;，似乎没作用，一直很奇怪，然后忘了删，后来验证，不要脸的w3告诉我float没center这个东西，这不违法了吗？，给左右，却不给中，TNND。笑过，看代码：
其实这里发现一个问题，注意那个广告下的黑条，高度是10px，我本来是在li完广告图片后，加了一个li，定义高度为10px，黑色。但是该死的IE，表格中的BUG继续带入DIV，那就是不能低于15px，在表格中，如果想低于15px定义，典型的老掉牙例子是表格画线，我们解决办法两个，一是插入1px/0px或0px/1px的不存在图片，一般这种方法N年前就不用了，另外一种就是去除td间的 字符就可以了。但现在我找不到好的解决办法，div怎么不放个 字符让我去删嘛，多好。我试了下加入不存在图片，可以了。但是那样好委屈哦。经过思考，在我页面的特定情况下，我找到了办法，注意我的li#id设置，广告是100px，我将li高度设置成105，背景黑色，好了，5px黑色出来了。后来我还可以用控制padding和margin的办法控制低于15px的显示，但是这始终不是很方便和通用的解决办法，比如又回到表格那个例子，空白页面中用一个无依无靠，孤孤单单的div怎么画背景线？
终于，一天结束了，我还清晰的记得那天回家路上，我短信徒弟：重构没价值，不学了，还是攻.net实在。我很嚣张的对徒弟说：等不到一周一个月了，明天我就可以完成，一个两天就可以学会的技术有什么价值？而且我还是做的一个门户站点首页。
然而实际上，第二天，我几乎放弃……
爆牙齿 2004 8 6
1、回头想想，如果是表格做导航，不但代码相对超多，而且图片必须重复切割，比如我有17个栏目，我就得切34张图片，浏览时也就要下载34张图片，然而用样式表，同样的情况只需要定义2个简单a和a:hover，加上仅两张图片就完成，而且字体是文本非图片。操作时，在页面只需要控制好一个，然后就是复制，设计时，表现与结构内容在头脑中也彻底分开，看页面上则只控制结构和内容，看样式表则只控制表现，思路非常清楚有条理。
2、导航在IE和Opera正确显示，在Mozillo上却有明显差异，这个怎么解决？!important没用了。差异看我第一帖的三图。
2、关于导航，其实我的代码是没有通过验证的，原因是id重复，我使用了一堆id="first"和一堆id="second"。后来修改时，我把设置 li的padding思路换为设置上一层的margin后，就做到了对17个li只用一个样式，id都不用了。这里我给出导航验证后的代码，自己看了，不说了：
4、以上实际操作时并非像分析那样一次编写到位，而是不断调整的结果，解决一个问题再解决下一个，但是分析是尽可能的先做好。
最后给一个这一天的整体代码：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------
好文！yuntian兄别放弃！
再给yuntian兄一点点建议，我粗略的看了一下你的代码，我觉得你已经迈出了成功的第一步，只是目前的样式表文件稍欠优化，如果要做完一个完整的网站，css文件将来会过于臃肿，建议多使用继承关系和使用类选择符(class)定义样式表。这样可以减少重复的定义，精简CSS代码。你文中的那堆id="first"和"second"，如果再碰到类似情况，可以用class来避免这种错误，id是唯一的，可以用来定义大的区块或特定的范围。
关于你说的那个10px黑线条的问题，这不是BUG，你可以用line-height来取代height，比如：. bar li {line-height:10px;}，你可以在li里面放一个空格 解决这个问题。只是我觉得这里用border会更合适点。
另外送一个不用图片的导航给你做参考，弹性设计，用户可以在浏览器中自由调整文字大小，外框同步缩放，当然，没有你的漂亮，按钮的渐变背景不能实现 :)
可以一起来批评和指点一下：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------------------------------
关于导航也提一点建议：
菜单的li并不需要定义<id="first"><id="second">,因为li是浮动的，当超出宽度会自动折行，象这样：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
你修改#indextop_globalnavmenu li{width: 77px;}的宽度，比如加大到177px，就可以看到菜单自动排列成5行。
----------------------------------------------------------------------------------------------------------
div高度的问题，这个已经是老问题了，dw版很久以前就有解法了
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
前不久我也做了一个xhtml+css的首页，我这个页面不能通过w3c的验证，因为页面中有flash和marquee。
有能够通过flash验证的代码，但是那种代码把flash放到页面中显示的时候会有些延迟。
marquee是肯定不行了，得用脚本。
我也觉得没必要，光为了通过w3c验证感觉有些自欺欺人
www.ecdoors.com
自己觉得比yuntian的那个页面稍微要复杂点，需要自适应的地方多点，有些烦。我做到后面已经有些厌烦了，css也已经开始臃肿了，现在已经有15k了，当然可以再优化一点
我能切实感受到的div+css的做法的好处就是下载速度和浏览器渲染的速度快了，其他的我觉得意义都不大
--------------------------------------------------------------------------------------------
从这篇开始，我每次都整理一下几个要点，希望大家不要在一些基础问题上重复发贴提问。好了，不说废话了，直接入题吧。
第一天学到的几个技术上的基础问题：
1、使用ID将#开头的表现样式赋予DIV，UL，LI，P，SPAN等元素。
2、使用margin: 0 auto;语句将DIV等元素页内或嵌套居中。
3、使用body{margin: 0; padding: 0;}样式将页面在3大浏览器中贴边。
4、使用margin、padding、border进行间距的控制。（非常有用）
5、背景图片可平铺-repeat，可精确定位-position。
6、通过设置a:与a:hover的样式实现链接翻转的各种样式效果，背景，边框，字体等等。
7、理解display: block;的用法。（不愧为一种布局元素，在布局上作用很大，我一直在使用，但直到第三天才有所领悟。不仅仅是做多行多列的导航，不夸张的说，整个页面就是用它来布局的。）
8、position: relative; 与 position: absolute; 的区别，理解float的使用。
9、通过!important 调节IE浏览器的兼容性。
10、了解样式可继承，并由此可以减少很多重复的样式代码，优化样式表。
通过一些讨论，关于div等IE 15px高度BUG问题，感谢No3和cloudchen各给出了一个很好的解决办法：
1、设置line-height，例：XX{line-height: 1px; }
2、设置overflow，例：XX{overflow: hidden; height: 1px}
个人感觉，line-height很直观简单，overflow稍需理解。
第二天 几乎放弃
7月29日，挂着笑容，我走进公司。我这个‘自大狂’免不了在徒弟面前炫耀一下昨天的战果：看看，NO TABLE!今天我就搞完它。
孤芳自赏完毕，马上集中精神，进入工作状态，毕竟昨天一天我只完成了页头，话放出去了，要实现，还得抓点紧，不是于是呼我就找了一个位子，坐了下去……汗……
先攻左边登陆区域表单，在这个时候我的概念中只有 div/ul/li 三个元素，并且不是很清楚具体的含义。反正当成类似 table/tr/td 的关系来用。在用table的时候，我的习惯是不到万不得已，绝对不嵌套表格，尽量通过页面分析和熟练的表格技巧，充分切分表格，物尽所用，所以再复杂的页面，我的table布局都很少嵌套3层。延续这个思路，能够用li解决的就尽量不多用ul，能够用ul解决，尽量不嵌套div，后来包括ul和li的嵌套，能不嵌套尽量不嵌套。我不知道这种做法对不对，因为至今我都不是很清楚这三个标记的准确含义及使用方法。但是至少我觉得应该物尽所用，而且代码可读行好像也比较强。我见过一些朋友的页面，真的是纯div+css，代码中除了div就没了，且不说div嵌套是否会影响速度，光代码也很难分清层次结构，可读性差。
后来我发现，几个元素，div/ul/li/p/span等的应用是否合理十分影响去掉样式表后文本页面的主次结构。很多时候我们完全可以通过不同的样式表使不同的页面结构代码获得完全相同的表现，但是一旦去掉样式表，那么哪种结构更能体现文本页面的主次之分，就值得考虑了。目前我正在摸索这方面，准确说就是调试表现的兼容性同时，调试文本页面的可读性。
越说越远了，回头看页面代码，用户注册和忘记密码两块的做法和导航一致，这里说说border的使用，记得对table使用边框样式的时候我们是无法设置某一边为0px的，如果我们只需要3个边框，另外一边就得设置为 1px相应背景色，但是一些情况下会出现断点，比如目前这两块的边框，不使用背景图片是无法用table完美还原的。而div则避免这种情况，0px可以用在任何一边。虽然这只是一个小细节，但对完美还原的帮助却不小。
另外过程中，我发现其他页面代码中背景的样式可以一气呵成，于是我简单的将背景色background-color: #000; 中的色彩代码加到背景图片语句中变成：background-image: url(XXX) #000; 奇怪，怎么没变化，再加上no-repeat，还是没变化，郁闷，算了，不多想了，还是老老实实使用分开写吧。
代码出来后，就是反复的调节padding和margin，然而失败的是我调了近一上午都调不好，完成不了对设计稿的完美还原，我试了一次又一次，方法用了一种又一种都不行，总是有地方宽，有地方窄，上下不居中，左右不居中等等，另外IE的BUG又跑出来了，对于贴边的px设置总是不能准确的体现，经过一上午的奋斗，依旧无法成功，有兴趣可以查看设计稿和页面截图，差别很大。这让我很不愉快！这让我无比怀恋表格，那可只需要几分钟就可以完美还原！信心倍受打击，一上午时间无法还原一个简单表单，还号称今天要完成设计，还完得了啥？中午吃完饭，休息一下，决定先不管表单了，继续向下做。
第一件事，还是先分析。
右边内容新闻这一块，显然是动态的，要和后台配合，如果顺序做下来到没什么，但这部分很明显结构是一样的，我希望能用repeater重复显示，显然只需要设置一块的样式，我还不知道可行否，但觉得应该这么去考虑。不过通过设计稿可以看出由于有3条白色分界线的存在，所以只做一个样式来完美还原不可能，这时我想到了另外一个办法，我我只定义一块的上和左边界，这样虽然右边界会少一条线，但不是很明显，为了repeater，忍了。至于排版， display: block;，和导航一个手法。但是，但是，我注意到中间2px的黑色分界，这个，这个，想了半天，最后放弃了前面repeater的想法，算了，还是做成4块吧。内容下一步考虑，先布局。于是代码如下：
为了大家看清嵌套，我把上下div也给出来了。
反复调啊调，还是padding和margin，一个下午快过去了，IE对贴边距离不能准确体现的问题又冒出来了，我简直无计可施，相比opera和mozilla就很听话，但是我能放弃IE吗？不可能，宁愿迁就IE，! important似乎作用不大，有时候似乎IE也认可!improtant，没时间去研究到底!improtant出了什么问题了。几个小时就是乏味的调调调，又始终调不好，伴随着拳头在键盘上落下，鼠标在天空中飞扬，时不时还得出去走走，抽几支烟，怀恋一下表格。最终我实在没办法做到完美还原了，只好换了一种表现形式，先凑合着。我把对比图给出，大家可以看到，差别很大的。可能有人会觉得在这里过分的注重细节了，但我不觉得，我觉得所有的表现设计应该在设计稿里体现，做页面的部分只是一个还原过程，尽量不在制作过程中去进行版面设计。如果制作不能准确还原，那么就会对设计加以限制。
设计稿：
还原页面
另外，说一个我的经验，算经验吧：做网页设计的时候不是天马行空、随心所欲的，应该充分考虑到制作。对于我一般而言，单个页面的制作时间几乎忽略不计，根本不用考虑太多，也没什么难度，因为我在做设计的时候，就充分考虑进了制作的合理和限制，所以当设计稿完成之时，页面的制作也就在心中完成了。表格的切分，嵌套，切割图片时gif和jpg的分界，甚至高度宽度间距，样式表的使用等等全部心中有数，制作自然轻轻松松。
出现无法还原的情况，我只好归于我的div技术还不好，毕竟表格我用了4年，而div从接触到运用才不到2天，另外设计稿也不是基于div来设计的，这么一想，稍稍释然。下班了，徒弟伸过头来，我哭丧着脸，很沮丧的告诉她：唉，今天做不完了。她走了，我留下，继续向下做。
突然发现background的正确表达，于是回头回头，将所有的background属性精简，也算郁闷中一大快事。
对于内容，分成3块，标题、内容、更多，这时我依旧不清楚<p>和<span>，于是看了看其他网站代码，发现可以使用 <hX>来定义文本内容，于是没多想一口气用3个<h3>/<h4>/<h5>，代码如下：
页面我只给出一个li的定义，其他都是复制粘贴了。
剩下又是padding，margin的调整，不过调了一天的padding，margin，现在调整速度也较快了。做完这部分就赶快扔掉，不再想，再想就要发疯了。继续向下做。
这一块最初我看作是中间一块，命名div为indexcontent_middle。先解决这一块的上部分，左边广告，右边专题区域。难度依然是上下两条2px的黑色分界，IE会不听话的贴边。对于广告那块，我最终的办法是设置为背景图，虽然这样不好，假如使用FLASH就不行了，但是折腾了一天，没心力了。对于右边，调了一下，可以使用margin和!important解决。中间有个插曲，我依旧不知道<p><span>，所以对于每个图片旁边的三行标题，正好我刚使用了<hX>，所以自然我就顺延定义了<h6><h7>< h8>。结果发现只有<h6>有用，其他两个没用，纳闷，一查样式表手册，哦，原来<h>只是从1－6，靠，顺便就把 <h>这个标记熟悉了，回头想起之前使用的<h3><h4><h5>显然不合理。但是，但是，我再也不想去动那一块了，先不管了。对于专题区域的布局，display: block;，好，代码如下：
调完这个，天色很暗了，不能再做了，再晚就没车回家了，两脚一蹬，椅子向后一滑，我远远的，歪着头，斜斜的望着今天的成绩。真是悲哀，还叫嚷着今天就要做完，看看，这才做了多少，还有多少没做，即便做了的不少也是勉强完成，我太狂妄了。
不再嚣张，我就像一个战败的将军一样，灰溜溜的离开空荡的公司，灰溜溜的搭上车，灰溜溜的回到家，灰溜溜的钻进被窝，灰溜溜的睡。
后来回想，虽然这一天我并没有完成多少，但是坚持不懈的反复调试和思考摸索实践，让我对标准有了更深入的理解，在一些属性的使用上也开始熟练起来，这些一堆积，终于，速度在第三天出来了。
爆牙齿 2004 8 19
因为这一整天，我做的最多的就是无穷尽的调调调，所以我没办法很详细的写出来，尽力了。
最后和上次一样，给一个这一天的全部代码，没重新调，大概也许差不多吧：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------------------------------
用TABLE做的东西在IE里面经常这样的，没想到DIV也一样啊。不知道原理，不过知道解决的办法。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
其实关键就是这里
<ul>
<form>
<li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
<li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
<li id="select">类 型<select class="select_01">
<option>请选择类别</option>
<option>政府用户</option>
<option>企业用户</option>
<option>厂商用户</option>
<option>网站管理</option>
</select></li>
<li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
</form>
</ul>
改成
<form>
<ul>
<li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
<li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
<li id="select">类 型<select class="select_01">
<option>请选择类别</option>
<option>政府用户</option>
<option>企业用户</option>
<option>厂商用户</option>
<option>网站管理</option>
</select></li>
<li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
</ul>
</form>
----------------------------------------------------------------------------------------------
第二天学到的几个技术基础问题。
1、所谓DIV+CSS并非是将div标记一用到底，应充分使用其他标记，比如UL、LI、P、SPAN等。
2、可以通过整合的方法缩减代码。比如background: url() (color) (position) (repeat);等。不过我建议，初学者在最初最好还是老老实实写全代码，这样既便于理解也便于以后在需要分开写时能知道如何写。
3、多角度分析结构，耐心细心的调试。
其中第三点非常重要，它其实都不属于技术问题了，是一个心态问题。不耻下问是美德，但是不是事无巨细都需要问的，我做完页面花了三天，修改以通过认证花了两天，总共五天的时间，在这五天内，我只问过一个问题，是关于不使用一个ID来定义一个区域的各种表现的问题，那个问题在我花了4个小时都没解决情况下才发帖询问，在发帖没效果后，我又花了2个小时，终于自己解决了。六个小时的时间只是解决了一个小问题，或许你会认为不值得，会认为我太固执了，六个小时的时间是什么概念，我很清楚，如果使用表格来还原这个页面，六个小时我可以完美完成两次，包括需要的网页特效。但我仍然将它花在了解决一个小问题上，为什么？因为对于一个问题而言，经验由两部分组成，一半是问题解决的直接经验，一半是问题周边的间接经验，如果别人帮助了我，我将得不到间接经验，而大多数情况下，间接经验更重于直接经验，因为它不是单一的，是多面的，它将对你以后考虑问题的宽度产生很大影响。如果你哪天像周星驰一样恍然大悟，一挥拳头：有道理有道理，我怎么没想到呢？那就表明你的间接经验不如对方了。尤其是当大家都站在同一起跑线上的时候，拼得就是间接经验。所以不要随便提问，首先全力的分析、查资料、看书，在万不得已的情况下才去选择提问，要相信自己不比别人笨。
说到这里多说两件事：
1、关于我提的问题，有人说不用ID，可以用CLASS呀。是的，我用过CLASS，没深究理论，不过实践中，如果将ID定义的样式换成CLASS来表现好像不行，会有部分失效，至于为什么，我没时间去研究，在特定情况下最后我换了一种角度解决了问题，在介绍修改获得认证过程中我会将这个问题详细告诉大家。
2、我说如果用表格还原，三个小时足以，而用DIV，我花了四、五十个小时，这里就有很明显的速度、效率差别，我想这是阻碍大家广泛使用DIV的很大原因，在获得认证的两天中，我也在犹豫，究竟值不值？我会在下篇小结中详细说明对此我得出的结论。
好，入题。
第三天 看见速度
7月30日，经过上一天的打击，我安安静静的来到公司，开始继续制作。
分析：最初我是按照画表格的思路将这一块按左边蓝色和橙色之间分界为中、下两部分，所以命名为indexcontent_middle_XXX和 indexcontent_botton_XXX，很快我发现应该是分为左、右两部分，因为左边四块样式完全一样，仅色彩不一样。不过正由于色彩的区别，不能对一个DIV使用一个ID（其实可以用ID定义布局，CLASS定义具体表现[<div id="" class="">]，只是当时我不知道，完全陷入ID的使用，忽略了CLASS），所以我还是按上下结构来制作。先是蓝色的一块，我直接给出代码了，没太多可讲的
这里有个问题，标题不能上下居中，我设置margin和padding，在IE和Opera中不听话，而Mozilla中正常。好，定义好一个，下一个只需要将页面中的<UL>标签结构复制一次。
然后是右边，类似indexcontent_top_adnewscontent这块的思路，只不过样式多一点，同样只需要还原一个，然后在XHTML中复制四次。5px的红线和虚线都是使用border实现。箭头和图片标题是表现，作为背景定位，小方块做成图片定位在背景，和文字对齐调了不少时间（其实现在知道可以用list-style-image来实现一句话前面的小图片），没什么了吧，看代码：
速度有点快了，又开始兴奋起来，接着做下面部分。
橙色部分和上面蓝色部分一样我就不多说了。
而这里的右边和上面布局思路也一样，只是样式不同，然后要多复制两个。^_^
这就是后来修改中我遇到的那个问题。大家可以看看这里。
http://www.blueidea.com/bbs/newsdetail.asp?id=1675224&posts=currentposts
下面是页脚，更简单了
好了我直接给出最后的文件，基本上兼容三大浏览器，差别很小，我用了三天，真的很开心很开心。网址：http://www.cngoldnet.com/index_webstands.aspx （这里还是有些错位，因为原始老文件丢失了，我懒得去调了，具体可见我第一篇给的截图）
大家可以去效验一下，看看是什么结果，看到这个结果你会怎么想？所以，我一开始就说过，代码没有借鉴的价值，几乎都是废的。但是抛开效验，这可是按照标准思路将表现与内容分离了的，而且通过调试完全兼容各浏览器，认证有必要吗？
后来接下来的几天，由于公司正好网络情况不好，于是我一直沉侵在一种骄傲中，三天的时间虽然没有最初我想的一天快，但还是很快了，我记得论坛上有人说过，对标准技术，需要2、3个月来熟悉，精通得一年半年吧，而现在我觉得我基本上已经掌握了标准。正好公司网络不好，我闲了下来，考虑许久，感激于阿捷，决定将学习及设计过程写下来，于是最初我带着骄傲，还有些许炫耀（呵呵）开始写下《重构之美－迎接网站标准化建设的来临》之文，8月3日，网络恢复正常，我将文章发布的同时，我满怀信心的登上W3去认证，认证的结果像一盆冷水从天而降，我才知道，事情原来远远没我想的那么简单。
好了，三天到此结束，下篇小结中我将总结如下几点个人心得或者说认识吧。
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
------------------------------------------------------------------------------------------------
总结一： 网页设计回归？
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
很久没动笔了，太忙了，：）
我已经有两三个月没有想当初那样很认真用标准设计网页了，最后一次是9月18日做经典的样式表大赛。所以如果从单纯的技术上而言，我早就落伍了，许许多多的兼容技巧我都不清楚。其实从一开始就是这样^_^。但是，并非我离开标准了，应该说标准现在已经像血液一样溶入我身体，贯穿在我整个开发流程中，我已经非常习惯这种曾经对我来说崭新的思维方式了。前面的留言我说了，我现在已经不期待下一版本的DW了，事实上从8月3日起，我几乎就没开过DW了，现在更是看着DW竟感到陌生，于是就想起一首歌：我们变成了世界上最熟悉的陌生人，今后各自曲折，各自悲哀吧！TOT
回过头，看看上次遗留的问题，先解决了。
1、关于对验证的认识。
当时做完后我曾非常不屑意验证，因为从最终效果来讲，页面是完美的，引用上次遗留的一句话：
你认为呢？认证有必要吗？
在我非常不情愿的情况下，我开始修改这255个错误，对的，我还记得当时我满怀信心的提交给W3后，瞪大了双眼盯着那255个错误。由于错误低级，认证给我指出的90％以上的错误都是重复ID。所以页面几乎被我重新制作了一次。当我咬着牙，那两天压住心中的怒火，一个一个倒着数似的把错误改完后，我慢慢才发现认证是有用的，他帮助你规范代码，否则若像我最初那样，真的是金玉其外，败絮其内，绣花枕头一包草。但是，我们不能夸大认证的作用，并不是通不过就不好，而通过就好得不得了，不能以为只要通过了认证就万事大吉了。我们仍然应该把重点放在UE，UI，前后台的架构结构上，只要你思路到位，认证与否真的不重要。再说认证是死的，举一个非常简单的例子，比如在某个地方从文档而言，应该使用<ol>，但是你使用的是<ul>，认证会告诉你错了吗？所以作为初学者，应该把认证当成一种工具，而不是神。在这点上面，当时的理解和现在没多大区别。
2、对于WEB标准的重新认识。
回头看看我第一篇中曾经写过的一些认识，呵呵，我在笑。来，温故而知新，我重新把它列出来：
现在怎么看呢？还是比较矛盾，对于静态页面而言，确实能很节约，然而普遍的静态网站能有多少流量？浏量非常高的网站又有几个是纯静态网站的？即便是，也是程序生成的。那么对于动态页面而言就感觉不如静态那么明显了，很多开发控件生成代码都带来烦杂的代码。比如，如果有同时研究.net和标准的朋友，应该知道这几个频繁使用的控件：DATAGRID，DATALIST，REPEATER。我一直都是使用REPEATER，因为它最灵活，性能也最好，但是某天我想在线编辑数据时使用了一下DATALIST，曾经以为它会是一个很好的结合，结果发现使用它后生成了大量无用的代码，DATALIST都如此， DATAGRID呢？应该更糟，DATAVIEW要来了，功能更强大，想必垃圾代码也就更多了。所以，对于节约带宽我还是表示怀疑，我觉得在大的方面，代码的精简度取决于设计开发者而非技术。真的能节约吗？真的吗？网上关于REPEATER的使用介绍是如此的少，DATAGRID是如此的丰富。垃圾代码想必也非一般的巨大。你给我一个选择……
完全保持以前的看法不变，即便现在据说FIREFOX占有率在增加。（其实我个人觉得FIREFOX还不如MOZILLA呢）。好处仅仅是灵活调整而已，但是若作为优势，吸引力太小。
让骂声来得更猛烈一些吧。
这个是在认识中以前和现在变化最大的，现在几乎将以前彻底否定了。这是典型的思维变化后的结果。我记得有个人曾经在留了言给我指出了的，当时不是很留意。后来才慢慢意识到这个是和以前设计流程的一个巨大转变，并且是这系列文章中的一个巨大错误，思路的错误，我纠正过来，如果曾经被我误导过的朋友不要怪我哈。我回头找找他，引过来。真不好意思，找不到了，大概他是这么说的：楼主，我发现你是做好页面然后一块一块的还原，而我更习惯于先写出XHTML，再加样式。他说得很委婉并没有直接的指出我的错误，而我看了后也觉得有些道理，但也不知道具体道理在哪里就没太在意。现在我知道，这句话是精髓。回想我们一直以来设计网页的流程是怎样的？一个设计稿，然后还原或者对于熟练的高手就直接构思画表格布局，需要装饰的地方再按大小去设计图片插入。所以我在前面的文章中一再的提及“还原”两个字，对XHTML标记的选择都是根据页面而来，目的是为了还原设计。这是一个错误！我把我现在的理解归纳一下。
在WEB标准里，我觉得我们应该这么做：
1、整体规划，设计稿先出来比较好，来不及设计也行，但是页面的规划一定得出来。
2、根据规划完成XHTML文档，组织好文档结构，设计纯文档。这里我要提醒，纯文档同样具有UE，它只是没有了UI而已，所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。
3、设计设计稿（UI），这一步可以和2同时进行。
4、根据设计稿为XHTML文档添加样式进行还原，通过样式表的设计技巧尽可能的不修改XHTML，如果UI实在是复杂，则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。
这就是我理解过后一直以来的设计流程，注意我说的是设计流程而非制作流程，我斗胆的说一句，这才是真正的网页设计。那么请问DW在这个流程中可以进入哪一步？^_^所以……。
延着在这个思路下，你想想，设计稿可以变，但是XHTML文档几乎是固定的，那么改版容易吗？当然容易，我们可以像WINAMP 5那样的换肤。
当时对这一点我就表示过迷茫，现在依然如此，毕竟我还未接触到移动开发，不过我想在移动开发上，XML不会给予XHTML位子的，这个优势就和兼容浏览器一样了，只是增加灵活度而已，吸引力更小。
保持不变，体会更深，纯代码设计的自由是任何即所见即所得工具无法比拟的，即便DW做的是如此的棒，但是在WEB标准下，他仍然显得那么无力。
3、关于速度和效率的问题。
很多人都在想这个问题，被这个问题所困扰。cloudchen曾经回复过我这么一句话：网页就象快餐，在这种东西上面浪费时间不值。我深以为是，速度是非常重要的。但是我要说的是，如果使用标准，对于网站来说，开发速度会比使用表格快N倍。从单个页面来开，使用标准再熟练再快我承认都快不过表格，说不定差距还会很大。但是对于网站来说就不一样了，随着网站规模的扩大，差距会缩小，到某个临界点时，两者会持平，而后使用WEB标准的网站在开发速度和效率上会将表格远远抛在后面。所以对于小网站，小应用来说，使用标准在速度上是完全没有优势甚至会有明显劣势，但是对于一个大网站，尤其是非一次性开发而是持续性不断开发的网站来说，呵呵，不用我说了吧。我使用表格5年，我的表格设计速度可以说已经练到极为准确和快速了，几乎无法再大幅度提升了，而我使用标准才 2、3个月，我有这样的体会，你做何选择？
今天写得太多了，我还没有说关于标准和后台结合，这是我体会标准另外一个巨大的优势，下次再详细说，我想再经过一段时间，我可能会说得更为准确些。
好了，回头看看文章标题：重构之美。我没有取错标题，网页设计回归！
---------------------------------------------------------------------------------------------------
我想最初在设计HTML的TABLE这个标签的时候，并不是把它作为一个页面布局来设计的，它只是负责显示真正的表格，而最初的网页（在当时的有限带宽下）也可能只是像我们现在的文档一样（想像一下WORD文档）……标题，分隔线，大标题，段落，小标题……
那个时候说不定都是完全符合标准的哦。而后来我们把表格用得炉火纯青……网页也大变样了……
谈到现在的DIV+CSS，有的人好像突然对TABLE产生了仇恨，一时之间要对TD、TR开追悼会了，我觉得也没必要，给表格一个位置那就是它的设计初衷，显示网格状数据文字和图片。
而标准：用了TABLE就不符合标准了吗？否。用了DIV就符合标准了吗？否。所以标准问题不在于用什么，而在于用什么思路去写，用符合标准文档的思路我想可能比较容易设计出符合标准的页面代码。文档内容与样式的分离,我想其影响不亚于程式代码与HTML的分离……
至于DreamWeaver，我想用它来作XHTML设计和CSS还是合适的，至少你不需要去W3C的网站去检查是否符合标准，按上那个小按钮就能轻松定位你的所有错误了……呵呵……
想学习DIV+CSS的朋友，推荐去看看这篇译文教程，很生动！
《为何使用表格排版是不明智的》
访问：web 开发技术荟萃 会有更多的资料
----------------------------------------------------------------------------------------------
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
（1）XML
XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http: //www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http: //www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
（1）DOM
DOM 是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解， DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA (European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
--------------------------------------------------------------------------------------------------
>>>为什么一定要 xhtml? 谁说 table 不能做任何浏览器都适应？那是因为你们都太依赖软件来做网>>.>>>页，所以导致别的浏览器看的效果不一样。
XHTML的出现是为了取代HTML，然而过渡需要时间；至于HTML何时会被XHTML全面取代，决定不在于W3C；软件制造商在这方面占有主导权，可是，若大部分的网页设计师还是继续不过渡到XHTML，没有勇气的软件制造商可能会被这些网页设计师牵着鼻子走。
我阅读了这论坛里大部分关于Web 标准的帖子，得出的理论是许多人似乎还不了解何为Web 标准。
HTML应用得当；再加上CSS使用，也能做出符合Web标准的站。sanbao123 的帖子指出了Web标准的要点。
在英语世界全面拥抱Web标准的网页设计圈子里，对于是否该继续使用HTML或XHTML也有很大的争论。拥护HTML者举出种种证据例子来说明XHTML 的种种弊病，然而这些证据例子在今天近乎完善的浏览器如Firefox里已经站不住脚。没有任何一个浏览器是十全十美的，就算是即将推出的IE ７也不会完美无暇。IE浏览器在全面拥抱web标准及使用CSS建构版面的设计师眼里，是个让人厌烦却不得不面对的 Devil. 如果您做的网站只能在IE上显示，那十之八九你的CSS或HTML或 XHTML代码有问题。
》》》》 table + css 是很不错的选择。
我完全同意这说法。继续使用Table 和拥抱Web 标准不相抵触。然而要懂的如何“正当”使用table, 许多网页设计师恐怕还跳不出旧框框。
>>>当然如果那么喜欢别人看不懂的代码，用DIV不错啊，但遇到复杂的数据不用table，那才算是不理智的
DIV (Division)是CSS 的Selector. 使用DIV 在建构页面符合逻辑；符合web 标准；复杂的数据用 table符合逻辑，可是复杂的数据用DIV来做也符合逻辑。问题在于你对CSS的驾御能力，这和理不理智不相干。
举个例子，这是我为客户做的一个站，全面使用XHTML 和CSS 还有DHTML做菜单 （次菜单里全部由CSS来控制）及一点Flash。全站符合Web 标准，XHTML和CSS都通过验证。
其中有三页课程时间表，当初我也考虑使用 table 来做。可是经过仔细考虑后，我决定用CSS来做表格。最主要的原因是因为客户每月都要更新课程表，使用CSS对我的工作进程有很大的伸缩，也节省时间。于我，面对复杂的数据不用Table, 是最明智的选择。
------------------------------------------------------------------------------------
写下这个题目，好大啊，我不知道我能不能说清楚，毕竟我真正接触标准才不到一个月，实践也才刚进行了3天，完成了本人第一个标准化网页，如下图所示。在下一步工作，将这个门户站点全面标准化架设之前，我想和大家交流交流，带动一下新手，请教一下高手，为标准的推广尽点微薄的力量。
页面还有很多细节未处理设计，比如页头，还有部分版块未加，色调还未最终定稿，不过大体的感觉已经有了，排版结构也基本差不多了。点击可放大（在地址栏中将_s去掉）。
记不得是六月的哪一天了，我例行公事般的在网上游荡，一句话蹦入我眼帘：99％的网站是过时的。开什么玩笑！对于从事互联网网站行业的我，这自然是个大事，下面的事就不用说了，很快，'网站重构'这四个字进驻我的脑海。
跑了几次书店，书没到。于是我只好在网上看些其他相关文章和讨论，很是饥渴。终于在七月十号左右我看见书摆上了成都西南书城、都乐电子书店的书架，迫不及待的在西南书城地上坐下，翻开书……（还是都乐好啊，有椅子还有桌子，随便你看、抄）说老实话，我对重构这本书是失望的，不知道是原书问题还是翻译问题，很杂乱，东拉西扯的。头几章我看得比较仔细，很快就越翻越快，距技术那部分还有很大篇幅的地方，我已经不耐烦了，扔掉，非常抱歉，阿捷。其实我是非常感激你的，不管怎么说，最终我走进了标准设计。（我的习惯，在对新事物做出选择和决定以前，我不会去碰技术方面，我需要从概念上全面审视它，一旦我觉得有前景，值，我才会着手于技术的学习，并义无反顾的走下去，毕竟方向是很重要的，而技术再难都可以被攻破，时间实在太珍贵了。）放下书，头脑比较乱，这就是重构？感觉就像一个新的泡泡被吹了起来，标准是有价值的，但是有那么夸张吗？我们来看看它所宣传的优势：
1、节约带宽。
这个算什么优势？让我想起了曾经使用压缩网页代码工具、曾经为一个JPG的图片1％的调整压缩比以获得最佳效果最小大小的时代，随着互联网的高速发展，这些都成为了过去时，它们对网站速度的影响越来越小，小到可以忽略。没人再用压缩代码工具了吧，曾经为在压缩比为54％、55％之间都要比较半天的我现在基本上通通设定为80％，唯一保留的是还在JPG和GIF中保持选择，那也更多的是为了质量，而非大小。
2、完全兼容各种浏览器（实践过程中发现，其实也不是，相信还没表格兼容性好）。
在IE统率98%以上的江山下，它就是标准，不要说国外有很多人用其他浏览器，那也是相对于中国而言，我相信国外还有更多更多更多的人用IE。其实浏览器的兼容性很早就在谈，但IE实在太普及了，现在翻出来重提感觉意义也不大。你相信IE会垮掉吗？你相信短期内LINUX会普及到桌面吗，还要超过WINDOWS。所以，翻旧帐而已，算什么优势？
3、盲人阅读器。
我靠，我都要笑出声了。走开走开。（别骂我歧视哈，我说事实而已）
4、方便的改版。
是吗？我怀疑，而后实际上也是不可能的。我们来看看，首先说明，标准的定义是抛弃表格布局。
第一种改版方式：版式不变，变色彩。
这种情况下，DIV比表格有优势吗？我是说布局上。我很早就开始都使用CSS来控制所有色彩，当然包括表格背景，用表格布局的网站我同样可以只改动样式表。（后来的实践证明，这种情况下表格还有优势，因为他的样式表很简单，而DIV的样式表很复杂，尤其是在对整个网站而非单个页面。如果一个大网站全部标准化，他的样式表将数倍甚至十几倍于用表格布局的样式表。你认为谁快谁慢？？？）
第二种情况：包括结构在内全变。
这种情况下，做为表格布局的网站需要按照新的设计稿重新画表格进行设计。难道标准化的网站就可以只修改样式表吗？（当时我表示怀疑，而后的实践证实了，不可能的，DIV的设计是有针对性的，结构变，DIV、UL、LI、SPAN、P等等全部都要跟着变，样式表得全新设计，那和修改就不一样了。我相信那个一个页面，百多样式表的模范代表，里面不会有2个结构完全相同只是数据不同的样式表。那样的话就回到了第一种改版方式。）
另外还有一点，关于图片的问题，不管那种方式都是不可能改变图片的色彩和大小，所以一旦改版，所有的图片几乎都要变，改动越大变得越多。
除非网站只使用色块，不用图片、FLASH等或很有改版针对性的少量使用，那么方便的改版……梦想吧。（PNG的透明模式是个不错的东西，不过他也只解决了色彩的问题，而且IE哪年哪月支持还遥不可及。）
5、支持手机、PDA等无线设备的访问，并兼容未来的新设备。
这个是唯一一个让我觉得有价值的地方。但是……后面谈。
6、在设计上绝对优于表格的控制。
这个是在后来的实践中我发现的，也是最终将我吸引到标准化设计中来的最重要的因素。表格我用了近五年，可谓炉火纯青了，而DIV让我知道了原来页面上每个象素都是可以在掌握之中的，那种精确是表格代替不了的，一句话概括一下吧：基于表格的设计思路是二维的，是平面的，而基于DIV的设计思路是三维的，是立体的，真的是天马行空，随心所欲！其实我最初在DW3的时候用过半年的层，原因简单，它是三维的，而且可以拖动，但是很快我发现层糟糕的定位让我根本无法控制它，当时不知道是离开了样式表的原因，唉，如果当时，2000年哦，我研究进去，发掘出CSS的话，啊哈哈哈哈哈哈……
7、还有一些优势是实践中体会出来的，如果有机会，以后再一点一点的说。
经过一阵思考，我在想一个问题，那就是XML，书中很多次的提到它，而且也很明白的说，标准的意义是以便以后平滑的过渡到XML。XML不是新东西，两年前就被炒过一次，实际上对于当时来说，过于超前了，就是对于现在来说，对于前台也是很超前的。通过重构一书，我走近了XML，以前总感觉XML很远，概念也比较模糊。对于一种过渡技术，我是不喜欢的，于是放下重构后，我走向XML和XSL的书架，那才是终点，那才有挑战性。
但是一个很现实的问题，目前大量网站根本无法直接走向XML，过渡是必须的，于是我依然关注标准化，但我一直没有动手也没动脑，只是关注，因为大量基于标准设计的网站设计都很糟糕，一些比较界面比较优秀的设计都出现在个人网站上，很少，而且多数是国外的网站，我们知道，英文的表现力比中文强太多，所以我一直很犹豫，作为一个设计师，我肯定无法为了新技术而抛弃界面的美观与友好，UI在日益重视的用户体验设计上举足轻重，更何况还有品牌、VI等平面设计理念在里面，怎么可能放弃，再说了，标准宣传的优势我已经几乎否定了。另外，如果标准只能用于小型的个人网站或企业网站的化，那么标准的普及将受很大的影响（这也是标准推广中需要考虑的，我们现在是农村包围城市，是自下而上的进行推广，但是我总觉得如果能由门户网站带头进行推广，充分发挥门户网站的影响力，自上而下的推广的话，效果肯定会好很多。），我一直希望看见一个界面美观的，中文的标准化的门户网站，但是没有。
直到一天，我在看了一篇文章和一个网站后，一切都变了。这片文章就是阿捷的《理解表现与结构相分离》，这个网站是www.themaninblue.com。我个人觉得阿捷这篇文章写得相当不错，建议每个设计师都认真看看。我们越来越多的使用样式表控制整个站点，恨不得将每个表现都写进样式表，最初是字体大小，然后是字体色彩，然后是边框，然后是单元格背景色，然后等等，目的是什么？表面上是为了方便于控制和修改，实质上我们是在潜意识的，不知不觉将表现和内容分离。但是由于表格布局的原因，我们始终无法做到将表现与内容彻底分离，依然有很多仅仅是为了美观，为了方便，为了炫耀等等和内容无关的表现借助表格和内容混杂在了一起，如胶如漆，好不缠绵。这不得不让我重新审视标准，尽管他宣称的诸多优势感觉很缥缈，但是它这个最基础的概念确是相当实在的。而那个国外的站点则让我看见了在标准上实现设计的希望，而且他对分辨率的自适应也让我为之一振，虽然表格也可以用百分比来兼容分辨率，但百分比是很难准确定位的，我几乎就没使用过用百分比来控制表格。
很快，这个网站就躺在我硬盘里了，打开他的所有CSS，打开他的首页开始研究，尽管刚开始看还是比较茫然，但是经过粗略的看了它几个DIV的实现方式，感觉似乎也不是很难，于是我很狂的对徒弟说到：一周内熟悉，一个月内精通。我终于下定决心走向标准化设计道路。
正好，我们的网站面临改版，我决定将标准全面应用于新网站，在提交老总的计划中我写到这么一条：
……
2、学习重构技术并全面用于新网站的建设，实现国内第一个全面使用web标准的门户站点。（由于我还完全不会，所以这个呢，视开发过程中具体情况而定，若确实太难，则放弃。毕竟目前重构技术应用只是出现在简单的个人网站中。）
……
依然有所保留，依然有所畏惧，毕竟一夜间，积累了5年的表格排版技术化为灰烬，还是不是那么舒服的，但是决心已下，唯有全力以赴。
抓紧时间在7月27日完成改版设计稿，7月28日一早，打开Editplus、DW、IE、Opera、Mozilla，打开沈小雨的样式表手册、硬盘上的themaninblue与macromedia两个网站，双手一搓，开始了我的第一次标准化设计。
---------------------------------------------------------------------------------------
在设计过程中，由于第一次接触，所以这一秒否定上一秒的事情很频繁，随着设计的深入，了解的深入，我不断的向前修改、整理我的代码，自我否定了一次又一次。所以在写下面文章之前，我想，如果我给大家一个通过了验证后的代码意义不大，这样的代码应该随处能找到，所以我想我还是重头到尾把过程写下来，包括各种错误，我故意留下来，就是要让你看见我犯过的错误（失败我都不怕，更不会怕错误），然后再让你看见我是怎么改过来的（当然很可能我改得也不怎么好，但是我一直在改！）。
我是一个典型的初学者，而且是那种爬还不会就想破百米记录了。通过验证后回头看，我犯的错误很多都是不常见滴（太低级了），因此我声明一下：
高手们啊，对于下面文章中错误的代码或凌乱的结构，私下狂笑一下就行了哈……英雄，放过我吧。估计你看了我的代码你就知道我的双手有多新，是多么的洁白无暇，你会于心不忍的。
比我还新的新手请注意：代码几乎毫无借鉴的价值。
不过呢，我在三天内从零圈圈到完成这个首页，将表现与结构完全分离，并且三大浏览器显示效果几乎一样，CSS通过认证，只是页面文件不能通过认证而已。所以对于新手，应该还是有不少思路可以学习。
最后，我不想过多的纠缠在代码上，自己实践或者看书会收获更大。更多的，我希望能在这种全新的设计思路上进行探讨。我会把我的思路表达出来，也希望大家一起在这个方面多讨论。我说过，技术是为思想服务的，所以思想的正确性非常重要。为了避免某些人在这句话中钻牛角，补上一句：当然，技术的高低要反过来限制思想的宽度和深度。
所有工具打开了，第一件事设置目录结构，在IIS中设置站点，考虑到以后可能的多风格问题，在样式表和图片目录下分别建立DEFAULT目录。
好了，什么都不想，先试一下：
样式表
#indextop
{
height: 85px;
background-color:#ED1C24;
background-image:url(/images/default/bg_02.gif)
background-repeat: repeat-x;
}
我的第一个#开头样式，以前都是用.开头或者不开头的。现在都不完全清楚#和.的准确概念。#用id针对引用，.用class针对引用，不开头的全局引用。
页面 <div id="indextop"></div>
后面代码请自己复制到下面调试框中相应位置查看。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
OH YES！甚至无需设置宽度就自适应分辨率。
咦，色块没贴边。简单，样式表中加上：
body
{
margin: 0;
}
第一个不兼容问题出现，IE、Mozilla正常，Opera依旧不贴边，想了想，在body中添加 padding: 0; 一试，成功。愉快。
热完身，打开设计稿，开始研究。
页头到阴影前为止，因为要在程序中包含。先攻页头。
我需要页头两边自适应分辨率，自然需要嵌套居中的770DIV，这里就有选择：（导航下的白色背景是一个很淡的渐变，显然不能用背景色）
1、包括阴影从上到下四个DIV，然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
2、两个DIV，因为阴影得平铺，估计还要使用z-index，所以必定单独一个。
3、三个DIV，阴影一个，导航一个，上面一个。
1号最终会有6个DIV，其中要单独为一个小色条设置一个DIV，不值。2号感觉不便于将导航独立出来，最终选择3号。小色条被包含在导航DIV中，便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺，‘LOGO’虽然是网站名，但属于表现，通过CSS手册知道背景可以不平铺，爽，于是设为背景，居中，不平铺。看了下position的属性，大概理解relative是指不浮动，顺序向下排， absolute是浮动，相对上层的定位。DIV的居中问题，查看其他代码知道是设置margin: 0 auto;
OK，写代码如下：
页面
<body>
<div id="indextop">
<div id=indextop_logo></div>
</div>
<div id="indextop_globalnav">
<div id="indextop_globalnavmenu"></div>
</div>
<div id="indexcontent_shadow"></div>
样式表 （为了便于大家看结构，我加了黑白对比背景色）
/* -----------页眉----------- */
/* ---页头LOGO--- */
#indextop
{
height: 85px;
background-image: url(http://www.cngoldnet.com/images/default/bg_02.gif);
background-repeat: repeat-x;
background-color: #ED1C24;
}
#indextop_logo
{
position:relative;
margin:0 auto;
width:770px;
height:75px;
background-image: url(http://www.cngoldnet.com/images/default/logo_01.gif);
background-repeat: no-repeat;
background-position: center;
background-color: #000;
}
/* --- 全局导航 --- */
#indextop_globalnav
{
position: relative;
height: 43px;
padding: 1px;
background-image: url(http://www.cngoldnet.com/images/default/bg_03.jpg);
}
#indextop_globalnavmenu
{
position: relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
background-color: #000;
}
/* -----------正文上----------- */
/* ---广告条--- */
#indexcontent_shadow
{
position: absolute;
z-index: 1;
margin: 0;
padding: 0;
width: 100%;
height: 10px;
background-image: url(http://www.cngoldnet.com/images/default/shadow_01.gif);
background-repeat: repeat-x;
left: 0px;
top: 130px !important;
top: 127px;
}
[height: 43px;]这里本来是45px，但设了padding之后被撑大，由此知道了padding要影响高和宽，后来知道margin和border也一样，所以有些时候要高宽设置要做相应的裁减。
好了，页头的大局搞定，现在开始做导航，先分析。
如果用表格，很简单，两行十列，spacing为3，然后就是切图，每个图片左和右多切1px背景色，做botton。但是离开表格我就不知道怎么办了，多谢阿捷的一篇文章，我学习后知道了display: block;的使用，详细用法大家可以去看阿捷的《不用表格的菜单》和手册，这里我简单说一下我的理解：许多块元素默认是垂直显示，就像你有一堆方块，你列出来交给浏览器，浏览器的显示是从上到下顺序排列，而display: block;就是让浏览器水平排列这些方块，并且，遇到所在嵌套的边界就自动换行继续排列。好，现在我就将导航中的一个栏目设置为一个方块，然后不断重复直到我有17个方块，通过设置它的宽度，让它在水平排到第十个方块时到达globalnavmenu（770px）的右边界，它就自动换行了，这样导航条就出来了。方块的宽度不用计算，直接从设计稿中取，我的设计稿是很精确的。这里有个问题，由于globalnavmenu这个div是包含了小色块，默认的垂直居中显然不行，要在白色块中垂直居中才行。（看来啊，我还是没躲过，本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题，结果还是要影响导航条的定位，而且更麻烦，印证了我常说的一句‘个人名言’：困难是躲不过的，它总是会换个时间或空间重新摆到你面前，直到你迈过它才会消失。）解决办法，很明显要使用padding或margin，我选择了对方块使用margin。这又导致新问题，第一排的margin-top明显要比第二排的大，那么就不能对17个方块使用一个样式，我解决办法是上下各一个。栏目名字顺序置于方块中，通过调整上下padding垂直居中于方块。于是代码如下：
页面
……
<div id="indextop_globalnavmenu">
<ul>
<li id="first"><a title="金桥工程" href="#">金桥工程</a></li>
<li id="first"><a title="金关工程" href="#">金关工程</a></li>
<li id="first"><a title="金卡工程" href="#">金卡工程</a></li>
<li id="first"><a title="金税工程" href="#">金税工程</a></li>
<li id="first"><a title="金农工程" href="#">金农工程</a></li>
<li id="first"><a title="金智工程" href="#">金智工程</a></li>
<li id="first"><a title="金卫工程" href="#">金卫工程</a></li>
<li id="first"><a title="金宏工程" href="#">金宏工程</a></li>
<li id="first"><a title="金盾工程" href="#">金盾工程</a></li>
<li id="first"><a title="金贸工程" href="#">金贸工程</a></li>
<li id="second"><a title="金水工程" href="#">金水工程</a></li>
<li id="second"><a title="金旅工程" href="#">金旅工程</a></li>
<li id="second"><a title="金财工程" href="#">金财工程</a></li>
<li id="second"><a title="金审工程" href="#">金审工程</a></li>
<li id="second"><a title="金保工程" href="#">金保工程</a></li>
<li id="second"><a title="金土工程" href="#">金土工程</a></li>
<li id="second"><a title="返回首页" href="#">返回首页</a></li>
</ul>
</div>
……
样式表
……
#indextop_globalnavmenu
{
position:relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
}
#indextop_globalnavmenu ul
{
clear: left;
margin: 0px;
padding: 0;
border: 0px;
list-style-type: none;
text-align: center;
display:inline;
}
#indextop_globalnavmenu li
{
width: 77px;
height: 17px;
float: left;
text-align: center;
margin: 0;
}
……
可以对方块加连接，就像对td加连接一样，更优越的是方块的a: hover可以定义样式，比如换方块的背景和色彩等各种样式，那太好了，以前需要用JS实现的响应mouseover事件就太简单了。（说明：翻转的图片、色彩、FLASH等都是属于表现，内容一般只有文字，所以图片应该设置成背景，这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接，这种做法是一种形似而神不是的伪标准，建议再认真读读《理解表现与结构相分离》，如果要使用字体，那么也应该将这种图片设为背景，再在相应位置隐藏相应文本。建议看看Micromedia的网站，他是怎么处理他全FLASH的页头导航？他将整个页头做了一个普通页头，然后隐藏了。浏览器不支持FLASH或文本浏览时，普通页头就出来了。）加入以下代码实现：
页面 没有，呵呵，只用于测试。
样式表
……
#indextop_globalnavmenu li
{
width: 77px;
height: 17px;
float: left;
text-align: center;
margin: 0;
}
#indextop_globalnavmenu li a
{
color: #000;
display: block;
width: 77px;
height: 17px;
text-align: center;
text-decoration: none;
background-image: url(http://www.cngoldnet.com/images/default/bg_01.jpg) ;
background-repeat: no-repeat;
}
#indextop_globalnavmenu li a:hover
{
color: #ED1C24;
width: 77px;
height: 17px;
text-align: center;
background-image:url(http://www.cngoldnet.com/images/default/bg_04.jpg) ;
background-repeat: no-repeat;
text-decoration: none;
}
好了，导航出来了，但是发现样式表重复很多，后来通过测试知道，下层继承上层的样式，哎呀概念我不说了，我说不准确，ajie帮我说吧。所以清除多于的代码，尽量减少重复且无意义的代码，字体在body中定义，加上控制字体在 li中padding，图片位置的样式，重新整理代码为：
样式表
……
#indextop_globalnavmenu li
{
width: 77px;
height: 17px;
FLOAT: left;
TEXT-ALIGN: center;
margin: 0;
}
#indextop_globalnavmenu li a
{
color: #000;
display: block;
width: 77px;
height: 17px;
text-decoration: none;
background-image: url(http://www.cngoldnet.com/images/default/bg_01.jpg) ;
background-repeat: no-repeat;
}
#indextop_globalnavmenu li a:hover
{
color: #ED1C24;
background:url(http://www.cngoldnet.com/images/default/bg_04.jpg) ;
text-decoration: none;
background-repeat: no-repeat;
}
/* ---主导航第一行--- */
#indextop_globalnavmenu li#first A
{
padding: 6px 0 0 0;
background-position: 0px 3px;
}
#indextop_globalnavmenu li#first A:hover
{
padding: 6px 0 0 0;
background-position: 0px 3px;
}
/* ---主导航第二行--- */
#indextop_globalnavmenu li#second A
{
padding: 3px 0 0 0;
}
#indextop_globalnavmenu li#second A:hover
{
padding: 3px 0 0 0;
}
/* -----------正文上----------- */
/* ---广告条--- */
#indexcontent_shadow
{
position: absolute;
z-index: 1;
margin: 0;
padding: 0;
width: 100%;
height: 10px;
background-image: url(http://www.cngoldnet.com/images/default/shadow_01.gif);
background-repeat: repeat-x;
left: 0px;
top: 130px !important;
top: 127px;
}
剩下的就是反复调试，这里由于这是以前的代码加修改后的图片，所以有问题，我稍稍调了一下，还不准确。
搞定了，页头基本上完毕，下面是阴影，阴影我用了一下absolute，因为要置与广告下，对absolute的理解也不是很透彻，使用过程中，发现 div完全不居于现有的排版，它可在上重叠，也可以在下重叠，结合曾经用过的层的z-index，我对absolute的理解是它使一块脱离然后飞起来飘，更形象的理解是：你在一个平面内排版，absolute就使某一块脱离这个平面，可上可下，在于z-index的设置，既然飞起来了，不同z- index之间就不存在margin了。
将广告图片和其上阴影一起切下，开始做内容，一样，首先分析。
这里根据设计稿，我将内容分成三块，上中下三个大div，第一个div到草绿色结束，先攻它。
广告我暂时看作内容非表现，所以直接插入img，没什么说明。
页面
<div id="indexcontent_top">
<ul>
<li id="ad"><img src="http://www.cngoldnet.com/images/default/ad_01.jpg" width="770" height="100" /></li>
</ul>
[div]
样式表
#indexcontent_top
{
position:relative;
z-index: 2;
margin: 0 auto;
padding: 0;
width:770px;
height: 407px;
}
#indexcontent_top ul
{
clear: left;
margin: 0;
padding: 0;
width:770px;
LIST-STYLE-TYPE: none;
}
#indexcontent_top li#ad
{
float: left;
clear: left;
margin: 0;
padding: 0;
width:770px;
height:105px;
background: #000;
}
然后自然是左边一块放登陆，右边一块放内容新闻，我嵌套div，这里学习 float的使用，简单，我看过向左走、向右走滴，过程中我还定义过float: center;，似乎没作用，一直很奇怪，然后忘了删，后来验证，不要脸的w3告诉我float没center这个东西，这不违法了吗？，给左右，却不给中，TNND。笑过，看代码：
页面
……
<div id="indexcontent_top">
<ul>
<li id="ad"><img src="http://www.cngoldnet.com/images/default/ad_01.jpg" width="770" height="100" /></li>
</ul>
<div id="indexcontent_top_form"></div>
<div id="indexcontent_top_adnewscontent"></div>
<div>
样式表
……
/* ---登陆区域--- */
#indexcontent_top_form
{
float: left;
margin:0;
padding:0;
width:150px;
height:302px;
background-color: #9c0;
}
/* ---内容新闻区域---*/
#indexcontent_top_adnewscontent
{
float: right;
margin: 0;
padding: 0;
width: 620px;
height: 302px;
background-color: #09C;
}
其实这里发现一个问题，注意那个广告下的黑条，高度是10px，我本来是在li完广告图片后，加了一个li，定义高度为10px，黑色。但是该死的IE，表格中的BUG继续带入DIV，那就是不能低于15px，在表格中，如果想低于15px定义，典型的老掉牙例子是表格画线，我们解决办法两个，一是插入1px/0px或0px/1px的不存在图片，一般这种方法N年前就不用了，另外一种就是去除td间的 字符就可以了。但现在我找不到好的解决办法，div怎么不放个 字符让我去删嘛，多好。我试了下加入不存在图片，可以了。但是那样好委屈哦。经过思考，在我页面的特定情况下，我找到了办法，注意我的li#id设置，广告是100px，我将li高度设置成105，背景黑色，好了，5px黑色出来了。后来我还可以用控制padding和margin的办法控制低于15px的显示，但是这始终不是很方便和通用的解决办法，比如又回到表格那个例子，空白页面中用一个无依无靠，孤孤单单的div怎么画背景线？
终于，一天结束了，我还清晰的记得那天回家路上，我短信徒弟：重构没价值，不学了，还是攻.net实在。我很嚣张的对徒弟说：等不到一周一个月了，明天我就可以完成，一个两天就可以学会的技术有什么价值？而且我还是做的一个门户站点首页。
然而实际上，第二天，我几乎放弃……
爆牙齿 2004 8 6
1、回头想想，如果是表格做导航，不但代码相对超多，而且图片必须重复切割，比如我有17个栏目，我就得切34张图片，浏览时也就要下载34张图片，然而用样式表，同样的情况只需要定义2个简单a和a:hover，加上仅两张图片就完成，而且字体是文本非图片。操作时，在页面只需要控制好一个，然后就是复制，设计时，表现与结构内容在头脑中也彻底分开，看页面上则只控制结构和内容，看样式表则只控制表现，思路非常清楚有条理。
2、导航在IE和Opera正确显示，在Mozillo上却有明显差异，这个怎么解决？!important没用了。差异看我第一帖的三图。
2、关于导航，其实我的代码是没有通过验证的，原因是id重复，我使用了一堆id="first"和一堆id="second"。后来修改时，我把设置 li的padding思路换为设置上一层的margin后，就做到了对17个li只用一个样式，id都不用了。这里我给出导航验证后的代码，自己看了，不说了：
页面
<div id="indextop_globalnav">
<div id="indextop_globalnavmenu">
<ul>
<li><a title="金桥工程" href="#">金桥工程</a></li>
<li><a title="金关工程" href="#">金关工程</a></li>
<li><a title="金卡工程" href="#">金卡工程</a></li>
<li><a title="金税工程" href="#">金税工程</a></li>
<li><a title="金农工程" href="#">金农工程</a></li>
<li><a title="金智工程" href="#">金智工程</a></li>
<li><a title="金卫工程" href="#">金卫工程</a></li>
<li><a title="金宏工程" href="#">金宏工程</a></li>
<li><a title="金盾工程" href="#">金盾工程</a></li>
<li><a title="金贸工程" href="#">金贸工程</a></li>
<li><a title="金水工程" href="#">金水工程</a></li>
<li><a title="金旅工程" href="#">金旅工程</a></li>
<li><a title="金财工程" href="#">金财工程</a></li>
<li><a title="金审工程" href="#">金审工程</a></li>
<li><a title="金保工程" href="#">金保工程</a></li>
<li><a title="金土工程" href="#">金土工程</a></li>
<li><a title="返回首页" href="#">返回首页</a></li>
</ul>
</div>
</div>
样式表
/* ---主导航--- */
#indextop_globalnav
{
position:relative;
height: 43px;
padding: 1px;
border: 0;
background:url(/images/default/bg_03.jpg);
}
#indextop_globalnavmenu
{
position:relative;
margin: 0 auto;
padding: 3px 0 0 0 !important;
padding: 4px 0 0 0;
width: 770px;
height: 43px;
}
#indextop_globalnavmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#indextop_globalnavmenu li
{
float: left;
width: 77px;
height: 20px;
}
#indextop_globalnavmenu li a
{
display: block;
margin: 0;
padding: 3px 0 0 0;
color: #000;
background:url(/images/default/bg_01.jpg) no-repeat;
}
#indextop_globalnavmenu li a:hover
{
color: #ED1C24;
background:url(/images/default/bg_04.jpg) no-repeat;
}
4、以上实际操作时并非像分析那样一次编写到位，而是不断调整的结果，解决一个问题再解决下一个，但是分析是尽可能的先做好。
最后给一个这一天的整体代码：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------
好文！yuntian兄别放弃！
再给yuntian兄一点点建议，我粗略的看了一下你的代码，我觉得你已经迈出了成功的第一步，只是目前的样式表文件稍欠优化，如果要做完一个完整的网站，css文件将来会过于臃肿，建议多使用继承关系和使用类选择符(class)定义样式表。这样可以减少重复的定义，精简CSS代码。你文中的那堆id="first"和"second"，如果再碰到类似情况，可以用class来避免这种错误，id是唯一的，可以用来定义大的区块或特定的范围。
关于你说的那个10px黑线条的问题，这不是BUG，你可以用line-height来取代height，比如：. bar li {line-height:10px;}，你可以在li里面放一个空格 解决这个问题。只是我觉得这里用border会更合适点。
另外送一个不用图片的导航给你做参考，弹性设计，用户可以在浏览器中自由调整文字大小，外框同步缩放，当然，没有你的漂亮，按钮的渐变背景不能实现 :)
可以一起来批评和指点一下：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------------------------------
关于导航也提一点建议：
菜单的li并不需要定义<id="first"><id="second">,因为li是浮动的，当超出宽度会自动折行，象这样：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
你修改#indextop_globalnavmenu li{width: 77px;}的宽度，比如加大到177px，就可以看到菜单自动排列成5行。
----------------------------------------------------------------------------------------------------------
div高度的问题，这个已经是老问题了，dw版很久以前就有解法了
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
前不久我也做了一个xhtml+css的首页，我这个页面不能通过w3c的验证，因为页面中有flash和marquee。
有能够通过flash验证的代码，但是那种代码把flash放到页面中显示的时候会有些延迟。
marquee是肯定不行了，得用脚本。
我也觉得没必要，光为了通过w3c验证感觉有些自欺欺人
www.ecdoors.com
自己觉得比yuntian的那个页面稍微要复杂点，需要自适应的地方多点，有些烦。我做到后面已经有些厌烦了，css也已经开始臃肿了，现在已经有15k了，当然可以再优化一点
我能切实感受到的div+css的做法的好处就是下载速度和浏览器渲染的速度快了，其他的我觉得意义都不大
--------------------------------------------------------------------------------------------
从这篇开始，我每次都整理一下几个要点，希望大家不要在一些基础问题上重复发贴提问。好了，不说废话了，直接入题吧。
第一天学到的几个技术上的基础问题：
1、使用ID将#开头的表现样式赋予DIV，UL，LI，P，SPAN等元素。
2、使用margin: 0 auto;语句将DIV等元素页内或嵌套居中。
3、使用body{margin: 0; padding: 0;}样式将页面在3大浏览器中贴边。
4、使用margin、padding、border进行间距的控制。（非常有用）
5、背景图片可平铺-repeat，可精确定位-position。
6、通过设置a:与a:hover的样式实现链接翻转的各种样式效果，背景，边框，字体等等。
7、理解display: block;的用法。（不愧为一种布局元素，在布局上作用很大，我一直在使用，但直到第三天才有所领悟。不仅仅是做多行多列的导航，不夸张的说，整个页面就是用它来布局的。）
8、position: relative; 与 position: absolute; 的区别，理解float的使用。
9、通过!important 调节IE浏览器的兼容性。
10、了解样式可继承，并由此可以减少很多重复的样式代码，优化样式表。
通过一些讨论，关于div等IE 15px高度BUG问题，感谢No3和cloudchen各给出了一个很好的解决办法：
1、设置line-height，例：XX{line-height: 1px; }
2、设置overflow，例：XX{overflow: hidden; height: 1px}
个人感觉，line-height很直观简单，overflow稍需理解。
7月29日，挂着笑容，我走进公司。我这个‘自大狂’免不了在徒弟面前炫耀一下昨天的战果：看看，NO TABLE!今天我就搞完它。
孤芳自赏完毕，马上集中精神，进入工作状态，毕竟昨天一天我只完成了页头，话放出去了，要实现，还得抓点紧，不是于是呼我就找了一个位子，坐了下去……汗……
先攻左边登陆区域表单，在这个时候我的概念中只有 div/ul/li 三个元素，并且不是很清楚具体的含义。反正当成类似 table/tr/td 的关系来用。在用table的时候，我的习惯是不到万不得已，绝对不嵌套表格，尽量通过页面分析和熟练的表格技巧，充分切分表格，物尽所用，所以再复杂的页面，我的table布局都很少嵌套3层。延续这个思路，能够用li解决的就尽量不多用ul，能够用ul解决，尽量不嵌套div，后来包括ul和li的嵌套，能不嵌套尽量不嵌套。我不知道这种做法对不对，因为至今我都不是很清楚这三个标记的准确含义及使用方法。但是至少我觉得应该物尽所用，而且代码可读行好像也比较强。我见过一些朋友的页面，真的是纯div+css，代码中除了div就没了，且不说div嵌套是否会影响速度，光代码也很难分清层次结构，可读性差。
后来我发现，几个元素，div/ul/li/p/span等的应用是否合理十分影响去掉样式表后文本页面的主次结构。很多时候我们完全可以通过不同的样式表使不同的页面结构代码获得完全相同的表现，但是一旦去掉样式表，那么哪种结构更能体现文本页面的主次之分，就值得考虑了。目前我正在摸索这方面，准确说就是调试表现的兼容性同时，调试文本页面的可读性。
越说越远了，回头看页面代码，用户注册和忘记密码两块的做法和导航一致，这里说说border的使用，记得对table使用边框样式的时候我们是无法设置某一边为0px的，如果我们只需要3个边框，另外一边就得设置为 1px相应背景色，但是一些情况下会出现断点，比如目前这两块的边框，不使用背景图片是无法用table完美还原的。而div则避免这种情况，0px可以用在任何一边。虽然这只是一个小细节，但对完美还原的帮助却不小。
另外过程中，我发现其他页面代码中背景的样式可以一气呵成，于是我简单的将背景色background-color: #000; 中的色彩代码加到背景图片语句中变成：background-image: url(XXX) #000; 奇怪，怎么没变化，再加上no-repeat，还是没变化，郁闷，算了，不多想了，还是老老实实使用分开写吧。
页面
……
<div id="indexcontent_top_form">
<ul><form>
<li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
<li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
<li id="select">类 型<select class="select_01">
<option>请选择类别</option>
<option>政府用户</option>
<option>企业用户</option>
<option>厂商用户</option>
<option>网站管理</option>
</select></li>
<li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
</form>
</ul>
<ul>
<li id="text_01"><a href="#">用户注册</a></li>
<li id="text_02"><a href="#">忘记密码</a></li>
</ul>
</div>
……
样式表
.botton_01
{
width: 50px;
height: 20px;
border: 1px solid #360;
background-color: #FFF;
}
.textbox_01
{
width: 93px;
height: 15px;
margin: 5px;
padding: 1px;
background:url(http://www.cngoldnet.com/images/default/bgform_01.gif) repeat-x;
border: 1px solid #360;
font-size: 9pt;
vertical-align: middle;
}
.select_01
{
width: 95px;
width: 93px !important;
height: 20px;
margin: 5px;
padding: 1px;
background:url(http://www.cngoldnet.com/images/default/bgform_01.gif) repeat-x;
border: 1px solid #360;
font-size: 9pt;
vertical-align: middle;
}
……
#indexcontent_top_form li#name
{
padding: 5px 0 0 7px;
height: 24px;
}
#indexcontent_top_form li#pw
{
padding: 0 0 0 7px;
height: 23px;
}
#indexcontent_top_form li#select
{
padding: 0 0 0 7px;
}
#indexcontent_top_form li#submit
{
float: right;
padding: 0 6px 0 0;
width:50px;
height:20px;
}
#indexcontent_top_form li
{
FLOAT: left;
DISPLAY: block;
TEXT-ALIGN: center;
margin: 0;
padding: 0;
}
#indexcontent_top_form li a
{
margin: 4px 0 0 0;
padding: 2px 0 0 2px;
width:71px;
height:15px;
border: 1px dashed #360;
color: #666;
DISPLAY: block;
TEXT-ALIGN: center;
text-decoration: none;
}
#indexcontent_top_form li#text_01 a:hover
{
color: #ED1C24;
background-color: #E5F2BF;
}
#indexcontent_top_form li#text_02 a
{
border-top: 1px dashed #360;
border-right: 1px dashed #360;
border-bottom: 1px dashed #360;
border-left: 0;
}
#indexcontent_top_form li#text_02 a:hover
{
color: #ED1C24;
border-top: 1px dashed #360;
border-right: 1px dashed #360;
border-bottom: 1px dashed #360;
border-left: 0;
background-color: #E5F2BF;
}
……
代码出来后，就是反复的调节padding和margin，然而失败的是我调了近一上午都调不好，完成不了对设计稿的完美还原，我试了一次又一次，方法用了一种又一种都不行，总是有地方宽，有地方窄，上下不居中，左右不居中等等，另外IE的BUG又跑出来了，对于贴边的px设置总是不能准确的体现，经过一上午的奋斗，依旧无法成功，有兴趣可以查看设计稿和页面截图，差别很大。这让我很不愉快！这让我无比怀恋表格，那可只需要几分钟就可以完美还原！信心倍受打击，一上午时间无法还原一个简单表单，还号称今天要完成设计，还完得了啥？中午吃完饭，休息一下，决定先不管表单了，继续向下做。
第一件事，还是先分析。
右边内容新闻这一块，显然是动态的，要和后台配合，如果顺序做下来到没什么，但这部分很明显结构是一样的，我希望能用repeater重复显示，显然只需要设置一块的样式，我还不知道可行否，但觉得应该这么去考虑。不过通过设计稿可以看出由于有3条白色分界线的存在，所以只做一个样式来完美还原不可能，这时我想到了另外一个办法，我我只定义一块的上和左边界，这样虽然右边界会少一条线，但不是很明显，为了repeater，忍了。至于排版， display: block;，和导航一个手法。但是，但是，我注意到中间2px的黑色分界，这个，这个，想了半天，最后放弃了前面repeater的想法，算了，还是做成4块吧。内容下一步考虑，先布局。于是代码如下：
为了大家看清嵌套，我把上下div也给出来了。
页面
<div id="indexcontent_top">
……
<div id="indexcontent_top_form">
……
</div>
<div id="indexcontent_top_adnewscontent">
<ul>
<li id="adnews_01"></li>
<li id="adnews_02"></li>
<li id="adnews_03"></li>
<li id="adnews_04"></li>
</ul>
</div>
</div>
样式表
/* ---内容新闻区域---*/
#indexcontent_top_adnewscontent
{
float: right;
margin:0;
padding:0;
width:620px;
height:auto;
}
#indexcontent_top_adnewscontent ul
{
float: left;
margin:0;
padding:0;
width:620px;
height:auto;
LIST-STYLE-TYPE: none;
background: #000;
}
#indexcontent_top_adnewscontent li
{
float: left;
DISPLAY: block;
TEXT-ALIGN: left;
width: 302px;
height: 142px;
padding: 3px;
background:url(http://www.cngoldnet.com/images/default/bg_06.jpg) 1px 1px repeat-x #FFF;
line-height : 17px;
}
#indexcontent_top_adnewscontent li#adnews_01
{
margin: 0 0 5px 1px;
}
#indexcontent_top_adnewscontent li#adnews_02
{
width: 303px;
margin: 0 0 5px 0;
}
#indexcontent_top_adnewscontent li#adnews_03
{
height: 143px;
margin: 0 0 0 1px;
}
#indexcontent_top_adnewscontent li#adnews_04
{
height: 143px;
width: 303px;
margin: 0 0 0 0;
}
反复调啊调，还是padding和margin，一个下午快过去了，IE对贴边距离不能准确体现的问题又冒出来了，我简直无计可施，相比opera和mozilla就很听话，但是我能放弃IE吗？不可能，宁愿迁就IE，! important似乎作用不大，有时候似乎IE也认可!improtant，没时间去研究到底!improtant出了什么问题了。几个小时就是乏味的调调调，又始终调不好，伴随着拳头在键盘上落下，鼠标在天空中飞扬，时不时还得出去走走，抽几支烟，怀恋一下表格。最终我实在没办法做到完美还原了，只好换了一种表现形式，先凑合着。我把对比图给出，大家可以看到，差别很大的。可能有人会觉得在这里过分的注重细节了，但我不觉得，我觉得所有的表现设计应该在设计稿里体现，做页面的部分只是一个还原过程，尽量不在制作过程中去进行版面设计。如果制作不能准确还原，那么就会对设计加以限制。
设计稿：
还原页面
另外，说一个我的经验，算经验吧：做网页设计的时候不是天马行空、随心所欲的，应该充分考虑到制作。对于我一般而言，单个页面的制作时间几乎忽略不计，根本不用考虑太多，也没什么难度，因为我在做设计的时候，就充分考虑进了制作的合理和限制，所以当设计稿完成之时，页面的制作也就在心中完成了。表格的切分，嵌套，切割图片时gif和jpg的分界，甚至高度宽度间距，样式表的使用等等全部心中有数，制作自然轻轻松松。
出现无法还原的情况，我只好归于我的div技术还不好，毕竟表格我用了4年，而div从接触到运用才不到2天，另外设计稿也不是基于div来设计的，这么一想，稍稍释然。下班了，徒弟伸过头来，我哭丧着脸，很沮丧的告诉她：唉，今天做不完了。她走了，我留下，继续向下做。
突然发现background的正确表达，于是回头回头，将所有的background属性精简，也算郁闷中一大快事。
对于内容，分成3块，标题、内容、更多，这时我依旧不清楚<p>和<span>，于是看了看其他网站代码，发现可以使用 <hX>来定义文本内容，于是没多想一口气用3个<h3>/<h4>/<h5>，代码如下：
页面我只给出一个li的定义，其他都是复制粘贴了。
页面
<li id="adnews_02">
<h3><a href="#">◆ 青岛市2001-2002年度金桥工程科技咨询先进集体</a></h3>
<h4>1、青岛捷能汽轮机股份有限公司科协技术专家组<br />
2、铁道部南车四方机车股份有限公司科协技术专家组<br />
3、青岛海晶化工集团有限公司科协技术专家组<br />
4、重汽集团专用汽车公司科协技术专家组<br />
5、青岛钢铁集团公司科协技术专家组<br />
6、海军四八零八厂科协技术专家组</h4>
<h5>|<a href="#" title="点击查看详细内容"> 详细内容</a>|</h5>
</li>
样式表
#indexcontent_top_adnewscontent li#adnews_01
{
margin: 0 0 5px 1px;
}
#indexcontent_top_adnewscontent li#adnews_02
{
width: 303px;
margin: 0 0 5px 0;
}
#indexcontent_top_adnewscontent li#adnews_03
{
height: 143px;
margin: 0 0 0 1px;
}
#indexcontent_top_adnewscontent li#adnews_04
{
height: 143px;
width: 303px;
margin: 0 0 0 0;
}
h3
{
margin: 0;
padding: 0;
font-size : 9pt;
font-weight : bold;
font-family : 宋体;
}
h3 a
{
text-decoration: none;
}
h3 a:link
{
color: #000;
}
h3 a:visited
{
color: #000;
}
h3 a:hover
{
color: #ED1C24;
}
h4
{
margin: 4px 10px 0 10px;
padding: 0;
color: #006;
font-size : 9pt;
font-weight : normal;
font-family : 宋体;
}
h5
{
color: #900;
margin: 0;
padding: 0;
text-align : right;
font-size : 9pt;
font-weight : bold;
font-family : 宋体;
}
h5 a
{
text-decoration: none;
}
h5 a:link
{
font-weight : normal;
color: #900;
}
h5 a:visited
{
font-weight : normal;
color: #900;
}
h5 a:hover
{
font-weight : normal;
color: #ED1C24;
}
剩下又是padding，margin的调整，不过调了一天的padding，margin，现在调整速度也较快了。做完这部分就赶快扔掉，不再想，再想就要发疯了。继续向下做。
这一块最初我看作是中间一块，命名div为indexcontent_middle。先解决这一块的上部分，左边广告，右边专题区域。难度依然是上下两条2px的黑色分界，IE会不听话的贴边。对于广告那块，我最终的办法是设置为背景图，虽然这样不好，假如使用FLASH就不行了，但是折腾了一天，没心力了。对于右边，调了一下，可以使用margin和!important解决。中间有个插曲，我依旧不知道<p><span>，所以对于每个图片旁边的三行标题，正好我刚使用了<hX>，所以自然我就顺延定义了<h6><h7>< h8>。结果发现只有<h6>有用，其他两个没用，纳闷，一查样式表手册，哦，原来<h>只是从1－6，靠，顺便就把 <h>这个标记熟悉了，回头想起之前使用的<h3><h4><h5>显然不合理。但是，但是，我再也不想去动那一块了，先不管了。对于专题区域的布局，display: block;，好，代码如下：
页面
<div id="indexcontent_middle">
<div id="indexcontent_middle_ad">
<ul>
</ul>
</div>
<div id="indexcontent_middle_subject">
<ul>
<li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_03.gif" /></a></li>
<li id="text">
<h6><a href="#">八厂科协技术专家组</a><br />
<a href="#">连理工大学校园里</a><br />
<a href="#">程9月启动实现</a><br /></h6>
</li>
<li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_04.gif" /></a></li>
<li id="text">
<h6><a href="#">八厂科协技术专家组</a><br />
<a href="#">连理工大学校园里</a><br />
<a href="#">程9月启动实现</a><br /></h6>
</li>
<li id="img"><a href="#"><img src="http://www.cngoldnet.com/images/default/ad_05.gif" /></a></li>
<li id="text">
<h6><a href="#">八厂科协技术专家组</a><br />
<a href="#">连理工大学校园里</a><br />
<a href="#">程9月启动实现</a><br /></h6>
</li>
</ul>
</div>
<div>
样式表
/* -----------正文中----------- */
#indexcontent_middle
{
position: relative;
width: 770px;
height: 750px;
margin: 0 auto;
padding: 0;
background: #FC0;
}
/* ---广告区域---*/
#indexcontent_middle_ad
{
float: left;
width: 150px;
height: 54px;
background-color: #ED1C24;
}
#indexcontent_middle_ad ul
{
margin: 0;
padding: 0;
width: 150px;
height: 54px;
LIST-STYLE-TYPE: none;
background: url(http://www.cngoldnet.com/images/default/ad_02.jpg) 0px 2px no-repeat;
}
/* ---专题区域---*/
#indexcontent_middle_subject
{
float: right;
width: 620px;
height: 54px;
background-color: #000;
}
#indexcontent_middle_subject ul
{
margin: 0;
margin-top: 3px;
margin-top: 2px !important;
padding: 0;
width: 620px;
height: 50px;
display: block;
LIST-STYLE-TYPE: none;
background: url(http://www.cngoldnet.com/images/default/bg_07.jpg);
}
#indexcontent_middle_subject li
{
float: left;
margin: 0;
padding: 0;
}
#indexcontent_middle_subject li#img
{
margin: 4px 6px 3px 7px;
border: 1px #ED1C24 solid;
padding: 0;
width: 78px;
height: 40px;
background: #ED1C24;
}
#indexcontent_middle_subject li#text
{
text-align: left !important;
margin: 5px 0 3px 0;
padding: 0;
}
h6
{
color: #900;
margin: 0;
padding: 0;
text-align : left;
font-size : 9pt;
font-family : 宋体;
line-height : 14px;
}
h6 a
{
text-decoration: none;
}
h6 a:link
{
font-weight : normal;
color: #900;
}
h6 a:visited
{
font-weight : normal;
color: #900;
}
h6 a:hover
{
font-weight : normal;
color: #ED1C24;
}
调完这个，天色很暗了，不能再做了，再晚就没车回家了，两脚一蹬，椅子向后一滑，我远远的，歪着头，斜斜的望着今天的成绩。真是悲哀，还叫嚷着今天就要做完，看看，这才做了多少，还有多少没做，即便做了的不少也是勉强完成，我太狂妄了。
不再嚣张，我就像一个战败的将军一样，灰溜溜的离开空荡的公司，灰溜溜的搭上车，灰溜溜的回到家，灰溜溜的钻进被窝，灰溜溜的睡。
后来回想，虽然这一天我并没有完成多少，但是坚持不懈的反复调试和思考摸索实践，让我对标准有了更深入的理解，在一些属性的使用上也开始熟练起来，这些一堆积，终于，速度在第三天出来了。
爆牙齿 2004 8 19
因为这一整天，我做的最多的就是无穷尽的调调调，所以我没办法很详细的写出来，尽力了。
最后和上次一样，给一个这一天的全部代码，没重新调，大概也许差不多吧：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
----------------------------------------------------------------------------------------------------------
用TABLE做的东西在IE里面经常这样的，没想到DIV也一样啊。不知道原理，不过知道解决的办法。
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
其实关键就是这里
<ul>
<form>
<li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
<li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
<li id="select">类 型<select class="select_01">
<option>请选择类别</option>
<option>政府用户</option>
<option>企业用户</option>
<option>厂商用户</option>
<option>网站管理</option>
</select></li>
<li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
</form>
</ul>
改成
<form>
<ul>
<li id="name">用户名<input type="text" name="textfield" class="textbox_01" /></li>
<li id="pw">密 码<input type="password" name="textfield" class="textbox_01" /></li>
<li id="select">类 型<select class="select_01">
<option>请选择类别</option>
<option>政府用户</option>
<option>企业用户</option>
<option>厂商用户</option>
<option>网站管理</option>
</select></li>
<li id="submit"><input type="submit" class="botton_01" value="登 录" /></li>
</ul>
</form>
----------------------------------------------------------------------------------------------
第二天学到的几个技术基础问题。
1、所谓DIV+CSS并非是将div标记一用到底，应充分使用其他标记，比如UL、LI、P、SPAN等。
2、可以通过整合的方法缩减代码。比如background: url() (color) (position) (repeat);等。不过我建议，初学者在最初最好还是老老实实写全代码，这样既便于理解也便于以后在需要分开写时能知道如何写。
3、多角度分析结构，耐心细心的调试。
其中第三点非常重要，它其实都不属于技术问题了，是一个心态问题。不耻下问是美德，但是不是事无巨细都需要问的，我做完页面花了三天，修改以通过认证花了两天，总共五天的时间，在这五天内，我只问过一个问题，是关于不使用一个ID来定义一个区域的各种表现的问题，那个问题在我花了4个小时都没解决情况下才发帖询问，在发帖没效果后，我又花了2个小时，终于自己解决了。六个小时的时间只是解决了一个小问题，或许你会认为不值得，会认为我太固执了，六个小时的时间是什么概念，我很清楚，如果使用表格来还原这个页面，六个小时我可以完美完成两次，包括需要的网页特效。但我仍然将它花在了解决一个小问题上，为什么？因为对于一个问题而言，经验由两部分组成，一半是问题解决的直接经验，一半是问题周边的间接经验，如果别人帮助了我，我将得不到间接经验，而大多数情况下，间接经验更重于直接经验，因为它不是单一的，是多面的，它将对你以后考虑问题的宽度产生很大影响。如果你哪天像周星驰一样恍然大悟，一挥拳头：有道理有道理，我怎么没想到呢？那就表明你的间接经验不如对方了。尤其是当大家都站在同一起跑线上的时候，拼得就是间接经验。所以不要随便提问，首先全力的分析、查资料、看书，在万不得已的情况下才去选择提问，要相信自己不比别人笨。
说到这里多说两件事：
1、关于我提的问题，有人说不用ID，可以用CLASS呀。是的，我用过CLASS，没深究理论，不过实践中，如果将ID定义的样式换成CLASS来表现好像不行，会有部分失效，至于为什么，我没时间去研究，在特定情况下最后我换了一种角度解决了问题，在介绍修改获得认证过程中我会将这个问题详细告诉大家。
2、我说如果用表格还原，三个小时足以，而用DIV，我花了四、五十个小时，这里就有很明显的速度、效率差别，我想这是阻碍大家广泛使用DIV的很大原因，在获得认证的两天中，我也在犹豫，究竟值不值？我会在下篇小结中详细说明对此我得出的结论。
好，入题。
7月30日，经过上一天的打击，我安安静静的来到公司，开始继续制作。
分析：最初我是按照画表格的思路将这一块按左边蓝色和橙色之间分界为中、下两部分，所以命名为indexcontent_middle_XXX和 indexcontent_botton_XXX，很快我发现应该是分为左、右两部分，因为左边四块样式完全一样，仅色彩不一样。不过正由于色彩的区别，不能对一个DIV使用一个ID（其实可以用ID定义布局，CLASS定义具体表现[<div id="" class="">]，只是当时我不知道，完全陷入ID的使用，忽略了CLASS），所以我还是按上下结构来制作。先是蓝色的一块，我直接给出代码了，没太多可讲的
页面 <div id="indexcontent_middle_newsleft"> <ul> <li id="title_blue"><a href="#" title="">最新案例分析</a></li> <li id="contents_blue"> <span id="img"><img src="/images/default/ad_04.gif" width="138px" height="38px" /></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析例分析分</a></span> </li> <li id="title_blue"><a href="#" title="">最新技术文献</a></li> <li id="contents_blue"> <span id="img"><img src="/images/default/ad_04.gif" width="138px" height="38px" /></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析</a></span> <span id="contents"><a href="#" title="">最新案例分析例分析分</a></span> </li> </ul> …… </div>
样式表：因为是写在一起的，所以我同时也将橙色的列出，通过我的注释应该看得出是当时整理后的结果，现在看仍然很臃肿。
/* ---左侧新闻---*/
/* ALL */
#indexcontent_middle_newsleft
{
position: relative;
float: left;
width: 150px;
height: auto;
background: #FFF;
}
#indexcontent_middle_newsleft ul
{
margin: 0;
padding: 0;
width: 150px;
height: 338px;
LIST-STYLE-TYPE: none;
background: #FFF;
}
#indexcontent_middle_newsleft li
{
float: left;
text-align: left;
margin: 0;
padding: 0;
}
#indexcontent_middle_newsleft span
{
float: left;
width: 138px;
margin: 5px 5px 8px 5px;
padding: 0;
}
#indexcontent_middle_newsleft span#img
{
height: 38px;
border: 1px solid #FFF;
background: #DDD;
}
#indexcontent_middle_newsleft span#contents
{
width: 125px;
margin: 0 12px 1px 12px;
}
#indexcontent_middle_newsleft span#contents a{color: #FFF;}
#indexcontent_middle_newsleft span#contents a:hover{color: #000;}
/* blue */
#indexcontent_middle_newsleft li#title_blue a
{
float: left;
width: 133px;
height: 17px;
margin: 1px 0 1px 0;
padding: 0 0 0 17px;
color: #1F79D2;
background: url(http://www.cngoldnet.com/images/default/bg_08.gif) 5px no-repeat #BCD7F2;
}
#indexcontent_middle_newsleft li#title_blue a:hover
{
color: #FFF;
font-weight : bold;
background: url(http://www.cngoldnet.com/images/default/bg_09.gif) 5px no-repeat #000;
}
#indexcontent_middle_newsleft li#contents_blue
{
width: 150px;
height: 150px;
background: #1F79D2;
}
/* orange */
#indexcontent_middle_newsleft li#title_orange a
{
float: left;
width: 133px;
height: 17px;
margin: 1px 0 1px 0;
padding: 0 0 0 17px;
color: #F60;
background: url(http://www.cngoldnet.com/images/default/bg_10.gif) 5px no-repeat #FFD1B3;
}
#indexcontent_middle_newsleft li#title_orange a:hover
{
color: #FFF;
font-weight : bold;
background: url(http://www.cngoldnet.com/images/default/bg_11.gif) 5px no-repeat #000;
}
#indexcontent_middle_newsleft li#contents_orange
{
width: 150px;
height: 150px;
background: #F60;
}
#indexcontent_middle_newsleft li#line
{
width: 150px;
height: 15px;
background: #FC0;
border-top:1px solid #FFF;
}
这里有个问题，标题不能上下居中，我设置margin和padding，在IE和Opera中不听话，而Mozilla中正常。好，定义好一个，下一个只需要将页面中的<UL>标签结构复制一次。
然后是右边，类似indexcontent_top_adnewscontent这块的思路，只不过样式多一点，同样只需要还原一个，然后在XHTML中复制四次。5px的红线和虚线都是使用border实现。箭头和图片标题是表现，作为背景定位，小方块做成图片定位在背景，和文字对齐调了不少时间（其实现在知道可以用list-style-image来实现一句话前面的小图片），没什么了吧，看代码：
页面 …… <div id="indexcontent_middle_newsrightup"> <ul> <li id="up"> <span id="title"><a href="#" title="">点击查看该专题更多文章</a></span> <span id="content"> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> </span> </li> ……说明，这里复制三个LI </ul> </div>
样式表
/* --- 右侧新闻上 ---*/
#indexcontent_middle_newsrightup
{
position: relative;
float: left;
width: 620px;
height: auto;
margin: 0;
padding: 0;
}
#indexcontent_middle_newsrightup ul
{
text-align: left;
display: block;
margin: 0;
padding: 0;
width: 620px;
height: 338px;
LIST-STYLE-TYPE: none;
background: url(/images/default/bg_12.jpg);
}
#indexcontent_middle_newsrightup li
{
float:left !important;
float: right;
margin: 0;
padding: 0;
width: 300px;
height: 164px;
}
/*---IE 3px BUG! rightway:set li float:left.---
#indexcontent_middle_newsrightup li#up
{
float:left: !important;
margin: 5px 5px 0 5px;
padding: 0;
width: 300px;
height: 159px;
background: #000;
}
*/
#indexcontent_middle_newsrightup li#up
{
margin: 5px 5px 0 5px !important;
margin: 5px 4px 0 4px;
padding: 0;
width: 300px;
height: 159px;
}
#indexcontent_middle_newsrightup span
{
float: left;
margin: 0;
padding: 0;
width: 300px;
}
#indexcontent_middle_newsrightup span#title
{
float: left;
margin: 0;
padding: 7px 0 7px 0;
width: 298px;
height: 16px;
text-align: right;
border-bottom: 1px dashed #999;
border-left: 1px dashed #999;
border-right: 1px dashed #999;
border-top: 5px solid #ED1C24;
background: url(/images/default/bg_13.gif) no-repeat;
}
#indexcontent_middle_newsrightup span#title a
{
font-size: 0.8em;
margin: 5px;
padding: 0;
color: #999;
}
#indexcontent_middle_newsrightup span#title a:hover
{
margin: 5px;
padding: 0;
color: #ED1C24;
font-size: 1em;
}
#indexcontent_middle_newsrightup span#content
{
float: left;
margin: 0;
padding: 14px 0 0 0;
width: 298px;
height: 109px;
text-align: left;
border-bottom: 0;
border-left: 1px dashed #999;
border-right: 1px dashed #999;
border-top: 0;
background: url(/images/default/bg_14.gif) 10px 18px no-repeat;
}
#indexcontent_middle_newsrightup p
{
margin: 0;
padding: 1px 0 0 27px;
color: #ED1C24;
font-size: 1em;
}
#indexcontent_middle_newsrightup p a{color: #006;}
#indexcontent_middle_newsrightup p a:hover{color: #ED1C24;}
速度有点快了，又开始兴奋起来，接着做下面部分。
橙色部分和上面蓝色部分一样我就不多说了。
而这里的右边和上面布局思路也一样，只是样式不同，然后要多复制两个。^_^
页面 <div id="indexcontent_middle_newsrightdown"> <ul> <li id="down"> <span id="title"><a href="#" title="">部颁文件</a></span> <span> <p id="img"></p> <p id="text"><a href="#" title="">重汽集团专用汽车公司科协技术专家组</a></p> </span> <span id="content"> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> <p><a href="#" title="">点击查看该专题更多文章</a></p> </span> </li> ……这里复制六个LI </ul> </div>
样式表
/* --- 右侧新闻下 ---*/
#indexcontent_middle_newsrightdown
{
position: relative;
float: right;
width: 620px;
height: 265PX;
margin: 0;
padding: 0;
background: #FFF;
}
#indexcontent_middle_newsrightdown ul
{
text-align: left;
display: block;
margin: 0;
padding: 15px 0 0 0;
width: 620px;
height: auto;
LIST-STYLE-TYPE: none;
background: url(/images/default/bg_12.jpg) repeat-x;
}
#indexcontent_middle_newsrightdown li
{
float: left;
margin: 0 1px 5px 5px !important;
margin: 0 2px 5px 3px;
padding: 0;
width: 198px;
height: 118px;
border: 1px solid #999;
background: url(/images/default/bg_15.jpg) 1px 1px repeat-x;
}
#indexcontent_middle_newsrightdown span
{
float: left;
margin: 0;
padding: 0;
width: 198px;
}
#indexcontent_middle_newsrightdown span#title
{
float: left;
margin: 0;
padding: 2px 0 0 7px;
width: 191px;
height: 17px;
text-align: left;
font-size: 9pt;
font-weight: bold;
border-bottom: 1px solid #999;
}
#indexcontent_middle_newsrightdown span#title a{color: #000;}
#indexcontent_middle_newsrightdown span#title a:hover{color: #ED1C24;}
#indexcontent_middle_newsrightdown p#img
{
float: left;
margin: 5px !important;
margin: 5px 5px 5px 3px;
padding: 0;
width: 60px;
height: 33px;
border: 1px solid #999;
background: #9C0;
}
#indexcontent_middle_newsrightdown p#text
{
float: right;
margin: 8px 5px 0 0 !important;
margin: 8px 2px 0 0;
padding: 0;
width: 120px;
}
#indexcontent_middle_newsrightdown p#text a{color: #900;}
#indexcontent_middle_newsrightdown p#text a:hover{color: #ED1C24;}
#indexcontent_middle_newsrightdown span#content
{
float: left;
margin: 5px;
padding: 0;
width: 188px;
height: 48px;
background: #9C0;
background: url(/images/default/bg_14.gif) 1px 3px no-repeat;
}
#indexcontent_middle_newsrightdown p
{
margin: 0;
padding: 1px 0 0 13px;
font-size: 1em;
}
#indexcontent_middle_newsrightdown p a{color: #006;}
#indexcontent_middle_newsrightdown p a:hover{color: #ED1C24;}
这就是后来修改中我遇到的那个问题。大家可以看看这里。
http://www.blueidea.com/bbs/newsdetail.asp?id=1675224&posts=currentposts
下面是页脚，更简单了
好了我直接给出最后的文件，基本上兼容三大浏览器，差别很小，我用了三天，真的很开心很开心。网址：http://www.cngoldnet.com/index_webstands.aspx （这里还是有些错位，因为原始老文件丢失了，我懒得去调了，具体可见我第一篇给的截图）
大家可以去效验一下，看看是什么结果，看到这个结果你会怎么想？所以，我一开始就说过，代码没有借鉴的价值，几乎都是废的。但是抛开效验，这可是按照标准思路将表现与内容分离了的，而且通过调试完全兼容各浏览器，认证有必要吗？
后来接下来的几天，由于公司正好网络情况不好，于是我一直沉侵在一种骄傲中，三天的时间虽然没有最初我想的一天快，但还是很快了，我记得论坛上有人说过，对标准技术，需要2、3个月来熟悉，精通得一年半年吧，而现在我觉得我基本上已经掌握了标准。正好公司网络不好，我闲了下来，考虑许久，感激于阿捷，决定将学习及设计过程写下来，于是最初我带着骄傲，还有些许炫耀（呵呵）开始写下《重构之美－迎接网站标准化建设的来临》之文，8月3日，网络恢复正常，我将文章发布的同时，我满怀信心的登上W3去认证，认证的结果像一盆冷水从天而降，我才知道，事情原来远远没我想的那么简单。
好了，三天到此结束，下篇小结中我将总结如下几点个人心得或者说认识吧。
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
------------------------------------------------------------------------------------------------
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
很久没动笔了，太忙了，：）
我已经有两三个月没有想当初那样很认真用标准设计网页了，最后一次是9月18日做经典的样式表大赛。所以如果从单纯的技术上而言，我早就落伍了，许许多多的兼容技巧我都不清楚。其实从一开始就是这样^_^。但是，并非我离开标准了，应该说标准现在已经像血液一样溶入我身体，贯穿在我整个开发流程中，我已经非常习惯这种曾经对我来说崭新的思维方式了。前面的留言我说了，我现在已经不期待下一版本的DW了，事实上从8月3日起，我几乎就没开过DW了，现在更是看着DW竟感到陌生，于是就想起一首歌：我们变成了世界上最熟悉的陌生人，今后各自曲折，各自悲哀吧！TOT
回过头，看看上次遗留的问题，先解决了。
1、关于对验证的认识。
当时做完后我曾非常不屑意验证，因为从最终效果来讲，页面是完美的，引用上次遗留的一句话：
引用:
……但是抛开效验，这可是按照标准思路将表现与内容分离了的，而且通过调试完全兼容各浏览器，认证有必要吗？……
你认为呢？认证有必要吗？
在我非常不情愿的情况下，我开始修改这255个错误，对的，我还记得当时我满怀信心的提交给W3后，瞪大了双眼盯着那255个错误。由于错误低级，认证给我指出的90％以上的错误都是重复ID。所以页面几乎被我重新制作了一次。当我咬着牙，那两天压住心中的怒火，一个一个倒着数似的把错误改完后，我慢慢才发现认证是有用的，他帮助你规范代码，否则若像我最初那样，真的是金玉其外，败絮其内，绣花枕头一包草。但是，我们不能夸大认证的作用，并不是通不过就不好，而通过就好得不得了，不能以为只要通过了认证就万事大吉了。我们仍然应该把重点放在UE，UI，前后台的架构结构上，只要你思路到位，认证与否真的不重要。再说认证是死的，举一个非常简单的例子，比如在某个地方从文档而言，应该使用<ol>，但是你使用的是<ul>，认证会告诉你错了吗？所以作为初学者，应该把认证当成一种工具，而不是神。在这点上面，当时的理解和现在没多大区别。
2、对于WEB标准的重新认识。
回头看看我第一篇中曾经写过的一些认识，呵呵，我在笑。来，温故而知新，我重新把它列出来：
引用:
1、节约带宽。
这个算什么优势？让我想起了曾经使用压缩网页代码工具、曾经为一个JPG的图片1％的调整压缩比以获得最佳效果最小大小的时代，随着互联网的高速发展，这些都成为了过去时，它们对网站速度的影响越来越小，小到可以忽略。没人再用压缩代码工具了吧，曾经为在压缩比为54％、55％之间都要比较半天的我现在基本上通通设定为80％，唯一保留的是还在JPG和GIF中保持选择，那也更多的是为了质量，而非大小。
现在怎么看呢？还是比较矛盾，对于静态页面而言，确实能很节约，然而普遍的静态网站能有多少流量？浏量非常高的网站又有几个是纯静态网站的？即便是，也是程序生成的。那么对于动态页面而言就感觉不如静态那么明显了，很多开发控件生成代码都带来烦杂的代码。比如，如果有同时研究.net和标准的朋友，应该知道这几个频繁使用的控件：DATAGRID，DATALIST，REPEATER。我一直都是使用REPEATER，因为它最灵活，性能也最好，但是某天我想在线编辑数据时使用了一下DATALIST，曾经以为它会是一个很好的结合，结果发现使用它后生成了大量无用的代码，DATALIST都如此， DATAGRID呢？应该更糟，DATAVIEW要来了，功能更强大，想必垃圾代码也就更多了。所以，对于节约带宽我还是表示怀疑，我觉得在大的方面，代码的精简度取决于设计开发者而非技术。真的能节约吗？真的吗？网上关于REPEATER的使用介绍是如此的少，DATAGRID是如此的丰富。垃圾代码想必也非一般的巨大。你给我一个选择……
引用:
2、完全兼容各种浏览器（实践过程中发现，其实也不是，相信还没表格兼容性好）。
在IE统率98%以上的江山下，它就是标准，不要说国外有很多人用其他浏览器，那也是相对于中国而言，我相信国外还有更多更多更多的人用IE。其实浏览器的兼容性很早就在谈，但IE实在太普及了，现在翻出来重提感觉意义也不大。你相信IE会垮掉吗？你相信短期内LINUX会普及到桌面吗，还要超过 WINDOWS。所以，翻旧帐而已，算什么优势？
完全保持以前的看法不变，即便现在据说FIREFOX占有率在增加。（其实我个人觉得FIREFOX还不如MOZILLA呢）。好处仅仅是灵活调整而已，但是若作为优势，吸引力太小。
引用:
3、盲人阅读器。
我靠，我都要笑出声了。走开走开。（别骂我歧视哈，我说事实而已）
让骂声来得更猛烈一些吧。
引用:
4、方便的改版。
是吗？我怀疑，而后实际上也是不可能的。我们来看看，首先说明，标准的定义是抛弃表格布局。
第一种改版方式：版式不变，变色彩。
这种情况下，DIV比表格有优势吗？我是说布局上。我很早就开始都使用CSS来控制所有色彩，当然包括表格背景，用表格布局的网站我同样可以只改动样式表。（后来的实践证明，这种情况下表格还有优势，因为他的样式表很简单，而DIV的样式表很复杂，尤其是在对整个网站而非单个页面。如果一个大网站全部标准化，他的样式表将数倍甚至十几倍于用表格布局的样式表。你认为谁快谁慢？？？）
第二种情况：包括结构在内全变。
这种情况下，做为表格布局的网站需要按照新的设计稿重新画表格进行设计。难道标准化的网站就可以只修改样式表吗？（当时我表示怀疑，而后的实践证实了，不可能的，DIV 的设计是有针对性的，结构变，DIV、UL、LI、SPAN、P等等全部都要跟着变，样式表得全新设计，那和修改就不一样了。我相信那个一个页面，百多样式表的模范代表，里面不会有2个结构完全相同只是数据不同的样式表。那样的话就回到了第一种改版方式。）
另外还有一点，关于图片的问题，不管那种方式都是不可能改变图片的色彩和大小，所以一旦改版，所有的图片几乎都要变，改动越大变得越多。
除非网站只使用色块，不用图片、FLASH等或很有改版针对性的少量使用，那么方便的改版……梦想吧。（PNG的透明模式是个不错的东西，不过他也只解决了色彩的问题，而且IE哪年哪月支持还遥不可及。）
这个是在认识中以前和现在变化最大的，现在几乎将以前彻底否定了。这是典型的思维变化后的结果。我记得有个人曾经在留了言给我指出了的，当时不是很留意。后来才慢慢意识到这个是和以前设计流程的一个巨大转变，并且是这系列文章中的一个巨大错误，思路的错误，我纠正过来，如果曾经被我误导过的朋友不要怪我哈。我回头找找他，引过来。真不好意思，找不到了，大概他是这么说的：楼主，我发现你是做好页面然后一块一块的还原，而我更习惯于先写出XHTML，再加样式。他说得很委婉并没有直接的指出我的错误，而我看了后也觉得有些道理，但也不知道具体道理在哪里就没太在意。现在我知道，这句话是精髓。回想我们一直以来设计网页的流程是怎样的？一个设计稿，然后还原或者对于熟练的高手就直接构思画表格布局，需要装饰的地方再按大小去设计图片插入。所以我在前面的文章中一再的提及“还原”两个字，对XHTML标记的选择都是根据页面而来，目的是为了还原设计。这是一个错误！我把我现在的理解归纳一下。
在WEB标准里，我觉得我们应该这么做：
1、整体规划，设计稿先出来比较好，来不及设计也行，但是页面的规划一定得出来。
2、根据规划完成XHTML文档，组织好文档结构，设计纯文档。这里我要提醒，纯文档同样具有UE，它只是没有了UI而已，所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。
3、设计设计稿（UI），这一步可以和2同时进行。
4、根据设计稿为XHTML文档添加样式进行还原，通过样式表的设计技巧尽可能的不修改XHTML，如果UI实在是复杂，则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。
这就是我理解过后一直以来的设计流程，注意我说的是设计流程而非制作流程，我斗胆的说一句，这才是真正的网页设计。那么请问DW在这个流程中可以进入哪一步？^_^所以……。
延着在这个思路下，你想想，设计稿可以变，但是XHTML文档几乎是固定的，那么改版容易吗？当然容易，我们可以像WINAMP 5那样的换肤。
引用:
5、支持手机、PDA等无线设备的访问，并兼容未来的新设备。
这个是唯一一个让我觉得有价值的地方。但是……后面谈。
当时对这一点我就表示过迷茫，现在依然如此，毕竟我还未接触到移动开发，不过我想在移动开发上，XML不会给予XHTML位子的，这个优势就和兼容浏览器一样了，只是增加灵活度而已，吸引力更小。
引用:
6、在设计上绝对优于表格的控制。
这个是在后来的实践中我发现的，也是最终将我吸引到标准化设计中来的最重要的因素。表格我用了近五年，可谓炉火纯青了，而DIV让我知道了原来页面上每个象素都是可以在掌握之中的，那种精确是表格代替不了的，一句话概括一下吧：基于表格的设计思路是二维的，是平面的，而基于DIV的设计思路是三维的，是立体的，真的是天马行空，随心所欲！其实我最初在DW3的时候用过半年的层，原因简单，它是三维的，而且可以拖动，但是很快我发现层糟糕的定位让我根本无法控制它，当时不知道是离开了样式表的原因，唉，如果当时，2000年哦，我研究进去，发掘出CSS的话，啊哈哈哈哈哈哈……
保持不变，体会更深，纯代码设计的自由是任何即所见即所得工具无法比拟的，即便DW做的是如此的棒，但是在WEB标准下，他仍然显得那么无力。
3、关于速度和效率的问题。
很多人都在想这个问题，被这个问题所困扰。cloudchen曾经回复过我这么一句话：网页就象快餐，在这种东西上面浪费时间不值。我深以为是，速度是非常重要的。但是我要说的是，如果使用标准，对于网站来说，开发速度会比使用表格快N倍。从单个页面来开，使用标准再熟练再快我承认都快不过表格，说不定差距还会很大。但是对于网站来说就不一样了，随着网站规模的扩大，差距会缩小，到某个临界点时，两者会持平，而后使用WEB标准的网站在开发速度和效率上会将表格远远抛在后面。所以对于小网站，小应用来说，使用标准在速度上是完全没有优势甚至会有明显劣势，但是对于一个大网站，尤其是非一次性开发而是持续性不断开发的网站来说，呵呵，不用我说了吧。我使用表格5年，我的表格设计速度可以说已经练到极为准确和快速了，几乎无法再大幅度提升了，而我使用标准才 2、3个月，我有这样的体会，你做何选择？
今天写得太多了，我还没有说关于标准和后台结合，这是我体会标准另外一个巨大的优势，下次再详细说，我想再经过一段时间，我可能会说得更为准确些。
好了，回头看看文章标题：重构之美。我没有取错标题，网页设计回归！
---------------------------------------------------------------------------------------------------
我想最初在设计HTML的TABLE这个标签的时候，并不是把它作为一个页面布局来设计的，它只是负责显示真正的表格，而最初的网页（在当时的有限带宽下）也可能只是像我们现在的文档一样（想像一下WORD文档）……标题，分隔线，大标题，段落，小标题……
那个时候说不定都是完全符合标准的哦。而后来我们把表格用得炉火纯青……网页也大变样了……
谈到现在的DIV+CSS，有的人好像突然对TABLE产生了仇恨，一时之间要对TD、TR开追悼会了，我觉得也没必要，给表格一个位置那就是它的设计初衷，显示网格状数据文字和图片。
而标准：用了TABLE就不符合标准了吗？否。用了DIV就符合标准了吗？否。所以标准问题不在于用什么，而在于用什么思路去写，用符合标准文档的思路我想可能比较容易设计出符合标准的页面代码。文档内容与样式的分离,我想其影响不亚于程式代码与HTML的分离……
至于DreamWeaver，我想用它来作XHTML设计和CSS还是合适的，至少你不需要去W3C的网站去检查是否符合标准，按上那个小按钮就能轻松定位你的所有错误了……呵呵……
想学习DIV+CSS的朋友，推荐去看看这篇译文教程，很生动！
《为何使用表格排版是不明智的》
访问：web 开发技术荟萃 会有更多的资料
----------------------------------------------------------------------------------------------
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
（1）XML
XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http: //www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http: //www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
（1）DOM
DOM 是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解， DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA (European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。
--------------------------------------------------------------------------------------------------
>>>为什么一定要 xhtml? 谁说 table 不能做任何浏览器都适应？那是因为你们都太依赖软件来做网>>.>>>页，所以导致别的浏览器看的效果不一样。
XHTML的出现是为了取代HTML，然而过渡需要时间；至于HTML何时会被XHTML全面取代，决定不在于W3C；软件制造商在这方面占有主导权，可是，若大部分的网页设计师还是继续不过渡到XHTML，没有勇气的软件制造商可能会被这些网页设计师牵着鼻子走。
我阅读了这论坛里大部分关于Web 标准的帖子，得出的理论是许多人似乎还不了解何为Web 标准。
HTML应用得当；再加上CSS使用，也能做出符合Web标准的站。sanbao123 的帖子指出了Web标准的要点。
在英语世界全面拥抱Web标准的网页设计圈子里，对于是否该继续使用HTML或XHTML也有很大的争论。拥护HTML者举出种种证据例子来说明XHTML 的种种弊病，然而这些证据例子在今天近乎完善的浏览器如Firefox里已经站不住脚。没有任何一个浏览器是十全十美的，就算是即将推出的IE ７也不会完美无暇。IE浏览器在全面拥抱web标准及使用CSS建构版面的设计师眼里，是个让人厌烦却不得不面对的 Devil. 如果您做的网站只能在IE上显示，那十之八九你的CSS或HTML或 XHTML代码有问题。
》》》》 table + css 是很不错的选择。
我完全同意这说法。继续使用Table 和拥抱Web 标准不相抵触。然而要懂的如何“正当”使用table, 许多网页设计师恐怕还跳不出旧框框。
>>>当然如果那么喜欢别人看不懂的代码，用DIV不错啊，但遇到复杂的数据不用table，那才算是不理智的
DIV (Division)是CSS 的Selector. 使用DIV 在建构页面符合逻辑；符合web 标准；复杂的数据用 table符合逻辑，可是复杂的数据用DIV来做也符合逻辑。问题在于你对CSS的驾御能力，这和理不理智不相干。
举个例子，这是我为客户做的一个站，全面使用XHTML 和CSS 还有DHTML做菜单 （次菜单里全部由CSS来控制）及一点Flash。全站符合Web 标准，XHTML和CSS都通过验证。
其中有三页课程时间表，当初我也考虑使用 table 来做。可是经过仔细考虑后，我决定用CSS来做表格。最主要的原因是因为客户每月都要更新课程表，使用CSS对我的工作进程有很大的伸缩，也节省时间。于我，面对复杂的数据不用Table, 是最明智的选择。
浙公网安备 33010602011771号