找回密码
 注册

QQ登录

只需一步,快速开始

查看: 44512|回复: 36

重构之美-走在Web标准化设计的路上[深入结构:div再议以及对span的迷惑]

[复制链接]
发表于 2006-2-23 10:26:00 | 显示全部楼层 |阅读模式
严正申明:《重构之美》系列原创连载文章,个人blog:http://yuntian.cnblogs.com 首发,蓝色理想同步更新。版权归作者个人所有。欢迎个人网站转载传播,请尊重作者劳动注明如下:作者:爆牙齿 http://yuntian.cnblogs.com。严禁任何营利性商业网站在未经作者授权同意情况下进行转载等侵权行为。

想了想还是把这段话也加上:

[center]唠叨先[/center]

对自己没信心了,不指望能集中续写《重构之美》,还是散开记录比较好。

看见一个评论这么说:“晕,现在才谈XHTML是不是太晚了点,这东东2004就火了一把了。”其实我觉得,作为一项技术,没有火与不火的说法,也没有早与晚的说法。技术的生命力和火没有关系的,不知道不理解没学会怎么都不晚。再说了,Web标准这个东西再过几个月就是进入中国两年的时间段了(这里我们暂且以傅捷所译《网站重构》2004年5月出版这事作为一个起点好吧)。两年的时间,你敢说Web标准已经全面推广开了吗?

有多少人还不知道?
有多少人只知道“Web标准”这个词?
有多少人正在学习?
有多少人把Web标准理解为div+css或者是ul/li代替table/tr/td?
有多少人把Web标准理解为css的崛起?……

我不知道,但是我去年底到目前的公司,40多名研发开发人员没一个知道Web标准。当我把Web标准带到他们面前,他们的理解只是我的css很强,……恰恰相反我个人觉得我自己的css水平很一般,本来css就没太多的技术含量,都是些技巧的东西。7、8年的思维模式哪那么容易就改过来了? html也倔得要命,要连根拔出也不是件容易的事。所以Web标准之路还长着呢。我琢磨着xhtml 2.0发布的时候估计xhtml 1.0都在国内普及不开来,或者说不能正确的被普及开来。

既然叫随想随说,我就懒得整理了,想到那里说到那里,不分先后。我说出我的一些个人理解,正确与否自行判断吧,如果觉得我有错请无情的指出,谢谢。

啊哟,回头想想,快两年了诶,好快!不过就眨了眨眼。
----------------------------------------------------------------------------
最后决定就将这次散开记录的系列文章由最初的《随想随说,正确理解与运用Web标准》重新命名为《重构之美-走在Web标准化设计的路上》

本来我取名为“正确理解与应用”其实有赚眼球的不良动机。因为我确实仍处于理解中,并不能保证是绝对正确,而且很多文章我都会以一种求证的态度表达我自己的理解,这不已经有人指出:你完全不熟悉xhtml。虽然他没说理由,或许是随口一说,但仍让我感到汗颜,所以还是把翘起来的尾巴夹住,以免出现一看标题就想攻击的情况。

不过我已经不间断使用Web标准近两年时间,在多个项目内多次运用实践,现在做为发起者将对目前所在公司内40人规模的研发开发团队进行Web标准全面应用部署系列培训,并主导实施。所以我觉得,我应该不算初学者了,理解可能不一定正确,但至少不会肤浅。我希望每一个对我提出意见或者说甚至抨击我的朋友,对自己的话负责任拿出您的理由来,我们讨论,如果确实您正确,我立刻修改文章并注明您的名字和连接。对于不负责任的评论,一天后删除。希望大家评论时多敲一点字完整说出您的意见,类似于“好!”“顶!”“不好!”“乱说!”之类毫无意义的评论我也会随时整理删除,因为如果您做无意义的评论还真不如保持安静,谢谢。

如果说《重构之美-迎接网站标准化设计的来临》是一篇Web标准入门的文章,做到了形似,那么时隔近1年半,我希望和大家一起讨论,交换意见,努力的走近神似,所以取名为《重构之美-走在Web标准化设计的路上》,我们都在路上。这次的核心不在技术技巧上,而是像老标题一样,我希望尽量在“正确理解与运用”上做文章,在思路上做文章。

2006 2 24 update

[center]复杂表单[/center]

最近突然遭遇许多复杂表单,于是干上了。

一直有种说法:table用于数据表,对于复杂表单,table也是最好的选择,由于一直没有遇见过也就没有认真去研究,到底复杂表单是否应该使用table。

好了,机会来了,我拿着复杂表单的图样,看来看去都觉得不应该用table呀,除非是有行标和列标的数据表表单。反而类似于登陆这种简单表单,我倒是一直使用table,理由是能够在纯文档的时候对齐文本与输入框,但是对于复杂表单就不一样了,复杂表单涉及到页面布局了。

为什么要研究?因为我希望程序员不要涉及到界面的任何部分,对于页面,他只需要关注结构,而复杂表单如果采用table,很容易就将程序员带进对布局的操作中去。

好,经过一阵艰苦奋斗,还算好,xhtml部分自己觉得还算摸清了一些规律,页面的分析信手捻来,div布局下的复杂表单真是漂亮,但是但是…… css部分……我靠,真是难搞,干了几个复杂表单的css都没摸清规律,太JB麻烦了,尤其是文本长度不一致,表单控件又各种各样交错,还有错误提示隐藏的文本,时不时中间又加个按钮……迷茫了……算了,继续干css,希望最后能得出结论,对于复杂表单到底用table还是div?

先给一个对于登陆界面这样简单的表单,我最常用的xhtml代码,使用table,理由见上:


  1. <div>
  2.     <h3><span>用户登陆</span></h3>
  3.     <table>
  4.         <tr>
  5.             <td><label for="name">用户名</label></td>
  6.             <td><input id="name" />
  7.         </tr>
  8.         <tr>
  9.             <td><label for="pw">密码</label></td>
  10.             <td><input id="pw" /></td>
  11.         </tr>
  12.     </table>
  13.     <p><button /></p>
  14. </div>
复制代码


另外不使用table的如下:


  1. <div>
  2.     <h3><span>用户登陆</span></h3>
  3.     <div>
  4.        <label for="name">用户名</label>
  5.        <input id="name" />
  6.     </div>
  7.     <div>
  8.         <label for="pw">密码</label>
  9.         <input id="pw" />
  10.     </div>
  11.     <p><button /></p>
  12. </div>
复制代码


怎么说呢?第一种我视这样的简单表单为2行2列数据,用了table。第二种则是div模块化操作。一般我都使用第一种,除非文本长度一样(比如姓名,密码)才用第二种。当然我觉得第二种是正确的,所以我会优先在文案上先做文章使之长度一致。为什么?因为只有模块化,才能固定xhtml而通过css 随意布局,比如形式上为一行四列之时,第一种就做不到(其实FF可以正确解释对tr的浮动操作,例如2列tr,但是ie不支持,一个tr怎么都得占 table的一行。)。

好了,复杂表单的图样和xhtml部分在公司,明天上班发上,现在睡觉问梦去。

这份表单够份量不?



