點擊這里返回腳本之家　HTML教程　欄目．
上文：標記語言——錨點
原文出處 Chapter 8 再談清單
先前在第一章,我們討論過幾種標記清單的做法,研究以<ul>和<li>將它們標記成無序清單的好處.這個方法能標識清單的結(jié)構(gòu),確保所有瀏覽器與設(shè)備都能正確顯示它的內(nèi)容,同時也讓我們能以CSS為它加上各種樣式.
而在各種環(huán)境下,處理個別問題時標記清單的所有做法寫出來的話塞滿整本書都不難,我不打算塞滿整本書,但是我的確打算以獨立一章討論除了無序清單之外的其他幾種清單類別.研究幾種適合使用清單的狀況.
清單是個組織頁面結(jié)構(gòu)的強大工具,為每個獨立的項目加上意義,讓你能在稍后以css加上獨立的樣式.
讓我們先來看看編了號的項目清單,以及兩種標記這類清單的做法.或許你一眼就能看出哪種方法比較有益,但是我仍會再度詳細說明這個例子,以便強調(diào)結(jié)構(gòu)化標記,使用正確工具解決問題的重要性. 編號項目清單的標記法,哪種最好?
假設(shè)你打算標記一個步驟清單,每個項目之前都有編號,我們將會研究兩種能夠達成這個目標的不同方法,同時說明為何某個方法比較適用. 方法A:亂中有序

<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the onions for 3 minutes.</li>
<li>3. Add 3 cloves of garlic.</li>
<li>4. Cook for another 3 minutes.</li>
<li>5. Eat.</li>
</ul>

前面這份清單可能是烹飪歷史上最糟糕的食譜之一.但是拿來當簡單的例子還蠻合適的,加點鹽和雞蛋可能好些,或是...不管,回到正題.
方法A我們選擇以無序清單標記這些步驟,以便獲得我們在第一章提過的所有好處,我們?yōu)閮?nèi)容加上結(jié)構(gòu),同時知道大多數(shù)瀏覽器,屏幕閱讀器以及其他設(shè)備都能正確處理這部分內(nèi)容,稍侯我們也能用css輕易為它指定樣式,很棒!但是... 數(shù)字游戲
由于這是個有編號的清單,因此我們在每個項目之前加上編號,編號之后跟著句號,以便標識每個步驟的順序,但是如果稍侯需要在第2步,第3步之間加上新步驟的話該怎么辦呢?這下我們需要(手動)為新增步驟之后的所有項目重新編號.對這個清單來說,不是什么麻煩事,但是如果你正在修改某個具有100個項目的清單時,修改過程就會變得非常冗長乏味了. 出現(xiàn)小圓點符號
由于我們以無序清單標記這個示例中的結(jié)構(gòu),因此在每個編了號的項目之前都會看到一個小圓點符號(就像圖8-1),你或許會喜歡小圓點符號,如果不喜歡的話當然可以通過CSS把它去掉,但是不使用CSS瀏覽這個清單的時候一定會再看到這些小圓點符號.

圖8-1,瀏覽器關(guān)閉CSS閱讀方法A的結(jié)果
有個更簡單,更具意義,更容易維護的方法,讓我們看看方法B. 方法B:有序清單

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

我確信這是大多數(shù)人選用的做法,但是這并不代表我們都沒有在某些情況下,因為某種原因使用方法A.<ol>代表"有序清單"(ordered list),因此語義上我們使用了正確的元素解決手上的問題.方法B還有什么特別之處? 自動編號
或許你發(fā)現(xiàn)我們不必手動為每個清單項目加上編號了,在使用了<ol>時,會自動依照順序產(chǎn)生編號,如果我們的步驟清單內(nèi)包含了超過100個項目,而我們需要在中間插入幾個新步驟時,我們只需要簡單的在正確的位置插入新的<li>項目就行了,瀏覽器會自動重新編號,簡直就跟魔術(shù)一樣.
如果使用方法A的話,我們就需要在插入每個項目的時候手動修正所有編號,我隨便都能想到比這更有趣的工作可以做...
圖8-2,十一版瀏覽器顯示方法B的效果,在每個步驟之前都自動加上編號.

