2010年1月7日星期四

網頁設計一起感受HTML5和CSS3的能量

無標題文件

網頁設計一起感受HTML5和CSS3的能量

發佈者:SEO香港優化專家 - Web Design
網站設計

跟
說再見,歡迎語義化標籤

　　曾經，設計師們經常會跟頻繁使用基於table的沒有任何語義的佈局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的

佈局替代了table佈局，並且開始調用外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構代碼，我們把它叫做“
-soup” 綜合症。也許你很熟悉下面的代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="news">
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>

　　儘管這有些勉強，但上面這個實例還是可以說明使用HTML4對一個複雜的設計進行代碼化後依然過於臃腫(其實xHTML1.1也不過如此)。不過值得激動的是，HTML5解決“

-soup” 綜合症並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細緻的語義從而代替了那些毫無語義的
標籤，並同時為CSS的調用提供了”自然”的CSS鉤子。下面是HTML5的解決方案實例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31




<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>

<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>

<p>Tags: HMTL, code, demo</p>
</footer>
</article>


<h1>Tangential Information</h1>
</header>

<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>

<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>

　　正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標籤代替那些大量的無意義的

標籤。這種語義化的特性不僅提升了我們網頁的質量和語義，並且大量減少了曾經代碼中用於CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有class和id的。

跟class屬性說再見，歡迎整潔的標籤

　　結合了富有新的語義化標記的HTML5，CSS3為web設計師們的網頁提供了神一般的力量。有了HTML5的能量，我們將得到更多的對文檔代碼的控制權，有了CSS3的能量，我們的控制權將趨於無窮大！

　　即使沒有那些高級的CSS選擇器，我們仍然可以通過強大的HTML5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV佈局，我們在css中可能要這樣調用:

1
2
3
4
5
6
7
div#news {}
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我們再來看看基於HTML5的實例:

1
2
3
4
5
section {}
article {}
header {}
footer {}
aside {}

　　這是個進步，但仍有一些問題需要解決。在

實例中，我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許我們將樣式應用到文檔中的任何一個元素上，無論是整體還是個體。例如在
實例中，.section 和 .content元素很容易定位。但是在HTML5實例中，實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些不同的section元素，不過謝天謝地，我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。

網頁寄存
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)