这里是xhtml部分,做了些必要的删除,没破坏结构就好了。留意我补充的部分,比如h2、h3。


  1. <h1>大便蛔虫的表单标题</h1>
  2. <div>
  3.     <h2>导航</h2>
  4.     <div>
  5.         <button>新增</button>
  6.         <button>刷新</button>
  7.     </div>
  8.     <div>
  9.         <h3>当前批次采用的标准为</h3>
  10.         <div>
  11.             <label>本人补贴</label>
  12.             <asp:label id="" Runat="server"></asp:label>
  13.         </div>
  14.         <div>
  15.             <label>本人工龄补贴</label>
  16.             <asp:label id="" Runat="server"></asp:label>
  17.         </div>
  18.         <div>
  19.             <label>配偶补贴</label>
  20.             <asp:label id="" Runat="server"></asp:label>
  21.         </div>
  22.         <div>
  23.             <label>配偶工龄补贴</label>
  24.             <asp:label id="" Runat="server"></asp:label>
  25.         </div>
  26.         <div>
  27.             <label>特殊补贴</label>
  28.             <asp:label id="" Runat="server"></asp:label>
  29.         </div>
  30.     </div>
  31.     <iewc:treeview id="" ExpandLevel="1" runat="server" AutoPostBack="True"></iewc:treeview>
  32. </div>
  33. <div>
  34.     <h2>表单内容</h2>
  35.     <div>
  36.         <h3>申请人信息</h3>
  37.         <div>
  38.             <label>本人姓名</label>
  39.             <asp:textbox id="" Runat="server"></asp:textbox>
  40.         </div>
  41.         <div>
  42.             <label>身份证号码</label>
  43.             <asp:textbox id="" Runat="server"></asp:textbox>
  44.         </div>
  45.         <div>
  46.             <label>本人工龄(年)</label>
  47.             <asp:textbox id="" Runat="server"></asp:textbox>
  48.             <asp:regularexpressionvalidator id="REVY" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
  49.         ControlToValidate="txt_WorkAge"></asp:regularexpressionvalidator>
  50.         </div>
  51.         <div>
  52.             <label>工作单位</label>
  53.             <asp:label id="" Runat="server"></asp:label>
  54.         </div>
  55.         <div>
  56.             <label>职务或职称</label>
  57.             <asp:textbox id="" Runat="server"></asp:textbox>
  58.         </div>
  59.     </div>
  60.     <div class="personinfo">
  61.         <h3>现住房信息</h3>
  62.         <div>
  63.             <label>现住房地址</label>
  64.             <asp:textbox id="" Runat="server"></asp:textbox>
  65.         </div>
  66.         <div>
  67.             <label>建筑面积(平方米)</label>
  68.             <asp:textbox id="" Runat="server"></asp:textbox>
  69.         </div>
  70.         <div>
  71.             <label>其中个人按市场价自购面积(平方米)</label>
  72.             <asp:textbox id="" Runat="server"></asp:textbox>
  73.         </div>
  74.         <div>
  75.             <label>现住房性质</label>
  76.             <asp:textbox id="" Runat="server"></asp:textbox>
  77.         </div>
  78.         <div>
  79.             <label>补贴住房面积标准(平方米)</label>
  80.             <asp:textbox id="" Runat="server"></asp:textbox>
  81.         </div>
  82.         <div>
  83.             <label>申请住房补贴理由</label>
  84.             <asp:dropdownlist id="" Runat="server"></asp:dropdownlist>
  85.         </div>
  86.         <div>
  87.             <label>申请住房补贴标准</label>
  88.             <asp:radiobuttonlist id="" runat="server" RepeatDirection="Horizontal">
  89.                 <asp:ListItem>无房户一次性补贴</asp:ListItem>
  90.                 <asp:ListItem>一次性补面积差</asp:ListItem>
  91.             </asp:radiobuttonlist>
  92.         </div>
  93.     </div>
  94.     <div>
  95.         <h3>配偶信息</h3>
  96.         <div>
  97.             <label>配偶姓名</label>
  98.             <asp:textbox id="" Runat="server"></asp:textbox>
  99.         </div>
  100.         <div>
  101.             <label>配偶身份证号码</label>
  102.             <asp:textbox id="" Runat="server"></asp:textbox>
  103.         </div>
  104.         <div>
  105.             <label>配偶工龄</label>
  106.             <asp:textbox id="" Runat="server"></asp:textbox>年
  107.             <asp:regularexpressionvalidator id="" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
  108.             ControlToValidate=""></asp:regularexpressionvalidator>
  109.         </div>
  110.         <div>
  111.             <label>配偶工作单位</label>
  112.             <asp:textbox id="" Runat="server"></asp:textbox>
  113.         </div>
  114.         <div>
  115.             <label>职务或职称:</label>
  116.             <asp:textbox id="" Runat="server"></asp:textbox>
  117.         </div>
  118.     </div>
  119.     <div>
  120.         <h3>享受住房分配或货币补贴情况</h3>
  121.         <div>
  122.             <label>(1)已享受房改购房面积(平方米)</label>
  123.             <asp:textbox id="" Runat="server"></asp:textbox>
  124.         </div>
  125.         <div>
  126.             <label>(2)已享受购房补贴(元)</label>
  127.             <asp:textbox id="" Runat="server"></asp:textbox>
  128.         </div>
  129.         <div>
  130.             <label>(3)已享受住房补贴(元)</label>
  131.             <asp:textbox id="" Runat="server"></asp:textbox>
  132.         </div>
  133.         <div>
  134.             <asp:button id="" Text="计算" Runat="server"></asp:button>
  135.             <label>本次补贴面积(平方米)</label>
  136.             <cc1:acceptnumber id="" runat="server"></cc1:acceptnumber>
  137.         </div>
  138.     </div>
  139.     <div>
  140.         <h3>住房补贴</h3>
  141.         <div>
  142.             <label>本人补贴(元)</label>
  143.             <asp:textbox id="" Runat="server"></asp:textbox>
  144.         </div>
  145.         <div>
  146.             <label>本人工龄补贴(元)</label>
  147.             <asp:textbox id="" Runat="server"></asp:textbox>
  148.         </div>
  149.         <div>
  150.             <label>配偶补贴(元)</label>
  151.             <asp:textbox id="" Runat="server"></asp:textbox>
  152.         </div>
  153.         <div>
  154.             <label>配偶工龄补贴(元)</label>
  155.             <asp:textbox id="" Runat="server"></asp:textbox>
  156.         </div>
  157.         <div>
  158.             <label>特殊补贴(元)</label>
  159.             <asp:textbox id="" Runat="server"></asp:textbox>
  160.         </div>
  161.         <div>
  162.             <label>合计(元)</label>
  163.             <asp:textbox id="" Runat="server"></asp:textbox>
  164.         </div>
  165.         <div>
  166.             <label>实际发放补贴(元)</label>
  167.             <asp:textbox id="" Runat="server"></asp:textbox>
  168.         </div>
  169.     </div>
  170.     <div>
  171.         <h3>请申请人根据不同情况填写</h3>
  172.         <div>
  173.             <label>现购房地址</label>
  174.             <asp:textbox id="" Runat="server"></asp:textbox>
  175.         </div>
  176.         <div>
  177.             <label>售房单位</label>
  178.             <asp:textbox id="" Runat="server"></asp:textbox>
  179.         </div>
  180.         <div>
  181.             <label>偿还贷款帐号</label>
  182.             <asp:textbox id="" Runat="server"></asp:textbox>
  183.         </div>
  184.         <div>
  185.             <label>贷款银行</label>
  186.             <cc1:xmldropdownlist id="" runat="server" XmlNodeName="" XmlPath=""></cc1:xmldropdownlist>
  187.         </div>
  188.         <div>
  189.             <label>本人公积金存储号</label>
  190.             <asp:textbox id="" Runat="server"></asp:textbox>
  191.         </div>
  192.     </div>
  193.     <div>
  194.         <asp:button id="" Text="保存" runat="server" CssClass="button"></asp:button>
  195.         <asp:Button id="" Text="退回" runat="server" CssClass="button"></asp:Button>
  196.         <asp:Button id="" Text="删除" runat="server" CssClass="button"></asp:Button>
  197.         <button id="" onclick="javascript:window.close();">关闭</button>
  198.     </div>
  199. </div>
