15.1 “禅意花园”页面HTML结构分析


在本教程的第2章中,我们介绍了一些“CSS禅意花园”的精美作品。在那时,读者还刚剐开始了解CSS,无法深入进行介绍和实践。

而现在,读者已经经过了十几章CSS和HTML案例的磨练,相信在这个过程中既感受到了思考的辛苦,也感受到了成功的喜悦。

在本章中,就结合前面所有章节介绍的技术,利用CSS禅意花园的网页和作品,进行一些综合的练习。

在本章中,介绍禅意花园的侧重点与《the Zen of CSS design》一书的区别在于,本书将更重视一个方案是如何做出来的,使读者更容易地理解其结构。在学习完本书后,还可以花一些时间,结合自己的创意,做出更多的禅意花园作品。如果读者制作出了令自己满意的作品,欢迎读者发给网页学习网,共享读者收获的心得。

首先介绍一下Dave Shea设计的这个HTML文档,因为所有CSS都是基于这同一个HTML文档的。该文件位于本书光盘“第15章/no-css.htm”。

<!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>

<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>

<style type="text/css" title="currentStyle" media="screen">
@import "9999.css";
</style>
<link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="zengarden.xml" />
</head>

<!--

This xhtml document is marked up to provide the designer with the maximum possible flexibility.
There are more classes and extraneous tags than needed, and in a real world situation, it‘s more
likely that it would be much leaner.

However, I think we can all agree that even given that, we‘re still better off than if this had been
built with tables.

-->

<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>
</div>

