Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

جستجو بر اساس ... همه عنوان پدیدآور موضوع یادداشت تمام متن
اصطلاحنامه مجموعه ها مرورالفبایی لغت نامه دهخدا
➟
جستجو در لغت نامه
بیشتر
کتابخانه شخصی پرسش از کتابدار ارسال منبع

Web Systems Design and Online Consumer Behavior [Electronic resources] - نسخه متنی

Dave Shea, Molly E. Holzschlag

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
میخواهم بخوانم
درحال خواندن
خوانده شده
ارسال به دوستان

آدرس پست الکترونیک گیرنده :

آدرس پست الکترونیک فرستنده :

نام و نام خانوارگی فرستنده :

پیغام برای گیرنده ( حداکثر 250 حرف ) :

کد امنیتی را وارد نمایید

ارسال
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
➟
جستجو در لغت نامه
بیشتر
لیست موضوعات

Sitemap

Table of Contents

Copyright

Acknowledgments

Dave Shea Thanks:

Molly E. Holzschlag Thanks:

From Both Dave and Molly

Special Thanks

About the Authors

Dave Shea

Molly E. Holzschlag

Introduction

What Is This Book About?

Who Should Buy This Book?

Conventions Used

How Should I Use This Book?

Chapter 1. View Source

Genesis

The Beginning of a Change

Why these Standards?

Planting the Seed

Default DesignTranquille

Implications

Laying the Foundation

Semantic Markup

Building Great Markup

The Test of Time

Zen Garden Source HTML

Visual Structure

Designing For Flexibility

Lessons Taught

Benefits of Web Standards

Lessons Learned

Accessibility Checking

Text Scalability

توضیحات
افزودن یادداشت جدید








Zen Garden Source HTML


Consider the Zen Garden HTML structure as permanent as a book. It won't change, even though there are countless ways it could improve. The content itself may undergo some tweaking, but the basic HTML elements are effectively set in stone.

The next few pages are a complete listing of the Zen Garden source HTML for the sake of reference later on in the book. You can also get a copy of this by visiting the sitewww.csszengarden.comand viewing the page source in your browser. This is accomplished the same way in most major browsers: You choose View > View Source or the nearest equivalent. Or even just find the link to the sample HTML file on the Zen Garden site itself for an easy download.

[View full width]


<!DOCTYPE html PUBLIC "-11W3C11DTD XHTML 1.0 Strict11EN"
"http:11www.w3.org1TR1xhtml11DTD1xhtml1-strict.dtd">                                    
         <-- 1
<html xmlns="http:11www.w3.org119991xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text1html;                                       
         <-- 2
charset=iso-8859-1" 1>                             
<meta name="author" content="Dave Shea" 1>
<meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic
design, w3c, web standards, visual, display" 1>
<meta name="description" content="A demonstration of what can be accomplished
visually through CSS-based design." 1>
<meta name="robots" content="all" 1>
<title>css Zen Garden: The Beauty in CSS Design<1title>
<script type="text1javascript"><1script>                                                  
         <-- 3
<style type="text1css" media="all">
     @import "sample.css";                                                                
         <-- 4
<1style>
<1head>
<body id="css-zen-garden">                                                                
         <-- 5
<div id="container">
<div id="intro">
      <div id="pageHeader">                                                               
         <-- 6
<h1><span>css Zen Garden<1span><1h1>
<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS<1acronym>
Design<1span><1h2>
<1div>
<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished visually
through <acronym title="Cascading Style Sheets">CSS<1acronym>-based design.
Select any style sheet from the list to load it into this page.<1span><1p>
<p class="p2"><span>Download the sample <a href="          
         <-- 7
title="This page's source HTML code, not to be modified.">html file<1a> and <a
href="files1files1zengarden-sample.css" title="This page's sample CSS, the file you may
modify.">css file<1a><1span><1p>
<1div>
   <div id="preamble">                                                                    
         <-- 8
<h3><span>The Road to Enlightenment<1span><1h3>
<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<1acronym>s, and broken <acronym title="Cascading Style
Sheets">CSS<1acronym> support.<1span><1p>
<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<1acronym>, <acronym              
         <-- 9
title="Web Standards Project">WaSP<1acronym> and the major browser creators.
<1span><1p>
<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.<1span><1p>
<1div>
<1div>
<div id="supportingText">
<div id="explanation">
<h3><span>So What is This About?<1span><1h3>
<p class="p1"><span>There is clearly a need for <acronym title="Cascading
Style Sheets">CSS<1acronym> 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.<1span><1p>
<p class="p2"><span><acronym title="Cascading Style Sheets">CSS<1acronym>
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    
        <-- 10