复制代码


再补充一个,这里有两个部分很明显的表格结构,所以在那里使用了table,而其他部分没有用。



table部分xhtml。


  1. ..
  2.             <div class="personinfo">
  3.                 <h2><span>个人信息</span></h2>
  4.                 <div>
  5.                     <h3><span>购房人</span></h3>
  6.                     <table>
  7.                         <tr>
  8.                             <td><span>选择</span></td>
  9.                             <td>姓名</td>
  10.                             <td>性别</td>
  11.                             <td>年龄</td>
  12.                             <td>关系</td>
  13.                             <td>户籍所在地</td>
  14.                         </tr>
  15.                         <tr>
  16.                             <td><input type="checkbox" /></td>
  17.                             <td><select /></td>
  18.                             <td><input /></td>
  19.                             <td><input /></td>
  20.                             <td><select /></td>
  21.                             <td><input /></td>
  22.                         </tr>
  23.                     </table>
  24.                 </div>            
  25.                 <div>
  26.                     <h3><span>家庭成员</span></h3>
  27.                     <table>
  28.                         <tr>
  29.                             <td><span>选择</span></td>
  30.                             <td>姓名</td>
  31.                             <td>性别</td>
  32.                             <td>年龄</td>
  33.                             <td>关系</td>
  34.                             <td>户籍所在地</td>
  35.                             <td>工作单位</td>
  36.                             <td>编辑</td>
  37.                             <td>删除</td>
  38.                         </tr>
  39.                         <tr>
  40.                             <td><input type="checkbox" /></td>
  41.                             <td><select /></td>
  42.                             <td><input /></td>
  43.                             <td><input /></td>
  44.                             <td><input /></td>
  45.                             <td><input /></td>
  46.                             <td><input /></td>
  47.                             <td><button /></td>
  48.                             <td><button /></td>
  49.                         </tr>
  50.                     </table>
  51.                     <p>
  52.                         <button />
  53.                     </p>
  54.                 </div>
  55.             </div>
复制代码


css部分还没琢磨出来规律,结论没有,继续琢磨,不过感觉没有用table结构很漂亮也很灵活,但是css确实让人头大,权衡得失中,再补充了。

爆牙齿 2006 2 23
http://yuntian.cnblogs.com

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

发表于 2006-2-23 13:49:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

不好说,个人经验偏向table

table做表单,可扩展性显然要好的多
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-23 14:31:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

确实比较难说,所以想讨论一下。

可扩展性好吗?应该是定位排版方便吧。
就像我文中所说,如果用table搞登陆,如果想将用户名和密码同行显示,table就得重新画了。

因为此类复杂表单页面一般不多,所以少量的情况下没什么。

但是如果大量的呢?业务系统里面就会出现,比如前段时间,需要将一本合同做出来,这个时候怎么办?而且系统内有很多类似的复杂表单。

好像有点类似以前讨论Web标准在少量页面和大量页面上的区别了。
回复 支持 反对

使用道具 举报

发表于 2006-2-23 16:41:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

怎么说呢,还看项目需求,table和div做起来各有优点。

使用table的确是定位排版方便,类似大型表单的的难点也在此,排版复杂。
使用div时,如果把用于布局的css都写成id或者class后,再进行扩展是比较麻烦的。

还有一个表单结构也需要经常变动的需求好象很很少,所以我觉得在这方面就没必要太过追求了,table挺好。
回复 支持 反对

使用道具 举报

发表于 2006-2-23 16:54:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

先说一下俺怎么做用户入口吧:

 提示:您可以先修改部分代码再运行



忙...待会来
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-23 16:58:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

扩展不会有问题,样式定义肯定是用路径法,xhtml写得好,id和class会非常少。

其实个人而言,这样做意义不大,但是对于团队而言,我认为意义就大了。

怎么说呢?如果用table,我是不可能给出一个标准和固定的东西,但用div则可以,而且固定xhtml写法,这样一来,程序员不用考虑不同的表单画不同的表格,多个程序员都可以按固定的xhtml写法完成页面,专注于结构和程序,甚至不用了解结构,死记硬背下结构都可以。而前台也无需过多交流,闭着眼睛都知道对方会输出什么样的结构,分离的好处我想就不用多说了吧。

这是我认为更多的不是为了适应页面的变化,而是形成前台和后台在团队中的高分离度,把制作环节避开。

否则谁来做这个table?程序员?设计师?我觉得要乱套。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-23 17:06:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

fkueaps在上个帖子中说
先说一下俺怎么做用户入口吧:

 提示:您可以先修改部分代码再运行



忙...待会来


乱用标记,请搞清楚li的含义。另对于此类表单而言,这种写法几乎是100%固定的:

  1. <label for="ControlID">文本</label>
  2. <input id="ControlID" />
复制代码


还有,li是不能单独存在的,必须在ul/ol之下,别随便,xhtml非常严谨。
回复 支持 反对

使用道具 举报

发表于 2006-2-23 17:09:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

1。呵呵,写快了就忘记写UL。不好意思。
2。不过象li或别的标签的含义我确实不知道,不知道从哪去了解
3。不知道此固定是指?另对于此类表单而言,这种写法几乎是100%固定的:
回复 支持 反对

使用道具 举报

发表于 2006-2-23 17:16:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

这种写法几乎是100%固定的?
是说表现形式上不可更改还是指不够灵活或别的?
回复 支持 反对

使用道具 举报

发表于 2006-2-24 14:51:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

先留个位置,准备跟踪此贴
回复 支持 反对

使用道具 举报

发表于 2006-2-24 14:55:00 | 显示全部楼层

随想随说,正确理解与运用Web标准——复杂表单

学div+css,但不准备遵守xhtml。。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-28 01:54:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[复杂表单]

