叶子树logo
首 页 技术教程 新闻资讯 网站展示 酷站欣赏 下载中心 站长故事 字体下载 图片素材
Web www.webshu.net
 
  最新推荐→

 
  最新热门→

 
  相关文章→
 您现在的位置: 叶子树 >> 技术教程 >> 网页制作 >> 技巧心得 >> 正文

DW保持清晰文档结构

作者:佚名    文章来源:不详    点击数:    更新时间:2008-6-25         

 

<% if request("infoid")<>"" then set rs=conn.execute("select * from nproduct where id="&request("infoid")) if not (rs.eof and rs.bof) then proname=rs("proname") content=rs("proinfo") end if rs.close set rs=nothing end if %>

在网页制作(html/xhtml)方面,遵循web标准可以使网站的结构更加合理。但是,新的标准总会导致一部分旧的网页制作者的排斥,很简单,因为他们无法掌握新的标准或者/同时他们认为不需要新的标准,原来的方式已经够用了。我不跟后一部分的人讨论。


应用标准的时候,有些网页制作者已经走进了一些误区。往往为了一个标准不擅长而且是微不足道的效果而弄得文档结构混乱。这显然已经违反了web标准的初衷。web标准就是让我们以清晰的结构来组织文档,好使用dom方式操作文档。


举一个例子来说,在网页制作过程中的三栏(一般是3个div标签)布局。很多网页制作者都通过3个div标签的嵌套来达到目的,因为如果不嵌套,在窗口缩小的时候,div标签会向下流动。


它们是这样的:


<div id="column1">
        <div id="column2">
                <div id="column3">
                </div>
        </div>
</div>
无论从结构还是从内容或者表现上讲,这三栏一般都是等地位的,不应该嵌套。嵌套已经暗示了它们的附属关系。当我们使用xml解析工具如 jdom,dom4j 或者 dom的javascript(ecmascript)绑定 来解析这些内容时,我们就会发生逻辑上的混乱。


对web标准抱有偏见的人可能会说,使用表格布局可以轻松实现良好的三栏布局。那我们来看看表格的代码:


<table>
        <tr>
                <td id="column1"></td>
                <td id="column2"></td>
                <td id="column3"></td>
        </tr>
</table>
可能表格在表现上能容易达到三栏布局,但是代码的结构上与上面一样是多层嵌套。<table>和<tr>标签是是冗余的。


正确的方法应该是下面的代码:


<div id="column1">
</div>
<div id="column2">
</div>
<div id="column3">
</div>
而 http://www.djangoproject.com 这样使用:


<div id="subwrap">
        <div id="content-main">
        </div>
        <div id="content-related">
        </div>
</div>
<div id="content-extra">
</div>
因为它认为第三栏只是额外的(extra)。这种布局从代码上可以看成是两栏布局,然后第一栏再分成两栏,所以表现上是三栏。


这样,符合结构和内容的关系,表现方面我们可以通过在css(级联样式表)中设定每一栏的宽度百分比来完成。或者我们定义每一栏的固定宽度,再定义 body标签的最小宽度(ie6不支持,所以需要把三栏放在一个div--container里,再定义这个div的最小宽度)。我们还有更多的方法。


当需要表现复杂的外观的时候,我们应该怎么办?比如圆角边框,那么就使用图片吧。


我们来看一个版面和代码结构都非常好的网页 http://www.recyclenow.com 的首页。下面是它的截图和使用 firefox 的 dom inspector插件查看它的dom结构。

叶子树:www.webshu.net
  • 上一篇文章:
  • 下一篇文章:

  • 文章录入:webshu    责任编辑:webshu 
    叶子树(www.webshu.net)所有资料源于作者发布或网友推荐收集整理而来,仅供学习使用,版权归原作者所有,如有侵权,请您联系我们,我们将尽快更正。

      网友评论:(评论内容只代表网友观点,与本站立场无关!) 发表评论

    网站地图 | 友情链接 | 留言互动 | 版权声明
    Copyright©All return the ye ze shu and www.webshu.net
    本站广告服务请加QQ:904166(超越-激情)
    京ICP备08103660号 把"叶子树" 与你的好友一起分享!