DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁設計中典型的header代碼結構
網頁設計中典型的header代碼結構
編輯:CSS詳解     

頁面中header部分一般位於最上端(有時根據需要也會位於某一側,不管它在頁面中的位置如何,在XHtml代碼中它總是優於其它元素先加載),內容主要包括網站名稱(Logo,次級標題可能是網站的一句口號等)和網站的導航部分。在推行Web標准的現代網絡中,Web中對於header的代碼結構似乎已經趨於穩定化。下面是一個典型的header代碼結構:

<div id="header">  
   <h1>dudo 博客</h1>  
  <ul>  
        <li>首頁</li>  
       <li>CSS</li>  
      <li>XHtml</li>  
        <li>JavaScript</li>  
   </ul>  
</div>

這段代碼我們可以通過添加CSS代碼來實現多種布局樣式。

之所以說是典型的布局方式,因為它既夠簡潔又有語義。<h1></h1>說明了標簽內容在頁面中的作用和重要層次,<ul>、<li>無序列表列出了站內的所有主要內容分類,並通過<li>標簽說明它們是同級相鄰的,等等,諸如此類。查看更多本站CSS教程。

但是我們要考慮考慮。導航(也就是我們的menu)在頁面應該處於什麼樣的位置呢?和普通文本相比,它們肯定會處於更高級的位置之上。或者這麼說,導航(menu)應該和網站標題的關系更加親密一些。在我們上面的代碼結構中,我們看不出menu和<h>之間的關系來,或者說這些<ul>、<li>標簽與<h1>的關系和footer中的<ul>、<li>與<h1>的關系沒有任何區別。

因此我們要換一個方式來表達這個語義。我們很容易就會想到使用<dl>、<dt>、<dd>。<dl>來定義一個列表,<dt><dd>說明附屬關系。因此上面的header部分我們可以這樣來寫:

<div id="header">  
   <dl>  
        <dt>dudo 博客</dt>  
      <dd>首頁</dd>  
       <dd>CSS</dd>  
      <dd>XHtml</dd>  
        <dd>JavaScript</dd>  
   </dl>  
</div>

如果你還有其它的內容要在header中出現,則可以配合<ul>、<li>一起使用:

<div id="header">  
   <dl>  
        <dt>dudo 博客</dt>  
      <dd id="siteMenu">  
          <ul>  
                <li>首頁</li>  
               <li>CSS</li>  
              <li>XHtml</li>  
                <li>JavaScript</li>  
           </ul>  
       </dd>  
       <dd id="userMenu">  
          <ul>  
                <li>加入收藏</li>  
             <li>設為首頁</li>  
             <li>Engling Version</div>  
         </ul>  
       </dd>  
   </dl>  
</div> 

這段代碼似乎更加飽滿一點。我們只從代碼就能看出標題與導航的關系,就是<dt>、<dl>的關系。

這似乎有一個問題:<h1></h1>沒有了!是的,我們為了表達標題和導航(menu)之間的關系放棄了<h1>的使用。這裡,我對是否要在網站標題中使用<h1>持懷疑態度。以我的觀點,<h1>不應該出現在頁面內容的外圍。而我們經常這麼去使用(我也經常去這樣使用)是為了提高你的“網站標題”在頁面中的重要程度。如果對於首頁來說可以這麼做的話,那麼對於子頁面來說,頁面的內容才是最重要的。有人這麼去理解<h1>的使用:網站標題處於最高層次,所以它應該使用<h1>,而頁面中的所有需要使用標題的地方都應該使用<h2>、<h3>等等。按這種說法,<h1>似乎只能在一個頁面中出現一次。首先,W3C對於<h>標題的規定中沒有這一條,其次,導航(menu)要比文章標題級別要高(因為網站的目錄就是:網站——分類(用menu來表示)——文章)所以導航應該用二級標題<h2>,充其量文章的標題也只能用個<h3>。這無疑是一種過度語義化,我們根據自己的理解賦予了標簽不具有的含義。觀看本站更多網頁制作教程。

要想突出標題的重要,只用一個方法足夠:在<head>中指定<title>...<title>的內容即可。因此,個人建議,在<header>中的設計代碼結構使用<dl>、<dt>、<dd>要比使用<h1>和<ul>更具語義。如果你覺得網站的標題部分就應該用<h1>來表示,那麼可以在<dt>中嵌套<h1>,合理的語義表達而增加標簽並不和代碼簡潔原則沖突。那麼上面的代碼

<div id="header">  
   <dl>  
        <dt>  
            <h1>dudo 博客</h1>  
      </dt>  
       <dd id="siteMenu">  
          <ul>  
                <li>首頁</li>  
               <li>CSS</li>  
              <li>XHtml</li>  
                <li>JavaScript</li>  
           </ul>  
       </dd>  
       <dd id="userMenu">  
          <ul>  
                <li>加入收藏</li>  
             <li>設為首頁</li>  
             <li>Engling Version</div>  
         </ul>  
       </dd>  
   </dl>  
</div> 

友情提醒:本文純屬一家之言,水平有限,謬誤難免,所以您在轉載此文時一定要注明出自www.dudo.org 以免替我挨拍。

原文連接:http://www.dudo.org/article.ASP?id=242

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved