当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

使用XHTML按标准重构网站

时间:2008-10-6 10:25:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要:我们曾经为本节撰写的标题是:“XHTML:简单的规则,容易的方针。”原因之一是,本节讨论的规则和方针是简单和容易的。原因之二是,一本简单和容易的WEB设计图书,就像超级市场的新式的免费商品一样,虽然常见却可以有效地吸引人的眼球,这样的东西可以刺激人的兴趣,并且鼓励人们尝试。我确实希望本节的内容可以激...

D6电脑网 (d6pc.com): 使用XHTML按标准重构网站-网页制作

我们曾经为本节撰写的标题是:“XHTML:简单的规则,容易的方针。”原因之一是,本节讨论的规则和方针是简单和容易的。原因之二是,一本简单和容易的WEB设计图书,就像超级市场的新式的免费商品一样,虽然常见却可以有效地吸引人的眼球,这样的东西可以刺激人的兴趣,并且鼓励人们尝试。

我确实希望本节的内容可以激发你的兴趣,并鼓励你去尝试。为什么这么说呢?因为一旦你掌握了本章包含的简单容易的理念,你就会重新思考网页运作的方式,并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一边。我希望你可以实实在在地以另一种方式思考和工作。

另一方面,重构才是XHTML真正的意义。

在本章,我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目,你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手,也会从本章发现意外的收获。

XHTML规则概要
将传统的HTML转换为XHTML 1.0是快捷且无痛的,只要你遵守一些简单的规则和容易的方针。不管是否使用过HTML,都不会妨碍你使用XHTML。

使用恰当的文档类型声明和命名空间。
使用meta元素声明你的内容类型。
使用小写字母书写所有的元素和属性。
为所有的属性值加引号。
为所有的属性分配值。
关闭所有的标签。
使用空格和斜线关闭空标签。
不要在注释中写双下划线。
确保小于号及和号为<和&
Unicode和其他字符集
XML、XHTML、和HTML 4.0文档的默认字符集是Unicode,一个由Unicode联盟定义的标准。Unicode是一套全面的字符集,它为每个字符提供了一个特定的唯一的数字,不论平台、程序和语言。Unicode也是我们拥有的最接近通用字母表的事物,尽管它并不是一个字母表,而是一套数字映射方案。

尽管Unicode是web文档默认的字符集,开发人员依然可以自由地选择更适合他们的其他字符集。比方说,美国和西欧的网站常常使用ISO-8859-1 (Latin-1)编码,而中华人民共和国的国家标准是gb2312。

为表达语义而标记文档,而不是为了样式
记住:请最大限度地使用CSS来进行布局。在web标准的世界里,XHTML标记与表现无关,它只与文档结构有关。

结构良好的文档可以向浏览器传达尽可能多的语义,不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义,即使是在老的浏览器,或是在被用户关闭了CSS的现代浏览器中。

不是每个站点都能立即抛弃HTML表格布局。CSS的发明者,W3C,直到2002年11月才将官方网站转换为CSS布局。然而,即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理,至少在XHTML 1中是做不到的。但是现在,我们可以向这个理想迈出重大的一步,通过将表现从结构中分离(或者说将数据从设计中),即使是混合的传统的布局也可从中受益。

下面有一些提示,可以帮助你通过更结构化的方式进行思维:

提纲内的色彩
在语法学校,我们中的大部分人都被迫使用标准的提纲格式来写文章。现在,我们成为了设计师,可以多么自由地摆脱提纲的限制,然后大胆地投身于独特的个人表达的自由领域(也许我们的宣传册和商业站点还不是那么独特和个人化)。但是至少我们不会再受到提纲的困扰了。

实际上,依照HTML,我们应该将内容结构化为有组织的层级。在浏览器不支持CSS的时期,我们无法在交付可供销售的布局的同时做到这一点。但是今天,在将我们的设计不折不扣地实现的同时,我们有能力交付内在结构良好的文档。