圖8-2 瀏覽器顯示方法B的效果 愉快的包裝者,第二部
方法B的另一個好處是,很長的清單項目在換行的時候,會縮進到產(chǎn)生的編號后面,而方法A則會折到編號下面(圖8-3)

圖8-3 比較方法A和方法B換行效果 清單種類
雖然有序清單的預(yù)設(shè)編號樣式通常是阿拉伯數(shù)字(1,2,3,4,5等),但是我們能通過使用CSS的list-style-type屬性換掉編號樣式.而list-style-type能在以下幾種任選其一: decimal: 1,2,3,4,...(通常是預(yù)設(shè)值) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: 不加上編號
因此,舉例來說,如果我們想讓方法B產(chǎn)生大寫羅馬編號的話,我們就能夠以下的CSS達成目的:

ol li {
list-style-type: upper-roman;
}

圖8-4就是方法B配上這份CSS在瀏覽器內(nèi)的顯示效果,我們的步驟列表現(xiàn)在不再是預(yù)設(shè)的阿拉伯數(shù)字,而是改用羅馬數(shù)字編號了.當然,標記的部分仍然完全相同.改變主意了嗎?只要做點小小的修改,換上先前列出的其他樣式,就能馬上把清單的編號方式改成你喜歡的樣子.

圖8-4 換用羅馬數(shù)字的有序清單
HTML的type屬性:之前可能有些人會直接在<ol>標簽中使用type屬性,把清單的編號方式換成羅馬數(shù)字,英文字母等等,然而,為了支持稍早所述的CSS規(guī)則,從HTML 4.01標準開始就不建議使用type屬性了,因此,你不應(yīng)該再使用type屬性,應(yīng)該改用CSS.
稍后,在技巧延伸中,我們會以CSS為這個有序清單加上樣式.但現(xiàn)在讓我們先看看另一個清單種類的例子.
#p# 一群名詞與解釋的標記法,哪種更好?
OK,這個問題已經(jīng)提供夠多線索,本身差不多就是答案了.在我們看完下面兩種方式之后,你就會知道剛才這句話的意義了.比問題本身更重要的是:方法A是個在標記名詞與解釋時經(jīng)常使用的做法,而方法B其實是一種很少人會使用的清單,但是它能應(yīng)用在許多情況下,結(jié)構(gòu)也更靈活.
首先,讓我們很快的看看你可能十分熟悉的名詞 / 解釋標記法,特別是W3C定下的幾個標準: 方法A

<ul>
<li>CSS<br />
A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</li>
<li>XHTML<br />
A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</li>
<li>XML<br />
A simple, very flexible text format derived from SGML.</li>
</ul>

這個方法看起來有點道理,使用無序清單,并且以<br />標簽隔開名詞與定義內(nèi)容.
然而,如果我們想為每個名詞(CSS,XHTML和XML)與定義內(nèi)容指定不同的樣式,那么要怎么做呢?使用方法A時的唯一選項,是加上某些可以指定樣式的標簽,像是額外的<span>或<strong>.從維護的角度來看,這不是個理想的做法.
圖8-5是方法A在一般瀏覽器中的顯示效果,名詞與定義分別處于單獨一行.

圖8-5 以一般瀏覽器顯示方法A的效果
除了不能為每行制定特殊的樣式外,方法A并沒有什么缺點,但是已經(jīng)足夠當成接口,讓我凸顯方法B使用的清單種類 -- 定義清單. 方法B

<dl>
<dt>CSS</dt>
<dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple, very flexible text format derived from SGML.</dd>
</dl>

定義清單(<dl>)內(nèi)容由兩種額外標簽組成:<dt>(定義名詞)以及<dd>(定義描述).對我們的例子來說,定義清單完美符合內(nèi)容代表的意義 -- 因為我們就是在定義一系列名詞,解釋.
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會將定義描述<dd>顯示在獨立的一行內(nèi),并且稍微縮進(圖8-6),當然我們可以利用CSS視需要修改縮進設(shè)定.

