当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

打好CSS布局的基础--创建良好的标记(四)

点击数:26222012-07-15 11:56:40 来源: 海盈网络

3. 时间的检验

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

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

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

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

4. 禅意花园的HTML源代码

我们应该把禅意花园的HTML结构看作像书一样持久不变。虽然有数不清的可改善之处,但禅意花园的HTML结构仍然没有过大的修改。文档的内容可会略加改进,但最基本的HTML元素以及文档结构则不会,就像被刻在石头上一样。

为了便于本书后面章节参考,下面几页中完整的列出了禅意花园的HTML源代码。你也可以访问禅意花园站点(www.csszengarden.com),并在浏览器中查看源文件来得到这份代码。关于查看源文件的步骤,在大多数浏览器中都差不多:从工具条中选择View > View Source或其他最类似的选项即可。或者也可以通过禅意花园页面中的下载源代码得到某些其HTML文件。本书列出的代码删除了原版本中的注释,而改为在边栏对某些段落或条目给出了一些注解。若想看到原版本中的注释,请直接访问禅意花园站点。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” >
<head>
<meta http-equiv=“content-type” content=“text /html; charset=iso-8859-1” />
<meta name=“author” content=“Dave Shea” />
<meta name=“keywords” content=“design, css, cascading, style, sheets, xhtml, graphic design,w3c, web standards, visual, display” />
<meta name=“description” content=“A demonstration of what can be accomplished visually through CSS-based design.” />
<meta name=“robots” content=“all” />
<title>css Zen Garden: The Beauty in CSS Design</title>
<script type=“text /javascript”></script>
<style type=“text /css” media=“all”>
@import “sample.css”;
</style>
</head>
<body id=“css-zen-garden”>
<div id=“container”>
<div id=“intro”>
<div id=“pageHeader”>
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title=“Cascading Style Sheets”>CSS</acronym>Design</span></h2>
</div>
<div id=“quickSummary”>
<p class=“p1”><span>A demonstration of what can be accomplished visually through <acronym title=“Cascading Style Sheets”>CSS</acronym>-based design. Select any style
sheet from the list to load it into this page.</span></p>
<p class=“p2”><span>Download the sample <a href=”zengarden-sample.html” title=“This page’s source HTML code, not to be modified.“>html file</a> and <a href=”zengarden-
sample.css“ title=”This page’s sample CSS, the file you may modify.”>css file</a></span></p>
</div>
<div id=“preamble”>
<h3><span>The Road to Enlightenment</span></h3>
<p class=“p1”><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title=“Document Object Model”>DOM</acronym>s,
and broken <acronym title=“Cascading Style Sheets”>CSS</acronym>support.</span></p>
<p class=“p2”><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title=“World
Wide Web Consortium”>W3C</acronym>, <acronym title=“Web Standards Project”>WaSP</acronym> and the major browser creators.</span></p>
<p class=“p3”><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be)
time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
</div>
v>
id=“supportingText”>
<div id=“explanation”>
<h3><span>So What is This About?</span></h3>
<p class=“p1”><span>There is clearly a need for <acronym title=“Cascading Style Sheets”>CSS</acronym> to be taken seriously by graphic artists. The Zen Garden aims to
excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains
the same, the only thing that has changed is the external .css file. Yes, really.</span></p>
<p class=“p2”><span><acronym title=“Cascading Style Sheets”>CSS</acronym> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders.
Designers have yet to make their mark. This needs to change.</span></p>
</div>
<div id=“participation”>
<h3><span>Participation</span></h3>
<p class=“p1”><span>Graphic artists only please. You are modifying this page, so strong <acronym title=“Cascading Style Sheets”>CSS</acronym> skills are necessary, but the
example files are commented well enough that even <acronym title=“Cascading Style Sheets”>CSS</acronym> novices can use them as starting points. Please see the <a href=“http://www.mezzoblue.com/zengarden/resources/” rel="nofollow" title=“A listing of CSS-related resources”><acronym title=“Cascading Style Sheets”>CSS</acronym> Resource Guide</a> for advanced tutorials and tips on working with <acronym title=”Cascading Style Sheets”>CSS</acronym>.</span></p>
<p class=”p2”><span>You may modify the style sheet in any way you wish, but not the <acronym title=”HyperText Markup Language”>HTML</acronym>. This may seem daunting at first if you&#8217;ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</span></p>
<p class=”p3”><span>Download the sample <a href=”zengarden-sample.html“ title=”This page’s source HTML code, not to be modified.”>html file</a> and <a href=”zengarden-sample.css“ title=”This page’s sample CSS, the file you may modify.”>css file</a> to work on a copy locally. Once you have completed your masterpiece (and please, don&#8217;t submit half-finished work) upload your .css file to a web server under your control. <a href=”http://www.mezzoblue.com/zengarden/submit /” rel="nofollow" title=”Use the contact form to send us your CSS file”>Send us a link</a> to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.</span></p>
</div>
<div id=”benefits”>
<h3><span>Benefits</span></h3>
<p class=”p1”><span>Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for <acronym title=”Cascading Style
Sheets”>CSS</acronym>-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a
historical curiosity; that day is not today.</span></p>
</div>
<div id=”requirements”>
<h3><span>Requirements</span></h3>
<p class=”p1”><span>We would like to see as much <acronym title=”Cascading Style Sheets, version 1”>CSS1</acronym> as possible. <acronym title=”Cascading Style Sheets,
version 2”>CSS2</acronym> should be limited to widely-supported elements only. The css Zen Garden is about functional, practical <acronym title=”Cascading Style
Sheets”>CSS</acronym> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <acronym
title=”Cascading Style Sheets”>CSS</acronym> validates.</span></p>
<p class=”p2”><span>Unfortunately, designing this way highlights the flaws in the various implementations of <acronym title=”Cascading Style Sheets”>CSS</acronym>. Different browsers display differently, even completely valid <acronym title=”Cascading Style Sheets”>CSS</acronym> at times, and this becomes maddening when a fix for one leads to breakage in another. View the <a href=”http://www.mezzoblue.com/zengarden/resources /” rel="nofollow" title=”A listing of CSS-related resources”>Resources</a> page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn&#8217;t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won&#8217;t accept it.</span></p>
<p class=”p3”><span>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable,
outright pornography will be rejected.</span></p>
<p class=”p4”><span>This is a learning exercise as well as a demonstration. You retain fullcopyright on your graphics (with limited exceptions, see <a href=”http://www.mezzoblue.com/zengarden/submit /guidelines/”>submission guidelines</a>), but we ask you release your<acronym title=”Cascading Style Sheets”>CSS</acronym> under a Creative Commons license identical to the <a href=”http://creativecommons.org/licenses/sa/1.0/” rel="nofollow" title=”View the Zen Garden’s license information.”>one on this site</a> so that others may learn from your work.</span></p>
<p class=“p5”><span>Bandwidth graciously donated by <a href=“http://www.dreamfirestudios.com/" rel="nofollow" >DreamFire Studios</a>. Get the <a href=“/book/”> Book</a>!</span></p>
</div>
<div id=“footer”>
<a href=“http://validator.w3.org/check/referer“ title=”Check the validity of this site&#8217;s XHTML”>xhtml</a> &nbsp;
<a href=“http://jigsaw.w3.org/css-validator/check/referer” title=“Check the validity of this site&#8217;s CSS”>css</a> &nbsp;
<a href=“http://creativecommons.org/ licenses/by-nc-sa/1.0/” title=“View details of the license of this site, courtesy of Creative Commons.”>cc</a> &nbsp;
<a href=“http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&amp;output=Submit&amp;gl=sec508&amp;test=
“ title=”Check the accessibility of this site according to U.S. Section 508” rel="nofollow" >508</a> &nbsp;
<a href=“http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&amp;output=Submit&amp;gl=wcag1-
aaa&amp;test=” title=“Check the accessibility of this site according to WAI Content Accessibility Guidelines 1” rel="nofollow" >aaa</a>
</div>
</div>
<div id=“linkList”>
<div id=“linkList2”>
<div id=“lselect”>
<h3 class=“select”><span>Select a Design:</span></h3>
<ul>
<li><a href=“/” title=“AccessKey: a” accesskey=“a”>Sample #1</a> by <a href=“http://www.mezzoblue.com/” rel="nofollow" class=“c”>Dave Shea</a>&nbsp;</ li>
<li><a href=“/” title=“AccessKey: b” accesskey=“b”>Sample #2</a> by <a href=”http://www.mezzoblue.com/” rel="nofollow" class=“c”>Dave Shea</a>&nbsp;</ li>
<li><a href=“/” title=“AccessKey: c” accesskey=“c”>Sample #3</a> by <a href=”http://www.mezzoblue.com/” rel="nofollow" class=“c”>Dave Shea</a>&nbsp;</ li>
<li><a href=“/” title=“AccessKey: d” accesskey=“d”>Sample #4</a> by <a href=“http://www.mezzoblue.com/” rel="nofollow" class=“c”>Dave Shea</a>&nbsp;</ li>
<li><a href=“/” title=“AccessKey: e” accesskey=“e”>Sample #5</a> by <a href=“http://www.mezzoblue.com/” rel="nofollow" class=”c”>Dave Shea</a>&nbsp;</ li>
<li><a href=“/” title=“AccessKey: f” accesskey=“f”>Sample #6</a> by <a href=“http://www.mezzoblue.com/” rel="nofollow" class=“c”>Dave Shea</a>&nbsp;</ li>
<li><a href=”/” title=”AccessKey: g” accesskey=”g”>Sample #7</a> by <a href=”http://www.mezzoblue.com/” rel="nofollow" class=”c”>Dave Shea</a>&nbsp;</ li>
<li><a href=”/” title=”AccessKey: h” accesskey=”h”>Sample #8</a> by <a href=”http://www.mezzoblue.com/” rel="nofollow" class=”c”>Dave Shea</a>&nbsp;</ li>
</ul>
</div>
<div id=”larchives”>
<h3 class=”archives”><span>Archives:</span></h3>
<ul>
<li><a href=”/” title=”View next set of designs. AccessKey: n” accesskey=”n”>
<span class=”accesskey”>n</span>ext designs &raquo;</a>&nbsp;</ li>
<li><a href=”/” title=”View previous set of designs. AccessKey: p”accesskey=”p”>&laquo; <span class=”accesskey”>p</span>revious
designs</a></ li>
<li><a href=”http://www.mezzoblue.com/zengarden/alldesigns /” rel="nofollow" title=”View every submission to the Zen Garden. AccessKey: w” accesskey=”w”>Vie<span class=”accesskey”>w</span> All Designs</a></ li>
</ul>
</div>
<div id=”lresources”>
<h3 class=”resources”><span>Resources:</span></h3>
<ul>
<li><a href=”http://www.csszengarden.com/001/001.css” rel="nofollow" title=”View the source CSS file for the currently-viewed design, AccessKey: v” accesskey=”v”><span
class=”accesskey”>V</span>iew This Design&#8217;s <acronym title=”Cascading Style Sheets”>CSS</acronym></a></ li>
<li><a href=”http://www.mezzoblue.com/zengarden/resources/” rel="nofollow" title=”Links to great sites with information on using CSS. AccessKey: r” accesskey=”r”><acronym
title=”Cascading Style Sheets”>CSS</acronym> <span class=”accesskey”> R</span>esources</a></ li>
<li><a href=”http://www.mezzoblue.com/zengarden/faq/” rel="nofollow" title=”A list of Frequently Asked Questions about the Zen Garden. AccessKey: q”
accesskey=”q”><acronym title=”Frequently Asked Questions”>FA<span class=”accesskey”>Q</span></acronym></a></ li>
<li><a href=”http://www.mezzoblue.com/zengarden/submit /” rel="nofollow" title=”Send in your own CSS file. AccessKey: s” accesskey=”s”><span class=”accesskey”>
S</span>ubmit a Design</a></ li>
<li><a href=”http://www.mezzoblue.com/zengarden/translations/” rel="nofollow" title=”View translated versions of this page. AccessKey: t” accesskey=”t”><span
class=”accesskey”>T</span>ranslations</a></ li>
</ul>
</div>
</div>
</div>
</div>
<div id=”extraDiv1”><span></span></div>
<div id=”extraDiv2”><span></span></div>
<div id=”extraDiv3”><span></span></div>
<div id=”extraDiv4”><span></span></div>
<div id=”extraDiv5”><span></span></div>
<div id=”extraDiv6”><span></span></div>
</body>
</html>
【责任编辑:(Top) 返回页面顶端