為<blockquote>加上樣式
Fast Company從雜志存檔里選出每日引言放在首頁,已經(jīng)行之有年了,為了保留FC的印刷體裁和強調(diào)效果,因此有很長一段時間這個引言被做成GIF圖片,讓設(shè)計者能以任何方式處理字型,達成期望的效果.
在2003年早秋,差不多是在我看著至愛的紅襪隊迎向歷史性冠軍之時,我決定拋棄GIF圖片,換上加了樣式的<blockquote>標(biāo)簽.
從易用性角度看,以文字顯示引用內(nèi)容很有道理,由于無法重現(xiàn)GIF帶來的體裁便利性,因此我們面對著美化引言的挑戰(zhàn).當(dāng)然,CSS幫了很大的忙. 背景的引用符號
想法十分簡單,就是分別制作開引號,閉引號兩張圖片,選用的色調(diào)足以隱沒在略為重疊的引用文字后面,引用同時也放在了270像素寬,淡灰色的圓角方塊內(nèi),以便配合網(wǎng)站整體風(fēng)格.第三張圖片用來完成圓角效果以及引號.這三張圖片完全以各個元素debackground屬性放在css中.
我們先以photoshop或者你慣用的圖形處理程序建立這些圖片.這邊是個使用特殊字體的好機會,你能選用一般瀏覽器不支持的字體,在Fast Company的例子里,使用了雜志上的引號字體. 三張圖片
圖4-1 是剛建立的三張圖片,一張是開引號,頂部圓角,一張是閉引號,最后一張是底部的兩個圓角.
這三張圖片背景都是透明的,以便我們用css來控制背景的顏色.同時我們以白色制作了圓角,灰色制作了引號.

圖 4-1 為了制作引號圓角而以Photoshop創(chuàng)建的3張圖片 標(biāo)記元素
目前,你只能以background或者background-image屬性為一個元素指定單張背景圖,因此,我們將為<blockquote>里的每個段落加上id.
我們會把一段內(nèi)容標(biāo)為#quote,另一段內(nèi)容標(biāo)為#other,使得最后有三個獨特元件能夠制定背景圖.
來看看我們會在這個示例接下來的步驟里中使用的標(biāo)記方法:

<blockquote cite="http://www.somesite.com/path/to/page.html">
<p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
<p id="author">&#8212;Hesketh Pearson</p>
</blockquote>

這樣就完成了使用背景圖的預(yù)備工作了

三個元素,三張背景圖
如先前所述,現(xiàn)在你只能以background或者background-image屬性為一個元件指定一張背景圖,因此我們將善用示例中的三個元素,也就是<blockquote>,#quote段落和#author段落,以便指定三張背景圖完成我們期望的效果.
在新增元素前,看看還有那些元素可以用上,這是個很好的習(xí)慣.你經(jīng)常能在完善,結(jié)構(gòu)化的標(biāo)記源代碼中找到適合加上css的元素,大成你需要的效果.
我們先從<blockquote>元素的css規(guī)則開始書寫:

blockquote {
width: 270px;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
text-align: center;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}

我們把整個組件的寬度設(shè)為270像素,與提供頂部圓角,開引號效果的top.gif寬度相同,同時我們也照顧了一下文字效果,為它指定了字體,大小和顏色.最后,我們置中所有文字,并以最后一條規(guī)則指定了背景色,背景圖以及背景圖的顯示位置.
去掉<blockquote>的內(nèi)外補丁也很重要,我們該為每個段落元素加上內(nèi)補丁,這能讓我們避免windows版IE5錯誤解析CSS盒模型的問題.我們會在本書第二部分進一步討論盒模型的細節(jié).
接著,讓我們幫#quote段落設(shè)定樣式:

blockquote {
width: 270px;
text-align: center;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}

#quote {
margin: 0 10px 0 0;
padding: 20px 10px 10px 20px;
background: url(end_quote.gif) no-repeat right bottom;
}