当你将供网络使用的文本进行标记,或者当你将已有的文本文档转换为网页时,请使用传统提纲的这些条目进行思考。

<h1>我的主题</h1>
<p>介绍性文字</p>
<h2>补充性的观点</h2>
<p>相关文字</p>


确定结构的通用机制
所有编写HTML的人对段落和标题这类常见的元素都很熟悉,但是有些人对div就可能不那么熟悉了。在W3C的描述中我们可以找到理解div元素的关键,“一种添加结构的通用机制。”

在本站的首页,我们将教程目录列表封装于一个div之中,这是因为教程目录并不是正文的任何元素的一部分。其中,h2元素标记每个教程的标题,同时 ul列表元素标记每个教程的详细列表。但是在更大更具体的意义中,这个教程目录扮演了一个结构化的角色,即二级导航组件。为了强调这个角色,我们使用 navsecond这个id标注这个div。

<div id="navsecond">
<h2>HTML教程</h2>
<ul>
<li><a href="/html/index.asp" title="HTML教程">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML教程">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS教程">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP教程">TCP/IP</a></li>
</ul>
<h2>XML教程</h2>
<ul>
<li><a href="/xml/index.asp" title="XML教程">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL语言">XSL</a></li>
... ...
... ...
</div>

你可以使用任何命名。"Gladys"和"orangebox"都完全符号XHTML的命名规则。但是语义的(semantic)或者元结构化(meta-structural)的命名是最好的(即能够解释其中元素所执行功能的命名)。

当客户决定使用蓝色时,你会觉得将站点某部分命名为orangebox(橙色框)会非常地傻。下面的这种情况中,你会觉得自己更傻,当距离最后交付只有六个月时,你开始调校样式表,却怎么也想不起来"Gladys"(格拉迪斯,女子名)到底代表导航区、侧栏还是搜索框。

因此,将id标注为"menu"、"content"或者"searchform"会帮助你回忆。进一步讲,标记不等同于设计,结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是,无论你使用纯粹CSS布局或者混合布局,你都会彻底改掉使用表现标记进行思考和创作的习惯。