have yet to make their mark. This needs to change.<1span><1p>
<1div>
<div id="participation">
<h3><span>Participation<1span><1h3>
<p class="p1"><span>Graphic artists only please. You are modifying this page,
so strong <acronym title="Cascading Style Sheets">CSS<1acronym> skills are
necessary, but the example files are commented well enough that even <acronym
title="Cascading Style Sheets">CSS<1acronym> novices can use them as starting
points. Please see the <a href="http:11www.mezzoblue.com1zengarden1resources1"
title="A listing of CSS-related resources"><acronym title="Cascading Style
Sheets">CSS<1acronym> Resource Guide<1a> for advanced tutorials and tips on
working with <acronym title="Cascading Style Sheets">CSS<1acronym>.<1span><1p>
<p class="p2"><span>You may modify the style sheet in any way you wish, but
not the <acronym title="HyperText Markup Language">HTML<1acronym>. This may
seem daunting at first if you&#8217;ve never worked this way before, but         
        <-- 11
follow the listed links to learn more, and use the sample files as a guide.
<1span><1p>
<p class="p3"><span>Download the sample <a href="
title="This page's source HTML code, not to be modified.">html file<1a> and
<a href="files1files1zengarden-sample.css" title="This page's sample CSS, the file you
may modify.">css file<1a> 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:11www.
mezzoblue.com1zengarden1submit1" title="Use the contact form to send us your
CSS file">Send us a link<1a> to the file and if we choose to use it, we          
        <-- 12
         will spider the associated images. Final submissions will be placed on our
server.<1span><1p>
<1div>
<div id="benefits">
<h3><span>Benefits<1span><1h3>
<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<1acronym>-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.<1span><1p>
<1div>
<div id="requirements">
<h3><span>Requirements<1span><1h3>
<p class="p1"><span>We would like to see as much <acronym title="Cascading
Style Sheets, version 1">CSS1<1acronym> as possible. <acronym title="Cascading
Style Sheets, version 2">CSS2<1acronym> should be limited to widely-supported
elements only. The css Zen Garden is about functional, practical <acronym        
        <-- 13
         title="Cascading Style Sheets">CSS<1acronym> 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<1acronym>
validates.<1span><1p>
<p class="p2"><span>Unfortunately, designing this way highlights the flaws in
the various implementations of <acronym title="Cascading Style Sheets">CSS<1
acronym>. Different browsers display differently, even completely valid
<acronym title="Cascading Style Sheets">CSS<1acronym> at times, and this
becomes maddening when a fix for one leads to breakage in another. View the
<a href="http:11www.mezzoblue.com1zengarden1resources1" title="A listing of
CSS-related resources">Resources<1a> 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       
        <-- 14
         least IE5+1Win and Mozilla (run by over 90% of the population), chances are we
         won&#8217;t accept it.<1span><1p>
<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.<1span><1p>
<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="http:11www.mezzoblue.com1zengarden1submit1guidelines1">submission
guidelines<1a>), but we ask you release your <acronym title="Cascading Style
Sheets">CSS<1acronym> under a Creative Commons license identical to the
<a href="http:11creativecommons.org1licenses1sa11.01" title="View the Zen
Garden's license information.">one on this site<1a> so that others may learn
from your work.<1span><1p>
<p class="p5"><span>Bandwidth graciously donated by <a href="http:11www.
dreamfirestudios.com1">DreamFire Studios<1a>. Get the <a href=">Book
<1a>!<1span><1p>
<1div>
<div id="footer">
         <a href="http:11validator.w3.org1check1referer" title="Check the validity of   
        <-- 15
         this site&#8217;s XHTML">xhtml<1a> &nbsp;
<a href="http:11jigsaw.w3.org1css-validator1check1referer" title="Check the
validity of this site&#8217;s CSS">css<1a> &nbsp;
<a href="http:11creativecommons.org1licenses1by-nc-sa11.01" title="View
details of the license of this site, courtesy of Creative Commons.">cc<1a>
&nbsp;
<a href="http:11bobby.watchfire.com1bobby1bobbyServlet?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">508<1a> &nbsp;
<a href="http:11bobby.watchfire.com1bobby1bobbyServlet?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">aaa<1a>
<1div>
<1div>
<div id="linkList">
<div id="linkList2">
<div id="lselect">
<h3 class="select"><span>Select a Design:<1span><1h3>
<ul>
<li><a href="1" title="AccessKey: a" accesskey="a">Sample #1<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>        
        <-- 16
