论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}通向web标准之路

文章类别:div+css布局 | 发表日期:2008-9-26 11:53:46

  首先不要急着开始!在做任何事情之前做好2个心理预备,这对你的学习过程是最重要的事情:

  学习需要时间,要循序渐进;

  前进的过程中会碰到挫折。

  但是你并不孤独,我们中许多人正在投入到学习和使用web标准的行列中来。有一个不断扩大的团体来帮助你更轻易地学习,老手在学习技术和技巧的过程中碰到许多困难,幸运的后来者(包括我自己)将从他们的汗水与泪水中获益。

  当最后,你能熟练使用基于web标准的设计方法(使那些传统的基于表格的方法显得黯然无光)时,回头再看,你将惊异用CSS布局页面并不是那么难。哦,当然,假如主流浏览器能对CSS2规范中的一些操作支持更好,实际上使用时可能会更加轻易。

  恩,我好象有点跑题了。

  那么,让我们马上开始了解实际有用的信息。首先,去买一本《Designing With Web Standards》(注1),不用多想,马上去做。已经有了?好,现在就阅读它,不要让它积满灰尘。我想说的每一点在书里都有具体的解释。书分为平均的两部分,宣言(为什么你应该怎么做)和教程(你怎样去做)。这对你是有用的。

  现在,第一件事情就是树立一个XHTML的思想体系概念,不管你选择HTML4.01或者XHTML 1.0 Strict(有很多理由选择其中的任一种,现在你可以先忽略这些,以后不能忽略,除非你预备做让人麻木的苦差事。),所有的文档以选择一个DOCTYPE开始。告诉浏览器你的文档用什么标记语言,这样做可以防止出现不必要的表现错误,否则糟糕的页面显示结果会使你疯狂。打个比方:我想飞往芝加哥,就必须告诉旅行社我要去哪里,否则可能无目的的乱飞到维也纳。要显示的是HTML或者XHTML,你必须先告诉浏览器,设置DOCTYPE可以确保我到达\"目的地\"。

  下一个目标:严谨格式的标识。这非常轻易把握。把所有的属性加上引号(例如:<a href=\"link\">);正确的嵌套标识;关闭所有打开的标识(例如:<input type=\"text\" />)。每一个标识或者元素都需要关闭。

  快速注释:不知道什么时候,标识(tags)变成了元素(elements),它们是相同的含意,不同的说法。不管你怎么称呼它们,现在正确的称呼似乎应该是\"元素\",也许一开始就是这样的,我不知道也没有人告诉过我。

  无论如何,每一个元素都必须被正确的关闭。假如你使用HTML4.01,可以不考虑单独元素象<br>,<hr>和<input>,假如你使用XHTML,单独元素也必须关闭,就是在最后加一个斜杠,例如:<br>变成<br />。

  接下来,是一个有点令人糊涂的、关于XHTML属性的规则:所有的属性都必须有一个值,假如没有值,就用它本身。例如<input type=\"radio\" checked=\"checked\" />。在HTML4.01中checked是不需要值的,而XHTML中它是必须的。

  最后,XHTML需要你用小写写所有的代码,HTML不区分大小写,但XHTML区分,它遵循的是XML语法规则。

  上面就是所有关于标识的变化!你已经都知道了!深呼吸、喝口啤酒,放松一下。因为那只是第一步。

  第二节
  
  现在,我们开始学习撰写正确的HTML/XHTMLL,并在W3组织的校验器(validator)里校验它们。假如你写得正确,你将看到一个蓝底黄字的成功信息。尝试喜欢这种颜色/字体组合吧,它将是你最好的朋友。

  为什么校验那么重要?有什么关系吗?因为poorly-written(随意的、不严谨的)标识将带来完全的不可预知性。页面的\"生死\"完全依靠于浏览器的错误处理方式,尽管大多数浏览器还能很好的支持poorly-written标识,但这是不正确的习惯。嗨,是什么使得我们习惯非标准?首要原因是浏览器大战,1995年微软能够从Netscape地盘里竞争获得市场就是因为IE对网页错误的处理方式和 Netscape 一模一样。

  另一个观点是:校验帮助你发现错误的代码,确保你的页面有更一致的表现。校验代码是我调试布局的第一件事,相信你也是。

  ok,当你第一次校验你的第一个站点,你很可能需要忍受一下反馈回来的七八十条不可思议的错误信息。不幸的,虽然校验有帮助信息,但并不完美,它只是由一些志愿者维护的。好消息是那些错误是关联的,假如你发现少了一个</p>标签并修正了它,很可能接下来的24个错误都没有了。简言之,看起来校验结果很糟糕,但往往并不是。

  现在,你已经通过了校验,你的代码也都符合规范。此时,你坚持了一个严格的指导方针,但是对为什么首先要这样做还缺乏全面的了解。

  第三节
  下一步是采用良好格式(well-formed)的标识重构你已经建立的文档,剥离那些被越来越多新近的DOCTYPE列为“不赞成”使用的表现层的属性,将它们放在一个单独的文件中。这就是倍受争议的\"表现与结构相分离\",这也是为什么CSS受到人们重视的原因。

  这样比方:你的文本是内容。内容是完整的,但是没有任何内容结构的提示(比如:空格、节、标题、列表等),你得到的只是一个杂乱的文本,完全不好用。结构层是额外的,在文档中加个别的元素以传达额外的结构信息,来打破杂乱的文本,使之更有逻辑性、组织性。但是那些元素并不能控制文本的默认外表。例如,你经常发现第一页的标题比正文字体大,这并不是结构的作用。

  是\"表现层\"出现的时候了。表现是格式化的提示,它告诉第一页的标题是红色的,斜体的,字体尺寸是正文字体的150%。表现层是文档结构层以上额外的层。CSS就属于表现层,它可以通过文档上简单的标记,将文档转换成令人惊异的形式--可以访问CSS Zen Garden 看实例。

  那么,什么是从结构中分离表现最好的方法?我们拿一段传统代码来说明,其中包含用于提供表现的 HTML元素或属性。是砍掉那些bgcolors和<center>标签的时候了,我们来一个随堂测试:

  在下面这段演示代码中,哪些用于表现的属性和标签应该被消除?

  <center><h1><font face=\"Verdana\">This is my first web site.</font></h1></center> <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <body bgcolor=\"#ffffff\" topmargin=\"0\" leftmargin=\"0\" marginwidth=\"0\" marginheight=\"0\"> <td bgcolor=\"#ffffff\" valign=\"top\" align=\"center\"><p>They're coming to take me away...</p></td>
  预备好你的答案了吗?好,正确的结果列在下面,这是干净的没有表现痕迹的结构化的代码:

  <h1>This is my first web site.</h1> <table> <body> <td><p>They're coming to take me away...</p></td>
就这样?就是这样。

  虽然这段代码不明确符合任何一种规范,这样的分离,更大的意义在于使用了正确的元素。使用表格布局则是次要问题,在上面的例子中,使用表格方法不正确,从长远、谨慎的角度考虑应该移去<table>和<td>元素。虽然表格不被赞成使用,但表格依然非常有用,它们可以用在适当的地方--表格排列的数据上。

  好,我们已经将格式从我们的页面剥离,万岁!现在还做什么呢?那只剩下一些丑陋的元素,Times-New-Roman字体的文本和线条。一点都不有趣,哪里是我们许诺的生动漂亮的页面?

  回头看Zen Garden的例子,看见可爱的设计了吗?看起来它们是多么不同?要害是:在那些漂亮的设计下面是相同的XHTML,就和你刚才未格式化的文档一样乏味。不对吗?

  事实上,乏味和丑陋却有一个好的基础,你可能已经注重到这个没有格式化的HTML看起来就象1994年的web一样糟糕。除了少数例外,这些元素和web本身一样老,<h2>自从Mosaic浏览器出现那天就有了。

  好处当然不仅限于此,几乎不用考虑易用性(满足那些非凡需求),内建搜索引擎优化,带宽的成本下降,等等等等。Jeffrey Veen已经在去年写了\"web标准的商业价值\",Roger Johansson在他最近的\"使用web标准开发\"中也解释了基于标准的设计的技术和好处。

  CSS已经被今天所有主流浏览器很好的支持,有数不尽的资源帮助学习CSS的语法、基于CSS的布局以及高级技巧。我推荐几个比较好的:westCiv提供一个正在进行的免费的CSS课程,将帮助你入门和快速把握。Andrew Fernandez已经建立了一个巨大的CSS资源列表,不论你是否新手都将对你有帮助。Eric Meyer已经写了一捆书,你可以放在案头随时查阅。这些书包括以案例为基础的《Eric Meyer on CSS》《More Eric Meyer on CSS》。O’Reilly出版社出版的CSS参考书:《CSS权威指南》已经发行第2版,你最好也放在桌上。同样还有Molly Holzschlag的《The Designer’s Edge》以及Chris Schmitt的《Designing CSS Web Pages》。

  深入应用CSS的细节和构建布局将花费太多时间。我就不多说了。以上就是我能给那些开始注重web标准的设计师的建议。通读并分享您的心得,让我们作为一个团体一起成长,我们中有许多人在积极推动web标准发展,我们有一个全球的网络,充分利用它吧。

  注释
  1.《Designing With Web Standards》一书是Zeldman写得web标准推广书籍,中文版已经引入,2004年5月发行,书名为《网站重构--用web标准进行设计》

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058