振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
div+css網頁佈局:如何合理的運用html標籤
作者 Sunming   
2007/12/28

div+css網頁佈局:如何合理的運用html標籤
div+css網頁佈局已逐漸流行,但面對所謂DIV+CSS網頁佈局讓人更為擔心,多層嵌套的DIV會嚴重影響網頁代碼的可讀性,活用HTML為我們提供的網頁標籤吧。

網頁什麼時候應該用DIV?

雖然在這方面沒有什麼硬性的規定,但個人認為DIV更適用於網頁大體框架的定位.例如我們要定義網頁頭部的區域,一般會這樣定義一個DIV:
 引用內容
<div id="header">  這裡就是網頁頭部框架裡要寫的內容</div>

 

當然,可以用class來定義,但一般來講如不是在同一頁面會重複的元素,用id能更好的區別開來.

  本人觀察了下一個著名網站的首頁代碼,它的頭部定義代碼如下:

 引用內容
   <ul id="navbar">
   <li id="articles">
   <a href="/articles/" title="Articles">Articles</a></li>
   <li id="topics">
   <a href="/topics/" title="Topics">Topics</a></li>
   <li id="about">
   <a href="/about/" title="About">About</a></li>
   <li id="contact">
   <a href="/contact/" title="Contact">Contact</a></li>
   <li id="contribute">
   <a href="/contribute/" title="Contribute">Contribute</a></li>
   <li id="feed">
   <a href="/feed/" title="Feed">Feed</a></li>
   </ul>
   <h1 id="masthead">
   <a href="/">
   <img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" />
   </a>
   </h1>

 

 引用內容
<div id="ish">
<a href="/issues/214" title="Issue 214">No. <em>214</em></a>
</div>

 


定義了最上面的網頁導航(ul部分),左邊的大logo和那個圓圓的No.xxxx的標記.

他沒有使用DIV來做網頁頂部的框架,但卻很好的說明了這些網頁代碼的用途,為什麼?因為他活用了HTML提供的網頁標籤,以及樣式名稱的定義

其它最常用的網頁佈局標籤
h1
這個網頁標籤或許真正會去用的人很少,因為它顯示的字體真的是太"大"了,但我們是CSSer,有什麼標籤樣式不能改呢?而且它所能表達的意思就如同它原先的作用一樣明顯(大標題)我想你已經知道怎麼去用它了 ^_^

ul
這個標籤很多情況是用來定義網頁導航部分的,當然也可以用ol來代替,但導航連接沒有什麼順序之分吧,所以還是用ul來的比較確切(去掉CSS後效果更明顯)

b
這個已經不再推薦使用的網頁標籤,在佈局上卻能帶來不少的方便(因為短),雖然我不是太贊成使用這個標籤,但有些時候(比如細小地方的網頁佈局定義)還是不錯的選擇

h2
h2使用最多的地方應該不是網頁佈局上,而是網頁副標題,但有些地方需要定義欄目樣式的話,用這個標籤比較合適,欄目內容就使用p

 

最後更新 ( 2009/05/05 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