[center]振臂一呼:Css, Stop![/center]

  一个[复杂表单]热了热身,嗯,好,现在开始逐渐进入状态中……

  这个副标题让我琢磨了很久,和之前的“随想随说”不一样,重新命名为《重构之美》后就给了我压力,让我认真对待仔细斟酌,这样其实也好。

2006 2 25 Create

  Web标准在概念描述上涵盖了三个部分,结构[xhtml]、表现[css]、交互[DOM、ECMAScript],准确的定义我就不摘抄凑字数了,百度上google一下,遍地都是。这三个部分我认为并非处于同一个等级,xhtml是最重要的部分是第一级,而css和script则并列处于第二级,简单如下图例:



  我认为不要小看了这个认识,我觉得这个目前很多人都没有意识到的问题,即便意识到了,行为上也没有跟上。怎么说呢?script不是我所擅长的,所以我基本上不会涉及到Web标准中交互这部分,即便涉及也只是很浅,个人能力有限。css部分会有针对性的涉及到,但不会很多,因为我不想在css上做太多的文章,因为我感觉现在国内Web标准界对css的追捧有点过了,大小介绍Web标准的网站和书籍主要都是在介绍css的各种技巧,而对于xhtml部分的介绍很少,也就泛泛的提及用div代替table进行布局和书写规则,多一点的会提到语义。

  有没有深入的理解过?为什么要严格书写?我想大部分的答案是通过认证。再问,为什么要通过认证?答不出来了?好,再来,那又为什么要严格书写?又是认证?这不扯蛋嘛!鬼大爷管你认证与否。那么严格书写需要吗?不需要吗?靠!再来说语义,说起来估计还有很多“Web标准”者连语义这两个字都不知道。我认为语义是xhtml的两个核心之一,另外一个核心就是今天要谈到的结构。比如对表格table的使用,都是这么说的:表状数据还是要用table标记。那么有没有想过什么样的数据是属于表状数据?我说把一个三栏式布局的页面视为一行三列表状数据行不行?我是在扯蛋,那么什么是表状数据?什么时候用 table?现在网上关于xhtml语义理解的文章真的很少,为什么?css啊,从上到下都追捧css去了,以至于那天我在蓝色理想上见回帖:学div+ css,但不准备遵守xhtml……。类似的还有很多,什么花样都有。无语中,我想每个真正理解了Web标准的人都会很无奈的摇头,近2年Web标准的推广演变为Css的推广。Css很重要吗?不重要吗?靠!我说不要Css行不行?你找一大堆完全合理的理由……“行不行?”“行!”那就对了,我说不要你的 Css,我要他的Css,又行不行?那么和xhtml相比,Css重要在哪里?

  最后我们来说说关于“用div代替table进行布局”这种说法,这么说吧,如果你是抱着这种思路使用div,我认为是错误的,布局这个概念其实是table带来的,如果你又把布局加到对div的理解中去,那么对不起,你还是一个“table者”。最典型的,有位朋友针对我上一篇[复杂表单]评论到:你这个表单看似复杂,其实很简单,不过左右两列式布局,左二右六,……。他还提到了“拼装”两个字,然后说我的代码不过是用div代替 table,说我是table思路。看看看看他对页面的分析,“左右两列”,“左二右六”,“拼装”,多么熟悉啊,即便他用div实现了这样的布局,你认为他抛开了table吗?所以我说他完全没看懂我的代码。我只听说过“不要使用table布局”,没有在很官方的地方看见过“用div代替table进行布局”这种说法,都是人为造出来的,或许是为了更好的推广Web标准,但是现在我们要知道,这种说法是错误的!div从来不是布局元素,也没有哪个标记是布局元素。

  像上面的图示,xhtml是根基,表现和交互虽然也很重要,但毕竟可以不要表现,也可以不要交互,但是不能不要xhtml,所以在现在,在现在狂热的追捧Css,几乎达到忽略xhtml这个根基的环境下(比如上面我说的那个回帖),我要站出来,振臂一呼:Css,Stop!(不知道有多少人响应我,鄙视我也欢迎,当我是疯子一笑而过也可以。^_^)

  本来打算简单说说Web标准的概念和对现状的不满,然后专心写[深入结构:理解h系列的不合理。],结果扯谈了这么多,也好,换个标题发布,[深入结构:理解h系列的不合理。]放到下篇来写。

2006 2 27 Update


爆牙齿 2006 2 27
回复 支持 反对

使用道具 举报

发表于 2006-2-28 10:11:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

看了楼主的文章,现在觉得学习这么久什么都不是了……
还有,既然div从来都不是布局元素(不过好像确实是这样),那又为什么要用div来代替table布局呢?尝试着准备要走出table的围城,难道又要走进div的围城?
期待楼主继续!
回复 支持 反对

使用道具 举报

发表于 2006-2-28 11:28:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

他的意思是说,以XHTML为服务中心,写出有语义意义的超链结文档来
然后再用CSS去配合它,生成各种视觉布局。

而不是说,在做出有语义意义的XHTML文档之前,
脑里就先浮现这样那样定位,所以他称为“table者”。

当然也不是分得很决绝,
这个“考虑怎么写XHTML”的时候,在实际工作里也是和视觉布局同时进行的,
因为公司分工等,可能是先有一个视觉构图了,这种情况下不想都不行,
只是要强迫自己习惯,怎么将它套到一个纯的XHTML语义结构文档上去,让两边都完美体现。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-28 12:51:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

babysize在上个帖子中说
他的意思是说,以XHTML为服务中心,写出有语义意义的超链结文档来
然后再用CSS去配合它,生成各种视觉布局。

而不是说,在做出有语义意义的XHTML文档之前,
脑里就先浮现这样那样定位,所以他称为“table者”。

当然也不是分得很决绝,
这个“考虑怎么写XHTML”的时候,在实际工作里也是和视觉布局同时进行的,
因为公司分工等,可能是先有一个视觉构图了,这种情况下不想都不行,
只是要强迫自己习惯,怎么将它套到一个纯的XHTML语义结构文档上去,让两边都完美体现。


^_^
第一段的解释非常准确!
第二段我认为关键在于分析页面的方法,一定要不受视觉构图的影响,是能够做到决绝的。
回复 支持 反对

使用道具 举报

发表于 2006-2-28 13:27:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

我的意思是,因为中国网站公司分工的不规范,所以不同人负责多少样工作,是很难说的,比如写基本HTML文档是程序员到位还是美工代劳,都可能有不同的前提发生~

但是前提归前提,重点是最后页面写出来符不符合标准(这里不是说web standard是说个人目的),达到就行了,过程怎么想,总归会边做边纠。
回复 支持 反对

使用道具 举报

发表于 2006-2-28 13:30:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

说起来好笑,要直观地看到什么样的算“有语义意义的XHTML”
可以直接把CSS去掉,在纯文本状态浏览网页

显示出来的结果,是否有能理解的意义,一目了然了
所以达到这一点的前提是充分了解绝大部分HTML/XHTML的标签
而不只是div/span/p/h1/table/...,很有意思哟
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-2-28 13:38:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop!]

babysize在上个帖子中说
说起来好笑,要直观地看到什么样的算“有语义意义的XHTML”
可以直接把CSS去掉,在纯文本状态浏览网页