<div 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="../www.mezzoblue.com/zengarden/resources/default.htm" 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’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’t submit half-finished work) upload your .css file to a web server under your control. <a href="../www.mezzoblue.com/zengarden/submit/default.htm" 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="../www.mezzoblue.com/zengarden/resources/default.htm" 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’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’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 full copyright on your graphics (with limited exceptions, see <a href="../www.mezzoblue.com/zengarden/submit/guidelines/default.htm">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="../creativecommons.org/licenses/by-nc-sa/1.0/default.htm" 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="../www.dreamfirestudios.com/default.htm">DreamFire Studios</a>. Now available: <a href="../www.amazon.com/exec/obidos/asin/0321303474/mezzoblue-20/default.htm">Zen Garden, the book</a>.</span> </p>
</div>

<div id="footer">
<a href="../validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a>  
<a href="../jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a>  
<a href="../creativecommons.org/licenses/by-nc-sa/1.0/default.htm" title="View details of the license of this site, courtesy of Creative Commons.">cc</a>  
<a href="../www.contentquality.com/mynewtester/cynthia.exe@url1=http_3a_252f_252fcsszengarden.com_252f" title="Check the accessibility of this site according to U.S. Section 508">508</a>  
<a href="../mezzoblue.com/zengarden/faq/#aaa" title="Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0">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="@cssfile=_2f202_2f202.css&page=0.htm" title="AccessKey: a" accesskey="a">Retro Theater</a> by <a href="../space-sheeps.info/default.htm" class="c">Eric Rogé</a></li>
<li><a href="@cssfile=_2f201_2f201.css&page=0.htm" title="AccessKey: b" accesskey="b">Lily Pond</a> by <a href="../www.tulips4rose.com/default.htm" class="c">Rose Thorogood</a></li>
<li><a href="@cssfile=_2f200_2f200.css&page=0.htm" title="AccessKey: c" accesskey="c">Icicle Outback</a> by <a href="../www.timovirtanen.com/default.htm" class="c">Timo Virtanen</a></li>
<li><a href="@cssfile=_2f199_2f199.css&page=0.htm" title="AccessKey: d" accesskey="d">Zen Army</a> by <a href="../www.niceguy.com/default.htm" class="c">Carl Desmond</a></li>
<li><a href="@cssfile=_2f198_2f198.css&page=0.htm" title="AccessKey: e" accesskey="e">The Original</a> by <a href="../www.bluejam.com/default.htm" class="c">Joachim Shotter</a></li>
<li><a href="@cssfile=_2f197_2f197.css&page=0.htm" title="AccessKey: f" accesskey="f">Floral Touch</a> by <a href="../www.jahmasta.com/default.htm" class="c">Jadas Jimmy</a></li>
<li><a href="@cssfile=_2f196_2f196.css&page=0.htm" title="AccessKey: g" accesskey="g">Elegance in Simplicity</a> by <a href="../www.manisheriar.com/blog/default.htm" class="c">Mani Sheriar</a></li>
<li><a href="@cssfile=_2f195_2f195.css&page=0.htm" title="AccessKey: h" accesskey="h">Dazzling Beauty</a> by <a href="../blog.denysri.com/default.htm" class="c">Deny Sri Supriyono</a></li>
</ul>
</div>

<div id="larchives">
<h3 class="archives"><span>Archives:</span></h3>
<ul>
<li><a href="@cssfile=_2f175_2f175.css&page=1.htm" title="View next set of designs. AccessKey: n" accesskey="n"><span class="accesskey">n</span>ext designs »</a></li>
<li><a href="../www.mezzoblue.com/zengarden/alldesigns/default.htm" 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="175/175.css" title="View the source CSS file for the currently-viewed design, AccessKey: v" accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym title="Cascading Style Sheets">CSS</acronym></a></li> <li><a href="../www.mezzoblue.com/zengarden/resources/default.htm" 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="../www.mezzoblue.com/zengarden/faq/default.htm" 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="../www.mezzoblue.com/zengarden/submit/default.htm" title="Send in your own CSS file. AccessKey: s" accesskey="s"><span class="accesskey">S</span>ubmit a Design</a></li>
<li><a href="../www.mezzoblue.com/zengarden/translations/default.htm" title="View translated versions of this page. AccessKey: t" accesskey="t"><span class="accesskey">T</span>ranslations</a></li>
</ul>
</div>
</div>
</div>

</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<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>
 提示:您可以先修改部分代码再运行

在不使用任何CSS时显示效果请读者观察一下。

读者只要知道这个页面中的内容分为3个部分,这3个部分的id分别为“intro”、“supportingText”和“Iinklist”,

它们都放置在一个id为“container”的div中。每一个部分又分为若干个div,每个div都有各自的id,以便使用CSS设置它们的样式。

如果仔细读一下HTML代码,就会发现它和一般的网页HTML代码有一定的区别。例如下面摘录的一小段代码:lodidance.com

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <div id="preamble">
  2. <h3><span>The Road to Enlightenment</span></h3>
  3. <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>
  4. <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>
  5. <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>
  6. </div>
  7. </div>

在每一个具体放置文字内容的div中,例如“preamble”div中,为每个文字段落都设置了id,目的是使设计师有足够的空制能力,

可以灵活地单独控制任何一个段落盒的样式。此外每一个段落和标题中都套有一对<span>和</span>标记,

这样设计师可以灵活地做出很多效果,例如可以通过这种方式使用滑动门技术,或者使用图像来替代文字内容,等等。

在实际制作一个网站的时候,当然不用这样繁琐地加入这么多标记,这里增加了这些标记

,是为了实现完全不改动HTML而产生各种效果的目的,希望读者理解其中的道理。

最后,为了便于英语不是很好的读者学习,这里简单介绍一下这些id的中文含义,如下表所示。

具体每一个段落中的英文含义就不必搞懂它了。

英文 中文 英文 中文
container 容器 intro 介绍
pageHeader 页头 quickSummary 概述
preamble 导言 supportingText 释义
participation 参与 benefits 收获
requirements 要求 footer 页脚
linklist 链接列表 select 选择
larchives 存档 fresources 资源
extraDiv 附加DIV

现在请读者在网页编辑软件中,打开这个HTML文档。浏览一遍代码,找到上面介绍的各个代码段对应的位置,尽快熟悉这个网页,包括它的各个组成部分。

最后说明的是,在文档的末尾还有6个空的div.这几个div是留给设计师在一些特殊情况下使用的,绝大多数作晶里没有用到这些附加的div。

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/951.html

15.1 “禅意花园”页面HTML结构分析

时间: 2024-11-09 06:20:51

15.1 “禅意花园”页面HTML结构分析的相关文章

15.2 亲自动手设计“禅意花园”页面

下面在详细介绍比较复杂的作品之前,先自己动手为禅意花园制作一个CSS设计方案.希望读者在学习完本书之后,也能够制作出漂亮的作品,提交到禅意花园网站上. 首先制作的页面效果如图1示.本例最终效果文件位于本书网页学习网CSS教程资源中“第15章\9999.htm”. 图1 简单效果 一.结构分析 分析一下布局结局,效果如图2所示.希望读者,特别是英语不是很好的读者,能够记熟这几个id的英文单词,这样能够方便地理解其中的道理. 在这个布局方案中,整体的container宽度固定,水平居中.intro在

15.3 禅意花园作品的赏析

在本教程的第2章中,向读者展示了一些禅意花园网站上很出色的作品,但是没有深入地介绍作品的设计和制作方法,在本章中,将更深入地分析几个典型的作品,看看它们是如何布局.如何实现出来的.此外,通过这几个页而的分析过程,向读者介绍分析网页的一些基本方法和工具,以便读者能够自己分析更多的作品,收获更多对自己有益的技术和技巧. 不少初学者在学习了一些CSS知识后,往往感觉虽然理解了基本的知识点,但是真正实践时无从下手,对于看到的一些比较复杂的页面,更是找不到分析思考的突破口. 实际上.学习技能的方法都是类似

2.3 CSS禅意花园作品赏析(下)

一.谷香——食品主题设计 在禅意花园的作品中,还有一些是围绕某一个主题进行设计的.例如这里展示的057号作品就是以食品为主体的设计.它是由美国设计师Shaun Inman设计的.通过精致的食品照片,是不是能勾起访问者的食欲呢? 此外,这个设计中述设计了非常漂亮的弹出菜单.但是这个效果在Firefox中可以正常显示,而在IE 6和IE 7中都无法显示菜单的效果. 访同这个作晶的网址是http://www.csszengarden.com/?cssfile=057/057.css,设计师的个人网站是

2.2 CSS禅意花园作品赏析(上)

一.郊野——两列布局 两列布局是所有网站中最常见的布局形式,也是禅意花园的作品中最常见到的.这种布局结构清晰,对访问者的引导性非常好.<郊野>是这类作品的代表,由意大利设计师Mario Carboni设汁.在这个作品中,页面划分合理,并且颜色搭配平和而协调,点击下面的网址查看. 访问这个作品的网址是http://www.csszengarden.com/?cssfile=149/149.css,设计师的个人网站是http://www.mariocarboni.com/. 二.像素画——三列布局

读《CSS禅意花园》 有感

1.图片用<img>标签添加到页面中,会增加页面的大小,导致页面加载需要更长的时间.可以用css background 引用图片. 1.1.若图像属于“内容”而不是“样式”的一部分,例如“公司介绍”页面中,一张CEO的照片,应用<img>标签 2.不要用表格布局,每次页面加载时,浏览器必须重新加载各种内容,并对之重绘.若用CSS,这些布局信息可缓存于浏览器中.禅意花园的作品,应用图片的代码只需加载一次. 3.外边距重叠(collapsing margin) 若两个元素上下毗邻且都定

2.1 “CSS禅意花园”简介

在网站设计,特别是在css设计领域,有一个世界范围都非常著名的网站——CSS Zen Garden,中文名称为“CSS禅意花园”.这个网站以最有效.最优美的方式展示了CSS的最高境界. 任何一个学习CSS的人都不应该错过对CSS禅意花园的研究.本章将从禅意花园网站上的近千个作品中精选16个作品进行介绍,它们的HTML结构和内容是完全相同的,通过不同的CSS设置,就做出了完全不同的效果. CSS禅意花园是一位加拿大没计师Dave Shea创建的,他在网站设计的实际工作中逐渐认识到CSS的巨大潜力远

CSS禅意

标题取自<css禅意花园>一书,还记得当年读此书时的情景,真的是内容和书名一样的优秀,就以此标题作为自己在该文的一种追求吧,尽管我的水平和见解都和Dave Shea相去甚远.该文算是对前两年写页面工作的总结吧,现在比较少关注css了,可能观点有狭隘的地方,同时文中也有一定的思考和理解,也许并不一定特别适合初学者阅读,本人时间有限,也没办法针对具体的知识点做深入的讲解或提供代码示例,所以在阅读过程中如果有不理解的地方,欢迎提问并互相学习交流. 当UI设计师给了你一张psd图,在对它进行切图,实现

MVC 从后台页面 取前台页面传递过来的值的几种取法

MVC 从后台页面 取前台页面传递过来的值的几种取法 <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword 1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>Test</title> 5 </head>

提升页面加载速度的优化方法

1.CSS精灵图片技术 将一个页面涉及的所有零星图片都包含到一张大的图片中,然后利用CSS技术展现出来,可以减少http请求,减少整个网页的图片大小,提高页面性能. 2.合并js文件和css文件 减少GET请求次数,提高加载速度. 3.延迟可见区域外的内容 4.压缩文本和图片 如gzip压缩技术,可以减少页面加载时间 5.确保功能图片优先加载 6.图片格式优化 如png格式 7.使用高级JPEG格式图片 8.精简代码 9.使用AJAX 在不加载整个页面的情况下对网页的某部分进行更新,即实现异步更