圖8-6 一般瀏覽器顯示方法B的效果 由結(jié)構(gòu)引導(dǎo)樣式
語義上來說,方法B十分完整,讓我們能為清單的每一個元素使用獨立標簽,這讓我們能分別為名詞,揭示內(nèi)容制定特定樣式.
舉例來說,我們能做個簡單修改,以CSS把<dt>變成粗體.只要幾行聲明就能達成這個目的.完全不必修改標簽內(nèi)容.

dt {
font-weight: bold;
}

只要這樣就夠了,不必為清單內(nèi)容加上<strong>,<b>甚至是<span>標簽,現(xiàn)在所有的<dt>都會變成粗體,與圖8-7一樣.

圖8-7 方法B為<dt>加上font-weight:bold的效果 加上圖片
或許你發(fā)現(xiàn)我喜歡用CSS為標簽加上小圖標,我喜歡這個做法的理由,是因為我能使用CSS的background屬性打扮頁面,同時把屬于裝飾性,不重要的圖片與頁面內(nèi)容,結(jié)構(gòu)分開.
更換,增加或移除這些圖片的動作十分簡單,因為我不需要修改標簽內(nèi)容就能完成這些變動.
對定義清單來說,如果加上小箭頭圖標,從名詞指向定義內(nèi)容的話,應(yīng)該很有意思.我們能以下面這段CSS輕松加上這個效果:

dt {
font-weight: bold;
}

dd {
margin-left: 15px;
padding-left: 15px;
color: #999;
background: url(dd_arrow.gif) no-repeat 0 2px;
}

我們所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>標簽預(yù)設(shè)的外補丁,接著,我們把定義描述的顏色換成灰色,使其與<dt>的區(qū)別更大.同時在描述文字的左邊,理頂端2像素的地方放上一個小巧的橘色箭頭圖標,并且在描述文字的左邊留下15像素的內(nèi)部定,讓圖標不會與文字重疊,圖8-8就是完成的效果.

圖8-8 加上圖標,凸顯文字關(guān)聯(lián)性的定義清單
如你所見,使用定義清單結(jié)構(gòu),我們就能輕易地為每個構(gòu)成項目指定獨特的樣式,讓版面更豐富,而完全不必修改標簽內(nèi)容,我們也能確信不支持樣式的瀏覽器仍會以有組織,容易閱讀的方式顯示這個清單. 其他應(yīng)用
又見很重要的事情必須指出:那就是定義清單的用途不僅限于標注名詞,定義內(nèi)容.定義清單還能用來標注對話,導(dǎo)航條,甚至是表單排版.
我們甚至可以引用W3C在HTML 4.01規(guī)范中對于定義清單的定義:(http://www.w3.org/TR/html4/struct/lists.html)
"以<dl>標簽建立的定義清單,通常包含一系列名詞,定義內(nèi)容(雖然定義清單也能應(yīng)用在其他地方)"
所以,別害怕把定義清單用在名詞,解釋內(nèi)容之外的地方!
#p# 概要
本章到目前為止,我們看了另外的兩種清單:有序清單,定義清單.我們發(fā)現(xiàn)借著使用這些清單結(jié)構(gòu),代替無序清單加上額外標簽的做法,能夠讓我們更容易控制樣式,同時也讓清單變得更容易維護.
接著以我們本章最初的步驟清單當作例子,用CSS為他調(diào)整一下樣式. 技巧延伸
讓我們復(fù)習一下本章最初的有序步驟清單:

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li> Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

沒有加上任何CSS的話,瀏覽器的顯示效果與圖8-2差不多,就與本書其他的結(jié)構(gòu)化標記語法示例一樣,在導(dǎo)入CSS的時候,有序清單是一組容易指定樣式的標簽組.
我們知道,由于使用了正確的結(jié)構(gòu),因此不支持CSS或把CSS關(guān)閉的瀏覽器也能正確顯示出清單的內(nèi)容.
讓我們裝飾的花俏一些,先來自定每個項目之前的編號吧. 識別每個項目
為了讓我們能存取每個清單項目,把它的編號換成更華麗的樣式,我們需要為每個<li>標簽加上id,我們也會為整個有序清單加上id,讓我們能為這個清單指定特定樣式,而不影響其他所有的<ol>.

<ol id="recipe">
<li id="one">Chop the onions.</li>
<li id="two">Saute the onions for 3 minutes.</li>
<li id="three">Add 3 cloves of garlic.</li>
<li id="four"> Cook for another 3 minutes.</li>
<li id="five">Eat.</li>
</ol>

現(xiàn)在我們能識別每個項目了,因此我們對清單內(nèi)每個元素的樣式都進行完整控制.值得一提的是,在此為每個項目加上獨特的id之后,我們就無法依賴有序清單的"自動編號"功能了.如果稍侯在中間插入新步驟的話,我們就得自己變更往后步驟的id值,在此事先提醒一下. 自定數(shù)字
為清單建立自定數(shù)字的第一個步驟是用list-style-type屬性去掉#recipe元素預(yù)設(shè)的自動產(chǎn)生數(shù)字的效果:

#recipe {
list-style-type: none;
}