显示出来的结果,是否有能理解的意义,一目了然了
所以达到这一点的前提是充分了解绝大部分HTML/XHTML的标签
而不只是div/span/p/h1/table/...,很有意思哟


能这么做很不错,但是仍然还不够。“纯文本状态浏览网页”只能做到语义化。^_^
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-3-10 09:57:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

[center]深入结构:理解h系列的不合理。[/center]

  回头看上篇文章,确实有点乱,感觉自己像个愤青,怨妇一样。我的意思是不要过多的把关注投向Css,Css并非Web标准的最核心的东西。我认为 Web标准的核心在从html到xhtml这个看似变化很小确意义非凡的事情上。Web标准更多的是思想的变革,思想的重构,而不是技术,而这一点则几乎全部体现在xhtml上。

  菩提树朋友在评论中做了个比喻:

      XHTML像是一块白肉,不能吃,就算能吃,吃起来,也是十一分难吃。CSS就是那酱料,沾着吃,才有味,SCRIPT就好比加了一道火,烤一下,再吃,原来,完全不一样。

  非常感谢你,这个比喻非常好,不过理解重心不一样。

  还是这个比喻,我把xhtml视为牛排好不好?一份牛排好吃与否关键在牛肉本身的品质,其价值也体现在这里。甚至牛肉本身的品质可以好到任何外部因素都显多余,生吃是最好的选择。不知道你喜欢烹饪吗?我比较喜欢。首先要肉好菜好,新鲜,其次才是调料、火候、技巧。一堆好菜,不用费什么功夫就能得到很好的效果,而一堆烂菜,怎么掩饰都掩饰不住本质的缺陷。任何厨师都最重视原材料的筛选,事半功倍。话说回来,生存第一位,所以一块白肉哪怕再难吃也强过调料,没别的意思,只是为了说明轻重,应该首先重视xhtml的品质,其次才是css的技巧。By The Way,我很喜欢吃牛排,而且只要3成熟。^_^

  我还是继续说下去吧,或许听完后再回头看,就能理解我为什么说:Css, Stop!并非要否定Css,而是指对Css的过度追捧,Stop。

  问题:HTML中的六个标题Tag(h1/h2/h3/h4/h5/h6),设计是否合理?理由?解决办法?

  这是我在培训中提出的两个问题之一,不知道大家有没有考虑过?或许你要说这个不是我们该考虑的问题,这个是W3的工作。我承认,其实我最初也没主动去考虑过,直到有一天接触了xhtml2.0,我才知道h系列标题的设计是不合理的,在xhtml2.0中,不推荐使用<hx>系列Tag,理由是结构不好,推荐使用这样更合理的结构进行代替:


  1. <section>
  2.     <h>
  3.     <section>
  4.         <h>
  5.         <section>
  6.             <h>
  7.         </section>
  8.     </section>
  9. </section>
复制代码


  嗯,好像答案都有了,不合理,结构不好,解决如上。其实我想问的是为什么hx系列结构不好?为什么要这样改?现在你先别急着向下看,试试想想。

  琢磨这个问题是因为我想试着去理解W3到底想干什么?现在我们清楚了为什么在xhtml1.1中不认可类似font之类的Tag,xhtml1.1 是2001年的产物,如果当时我们就理解了,那么Web标准早就推广开来了。现在W3如法炮制,在2.0中不推荐现有的h系列Tag,那么会不会在 “2.1”中完全抛弃它,如同抛弃font一样。xhtml2.0尚处于草稿和提议当中,还未被W3正式推荐。当然我无意从中引出Web大标准、超标准之类的东西,我只是希望能对目前的Web标准加深理解有所帮助,实际上我认为我得到了较大启发或者说之前的一些模糊的,不确定的感觉变清晰了,所以我认为这是一个对于目前Web标准非常经典的问题。

  好,现在说说我的理解。

  首先我们想想h1/h2/h3/h4/h5/h6这六个Tag是什么东西,当然是标题Tag。它们有什么不同?h1页面唯一(一个页面只能存在一个 h1),并且字体最大。h2~h6可以多个,字体逐步减小。曾经有个朋友说他认为h系列都是和表现相关的东西,有可能在以后的xhtml中被删除,所以他从来不用也搞不懂为什么那么多人用。其实他搞错了开头,却猜中了结局。确实已经在2.0中不被推荐,却不是因为表现而是因为结构。不知道还有没有人和他有同样看法?h系列绝对不是类似font的表现Tag,如果因为粗体和大小就算的话,那么所有标签都属于表现标签了,ul还有点,ol还有数字呢,p有间距,div会换行,……那么还需要xhtml干嘛呢?直接XML好了。

  xml里的X是指可扩展,也就是可以随意定制标签。而xhtml中的X虽然也叫Extensible可扩展,但是并非可扩展,你不能为xhtml自定义标签,它更多是指xml化,也就是xml化的html。所以,xhtml每个标签都需要有默认的样式来支撑它的语义化,这些样式是最基础的样式,为什么h1和h2不一样?因为它们默认样式不一样。为什么2个div会形成2行,而2个span却在一行上?因为div默认一个display:block的样式。具体的大家有兴趣可以查一下。好了,hx系列Tag的不合理就出在这里,语义和结构。h1~h6的语义通通都是一样的,那就是标题。他们之间有没有结构?有的。同样的语义却设计了6个Tag,为什么?因为结构的存在。hx系列之间的结构(节,俗点叫上下级关系)是靠123456(不同的默认样式来决定),但是这些数字并没有语义的,你说1大还是6大?不同的环境下截然相反,人的判断都如此,作为程序是无法理解凭什么2就是1的子级,3就是2的子级。再有,假如一篇极端的文档需要用到h7,h8……怎么办呢?所以有了以上的改变,语义用h表示,把结构分离出来用section表示,这样一来,程序喜欢不喜欢,我想不用多说了。^_^

2006 2 27 Create

  很久以前,我第一次看到IBM网站上《Web 的未来:XHTML 2.0》这篇译文时,第一个反应是怎么把标题Tag搞得这么复杂,再定睛一看,马上就联想到自己的迷惑和一直在追求的东西,真的立刻就有一种醍醐灌顶、豁然开朗、近视眼带上眼镜的感觉。其实早在一年多前,我就有过这样的迷惑:如何固定xhtml文档?后来还在重构之美-迎接Web标准化设计的来临[总结一:网页设计回归?]中对这个问题曾做过这样的总结:

     ...2、根据规划完成XHTML文档,组织好文档结构,设计纯文档。这里我要提醒,纯文档同样具有UE,它只是没有了UI而已,所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。...4、根据设计稿为XHTML文档添加样式进行还原,通过样式表的设计技巧尽可能的不修改XHTML,如果UI 实在是复杂,则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。...

  可以看到当时的我其实是迷惑的,怎样选用标记?怎样的xhtml文档最简洁又灵活?我一直在努力,去始终好像很难找到一个方法固定xhtml。对于一个页面,不同的人有不同的分析,不同的分析又将产生不同的xhtml文档。哪怕两人在不加载样式表情况下设计出浏览界面完全一样的页面,背后也可能因为分析的不同是两份不同结构的xhtml,也就是语义一样,但结构不一样。语义含有部分结构的概念,却不等于是结构。