借著指定margin:0 10px 0 0;我們能取消瀏覽器在段落上下的預(yù)設(shè)補丁,以便使用精確的內(nèi)補丁設(shè)定值排好版面.然而我們還是在右側(cè)加上了10像素的外邊界,以便把閉引號擠開,配合左邊的效果.如果我們不留下這10像素的話,開引號就會緊靠整個外邊框的最右邊.另一種可行方法是直接在圖片右邊加上適當(dāng)?shù)牧舭?
同時也要留意,我們指定把背景圖(開引號)放在<blockquote>的右側(cè)(right)底部(bottom).
最后,我們要在作者段落(#author)放上最后一張背景圖,也就是引言底部的圓角.

blockquote {
width: 270px;
text-align: center;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}

#quote {
margin: 0 10px 0 0;
padding: 20px 20px 10px 20px;
background: url(end_quote.gif) no-repeat right bottom;
}

#author {
margin: 0 10px 0 0;
padding: 0 0 10px 0;
color: #999;
font-size: 60%;
background: url(bottom.gif) no-repeat bottom;
}

我們再度取消段落上下的預(yù)設(shè)補丁,改在底部加上一些內(nèi)部補丁.第三張圖片已經(jīng)到位了.為引用內(nèi)容加上兩個圓角,借以padding代替margin設(shè)定author部分的排列方式,我們得以讓圓角圖出現(xiàn)在適當(dāng)?shù)奈恢蒙?也就是最底部.

結(jié)果
圖4-2是典型的現(xiàn)代瀏覽器所能看到的結(jié)果,圓角外邊框十分完整,兩個引號則漂亮的藏在文字后方.這個方法最棒的地方是整個外框可以擴大,代表你能放進去任何長度的引用內(nèi)容,外框會配合引言長度自動放大或縮小(自適應(yīng)),而且引號與圓角都會停留在適當(dāng)?shù)奈恢?這也代表視力不佳的使用者方法字體時,引用于外框的設(shè)計不會被破壞.

圖 4-2,使用三個背景圖與文字的引用樣式示例. 強調(diào)特殊文字
我為Fast Company額外加上的引用樣式之一是在引用范圍內(nèi)使用<strong>標(biāo)簽來強調(diào)特定重點文字的效果.這能進一步模仿雜志上使用的排版風(fēng)格.
借著使用<strong>,我們能確保大多數(shù)不支持樣式或是非可視化瀏覽器仍然可以得到粗體或強調(diào)的效果(在這個例子中很合理),同時我又能以CSS特別指定改用深色顯示<blockquote>范圍內(nèi)的<strong>標(biāo)簽.
標(biāo)記源代碼內(nèi)容需要略作修改,以<strong>標(biāo)示幾個選定的單字.

<blockquote cite="http://www.somesite.com/path/to/page.html">
<p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
<p id="author">&#8212;Hesketh Pearson</p>
</blockquote>

然后這段是需要加上的額外css規(guī)則的內(nèi)容:

#quote strong {
color: #000;
font-weight: normal;
}

此時,任何出現(xiàn)在引用范圍之內(nèi)的<strong>就會變成黑色(不能更黑了),另外由于引用的其他部分使用了一般的font-weight,因此我們以normal取代<strong>預(yù)設(shè)的粗體樣式.
使用<strong>標(biāo)簽的結(jié)果可以在圖4-3里看到,我們強調(diào)了"Misquotation"和"never"這兩個字.

圖4-3 以<strong>強調(diào)特定單字的<blockquote>樣式

這回退化到什么程度?
我們知道CSS與幾張背景圖能把引用美化到什么程度了,但是在不支持CSS的瀏覽器或設(shè)備上會變成什么樣呢?這個方法的顯示效果會退化到什么程度呢?
恩,幸好我們以原始設(shè)計用途使用了<blockquote>元素,因此不支持樣式的瀏覽器,電話,PDA以及屏幕閱讀器都能正確的處理他的內(nèi)容.舉例來說,圖4-4就是這個頁面去掉CSS之后的樣子.我在引用前后加上了虛構(gòu)的文字,以便讓你看到完整的效果.

圖4-4. 圖4-3去掉CSS之后的樣子 結(jié)論
在仔細研究過幾種標(biāo)識引用的不同方法之后,我們很容易就能找到處理問題的正確工具,也就是<blockquote>,單純?yōu)榱丝s進文字而使用<blockquote>的時代已經(jīng)過去了,我們現(xiàn)在用它來標(biāo)記長引用.
一旦完成了結(jié)構(gòu),就能輕易為<blockquote>加上樣式,使他們區(qū)別于一般內(nèi)容之外,同時仍能讓不支持CSS的瀏覽器或其他設(shè)備正常解析內(nèi)容

上一頁 1 2 3 4下一頁閱讀全文

最新評論