id Vs. class
id属性对于XHTML并不新鲜;class属性或者div元素也一样。它们都可以回溯到HTML时代。id属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。(例如,假如你的页面包含id为content的div,那么另外一个div或者其他别的元素都不能使用这个名字。相反地,class属性可以被一遍有一遍地使用在页面中(例如,页面中的五个段落都可以使用名为"small"或者"footnote"的class名称)。下面的标记将有助于阐明id和class的差异:

<div id="searchform">Search form components go here. This
section of the page is unique.</div>
<div class="blogentry">
   <h2>Today's blog post</h2>
   <p>Blog content goes here.</p>
   <p>Here is another paragraph of blog content.</p>
   <p>Just as there can be many paragraphs on a page, so too
   there may be many entries in a blog. A blog page could use
   multiple instances of the class "blogentry" (or any other
   class).</p>
</div>
<div class="blogentry">
   <h2>Yesterday's blog post</h2>
   <p>In fact, here we are inside another div of class
   "blogentry."</p>
   <p>They reproduce like rabbits.</p>
   <p>If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.</p>
</div>
在这个例子中,名为searchform的div被用来封装包含搜索表单的页面区域,而div class="blogentry"则用来封装blog中的每个文章入口。在页面中只有一个搜索表单,所以我们选择id标注这个唯一的组件。但是blog 则拥有许多的(文章)入口,所以class属性被应用于这种情况。同样地,新闻站点通常拥有多个div,这些div的class可以命名为 "newsitem"或者别的什么。

然而不是所有的站点都需要div。blog站点可以仅仅使用h1, H2, 和h3标题和<p>段落,新闻站点也一样。我们在这里展示class为blogentry的div,并不是鼓励你在站点中塞满div,而仅仅是为了向你展示这个原则:在同一个HTML文档中,使用多次class,但只能使用一次id。

粘性贴纸理论
把id属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶,电话上面也会贴一张,提醒我给一位逾期缴纳的客户打电话。还有一个,被贴在账本夹上面,来提醒我这个月15号之前必须缴纳的账单。

id同样会标注文档中的特殊区域,以便提醒你哪个区域需要特殊的处理,在这点上,id属性与粘性贴纸是相似的。为了实现所谓的特殊处理,你需要使用这个特殊的id在样式表中编写若干规则,或者在javascript文件中添加几行代码。比方说,你的CSS文件中有一些特定的规则,这些规则只应用于 id名为searchform的div内的元素。

当某一id属性作为一个有磁性的东西(磁铁)被用于一系列特定的CSS规则时,它被称为CSS选择器。有许多创建选择器的方法,不过id是很容易使用的,并且有多的用途。

id的力量
id属性不可思议地强有力。它具有以下的能力:

作为样式表选择器,使我们有能力创作紧凑的最小化的XHTML。
作为超文本的目标锚,取代过时的name属性。
作为从基于DOM的脚本来定位特定元素的方法。
作为对象元素的名称。
作为一种综合用途处理(general purpose processing)的工具(在W3C的例子中,“当把数据从HTML页面中提取到数据库,或将HTML文档转换为其他格式等情况下,作为域识别工具来使用。”)。
id的规则
id值必须以字母或者下划线开始;不能以数字开始。虽然W3C验证不会捕获这个错误,但是XML解析器会的。同时,如果你将id与 javascript在表单中配合使用,那么id名称和值必须是合法的javascript变量。空格和连字号,特别是连字号,是不被允许的。不仅如此,将下划线用于class或者id名都不是个好主意,这是由于在CSS2.0(以及某些浏览器)中的限制。

语义标记和可用性
现在,我们已经讨论过了用途广泛的XHTML元素(特别是div和id),让我们在看看关于本站首页的例子。首先让我们回顾一下这个位于报头位置的菜单:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html教程">html教程</a></li>
<li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>
<li id="b"><a href="/b.asp" title="站长资讯">站长资讯</a></li>
<li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>
<li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>
<li id="m"><a href="/m.asp" title="chinahtml">chinahtml</a></li>
<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>
</ul>
</div>

我们拥有七个链接,每个链接被分配一个id来对应相应的内容:例如名为h的id对应HTML教程,以此类推。同时这些链接被封装于名为menu的列表元素内,名为menu的id标明了这个列表的职能 - 一个菜单列表,而更外围的名为navfirst的div则用来标注页面中的这个节(section),将之与诸如主要内容(maincontent)、侧栏(sidebar)和页脚(footer)之类的元素区别开来。

div和ul两个元素提供了真实的结构,即标明了其中内容的职能(导航栏)和它在文档中所属的位置(页面的报头位置)。相反地,传统的表格布局无法提供有关数据的任何语义信息,同时会轻松地吃掉三倍的带宽。

请注意这些标记没有包含img标签,所有不会牵扯到width、height、background或者border等等属性。同时它没有使用表格单元格,也不会涉及相关的一系列属性。它非常地干净小巧,同时提供了所有可供理解它的信息。

通过与CSS配合使用,这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无CSS的环境中,我们的结构良好的标记依然可以毫不混乱地提供所有的内容。

目光敏锐的读者也许已经发现,a元素中包含的文本并没有被浏览器显示出来,这也要归功于结构化标记与CSS的完美配合,使我们可以通过几行CSS规则来定义一个触发机制,当用户使用图形浏览器时,他们会看到漂亮的导航按钮,而当用户使用纯文本的阅读器时,他们也可以得到全部的文本,这样,对所有的用户来说,内容都是一样的。

并且,由于标记没有包含图像和表格单元,这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用,同时赋予它不同的视觉效果。简而言之,通过对代码进行模块化,我们提高了代码的复用性。


Tags:标准 


D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
链接申请
  • D6电脑网(www.d6pc.com) © 2018 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0