標記語言－清單_HTML/Xhtml_網頁製作

標準化設計解決方案 - 標記語言和樣式手冊 

Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標記語法談起
Chapter 1 清單
在網路上幾乎每個頁面都能找到清單. 超連結清單;購物車物品清單;你中意的電影清單...甚至是整個網站的導航清單.可能在某些人看來,清單的建立是隨心所欲的,但是我們要去探索發現的正是如何建立清單以及集中幾種常用方法的優缺點.稍後,我們會列出幾個如何美化普通清單一集他們的優缺點的示例來.
咱們去購物吧
最初,我打算用一個細目清單(洗衣清單)來作為本章的示例,但是很快的,我就意識到,我根本不知道這種清單中應該包括那些細目,所以...看在範例的份上,就用食物來舉例吧!
讓我們設想,你需要把一個食品清單放到你自己的網站上去,你可能會為為什麼要把食物清單放到網站上去而感到不解,厄,這個可能就離題了,我們只是需要一個可以開始為清單思考的理由罷了...
在頁面上,假設我們想讓清單看起來像......好吧,看起來就像一個清單— 也就是一長串垂直的列表,裡面的每項內容獨佔一行:
Apples
Spaghetti
Green Beans
Milk
看起來非常簡單,不是嗎?和頁面設計開發的許多方麵類似,我們能夠通過很多不同的方法達成相同(或者類似)的效果.與這本書後面所有的範例相同的,我將以eXtensilble HyperText Markup Language(XHTML)的觀點來展現所有範例 — 並且確認選用的方法都使用正確的標記語法,遵循World Wild Web Consortium (W3C)所訂定的各種標準.
我們可以輕鬆的在每個項目後面加上個
標籤就搞定了,或者也能使用各種清單項目標籤來完成這個工作,現在我們就來看3種完全不同的方法,以及每種方法的特點. 

---

提問時間
下列哪一種方法最適合建立食品清單?
方法A: 用
換行
Apples

Spaghetti

Green Beans

Milk

方法A的確是一種被廣為傳用的方法,可能有數百萬個頁面使用過,事實上,我相信我們中的每個人都會偶爾因為使用了這種方法而感到內疚,對吧?我們希望在清單中的每一項都獨佔一行,而加入了換行標籤(在這裡使用的是符合xhtml標準的自關閉標籤
)就會在每個項目後面生成斷行,這就是他所有的效果了,看起來,挺管用的.
但是,如果我們想要給這個食品清單加上與其他頁面元素不同的樣式的時候該怎麼辦呢?比方說:如果想讓清單的所有鏈接的顏色變成紅色而不同於默認的藍色,或想要改變字體的大小時該怎麼辦呢?真的我們什麼都做不了,我們被為整份html文檔設定的字體風格(如果有設定的話)限制住了.同時,如果在清單外面沒有任何標籤圍繞,我們就沒辦法為清單制定一個獨特的css規則.
折行
如果我們在清單中加入一個類似"Five Foot Loaf of Anthony's Italian Bread".根據這個清單在頁面裡擺放的位置,在水平空間不足或者瀏覽者的瀏覽器視窗比較窄的情況下,過長的項目就會冒著折到下一行的風險.
同時我們也要考慮到視力不佳的使用者可能會把預設的字體大小改大以便增加可讀性,我們認為能夠像圖1 - 1 一樣把項目輕鬆的佈置在窄欄裡,但是很有可能會像 圖1 - 2 這樣在意料之外的地方發生斷行,讀者調大字體時,設計的樣式就完全變樣了.

唔......現在,我想我應該要買麵包是沒錯,但是在圖1 - 2 裡,麵包上面的兩行字實在感到疑惑.
在使用小螢幕裝置像是行動電話或PDA閱讀長行時,類似的換行問題就會展露它醜惡的嘴臉,骨灰級的科技愛好者可能會隨手帶著記錄購物清單的Palm Pilot(而不是傳統意義上的紙和筆)當他在超級市場裡面閒逛的時候,最後卻在貨架中尋找一種叫"Anthony's Italian"的東西.
在這裡我要在本質上闡明一個觀點 - 使用方法A ,並沒有把閱讀網頁時的這些設計師們所無法控制的變數考慮在內. 

---

方法 B: 會咬人的小圓點

Apples

Spaghetti

Green Beans

Milk

大多數成熟的瀏覽器在解析

標籤時都會在清單項目的左側加上圓點符號,你能透過方法B來達到這個效果,在需要圓點符號時加入

標籤.但是如果

標籤沒有被包含在適當的父標籤中時,那有些瀏覽器不會顯示出圓點符號,適當的父標籤包括強大的

