WordPress做网站|企业网站SEO|外贸网站优化|SEO视频教程 » DIV+CSS重构标准 http://ximicc.com - 西米CC Wed, 16 May 2012 03:30:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22#comments Thu, 03 Mar 2011 10:35:52 +0000 ximicc http://ximicc.com/?p=3969 若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能地完美。
以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。
但是在同样的问题上，Web却没有此类的限制。每次用户来访．Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。
虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（22）- 西米CC(http://ximicc.com)

若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能地完美。

以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。

但是在同样的问题上，Web却没有此类的限制。每次用户来访．Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。

虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22/feed 1 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（21） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part21 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part21#comments Tue, 01 Mar 2011 10:33:01 +0000 ximicc http://ximicc.com/?p=3967 前面两个提示所隐藏的含义就是，HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构，那么尽可能少地使用标签则应该是一个自始至终都要考虑的问题。仅仅使用必要的标签，将其他不必要的都删掉。这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高）．也可以让浏览器能够很快完成文档的解析，即得
到更快地呈现速度。示例：
<p>The Zen Garden aims to excite,  inspire,  and encourageparticipation．</p>
而不要这样：
<div>
<p><span class=¨text¨>The Zen Garden aims  to excite,
inspire, and encourage participation.</span></p>
</div>
适当地使用class和id
为元素添加起标示作用的属性可以让你在稍后容易地将该元素与CSS或JavaScript关联起来。 class是一类可重用的属性，能够被重复应用到到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。
一个元素可以应用多个class，一个class也可以应用在多个页面元素上。我们也可以为同一个元素同时应用class和id，但要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字(a~z、A—Z、0—9)命名1，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了今后便于调试，还是小心为妙。三个合法的标识符：
<bodyMsoNormal”>    <p id=’‘introduction’’>
<div id=¨section5’’  class=’’top corner solid¨>
两个不合法的标识符：
<span>
<div id= ” footer “><div id= “footer”>
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） ...]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（21） - 西米CC(http://ximicc.com)

前面两个提示所隐藏的含义就是，HTML标签使用得越少越好——事实上也确实如此。若想创建出良好的文档结构，那么尽可能少地使用标签则应该是一个自始至终都要考虑的问题。仅仅使用必要的标签，将其他不必要的都删掉。这样做的好处不仅在于能够让文件保持小巧（也就意味着用户下载速度的提高）．也可以让浏览器能够很快完成文档的解析，即得

到更快地呈现速度。示例：

<p>The Zen Garden aims to excite,  inspire,  and encourageparticipation．</p>

而不要这样：

<div>

<p><span class=¨text¨>The Zen Garden aims  to excite,

inspire, and encourage participation.</span></p>

</div>

适当地使用class和id

为元素添加起标示作用的属性可以让你在稍后容易地将该元素与CSS或JavaScript关联起来。 class是一类可重用的属性，能够被重复应用到到页面中的任何元素上；而id则是独一无二的，同一个id在每个页面上只能出现一次。

一个元素可以应用多个class，一个class也可以应用在多个页面元素上。我们也可以为同一个元素同时应用class和id，但要记住：在同一个页面上不能为多个元素指定相同的id。class和id可以选用字母或数字(a~z、A—Z、0—9)命名1，但必须以字母开头。虽然有些浏览器对class和id名称的大小写不敏感，但为了今后便于调试，还是小心为妙。三个合法的标识符：

<bodyMsoNormal”>    <p id=’‘introduction’’>

<div id=¨section5’’  class=’’top corner solid¨>

两个不合法的标识符：

<span>

<div id= ” footer “><div id= “footer”>

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part21/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20#comments Sun, 27 Feb 2011 10:30:50 +0000 ximicc http://ximicc.com/?p=3965 我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字——而不是为了得到缩进等。
当然，并不是所有的HTML元素都可以在XHTML l.0 Strict标准中使用的。事实上，虽然XHTML l.0 Strict标准（以及XHTML l.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。示例：
<h3>The Road to Enlightenment</h3>
而不要使用这样的HTML:
<code    style=¨font-size: 1.5em;¨>The Road to Enlightenment</code>
避免过度使用div和span
设计HTML时一个常见的错误就是过度使用div和spano少量、必要的合理使用可以明显地增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。
例如，若是h3更能表示内容的含义，那么就不应该使用div．span也不应该替代label的作用。但这并不意味着div和span应避免使用。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。示例：
<divMsoNormal”>    <hl>CSS Zen Garden</hl>
<h2>The  Beauty  of  <acronym  title=¨Cascading  Style
Sheets”> CSS</acronym> Design</h2>
</div>
Note:在W3Schools的”XHTML l.0 Reference”( httP://w3schools.com/xhtmiixhtml_reference.asp)中可以找到xHTML1.0中允许使用的所有HTML元素。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（20） - 西米CC(http://ximicc.com)

我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字——而不是为了得到缩进等。

当然，并不是所有的HTML元素都可以在XHTML l.0 Strict标准中使用的。事实上，虽然XHTML l.0 Strict标准（以及XHTML l.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。示例：

<h3>The Road to Enlightenment</h3>

而不要使用这样的HTML:

<code    style=¨font-size: 1.5em;¨>The Road to Enlightenment</code>

避免过度使用div和span

设计HTML时一个常见的错误就是过度使用div和spano少量、必要的合理使用可以明显地增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。
例如，若是h3更能表示内容的含义，那么就不应该使用div．span也不应该替代label的作用。但这并不意味着div和span应避免使用。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。示例：

<divMsoNormal”>    <hl>CSS Zen Garden</hl>

<h2>The  Beauty  of  <acronym  title=¨Cascading  Style

Sheets”> CSS</acronym> Design</h2>

</div>

Note:在W3Schools的”XHTML l.0 Reference”( httP://w3schools.com/xhtmiixhtml_reference.asp)中可以找到xHTML1.0中允许使用的所有HTML元素。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2#comments Wed, 23 Feb 2011 10:25:58 +0000 ximicc http://ximicc.com/?p=3960 与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。
<html xmlns=’’http: //www .w3 .org/1999/xhtml’’  xml: lang=¨en¨>
设置文档的XML语言。这里设置为英语的ISO代码en。
<meta  http-equiv=’’Content-Type’‘  content=’’text/html;charset=utf-8″   >
设置文档的字符集。这里为UTF-8。
指定标题
每个HTML页面都需要一个用来描述页面内容的
元素。在访客将页面保存至收藏夹时，元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键宇格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个惟的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。示例：
<title>CSS Zen Garden:  The Beauty in CSS Design</title>
Note：若想了解更多关于将文档结构和表现分来的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书—— “Developing with Web Standards” ( www.456bereastreet.com/dwws)。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（19）- 西米CC(http://ximicc.com)指定语言和字符集

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。

<html xmlns=’’http: //www .w3 .org/1999/xhtml’’  xml: lang=¨en¨>

设置文档的XML语言。这里设置为英语的ISO代码en。

<meta  http-equiv=’’Content-Type’‘  content=’’text/html;charset=utf-8″   >

设置文档的字符集。这里为UTF-8。

指定标题

每个HTML页面都需要一个用来描述页面内容的
元素。在访客将页面保存至收藏夹时，元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键宇格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个惟的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。示例：

<title>CSS Zen Garden:  The Beauty in CSS Design</title>

Note：若想了解更多关于将文档结构和表现分来的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书—— “Developing with Web Standards” ( www.456bereastreet.com/dwws)。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1#comments Thu, 20 Jan 2011 10:23:14 +0000 ximicc http://ximicc.com/?p=3952 选择DOCTY PE
在HTML的最开始部分声明DOCTYPE（Document Type（文档类型）的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。
Note：“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和<／body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。
一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。示例：
<! DOCTYPE  html  PUBLIC  “-//W3C//DTD  XHTML  l-0  Strict//EN¨¨http://www.w3.org/TR/xhtmll/DTD/xhtmll-s trict.dtd”>
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（18） - 西米CC(http://ximicc.com)每个页面部在结构上有自己不同的需求，所以对于创建HTML来说，很难找到一个完美的一揽子解决方案。但我们却能够总结出一些通用的指导方针，将这些要点烂熟于胸，一定会对编写HTML大有裨益。

选择DOCTY PE

在HTML的最开始部分声明DOCTYPE（Document Type（文档类型）的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。

Note：“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和<／body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。

一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。示例：

<! DOCTYPE  html  PUBLIC  “-//W3C//DTD  XHTML  l-0  Strict//EN¨¨http://www.w3.org/TR/xhtmll/DTD/xhtmll-s trict.dtd”>

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17#comments Mon, 13 Dec 2010 13:50:55 +0000 ximicc http://ximicc.com/?p=3846 为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：
<br><br>
<b><font size="2">Our Family</font></b>
<br><br>
<font size="1">Pictured are Matt and Jeremy. As usual, Matt is making
a funny face. We don't have many photos where he isn't.</font>
下面这一段HTML是为了达到正确的语义而编写的：
<div id="family">
 <h3>Our Family</h3>
 <p>Pictured are Matt and Jeremy. As usual, Matt is making a funny
face. We don't have many photos where he isn't.</p>
</div>
在第一个代码片断中，所有的HTML标签都是用来表现样式的。<br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。
关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS ...]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（17）针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。

为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：

  1. <br><br>
  2. <b><font size="2">Our Family</font></b>
  3. <br><br>
  4. <font size="1">Pictured are Matt and Jeremy. As usual, Matt is making
  5. a funny face. We don't have many photos where he isn't.</font>

下面这一段HTML是为了达到正确的语义而编写的：

  1. <div id="family">
  2.  <h3>Our Family</h3>
  3.  <p>Pictured are Matt and Jeremy. As usual, Matt is making a funny
  4. face. We don't have many photos where he isn't.</p>
  5. </div>

在第一个代码片断中，所有的HTML标签都是用来表现样式的。<br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。

关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16#comments Sat, 11 Dec 2010 13:46:54 +0000 ximicc http://ximicc.com/?p=3842 长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签-HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。
结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。
既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。
那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？
只有对HTML元素非常熟悉，才能知道何时应该选用何种标签口这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（16）在开始使用CSS布局之前，首先要保证你的Web页面是以标记结构化的方式编写的。既然正在阅读本书，那么你十有八九已经听过将结构( structure)和表现(presentation)分开的说法。若你对此尚不熟悉，也不用担心——基于CSS进行设计的最主要的优势就是，只要HTML文档结构良好，那么今后将很容易通过添加一层CSS作为修饰，让文档样式变得非常漂亮。

长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签-HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。

既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。

那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？

只有对HTML元素非常熟悉，才能知道何时应该选用何种标签口这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（15） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15#comments Thu, 09 Dec 2010 13:44:17 +0000 ximicc http://ximicc.com/?p=3838 很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。
虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。
类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。
禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）
当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。
当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！
禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（15）几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。

很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。

虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

  1. 若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。
  2. 类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。
  3. 禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）
  4. 当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。
  5. 当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！
  6. 禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（14） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14#comments Tue, 07 Dec 2010 13:37:11 +0000 ximicc http://ximicc.com/?p=3832 除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法-Bitstream的Calligraphic 421字体（图1-1-12）。

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样o Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、Whole和skill l 。
还记得小学时候的这类小作品么？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图l-l-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

在图7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shca似乎要表达出类似“最高水平”的意思。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）虽然前5个初始设计都对禅意花园的成功起到了至关重要的作用，但从长远来看，只有默认的第一个设计始终保持着较高的知名度。精致简洁的“安静”始终被设定为禅意花园的默认界面。虽然也曾考虑将2号设计“鲑鱼奶油奶酪”作为默认界面，因为该设计第一眼给人的冲击力较强，但谢天谢地，最后还是选择了“安静”。

除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法-Bitstream的Calligraphic 421字体（图1-1-12）。

《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样o Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、Whole和skill l 。

还记得小学时候的这类小作品么？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图l-l-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）

在图7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shca似乎要表达出类似“最高水平”的意思。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（13） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part13 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part13#comments Sun, 05 Dec 2010 13:32:06 +0000 ximicc http://ximicc.com/?p=3824 2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11）。
如果你曾读过Bowman的原文( http://www.stopdesign.com/articles/replace_text/)，则会发现这个解决方案存在着一些非常致命的可访问性问题。禅意花园的很多设计也使用了同样的技巧，该技巧将在第4章中详细介绍。

因为禅意花园的HTML文件一旦发布，就不能再修改（其他人会开始为这个HTML编写CSS样式文件并提交上来），所以Shea花费了一段时间来检查文档的标记和内容是否合适，且还要保证文档中有足够的class和id元素，以便于日后用不同CSS进行修饰。
但即使如此细心，在HTML正式发布之后还是出现了一些事先难以预料的问题——这些将在本章稍后部分介绍。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（13）Douglas Bowman在其文章“使用背景图片来替换文本”中给出了一种权宜之计（这种解决方案目前已经是声名狼藉）：首先在页面中将前景图片和某些文本元素关联起来，然后用图片来代替原来的文本。使用CSS加上一些少量的额外标记，即可很容易地实现这个hack与标签及其alt属性的表现非常类似。

2003年4月，禅意花园的计划正式开始了。设计者发布了一个单独的HTML文件作为所有设计的基础，随着这个HTML文件发布的还有5个初始设计（图1-1-7～图1-1-11）。

如果你曾读过Bowman的原文( http://www.stopdesign.com/articles/replace_text/)，则会发现这个解决方案存在着一些非常致命的可访问性问题。禅意花园的很多设计也使用了同样的技巧，该技巧将在第4章中详细介绍。

《CSS Zen Garden - CSS禅意花园》中文版学习笔记（13）

因为禅意花园的HTML文件一旦发布，就不能再修改（其他人会开始为这个HTML编写CSS样式文件并提交上来），所以Shea花费了一段时间来检查文档的标记和内容是否合适，且还要保证文档中有足够的class和id元素，以便于日后用不同CSS进行修饰。

但即使如此细心，在HTML正式发布之后还是出现了一些事先难以预料的问题——这些将在本章稍后部分介绍。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part13/feed 0