2006 2 28 Update

  很早就开始关心纯文档的结构,从最初的关注浏览器中xhtml的浏览结构,慢慢也开始关注xhtml的代码结构。简单说明一下这两个结构吧,希望大家能够多关注一下浏览结构,更多关注一下代码结构,而不是仅仅把目光注视在应用了css后的最终页面效果上。比如:


  1. <h1>文档名</h1>
  2. <h2>标题1</h2>
  3. <h3>标题1.1</h3>
  4. <h3>标题1.2</h3>
  5. <h4>标题1.2.1</h4>
  6. <h4>标题1.2.2</h4>
  7. <h3>标题1.3</h3>
  8. <h2>标题2</h2>
  9. <h3>标题2.1</h3>
复制代码


这段代码的浏览效果如下:

我们可以看到,浏览已经完整了,有了结构,这种结构是通过语义而产生,然而代码结构完整吗?所以我说过,语义带有部分结构的含义,却不等于结构。完整的代码结构我认为如下:


  1. <h1>文档名</h1>
  2. <div>
  3.     <h2>标题1</h2>
  4.     <div>
  5.         <h3>标题1.1</h3>
  6.         <h3>标题1.2</h3>
  7.         <div>
  8.             <h4>标题1.2.1</h4>
  9.             <h4>标题1.2.2</h4>
  10.         </div>
  11.         <h3>标题1.3</h3>
  12.     </div>
  13.     <h2>标题2</h2>
  14.     <div>
  15.         <h3>标题2.2</h3>
  16.     </div>
  17. </div>
复制代码


上面的代码还不是很合理,有心的朋友应该能看出来,不过意思到了就好。

  这有没有觉得这段代码眼熟?回头看看开头xhtml2.0中推荐的标题表达形式。是的,当我看见xhtml2.0的时候马上想起的就是我的这种写法,然后更加坚定的将这种写法延伸使用下去,并且发现似乎找到了固定xhtml的方法:用标题划分代码结构。这样对于同一个页面,不同的人都能写出同样的xhtml结构。例如,对于大部分页面,都可以视为页头,内容,页脚三部分,那么好了,每个人都能写出一模一样的xhtml大结构,而不管页面具体如何设计的,看看:


  1. <h1>网站标题</h1>
  2. <div>
  3.     <h2>页头</h2>
  4.     <h2>内容</h2>
  5.     <h2>页脚</h2>
  6. </div>
复制代码


  或许你会说,这样简单了,那么你可以去看我在[复杂表格]中的几段代码,或者看《粗略整理博客圆的页面Xhtml代码》。统统是这样的结构。

  这样写优势太多了,因为它不论在哪一方面都吻合xml的要求,不论在写法上还是结构上,程序会非常喜欢,比如无论通过js还是后台编程,我们都可以很轻松的通过xpath查询提出所有的h3或者任何部分。我想这也是xhtml的目标,让html尽可能的靠向xml。xhtml会代替html,但是我想xml不会代替xhtml,至少在浏览器没变革前,xml没有直接的语义,只有结构。xml的语义需要通过程序或者xsl来转换成有直接语义的 xhtml来体现,关于xml这里就不多说了。这种写法是有缺点的,那就是会感觉h不够用,6个h标签,只有3个可用,h4已经显小。那么当我们的结构层次高于3层或者高于4层的时候就麻烦了,所以开始向往xhtml2.0,可以无限层的表达下去,虽然还不清楚它怎么来区分每个h标签。

  这样的写法很接近一个结构很好的Word文档,对,就是以写Word文档的方式来写xhtml页面,固定下来。

  好了,现在你理解了吗?认可吗?

下一篇继续深入结构,咱们聊聊关于div和span。

爆牙齿 2006 3 7

评分

参与人数 1威望 +3 收起 理由
经典论坛大妈 + 3 历史打分

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2006-3-10 15:26:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

太长了,看得我头疼
回复 支持 反对

使用道具 举报

发表于 2006-3-10 16:55:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

呵呵,感觉大脑时而模糊时而清晰……
楼主继续
回复 支持 反对

使用道具 举报

发表于 2006-3-11 04:32:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

几点想法,仅代表个人观点:

1.xml替代xhtml是大趋势,毕竟xhtml只是html到xml的过度阶段。

2.html文档中除了结构和样式表外,还有如mouseonhover之类的标记,能不能出现一种叫做“行为表”的技术,使之与主文档脱离。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-3-22 20:38:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:理解h系列的不合理。]

[center]对HTML/XHTML/XML/XSL的一些认识[/center]

  追随lpspider的评论,知道他在《刚要玩玩xhtml就被当头一棒》中迷惑于国外在html和xhtml之间的争论,没来得及细看,不过我认为没有太多争论的。

  xhtml1.X一定是html,而html则不一定是xhtml1.X。那么如果说IE不支持xhtml就等于说IE不支持html,不会吧。所以IE不支持xhtml一说不知何来之有,不过IE不完全支持Css倒是真的,但是,但是css是表现,表现和结构是无关的。xhtml的产生正是因为在 html中,表现和结构混为一团,不利于向xml平稳过渡。

  如果要说担心,xhtml2.0到值得担心,因为有很多新的东西被加入进来,就需要各浏览器作出相应的支持,不像目前xhtml1.x,浏览器不用变化。但是这种担心或许有点早了,又或许多余了。首先xhtml2.0还处于草案和提议与设计中,而1.X还没有被正确普及开来,时间还长着呢。其次,即便xhtml2.0被确定被推荐,由于不能完全向下兼容,还需要等浏览器跟上节奏,这又是一长段时间。所以完全不用着急,我认为的话,即便xhtml是被视为一种过渡技术,但是仍然有着相当的生命力。

  说到这里,想起曾经看过这么一篇文章《了解了XHTML2.0后,有感》(实在找不到原出处),文中最后提出的观点:我的意见是,直接做XML的网页!这样的观点我是不认可的。

  再来说表现与结构,老生长谈了,2年前我就推荐过阿捷写得一篇《理解表现与结构相分离》,今天我仍要不遗余力的推荐!文中写出的四个部分,数据,结构,表现,行为。上次我给出一个简单的关系图:



  现在我再给出一个更为详细的关系图:



  数据和结构是无法分割的整体,脱离了结构的数据几乎不能使用。所以纯数据需要用xhtml或者xml来格式化,展示其结构。具体的阿捷比我说得更清楚。我这里着重谈谈结构。在我的理解里,结构目前划分为两部分,一是语义结构,二是代码结构。语义结构是靠语义产生,代码结构则是面向程序的。XML拥有完美的代码结构,但是却因为高度的可扩展和自定义性,很难拥有语义结构,除非在它的基础上定义一个通用的格式,比如现在很火的RSS。所以在目前通过浏览器上网浏览html的模式下,直接应用xml写网页是无法通用的,也是困难的。而xhtml则是一种折中,它不允许扩展,从而继承html的语义性,拥有现代浏览器都可以识别的语义结构以适应目前互联网应用大环境,同时用xml的规则规范它,让它继承完美的代码结构以便以后顺利过渡。所以我说css相对不重要呢,Web 2.0时代一个标志就是数据跟着用户走,这里的数据当然包括结构,语义结构和代码结构。再说了,css这个东西专心学习,我想一个月足以精通。但是并不代表你页面就能做得很漂亮了,那是设计,和css无关,你敢说1个月精通设计吗?我做了6年设计了,仍觉得欠缺太多,设计难啊!所以从重要性上css比不上 xhtml,从技术含金量上,css比不上设计,呵呵好像把css说得一无是处了,我错了我错了,不要骂我了。

  至于所谓的xml+xsl,并不是xhtml+css的升级版本,xsl的意义在于转换而非控制表现,xml过于开放了,所以需要xsl来转换,将 xml中的语义结构和代码结构转换成不同领域相应的标准结构,比如移动中的WML又或者WEB中的XHTML。所以不要说我要xml+xsl,若你不懂 xhtml,转换出看起来像xhtml的html,貌合神离又有什么意义呢。

  最后,我认为xhtml一定会代替html(XHTML is aimed to replace HTML),但是不一定被xml所代替,或者就如上所说,有相当的生命力。xml只有数据和结构,它的语义是面向程序的,而不是面向浏览器。如果要全面xml话,首先使用浏览器浏览网页这种上网模式就一定要先转变,再或者浏览器本身的内核会有较大的改变甚至需要重新设计。这两个都不是一蹴而就的事情,所以xml的意义更多在于桥梁,要作为主体目前还不行,不管作为数据的主体(有数据库)还是结构的主体(有xhtml)。因此即便 xhtml被视为过渡技术,2000年出生以来,经历了1.0,1.1,现在仍然在向2.0发展,直到所有条件成熟,xml能够全面接管过来。而 xhtml的作用就是等到xml能够接管之时,顺利平稳过渡。我个人认为现在谈过渡还早,2003年说99%是过时的,现在呢?2006年了,纠正了多少了?那么,我想,xhtml会再存在3、5年或者更久吧。不过互联网谁又知道呢,也许就在明天一切都变了。