以及
• 的另一個父標籤
  (有序清單),這個會在稍後有更多的討論.
  圓點符號的出現在某種程度上的確能夠幫助解決換行問題,每個食品項目在左邊會有小圓點符號,如果某個項目過長折行的話,旁邊沒有小圓點符號應該就可以很明顯的看出這並不是全新的項目,但是方法B仍然有顯示結果意外的問題:它並不符合標準.
  麻煩檢查一下
  依照W3C的XHTML 1.0規格,所有的標籤最後都必須閉合 — 如果我們還是繼續使用上面範例中的寫法,讓所有的
  1. 保持開放狀態的話,那就太丟臉了!
     在行末使用
     標籤來模擬正確的無序清單自動換行的顯示效果,但其實我們有更好的方法.
     一向以來,養成編寫正確的標籤語法的習慣非常重要,正確的編寫標籤語法,我們可以不必在未來擔心由於沒有閉合標籤或者不正確的嵌套元素所帶來的問題.如果有人閱讀這些原始碼的話,也可以使他們更加深入的理解原始碼想要達成的效果.
     記得善用線上偵測工具來檢查你提交的URI或上傳的文件,最後你會覺得這樣做非常值得.  
     

     ---

     方法 C: 接近了
     

  2. Apples
  
  
  3. Spaghetti
  
  
  4. Green Beans
  
  
  5. Milk
  
  方法C更加的接近完美的解決方案了,但是還是悲慘的失敗了,原因還是非常明顯:這仍然不符合標準的標記語法.
  我們已經把
  6. 標籤關閉了,因為
  7. 是區塊級元素(block-level),因此在使用上可以去掉
     標籤,這樣每個項目都獨佔一行,但是,我們卻漏了它的外層結構,缺少了一個表示"這群項目是一個清單!"的元素.
     從語義化的角度看這個問題也非常重要 — 清單是一組項目歸屬在一起,因此我們應該為它們加上這樣的標籤,此外,使用正確的清單標籤能清楚告訴瀏覽器,軟體或顯示設備"這組項目是個清單!",語義化標籤的意義就在於將內容依照他們所屬的類別進行結構性的建構.
     區塊級(block-level)與行內(inline): HTML元素可以分為區塊級與行內兩大類型,區塊級元素會從新行開始,最後接著一個斷行,而行內元素則會與其他的行內元素顯示在同一行內,區塊級元素可以包括其他區塊級元素和行內元素,而行內元素裡面不能包含區塊級元素.
     區塊級元素包括:
     ,

     -

     ,

     等等,行內元素包括:,,,等等.
     如果以純XML的角度來看我們的食品清單,或許我們會使用這樣的方式進行標註:
     
     Apples
     Spaghetti
     Green Beans
     Milk
     
     整個清單有一個容器元素,所有的食品項目都包含在裡面,以這種方式歸類別項目,可以基於XML的應用輕鬆的從清單裡面抽取出所有的項目.
     舉例來說,一個開發者需要編寫一份XSLT樣式表,將這個清單轉成xhtml,純文字,甚至是pdf文件,因為列表項目的結構表現的非常清晰,所以程序可以輕鬆的獲取信息並作出一些有用的處理.
     雖然在這本書裡我並不直接處理XML,但是這些原則也適用於XHTML世界,如果文檔使用非常語義化的標籤結構,將可以提昇文檔今後的靈活度,不管是為結構清晰的文件加上css樣式表還是修改容易理解的文檔 — 只要提供正確的結構,就能節省許多今後在維護時可能浪費掉的時間.
     接著,我們仔細的看看方法D,看看這些怎麼樣結合在一起 — 一個能被大多數瀏覽器和螢幕閱讀器辨識並顯示的文件,同時又允許我們使用各種不同的方法為文件加上樣式. 

     ---

     方法D: 愉快的包裝者
     

     
     
     • Apples
     
     
     • Spaghetti
     
     
     • Green Beans
     
     
     • Milk
     
     

     
     是什麼讓方法D變得如此特別?首先,它的語法完全正確,正確的無序清單具備了

     容器元素,同時每個項目都已
     • 元素閉合起來.到這裡你會想問,我們花費了那麼多力氣只會來示範為了正確而正確?我們來看看這樣做能帶來的好處:
       由於我們正確的標記了我們的食品清單,每個項目都會獨佔一行(因為塊級元素
     • 的關係),而且大多數瀏覽器會給每個項目的左邊增加一個小圓點符號,並且進行正確的行內縮排換行.(見圖 1 - 3)
       

       圖1 - 3
       PDA,行動電話,或其他的小螢幕設備的使用者也可以看到清楚的,關係明確的組織方式,由於我們告訴了這些設備這些資料的類型(在這個範例裡是清單),因此這些設備能夠根據自己的能力決定怎樣顯示才能達到最好的效果.
       如果因為放大字號或縮小瀏覽器視窗寬度等原因造成換行,那麼被換行的文字會行內縮進到與第一行文字對齊的位置,所以不管瀏覽器環境如何,都可以輕鬆的識別每清單項目.  

       ---

       概要
       我們已經針對每種可能的方法進行討論了,現在讓我們快速的回顧一下剛才討論過的東西: 方法A:
       無法為清單加上獨特的樣式
       在狹窄的列里或小螢幕裝置上,較長的內容可能會因為換行而造成誤解
       缺乏語意性 方法B:
       增加小圓點符號來幫助識別每個項目,但是一些瀏覽器會在缺少父級標籤

       時可能不顯示小圓點符號
       沒有放在
       中,缺少閉合標籤
     意味著難於加上樣式
     不標準 方法C:
     加上了閉合標籤後就不需要
     標籤了
     省略了
     元素使得我們難於為這個清單添加特定的樣式
     不標準 方法D:
     符合標準!
     使文件語意化,結構性
     大多數瀏覽器都會在每個項目左邊顯示小圓點符號
     在大多數瀏覽器上都會在換行後行內縮進
     很容易就可以定義特定的css樣式
     正如你所見,你可以從一個看起來很簡單的問題上獲得不少知識.就算是你已經在你所有的頁面上都是用了方法D,還是可以你為什麼這樣做比較好,我們會在這本書裡一直探索"為什麼"的問題,讓你在各種情況下選用最恰當的方法.  

     ---

     技巧延伸
     讓我們利用我們建構出來的食品清單來試看看幾種用定義css樣式的方法,我們將拋開預設樣式,加入自定義的圓點符號,接著把它轉成橫向,把它變作一個導航條.
     丟掉圓點
     "我真的不喜歡食品清單裡的那些個小圓點,我想我還是用回
     吧."
     不需要回到舊習慣 — 我們仍然可以使用我們結構化的無序清單,然後使用css關閉掉小圓點符號和行內縮進,關鍵在於我們保留了清單的結構,然後以css具體的呈現出來.
     首先,加上一段去掉圓點符號的css規則:
     ul{
     list-style:none;
     }
     顯示的結果見圖1 - 4
     

     圖1 - 4 去掉小圓點符號
     接著我們來去掉行內縮排,根據預設值,所有無序清單左邊都會留有一些內補丁(padding),但是不用擔心,我們可以隨心所欲的裁掉:
     ul{
     list-style:none;
     padding-left:0;
     }
     顯示結果可見圖1 - 5
     

     圖 1 - 5
     雖然圖 1 - 5 看起來和使用了幾個
     標籤的效果幾乎一樣,但是它還是符合標準的,結構化的無序列表 — 不管什麼瀏覽器,設備都能正常顯示,如果必要的話只需要更新幾條css規則就能換上不同的樣式了. 

     ---

     使用自訂圓點符號來完成自己的想像
     或許你想要在清單裡保留小圓點符號,但是不想用瀏覽器無趣的默認設置,更像用自己的小圓點圖案.有兩種方法可以達成你想要的— 而我更推崇第二種方法,因為它可以在各種瀏覽器之間更好的兼容.
     第一種方法是用list-style-image 屬性來指定用來替代默認小圓點的圖片名稱.
     ul{
     list-style-image:url(i_hot.gif)
     }
     這是最簡單的方法,但是它會在不同瀏覽器之間的圖片垂直對齊位置上有不同,有些瀏覽器會把圖片和項目文字中線對齊,也有的會把圖片放得稍微高一點,它們之間有一點不一致.
     為了避免 list-style-image 造成的幾個流行瀏覽器之間的對齊問題,我比較喜歡用一種替代方法:把圖片作為每個

     • 元素的背景.
       首先,我們要去掉預設的圓點,然後再加上我們自己的背景圖片:
       ul{
       list-style:none;
       }
       li{
       background -image:url(i_hot.gif) no-repeat 0 50%;
       padding-left:25px;
       }
       no-repeat 會告訴瀏覽器不把背景圖片進行平鋪操作(預設會平鋪),而0 50%會告訴瀏覽器把背景圖片放置在距離左邊 0 像素,距離上面 50% 的地方,讓背景圖片 i_hot.gif 根據中線對齊.我們也可以用精確的像素來指定位置,比如說 0 6px 會讓圖片放置在距離左邊0像素,距離上面 6 像素的位置上.
       我們還要在清單項目的左邊加上17像素的內補丁(padding),以便我們把寬20像素高11像素的圖片能夠完整顯示出來,同時又留有一點空白,而不會和文字有重疊.這些數據應該根據你所使用的圖片尺寸進行調整

       ---

       導航清單
       在我的個人網站裡我分享了幾種將無序清單轉化為水平導航條的方法,用普通的,結構化的XHTML就像我們的食品清單範例那樣創造一個類似分頁標籤(Tab)的效果.
       我們把那張食品清單轉換成一個網上超市的導航條(這個超市只賣幾種東西就是了...).
       我們想要這個導覽條以水平的方式呈現,並且能夠在滑鼠劃過,選中時有某種強調顯示,以便我們模擬分頁標籤的效果.
       首先,我們為清單加上一個id,這樣我們就可以為它單獨定義css樣式了,同時我們也將把每個食品項目轉成鏈接.
       

       
       
       • Apples
       
       
       • Spaghetti
       
       
       • Green Beans
       
       
       • Milk
       
       
       
       現在,開始加上一些輔助的css:
       #minitabs{
       margin:0;
       padding:0 0 20px 10px;
       border-bottom:1px solid #696;
       }
       #minitabs li{
       margin:0;
       padding:0;
       display:inline;
       list-style:none;
       }
       在這裡我們已經完成了去掉預設圓點符號和行內縮進的工作,我們也把 display設定成inline,往垂直清單轉換成水平清單邁出了第一步,同時我們也加上了底部邊框以便區分出整個連結組.
       把清單轉換成水平導航條的第二步,是將我們的連結全部浮動到左邊顯示,我們同樣為所有的超連結加上簡單的樣式:定義外邊距和內補丁的大小:
       #minitabs {
       margin: 0;
       padding: 0 0 20px 10px;
       border-bottom: 1px solid #696;
       }
       #minitabs li {
       margin: 0;
       padding: 0;
       display: inline;
       list-style-type: none;
       }
       #minitabs a {
       float: left;
       line-height: 14px;
       font-weight: bold;
       margin: 0 10px 4px 10px;
       text-decoration: none;
       color: #9c9;
       }
       在這裡我們將清單中所有的元素都定義float:left,是為了讓他們能水平顯示排列於一行之內,同時我們也加上了一些色彩,把連結改成粗體,拿掉了連結底部的下劃線.
       然後,為滑鼠滑過或選取的連結建立一個模擬分頁標籤的邊線:
       #minitabs {
       margin: 0;
       padding: 0 0 20px 10px;
       border-bottom: 1px solid #696;
       }
       #minitabs li {
       margin: 0;
       padding: 0;
       display: inline;
       list-style-type: none;
       }
       #minitabs a {
       float: left;
       line-height: 14px;
       font-weight: bold;
       margin: 0 10px 4px 10px;
       text-decoration: none;
       color: #9c9;
       }
       #minitabs a.active, #minitabs a:hover {
       border-bottom: 4px solid #696;
       padding-bottom: 2px;
       color: #363;
       }
       #minitabs a:hover {
       color: #696;
       }
       為了強調連結,我們在滑鼠劃過或選取時增加一個4像素高的底邊,我們也可以使選中的標籤保持強調效果,只要加上cla​​ss="active":
       
     • spaghetti
     
     這個 active類與 a:hover的共用相同的css樣式.(圖 1 - 7)
     

     圖1 - 7
     我在自己的網站以及2003年7月重構裡面都用到了這個技巧.如果你需要更多的示例代碼,可以自由訪問這兩個網站並查看他們的源代碼.
     只需要加上一些內補丁和邊框,就可以達到各種類似分頁標籤的效果了,到目前為止,我們甚至連一張圖,一句javascript都沒有使用,而僅僅只用到了基本的xhtml結構就構成了我們的食品清單,這實在是太棒了!
     迷你分頁標籤的外觀
     如果你想要和平常的,方方正正的css邊框不太一樣的效果的話,只需要作出一點點小修改,我們就可以使用圖片來創建有趣的導航條了.
     我們使用和之前完全一樣的無序清單,以及十分類似的css:
     #minitabs {
     margin: 0;
     padding: 0 0 20px 10px;
     border-bottom: 1px solid #9FB1BC;
     }
     #minitabs li {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: left;
     line-height: 14px;
     font-weight: bold;
     padding: 0 12px 6px 12px;
     text-decoration: none;
     color: #708491;
     }
     #minitabs a.active, #minitabs a:hover {
     color: #000;
     background: url(tab_pyra.gif) no-repeat bottom center;
     }
     這段css大概看起來和上一個範例中的幾乎一樣,最主要的區別在我們用 background-image 定義了在滑鼠劃過或選取的時候顯示在連結底部中間的圖片來取代了原本的4個像素高的底部邊框.(圖1 - 8)
     

     圖1 - 8: 使用背景圖的迷你分頁標籤導航
     這裡的技巧在於選擇一個足夠窄的圖片,必須能夠塞進最短的導航條項目下,這樣一來我們只需要一張圖片來強調導航鏈接而不必為各種不同寬度準備不同的圖片,當然,在你自己的專案中,你可以選擇各種圖片使用(圖 1 - 9):
     

     圖 1 - 9: 使用其他圖片的範例