圖8-9 是用上面這條規(guī)則去掉數(shù)字之后的清單顯示效果.
圖8-9 用CSS關(guān)閉數(shù)字編號之后的有序清單
現(xiàn)在我們已經(jīng)防止自動產(chǎn)生數(shù)字了,接著就能以自己的數(shù)字圖片代替.用photoshop(或是你喜歡的繪圖工具)建立5個GIF圖片,一個數(shù)字一張圖.圖8-10是我用紅色Prensa字體建立的五個數(shù)字.
圖8-10 用在有序清單內(nèi)的五個GIF圖片 把數(shù)字加到CSS中
由于尺寸較大,因此我們需要為每個清單項目加上一點內(nèi)外補丁,以便為數(shù)字圖片留下足夠的空間讓它們顯示成背景,我們也會在每個步驟下面加上一條淺灰色的邊線.
我們能以繼承選擇器 #recipe li將這些規(guī)則套用到位于#recipe 中的<li>上,這讓我們不必為每個id重復(fù)定義這些規(guī)則.

#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}

把這些設(shè)定值套用到清單內(nèi)的每一個<li>之后,接著我們就能為每個id指定對應(yīng)的數(shù)字圖片.

#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}
#one {
background: url(ol_1.gif) no-repeat 6px 50%;
}
#two {
background: url(ol_2.gif) no-repeat 2px 50%;
}
#three {
background: url(ol_3.gif) no-repeat 3px 50%;
}
#four {
background: url(ol_4.gif) no-repeat 0px 50%;
}
#five {
background: url(ol_5.gif) no-repeat 6px 50%;
}

你應(yīng)該發(fā)現(xiàn)每張圖片指定的水平位置都有些差異,這是因為每張圖片的寬度都不一樣,跟我選用的字體有關(guān)系,為了補正這個差異,我們把每張圖片視需要稍微向右移動一點,讓每個數(shù)字旁邊的句號能夠排列整齊.
加上6px 50%會讓圖片擺放在離左邊6像素,上下50%的位置上,讓它對齊水平中線. 結(jié)果
圖8-11是以一般瀏覽器查看最終結(jié)果的樣子,每個圖片都顯示在項目的左側(cè),而每個步驟的底部都有一條灰色直線,進一步把它們區(qū)分開來.

圖8-11 使用一般瀏覽器查看的最終效果
借著幾張圖片,幾條CSS規(guī)則,我們?yōu)榻Y(jié)構(gòu)化的有序清單加上了些自定的樣式:再度證明我們能把不重要的圖片放在標簽之外,便于稍后更新. 結(jié)論
除了無需清單的變化之外,有序清單,定義清單也能提供相應(yīng)的語義結(jié)構(gòu),便利的樣式選擇,發(fā)揮你的想象力,試著用這幾種不同的清單類型 -- 同時以CSS為基礎(chǔ)結(jié)構(gòu)加上華麗的外衣吧.
在最后,你會得到能在各處正確顯示的堅實基礎(chǔ),同時又能以CSS位功能強大的瀏覽器修改顯示效果.
從章節(jié)上看,本書的一半已經(jīng)翻譯完成了,這才知道把英文文獻搞成中文有多不容易了...首先得理解原作者的本意才能用自己的語言組織... 關(guān)于這一張,我還是比較喜歡用合成背景圖然后用background-position來為每個清單列表指定相應(yīng)的背景圖的做法,至少會從視覺上減少載入圖片的次數(shù)...哈哈

最新評論