提問時(shí)間
下面哪種方法最適合建立食品清單?
方法 A: 用 <br /> 換行
Apples<br /> Spaghetti<br /> Green Beans<br /> Milk<br />
方法A的確是一種被廣為傳用的方法,可能有數(shù)百萬個(gè)頁面使用過,事實(shí)上,我相信我們中的每個(gè)人都會(huì)偶爾因?yàn)槭褂昧诉@種方法而感到內(nèi)疚,對(duì)吧?我們希望在清單中的每一項(xiàng)都獨(dú)占一行,而加入了換行標(biāo)簽(在這里使用的是符合xhtml標(biāo)準(zhǔn)的自關(guān)閉標(biāo)簽<br />)就會(huì)在每個(gè)項(xiàng)目后面生成斷行,這就是他所有的效果了,看起來,挺管用的.
但是,如果我們想要給這個(gè)食品清單加上與其他頁面元素不同的樣式的時(shí)候該怎么辦呢?比方說:如果想讓清單的所有鏈接的顏色變成紅色而不同于默認(rèn)的藍(lán)色,或者想要改變字體的大小時(shí)該怎么辦呢?真的我們什么都做不了,我們被為整份html文檔設(shè)定的字體風(fēng)格(如果有設(shè)定的話)限制住了.同時(shí),如果在清單外面沒有任何標(biāo)簽圍繞,我們就沒辦法為清單制定一個(gè)獨(dú)特的css規(guī)則.
折行
如果我們?cè)谇鍐沃屑尤胍粋(gè)類似"Five Foot Loaf of Anthony's Italian Bread".根據(jù)這個(gè)清單在頁面里擺放的位置,在水平空間不足或者瀏覽者的瀏覽器視窗比較窄的情況下,過長(zhǎng)的項(xiàng)目就會(huì)冒著折到下一行的風(fēng)險(xiǎn).
同時(shí)我們也要考慮到視力不佳的用戶可能會(huì)把預(yù)設(shè)的字體大小改大以便增加可讀性,我們認(rèn)為能夠像 圖1 - 1 一樣把項(xiàng)目輕松的布置在窄欄里,但是很有可能會(huì)像 圖 1 - 2 這樣在意料之外的地方發(fā)生斷行,讀者調(diào)大字體時(shí),設(shè)計(jì)的樣式就完全變樣了.
圖 1 - 1 預(yù)設(shè)文字大小的范圍
圖 1 - 2 調(diào)大文字大小后的相同內(nèi)容
唔......現(xiàn)在,我想我應(yīng)該要買面包是沒錯(cuò),但是在 圖 1 - 2 里,面包上面的兩行字實(shí)在感到疑惑.
在使用小屏幕裝置像是移動(dòng)電話或者PDA閱讀長(zhǎng)行時(shí),類似的換行問題就會(huì)展露它丑惡的嘴臉,骨灰級(jí)的科技愛好者可能會(huì)隨手帶著記錄購(gòu)物清單的Palm Pilot(而不是傳統(tǒng)意義上的紙和筆)當(dāng)他在超級(jí)市場(chǎng)里面閑逛的時(shí)候,最后卻在貨架中尋找一種叫"Anthony's Italian"的東西.
在這里我要在本質(zhì)上闡明一個(gè)觀點(diǎn) - 使用方法A ,并沒有把閱讀網(wǎng)頁時(shí)的這些設(shè)計(jì)師們所無法控制的變數(shù)考慮在內(nèi).
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁 標(biāo)記語言——清單 [1] 下一頁 標(biāo)記語言——清單 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|