未来不可知,明天太遥远,我们只能有个方向,然后全力把握住今天。
回复 支持 反对

使用道具 举报

发表于 2006-3-23 10:08:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

比较详细呢
回复 支持 反对

使用道具 举报

发表于 2006-3-23 12:53:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

太精彩了。重构,更多的是重构人的思想,而不是技术。
回复 支持 反对

使用道具 举报

发表于 2006-3-23 13:01:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

结构化文档,是不是指,用xhtml写出来的文档,是结构化的,而不管它的布局、它在浏览器中表现出来是什么样子的。要达到页面的效果,就用CSS控制,对吧?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-3-28 14:26:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[理解HTML/XHTML/XML/XSL]

[center]深入结构:合理运用div和span。[/center]

  特意上网搜索了一下,关于div,说法很多。

  把div看成是布局元素这种观点我想是最多的,类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等,太多了,还有不少人延用Dreamweaver的定义,称div为层,按  Photoshop的层的概念来使用……有朋友干脆就直接称div和span为辅助布局元素。

  怎么说呢?虽然我很想说对div类似的这种认识是错误的,div不是一个布局元素,没有一个tag是用来布局的,但是我是对的吗?我也不知道。几乎所有人对div的宣传都是布局,不管是‘民间’的还是‘官方’的,但是如果我们找根源,中文中,div是一个结构化标签,是一个块级元素。好吧,我们首先看看div拥有的语义,division(分隔),按语义它的作用是将两个部分分隔开来。然后我们再回到w3去看看怎么定义div和span的:The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

  注意到我上面加粗的一句话了吗?W3可没说是 for layout,而是for structure,是结构!因为分隔从而产生(定义)一个代码结构。我想,结构和布局应该是两个概念吧。或许,因为table确实被用于布局了,所以这种根深蒂固的布局思路又自然而然的转嫁到div上,我曾在很长一段时间里也是这么理解的。但是,现在我要说,这绝对是一个错误并且,这是极度严重的错误!!!这纯粹个人观点个人理解,自己取舍好了。

  为什么严重?理解的错误直接导致的就是使用的错误。因为如果按照这个思路,把div作为布局元素使用,那么我认为:

  你永远无法固定xhtml!永远陷在css的怪圈中!永远不会去思考和理解结构!永远擦不干净table烙下的痕迹!永远无法接近神(貌合神离的神哈,呵呵)……

  或许把div称为布局元素还是为了更好的推行标准,但是却将人们从一个错误带向了另一个错误。两年前我刚接触标准时就在《重构之美》首篇中迷惑过关于改版的事情,虽然随着理解的深入好像有了突破,在我写下xhtml后不变动,然后通过css的技巧来完成新版面。比如像著名的csszengarden。但是很快我又有新的迷惑,一个人这样做好像没什么问题,团队呢?比如如果同样的内容,设计成两个版式,然后交给不同的两个人来写xhtml,会一样吗?就像如果把csszengarden的形式颠倒一下,基于同一份数据先做好100个设计稿,让100个人按照这个设计稿写100份xhtml,会一样吗?我想按照div布局模式,对于同样的版式,不同人不同的页面分析都会产生不同的xhtml,更何况不同的版式呢?但是既然表现与结构无关,那么同样的内容不应该有2份以上的xhtml。不要小看这个问题,对于团队中前后台的有效分离与快速协同,这是关键!我在培训中提出一个观点:最理想的境界是前台闭着眼睛都能知道后台输出的是什么样的xhtml结构代码。那么问题出在哪里?div布局!尤其是在理解了h系列标签不合理之后,体会更深刻。

  上篇文章我提出的关于结构应当分为两种:语义结构代码结构。理解了这两个结构之后,那么div的用处就比较明朗了,稍稍动动脑筋就能想到,用于组织代码结构。所以hx标签的问题我认为经典呢,不要说html了,即便对于 xhtml,大部分的人关心的仍是如何表现,小部分人关心语义结构,很少人去关心代码结构,似乎xml有了,xhtml就不需要代码结构了。但是从hx系列的问题可以看出并延伸知道W3可一直在关心代码结构,从1.0,1.1直到2.0,一直希望xhtml拥有xml般严谨的代码结构。说到这里再多看 xhtml 2.0的另一个变化,br不再被推荐,应该很好理解了,br的语义是产生一个截断(break),但实际作用是产生一个行,语义结构上仍不完美,所以使用 line进行替代<line>this is one line</line>。同样br也无代码结构可言,如果我想提取第三行的数据如何操作?所以很有可能类似br、hr这类标签都将被废弃。我琢磨着,xhtml1.x是W3清理表现,将人们往语义结构[Semantic]的方向牵引,而xhtml 2.0则是展示和突出代码结构[structure]。呵呵,您说我琢磨得对吗?瞎猜瞎猜。^_^

  回过头来,那么怎么组织?首先对于一个设计稿,一定要不被设计所迷惑和左右,只提取看得见和看不见的数据,然后就扔掉设计稿,先完成数据的语义结构,再添加代码结构(adding structure to documents.),完成xhtml后,最后一步才是重新拾起设计稿打开css,还原。当然实际做的时候不可能不看设计稿,但是怎么看?只提数据!再说一点,数据在文档中的先后顺序由什么定?当然是由文档而定,不是由设计稿所定。举个例子,假如有两个栏目,新闻头条和普通新闻。谁在前谁在后,很显然在文档中应该是头条在前普通在后,这是由UE(用户体验)和栏目轻重的综合考虑决定。但是按照div布局的话,是按照设计稿上前下后左前右后的顺序来决定的,那么如果设计稿中将普通新闻栏目设计在左栏,头条设计在中栏,文档中普通新闻就跑到头条新闻上面去了。所以我打开一个Web标准站点文档浏览,如果文档的先后顺序是按照页面布局上前下后,左前右后的顺序而定的,那么我……特例一点,如果一个单屏设计的网站,标题和导航设计在页面下方,那你的文档岂不是最下面才是标题和导航,这是什么UE?这不是扯蛋嘛。div,div布局的恶果——文档结构仍然在为表现所左右!貌合神离!!

  代码结构怎么做?大处按照上篇文章所写,用h系列划分大结构。那么小处呢?这里就要牵涉进div的另外一个概念:块级元素。什么块?模块!用div模块化小处。举例:


  1. <div>
  2.     <h3><span>用户登陆</span></h3>
  3.     <div>
  4.        <label for="name">用户名</label>
  5.        <input id="name" />
  6.     </div>
  7.     <div>
  8.         <label for="pw">密码</label>
  9.         <input id="pw" />
  10.     </div>
  11.     <p><button /></p>
  12. </div>