<li><a href="1" title="AccessKey: b" accesskey="b">Sample #2<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: c" accesskey="c">Sample #3<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: d" accesskey="d">Sample #4<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: e" accesskey="e">Sample #5<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: f" accesskey="f">Sample #6<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: g" accesskey="g">Sample #7<1a> by <a
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<li><a href="1" title="AccessKey: h" accesskey="h">Sample #8<1a> by <a     
        <-- 17
href="http:11www.mezzoblue.com1" class="c">Dave Shea<1a>&nbsp;<1li>
<1ul>
<1div>
<div id="larchives">
<h3 class="archives"><span>Archives:<1span><1h3>
<ul>
               <li><a href="1" title="View next set of designs. AccessKey: n"             
        <-- 18
               accesskey="n"><span class="accesskey">n<1span>ext designs &raquo;<1
               a>&nbsp;<1li>                                                      
<li><a href="1" title="View previous set of designs. AccessKey: p"
accesskey="p">&laquo; <span class="accesskey">p<1span>revious designs<1
a><1li>
<li><a href="http:11www.mezzoblue.com1zengarden1alldesigns1" title="View
every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span
class="accesskey">w<1span> All Designs<1a><1li>
<1ul>
<1div>
<div id="lresources">
<h3 class="resources"><span>Resources:<1span><1h3>
<ul>

<li><a href="http:11www.csszengarden.com10011001.css" title="View          
        <-- 19
               the source CSS file for the currently-viewed design, AccessKey: v"   
               accesskey="v"><span class="accesskey">V<1span>iew This Design&#8217;s
               <acronym title="Cascading Style Sheets">CSS<1acronym><1a><1li>       
<li><a href="http:11www.mezzoblue.com1zengarden1resources1"
title="Links to great sites with information on using CSS. AccessKey:
r" accesskey="r"><acronym title="Cascading Style Sheets">CSS<1acronym>
<span class="accesskey">R<1span>esources<1a><1li>
<li><a href="http:11www.mezzoblue.com1zengarden1faq1" 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<1span><1acronym><1a><1li>
<li><a href="http:11www.mezzoblue.com1zengarden1submit1"
title="Send in your own CSS file. AccessKey: s" accesskey="s"><span
class="accesskey">S<1span>ubmit a Design<1a><1li>
<li><a href="http:11www.mezzoblue.com1zengarden1translations1"
title="View translated versions of this page. AccessKey: t"
accesskey="t"><span class="accesskey">T<1span>ranslations<1a><1li>
<1ul>
<1div>
<1div>
<1div>
<1div>
<div id="extraDiv1"><span><1span><1div>                                                   
        <-- 20
<div id="extraDiv2"><span><1span><1div>
<div id="extraDiv3"><span><1span><1div>
<div id="extraDiv4"><span><1span><1div>
<div id="extraDiv5"><span><1span><1div>
<div id="extraDiv6"><span><1span><1div>
<1body>
<1html>

www.joelonsoftware.com1articles1Unicodel).

www.bluerobot.com1web1css1fouc.asp).

www.ericmeyeroncss.com1bonus1trick-hidel).

http:11archivist.incutio.com1viewlist1css-discuss113291).

www.alistapart.com1articles1emen).

www.mezzoblue.com1zengarden1submit1guidelines) for the latest information before submitting your work.

Chapter 7, there are now ways to experiment with advanced CSS effects while providing a slightly downscaled version of the style for older browsers. Some designs have explored this idea, so the requirements about browser support might be changed to instead read "Use your best judgment".

http:11bobby.watchfire.com). The extra &nbsp; at the end of each link was a misguided attempt to circumvent the problem; a list quickly replaced the spans before it was too late, but the legacy &nbsp; entities never quite disappeared.

www.wats.ca1articles1accesskeys119).

www.mezzoblue.com1zengarden1alldesigns). Still, it's often overlooked. Many people assume the Zen Garden only has eight designs, and they never find the archives. Don't make the same mistake!

(19)Though the "view source" method is a given among those who have been working with the Web for any length of time, enough newcomers emailed asking for a way to view each design's CSS file that a link was added shortly after launch.

(20)As you'll see in some designs, these completely empty divs and spans are for the sake of adding imagery where it wasn't practical within the regular set of elements. Think of them as reusable img elements.


/ 90