复制代码


  这个在[复杂表单]中提到过的例子,我们来详细分析div在小处如何模块化运用。其实很简单,h3/lable/p是语义结构,然后,对于用户名和相应的输入框显然是不可分割的整体,那么好了,div将其标识为一个块,对应的密码部分同理。最后,两者一起与标题和按钮又构成一个不可分割的登陆整体,div之。这样拥有很好的语义结构和代码结构。好的代码结构不仅仅可以便于固定xhtml,便于程序操作节点,还对css提供了很高的自由度。如上例结构,我只需要给最外div一个 class,比如"loginarea"。那么:

  我可以这么按节点/路径层层定义下去:.loginarea label{} .loginarea input{} .loginarea div label{} .loginarea div input。如果我需要横向登陆,只需要定义一个关键点:.loginarea div{float: left},如果纵向则去掉这个关键点,模块化的登陆就这么简单。这样还可以省写不少class,尤其对于有些看似复杂的结构其实模块化设计好了,模块内部是简单的,一个路径定义过去,根本无需class还不会引起样式冲突和干扰,css的可读性也很好。当然这里会涉及到css的技巧,我认为css的技巧最重要的就是分析页面,页面分析的好,写出来的css简单明了充分利用tag还有多以备扩展,否则class一大堆复杂冗长还会觉得tag不够用又去添加破坏结构。复杂表单那套系统的css我写了48k,还未做最后优化,全部图片总共只有5K,还全是无损PNG格式。整套系统几十个大模块,又有无限级菜单、树、页签、弹出,复杂表单,合同,frame,iframe,报表,控件套控件等等乱七八糟什么都有,css加图片全部表现部分可以做到50K以内。这个项目四个程序员一起开发我一个人顶所有前台,三个月时间,程序员不管任何有关表现部分,我都是玩玩做做就搞定了。中后期,临着交付客户时候我还觉得公司提供的设计不好,又自己花1天重新设计,花不到2天另外写了一个css,整个系统全变了且以前的设计未丢失。功能不变的情况下界面大换,再大的系统也不过一个人几天时间,且程序员不用管。这就是Web标准的威力之一!(因为是内网应用,所以我几乎没考虑和照顾浏览器兼容性,没必要,也是快的一个因素)

  所以我认为当前各大网站上以各种方式事先列出什么单行一列,两行一列诸如此类的几行几列的div+css布局代码,不好说他们不对,你完全可以去理解是如何使用css实现几行几列的布局,然后合理运用到自己的结构上。但是如果你按照他提供的代码去套、去添加内容,那么你就错了。不过话说回来,在被一篇一篇标题着斗大的“布局”两个字的潜移默化下,您还有心思去关心结构吗?所以很多都去琢磨css了,所以这些善意的Web标准推广者还是有错的,包括我在内,我2004年撰写的《重构之美》代码示例部分带有更大的误导性(好在当初我一再强调代码毫无借鉴的意义,也算在文字上有所弥补)。现在呢?我也不知道,在路上,在路上……

  写很多了,span的合理运用留给Update吧。

爆牙齿 2006 3 24-25 Create
回复 支持 反对

使用道具 举报

发表于 2006-3-28 16:19:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:合理运用div和span。]

本人是写程序的(php),谈一点对br标签的看法。
写程序代码的时候,在一个字符串里,\n代表换行——也就是一行代码的结束。而在html中,如果你要在Web页面里显示一段程序源代码的话,需要用一些转义用字符来替换程序源代码中的一些与html代码重合的字符:比如用&amp;代替&,用&lt;代替<,等等,以免这些字符被Web浏览器所解析。那么,\n这个比较特殊的“字符”用什么替换?W3C并没给我们答案,我个人理解,<br />在目前来看是比较合适的用来转义\n的标签,虽然<br />标签在html中并非是作为转义字符来定义的。而用<line>this is one line</line>来转义this is one line\n,个人觉得有些荒唐,也不符合语义。至于<p>标签,就更不靠谱了。<p>是产生一个段落,很明显this is one line\n不是一个段落——至少在一段程序源代码中不是一个段落。
当然,这里面与本人所使用的编程语言有关。在php中,有一个库函数nl2br(),就是将一段字符串中的\n替换为<br />,用起来十分方便。如果自己写一个函数,将\n替换为br以外的标签(比如p或者line),其实也不难,但那样倒是符合Xhtml的语义了,却未免有点不合php的语义。况且作为一种脚本语言,自定义的函数执行起来肯定没有系统自带的库函数效率高。呵呵,算是本人一点小小的私心吧。与楼主商榷,望多指教。
回复 支持 反对

使用道具 举报

发表于 2006-3-29 14:38:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:合理运用div和span。]

好帖!学习中......
回复 支持 反对

使用道具 举报

发表于 2006-3-29 14:44:00 | 显示全部楼层

重构之美-走在Web标准化设计的路上[深入结构:合理运用div和span。]

下载了,但还没来得及看!
我想问,应用WEB标准的最终目的是什么?跨平台、跨浏览器,我记得是这样吧!那么,我觉得,只要达到这个目的、减少带宽,不论运用什么技术(DIV+CSS也好,TABLE也好)!这都是“重构之美”!

顺便问一下,大家一般测试页面时用的软件是什么?是FIREFOX吧??还有其它什么软件?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-5 19:38 , Processed in 0.087207 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表