 |
級(jí)別： 中級(jí)
Alister Lewis-Bowen ([email protected]), 高級(jí)軟件工程師, IBM
Stephen Evanchik ([email protected]), 軟件工程師, IBM
Louis Weitzman ([email protected]), 高級(jí)軟件工程師, IBM
2007 年 5 月 24 日
在這個(gè) 系列 中，在 IBM? Internet Technology Group 團(tuán)隊(duì)的帶領(lǐng)下使用一套可免費(fèi)獲得的軟件為虛構(gòu)的 International Business Council 公司設(shè)計(jì),、開(kāi)發(fā)和部署一個(gè)外部網(wǎng) Web 站點(diǎn),。在 第 7 部分 中,，學(xué)習(xí)了為這個(gè)新 Web 站點(diǎn)的內(nèi)容建立結(jié)構(gòu)的方法。本文繼續(xù)進(jìn)行主題化,，關(guān)注的重點(diǎn)從結(jié)構(gòu)轉(zhuǎn)移到使用層疊樣式表（CSS）對(duì) XHTML 應(yīng)用樣式,。
簡(jiǎn)介
在這個(gè) 文章系列 中，Internet Technology Group 團(tuán)隊(duì)描述了如何為虛構(gòu)的 International Business Council（IBC）公司創(chuàng)建一個(gè)定制的 Web 站點(diǎn),。這個(gè)站點(diǎn)需要文檔存儲(chǔ),、討論組,、專(zhuān)門(mén)的工作組,、研討會(huì)日程安排、日程議題描述等功能,。
在 第 7 部分 中,，學(xué)習(xí)了如何創(chuàng)建新的主題,，以及在主題中為 Web 站點(diǎn)構(gòu)造結(jié)構(gòu)化 XHTML。本文繼續(xù)進(jìn)行主題化,，關(guān)注的重點(diǎn)從結(jié)構(gòu)轉(zhuǎn)移到使用層疊樣式表（CSS）對(duì) XHTML 應(yīng)用樣式。
Drupal 允許主題設(shè)計(jì)人員使用 CSS 修改 XHTML 內(nèi)容的表示方式,。CSS 中的樣式適用于所有 Web 站點(diǎn)，而不是專(zhuān)門(mén)用于 Drupal 的,，但它是創(chuàng)建有用且符合期望的 Web 站點(diǎn)所需要的。因此,，本文主要關(guān)注在進(jìn)行 CSS 樣式化時(shí)的常用實(shí)踐,。我們將總結(jié)對(duì) IBC Web 站點(diǎn)進(jìn)行樣式化所用的一些技術(shù)。您將學(xué)習(xí)以下方法：
- 設(shè)計(jì)可維護(hù)的 CSS 結(jié)構(gòu),。
- 提供成比例的頁(yè)面布局,。
- 標(biāo)識(shí) Web 站點(diǎn)部分并提供視覺(jué)標(biāo)志,。
- 創(chuàng)建 CSS 驅(qū)動(dòng)的下拉菜單。
- 啟用用戶可切換的布局,。
- 提供打印樣式,。
正如前面文章所解釋的,，Drupal 主題系統(tǒng)使我們能夠?qū)⒔Y(jié)構(gòu)和表示方式與程序邏輯分隔開(kāi)。我們還盡可能將 Web 內(nèi)容的表示與內(nèi)容結(jié)構(gòu)分隔開(kāi),。我們已經(jīng)建立了良好的模板,，它們使用 XHTML 為內(nèi)容建立結(jié)構(gòu)，所以現(xiàn)在可以使用 CSS 對(duì)內(nèi)容應(yīng)用樣式,。
本系列中的信息不應(yīng)該解釋為嚴(yán)格的開(kāi)發(fā)規(guī)則,，而是應(yīng)該作為對(duì) Web 站點(diǎn)應(yīng)用樣式時(shí)的起點(diǎn)。
兼容性
對(duì) Web 站點(diǎn)應(yīng)用樣式是一項(xiàng)需要耐心和果斷的工作,。如果 XHTML 結(jié)構(gòu)是良好的,，您的工作就會(huì)輕松得多。但是,，主題設(shè)計(jì)人員深知嘗試使 CSS 跨不同瀏覽器,、瀏覽器版本和平臺(tái)工作時(shí)可能會(huì)遇到的挫折。
盡管越來(lái)越容易了,，但是向后兼容性仍然依賴于客戶的期望和用戶的需要,。一定要了解這些需求并明確地定義它們。對(duì)于 IBC 站點(diǎn),，我們面對(duì)的用戶具有比較高的技術(shù)水平,，他們中的大多數(shù)人使用最新的瀏覽器。通過(guò)對(duì)內(nèi)容結(jié)構(gòu)使用語(yǔ)義標(biāo)記,，我們生成的 Web 頁(yè)面在老式瀏覽器上具有合理的布局,，甚至在樣式不可用時(shí)也是合理的。圖 1 對(duì)比了在有樣式和無(wú)樣式的情況下 IBC 主頁(yè)的顯示,。
圖 1. 有樣式和無(wú)樣式的主頁(yè)
在沒(méi)有樣式時(shí),，元素的顯示方式是上下依次排列的，這使它占據(jù)更多的垂直空間,。但是,，語(yǔ)義結(jié)構(gòu)仍然是完整的。另外,，原本隱藏的一些內(nèi)容顯示了出來(lái),，這幫助訪問(wèn)者識(shí)別內(nèi)容的某些部分,，其中包括一個(gè)直接跳到頁(yè)面中主內(nèi)容開(kāi)頭的鏈接,。這是為提供可訪問(wèn)性所使用的典型結(jié)構(gòu)化技術(shù)（參見(jiàn) 第 7 部分）。
對(duì)于在不同的環(huán)境中實(shí)現(xiàn)相似的表示方式,，有許多解決方案,，或者說(shuō) hack。我們不打算使用這些方法,。相反,，我們?cè)敢饨邮軆?nèi)容在不同瀏覽器或平臺(tái)上顯示方式略有不同的情況,。只要內(nèi)容仍然是可讀的、能夠發(fā)揮功能而且在布局中具有語(yǔ)義上的正確性,，我們就接受這些差異,。
CSS 文件的組織
在 第 7 部分 中，我們通過(guò)復(fù)制 Drupal 發(fā)布版附帶的 Bluemarine 主題,，在 themes 目錄下面創(chuàng)建了一個(gè)新的主題目錄,。為了組織這個(gè)目錄，我們決定在這個(gè)主題目錄下創(chuàng)建一個(gè) c 目錄,，用來(lái)包含我們的所有樣式,。還創(chuàng)建了 i 和 j 目錄，分別包含這個(gè)主題專(zhuān)用的圖像和 JavaScript 文件,。
還可以在模塊的 hook_init 函數(shù)或主題的 templates.php 中使用 theme_add_styles 函數(shù),，告訴 Drupal 您希望將哪個(gè)樣式表添加到主題中?？梢允褂眠@個(gè)函數(shù)添加樣式表的路徑以及相關(guān)聯(lián)的媒體類(lèi)型,。它在模板中作為 phptemplate 引擎?zhèn)鬟f的 $styles 變量中的一組 LINK 元素出現(xiàn)。我們不采用這種方法,，而是將自己的 LINK 元素硬編碼在 page.tpl.php 文件中,。這種方法可能更適合您的主題設(shè)計(jì)人員，因?yàn)樗麄兛梢詮捻?yè)面模板文件直接控制對(duì)樣式表的使用,。
在默認(rèn)情況下,，Drupal 會(huì)通過(guò) misc 目錄中的 styles.css 文件應(yīng)用樣式。但是,，我們不希望將所有樣式都放在一個(gè)大樣式表中,，而是要定義多個(gè)樣式表并將它們與特定的樣式化任務(wù)關(guān)聯(lián)起來(lái)。我們并不在 page.tpl.php 模板的 HEAD 部分中為每個(gè)樣式表建立一個(gè) LINK 元素,，而是創(chuàng)建一個(gè)包含它們的樣式表,，在其中可以包含所有與任務(wù)相關(guān)的樣式表文件。清單 1 顯示 screen.css 文件的內(nèi)容,，我們使用這個(gè)文件定義主屏幕媒體相關(guān)樣式,。
清單 1. screen.css 文件中包含的樣式表
@import url("base.css");
@import url("form.css");
@import url("layout.css");
@import url("banner.css");
@import url("nav_bar.css");
@import url("side_bar.css");
@import url("login.css");
@import url("home.css");
@import url("workgroups.css");
@import url("conferences.css");
@import url("members.css");
@import url("announcements.css");
@import url("action_items.css");
@import url("agenda_items.css");
@import url("search.css");
@import url("discussions.css");
@import url("comments.css");
@import url("filegallery.css");
@import url("companies.css");
|
這個(gè)文件中包含幾個(gè)樣式表，其中包括 XHTML 元素選擇器的基本樣式集,、表單樣式,、頁(yè)面布局、布局的主要區(qū)域（廣告條,、導(dǎo)航,、邊欄）和 Web 站點(diǎn)的主要部分。
對(duì)于一個(gè)請(qǐng)求只傳輸一個(gè)大樣式表文件的速度比較快,，而使用一套樣式表的可維護(hù)性比較好,，而且尋找特定樣式也比較容易,，需要在這兩種方式之間進(jìn)行折中。因?yàn)槲覀兊臉邮奖砗苄?，下載速度很快,，而一旦完成緩存，使用起來(lái)也會(huì)很快,。根據(jù)您需要?jiǎng)?chuàng)建的樣式數(shù)量以及主題設(shè)計(jì)人員的工作習(xí)慣,，使用更少但更大的樣式表文件可能更合適。
這種組織方法有一個(gè)問(wèn)題：如果用戶將 Web 頁(yè)面保存到自己的計(jì)算機(jī)上,，然后在斷開(kāi)網(wǎng)絡(luò)連接的情況下查看頁(yè)面,。screen.css 文件中包含的樣式表不會(huì)被保存，所以當(dāng)用戶離線查看頁(yè)面時(shí),，內(nèi)容上不會(huì)應(yīng)用樣式,。解決這個(gè)問(wèn)題的一種方法是建立一個(gè)后期處理腳本，它解析 screen.css 文件并將所有引用的樣式表包含進(jìn) screen.css,。
改進(jìn)樣式表的可搜索性的另一種方法是使用標(biāo)志 來(lái)幫助我們搜索文件中的注釋,。清單 2 給出一個(gè)在部分的注釋中使用等號(hào)的示例。這種方法是 Doug Bowman 提出的（參見(jiàn) 參考資料）,。因?yàn)?CSS 語(yǔ)法中不使用等號(hào),，所以通過(guò)搜索等號(hào)，可以快速地找到樣式部分的開(kāi)頭,。
另一個(gè)有用的方法是按照字母表次序排列所有樣式,。這種技術(shù)在搜索樣式時(shí)提供了一定程度的一致性。
清單 2. CSS 文件中的可搜索注釋
/* -----------------------------------------------------------------
* =announcement_summary
* -----------------------------------------------------------------
*/
.announcement_summary {
margin: 0 0 .8em 0;
}
.announcement_summary h3 a {
font-size: 90%;
}
|
瀏覽器會(huì)對(duì) XHTML 應(yīng)用默認(rèn)樣式,，這可能會(huì)給主題設(shè)計(jì)人員造成混亂,。對(duì)于我們要使用的所有 XHTML 元素選擇器，將空白邊和補(bǔ)白設(shè)置為零,，從而防止瀏覽器應(yīng)用默認(rèn)樣式,，見(jiàn) 清單 3。現(xiàn)在,，這些元素的樣式的可預(yù)測(cè)性就加強(qiáng)了,。另一種對(duì)所有元素應(yīng)用零空白邊和補(bǔ)白的方法是使用 * 選擇器。但是,，我們希望能夠控制影響哪些元素,。
Eric Mayer 的 Web 站點(diǎn)詳細(xì)介紹了瀏覽器默認(rèn)樣式的效果（參見(jiàn) 參考資料。）
清單 3. 為要使用的選擇器設(shè)置空白邊和補(bǔ)白樣式
p, ul, li, ol, dl, dt, dd, h1, h2, h3, h4,
form, fieldset, blockquote, table, th, tr, td {
margin: 0;
padding: 0;
}
|
用于提高可訪問(wèn)性的樣式
第 7 部分 描述了我們?cè)趦?nèi)容結(jié)構(gòu)中使用的一些可訪問(wèn)性技術(shù),。在本節(jié)中,，您將看到我們?nèi)绾问褂?CSS 提高可訪問(wèn)性。當(dāng)然,，可訪問(wèn)性設(shè)計(jì)涉及許多方面的問(wèn)題,。一些是標(biāo)準(zhǔn)設(shè)計(jì)問(wèn)題，比如顏色要形成足夠的對(duì)比度,、在版面中提供足夠的指引信息以及在內(nèi)容的邏輯區(qū)域周?chē)才抛銐虻目瞻?。這些設(shè)計(jì)實(shí)踐超出了本文的范圍。我們關(guān)注主要區(qū)域的樣式化,，以便滿足 IBC Web 站點(diǎn)的可訪問(wèn)性需求,。
成比例的大小改變
成比例的大小改變（proportional sizing） 指的是，對(duì)于容器大小,、文本域的長(zhǎng)度,、字體大小等，盡可能使用百分?jǐn)?shù)和 em 單位,。這種方法可以創(chuàng)建出流式布局,，在這種布局中字體會(huì)隨著布局成比例地改變大小。另一個(gè)要考慮的問(wèn)題是,，需要以某種方式對(duì)圖像應(yīng)用樣式,，讓它們能夠在流式布局中有效地工作。
靈活的字體
現(xiàn)代的瀏覽器能夠改變 Web 頁(yè)面的默認(rèn)字體大小,。這非常有用,，用戶可以減小字體大小以便在瀏覽器窗口中看到更多的內(nèi)容，或者增加字體大小以使 Web 頁(yè)面更容易辨認(rèn),。圖 2 和 圖 3 顯示了 IBC 站點(diǎn)在使用小號(hào)字體和大號(hào)字體時(shí)的布局變化,。
圖 2. 減小字體大小后的布局
圖 3. 增加字體大小后的布局
效果并不完美，但是在字體大小顯著改變時(shí)顯示效果還算不錯(cuò),。一種常用的實(shí)現(xiàn)技術(shù)是,，設(shè)置一個(gè)初始字體大小，然后在樣式表中對(duì)任何其他字體大小使用百分?jǐn)?shù),。
如 清單 4 所示,，我們?cè)诨緲邮奖恚╞ase.css）的頂部定義了樣式，包括字體大小,。
清單 4. 為 body 選擇器設(shè)置初始字體樣式
body {
background: #fff;
color: #333;
font-family: Verdana, sans-serif;
font-size: small;
line-height: 1.5em;
margin: 0;
padding: 0;
}
|
對(duì)于以后對(duì)字體大小的任何修改,，我們都使用百分?jǐn)?shù)。因此,，如果用戶改變了瀏覽器的默認(rèn)字體大小,，所有文字都會(huì)保持比例。例如,，清單 5 顯示我們?nèi)绾卧O(shè)置邊欄容器的字體大小,。
清單 5. layout.css 中邊欄容器的樣式
#sidebar {
background: transparent url(/themes/ibc/i/bg_sidebar_right.gif) no-repeat top right;
float: right;
font-size: 80%;
line-height: 1.4em;
width: 30%;
}
|
所以，邊欄中的字體大小現(xiàn)在是初始大小 small 的 80%。但是,，在將百分?jǐn)?shù)應(yīng)用于子選擇器的樣式時(shí),，要記住單位是累積的。例如,，如果將這個(gè)邊欄中一個(gè)內(nèi)容區(qū)域的字體大小設(shè)置為 90%,，那么字體大小會(huì)是初始設(shè)置的大小的 80% 的 90%。在 Document Object Model（DOM）中使用嵌套更深的此類(lèi)百分?jǐn)?shù),，效果會(huì)更差,。
流式布局
IBC Web 站點(diǎn)上的某些內(nèi)容可能相當(dāng)寬，所以我們希望盡可能利用瀏覽器窗口的寬度,。我們決定采用流式布局而不是固定寬度的布局,。圖 4 和 圖 5 顯示了布局如何隨著瀏覽器窗口的大小而變化。
圖 4. 窄瀏覽器窗口中的布局
圖 5. 寬瀏覽器窗口中的布局
這意味著,，我們要在主要布局容器寬度上使用百分?jǐn)?shù),，比如主內(nèi)容區(qū)域和邊欄。在 清單 5 中的邊欄樣式中,，寬度設(shè)置為 30%,。在 清單 6 中，主內(nèi)容容器使用略小于 70% 的寬度,，這是為了適應(yīng) Microsoft? Internet Explorer 的 盒模型寬度實(shí)現(xiàn),。
清單 6. layout.css 中的主內(nèi)容容器樣式
#content {
clear: both;
float: left;
width: 67%;
}
|
有許多種技術(shù)可以創(chuàng)建流式的多欄布局。我們選擇讓兩個(gè)容器分別向左右浮動(dòng),。我們提供適當(dāng)?shù)淖钚挾群妥畲髮挾?，以限制設(shè)計(jì)中使用的圖像的大小。在 清單 7 中可以看到 layout.css 文件中使用的樣式,。樣式所針對(duì)的 wrap 容器見(jiàn)本系列 第 7 部分 中的圖 1,。您應(yīng)該知道，max-width 和 min-width 樣式的實(shí)現(xiàn)在瀏覽器之間并不一致,。因?yàn)槲覀冞x擇讓邊欄浮動(dòng),，所以當(dāng)瀏覽器窗口的寬度太窄時(shí)，邊欄會(huì)出現(xiàn)在主內(nèi)容區(qū)域下面,。
清單 7. 在 layout.css 中限制寬度
#wrap {
max-width: 1600px;
min-width: 750px;
}
|
我們還對(duì)一些元素應(yīng)用成比例大小改變,，比如 BUTTON 或 submit 類(lèi)型的 INPUT 元素。對(duì)于這些元素,，我們?cè)?margin,、padding 和 width 等樣式中使用 em 單位而不是百分?jǐn)?shù)。清單 8 顯示我們?nèi)绾螌?duì) submit 類(lèi)型的 INPUT 元素應(yīng)用樣式,。
清單 8. forms.css 中 submit 類(lèi)型的 INPUT（form-submit）的樣式
input.form-submit {
background: #fff url(/themes/ibc/i/bg_btn.gif) repeat-x bottom left;
border: 1px solid #ccc;
border-bottom-color: #999;
border-right-color: #999;
cursor: pointer;
font-size: 79%;
margin: 1em 0 0 0;
padding: 0.25em;
text-align: center;
width: 6em;
}
|
圖 2 顯示一個(gè)改變尺寸的表單元素的示例,。當(dāng)字體大小增加時(shí),，頁(yè)面頂部的搜索表單中使用的文本域會(huì)變寬。
在許多情況下,，需要用 DIV 或 SPAN 容器包圍一個(gè)表單組件,，以便從 CSS 樣式表訪問(wèn)它。Drupal forms API 允許使用 #prefix 和 #suffix 數(shù)組元素在為每個(gè)表單組件生成的 XHTML 之前和之后定義內(nèi)容,。（見(jiàn) 第 6 部分 的清單 11 中的示例,。）
對(duì)流式布局中的圖像應(yīng)用樣式
如 圖 2,、圖 3,、圖 4 和 圖 5 所示，字體大小和瀏覽器窗口寬度的改變會(huì)對(duì)頁(yè)面上的可視元素產(chǎn)生顯著影響,。在容器的背景中使用單色（比如導(dǎo)航條中的黑色背景）可以在某種程度上緩解這個(gè)問(wèn)題,。當(dāng)字體大小增加時(shí)，導(dǎo)航條的高度會(huì)隨著增加,。在這個(gè)容器上應(yīng)用黑色背景就意味著我們不必?fù)?dān)心了,。同樣，我們對(duì)邊框的尺寸使用百分?jǐn)?shù)或 em 單位,。
另一種常用技術(shù)是沿水平或垂直方向在元素的背景中重復(fù)顯示圖像,。這樣的話，如果圖像的邊緣與定義的背景顏色融為一體,，那么就能夠適應(yīng)任何大小變化,。圖 6 顯示圖像如何在 BUTTON 或 submit 類(lèi)型的 INPUT 元素中創(chuàng)建漸變效果，從而適應(yīng)增加字體大小所產(chǎn)生的空間,。
圖 6. 背景樣式效果保持一致
圖 7 顯示 清單 8 中的樣式如何在按鈕中創(chuàng)建這種靈活的背景圖像,。
圖 7. 圖 6 中按鈕的構(gòu)造過(guò)程
submit 類(lèi)型的 INPUT 元素的背景顏色設(shè)置為白色。在背景中使用一個(gè)圖像提供到白色的逐變,。這個(gè)圖像寬 1 像素,，并定位在容器的左下角。通過(guò)使用 repeat-x 屬性,，這個(gè)圖像水平重復(fù)顯示,，填滿容器。如果容器的大小改變了,，背景圖像會(huì)適應(yīng)這種情況,，從而創(chuàng)建我們需要的效果。
對(duì)于需要沿水平或垂直方向擴(kuò)展或收縮的簡(jiǎn)單漸變,，這種技術(shù)是有效的,。但是對(duì)于更復(fù)雜的圖像，比如邊欄的背景,，我們有意地使用比默認(rèn)顯示區(qū)域大的圖像并適當(dāng)?shù)剡M(jìn)行定位,。當(dāng)布局?jǐn)U展時(shí)，圖像的可視部分將總是可見(jiàn)的。Doug Bowman 的滑動(dòng)門(mén)技術(shù)使這種技術(shù)更加流行,。（參見(jiàn) 參考資料,。）圖 8 顯示邊欄背景的寬度如何隨著瀏覽器窗口由窄變寬。
圖 8. 窄窗口和寬窗口中的邊欄
創(chuàng)建這種效果的方法是將一個(gè)容器放在另一個(gè)容器中,，并給它們分別設(shè)置背景,。一個(gè)背景形成右上角，另一個(gè)形成左上角,。因?yàn)橥膺叺?DIV 元素限制了邊欄的尺寸,，而內(nèi)部的 DIV 會(huì)擴(kuò)展到它的父元素的整個(gè)空間，所以這兩個(gè)圖像會(huì)精確地重疊,。一個(gè)圖像非常寬,，會(huì)被外邊的 DIV 裁剪，如 圖 9 所示,。
圖 9. 創(chuàng)建邊欄背景所用的背景圖像
邊欄的結(jié)構(gòu)見(jiàn) 清單 9,。外邊的 DIV 元素的 ID 屬性值為 sidebar，這個(gè)元素包含的內(nèi)部 DIV 具有 class 屬性值 gutter,。在其中顯示 $sidebar_right 區(qū)域變量的內(nèi)容,。
清單 9. page.tpl.php 中的邊欄結(jié)構(gòu)
<div id="sidebar">
<div class="gutter">
<?php print $sidebar_right; ?>
</div>
</div>
|
清單 10 顯示如何對(duì)這兩個(gè) DIV 容器應(yīng)用樣式。形成背景右上角的寬圖像定位在 sidebar 容器的右上角,。形成背景左上角的小圖像定位在 gutter 容器的左上角,。如果邊欄的寬度增加了，兩個(gè)背景圖像就會(huì)相互錯(cuò)開(kāi)（因此稱(chēng)為 “滑動(dòng)門(mén)”）,，更多地露出下面的圖像,，如 圖 9 所示。這看起來(lái)就像是背景圖像擴(kuò)大到整個(gè)區(qū)域,。這就是許多技術(shù)使用的多層背景圖像的基本概念,。
清單 10. layout.css 中的邊欄背景樣式
#sidebar {
background: transparent url(/themes/ibc/i/bg_sidebar_right.gif) no-repeat top right;
.
.
}
#sidebar .gutter {
background: transparent url(/themes/ibc/i/bg_sidebar_left.gif) no-repeat top left;
padding: 10px 20px 0 20px;
}
|
為非傳統(tǒng)瀏覽器提供的額外內(nèi)容
第 7 部分 中討論過(guò)這個(gè)問(wèn)題。但是,，當(dāng)用戶使用傳統(tǒng)瀏覽器查看頁(yè)面時(shí),，我們?nèi)匀恍枰[藏這些額外的內(nèi)容，所以對(duì)這些容器應(yīng)用一個(gè) display: none 樣式,，其 class 值為 access,。
部分的樣式
在 第 7 部分 中，您看到了我們?nèi)绾胃鶕?jù)要顯示的 Web 站點(diǎn)部分自動(dòng)地設(shè)置 class 值,。這提供了一個(gè)非常有用的標(biāo)志,，我們可以利用 class 屬性根據(jù)部分改變 Web 站點(diǎn)的外觀。
對(duì)于 IBC 站點(diǎn),，我們希望在整個(gè) Web 站點(diǎn)上保持基本布局,，以免 IBC 的受眾感到迷惑并保持視覺(jué)上的一致性,。但是，通過(guò)使用為品牌設(shè)計(jì)的主面板,，我們可以修改某些可視元素的顏色,，從而標(biāo)識(shí)出主要部分。這些元素的一部分包含在 Web 站點(diǎn)的廣告條中,，如 圖 10 所示,。為了實(shí)現(xiàn)這種效果，我們使用 CSS 改變廣告條的背景圖像,、選擇的菜單條目旁邊的圖標(biāo)以及底邊框的顏色,。
圖 10. 每個(gè)主要 Web 站點(diǎn)部分的廣告條
首先，我們使用一種常用技術(shù)隱藏 H1 元素,，也就是隱藏了廣告條中的 Web 站點(diǎn)標(biāo)題,。（見(jiàn) 第 7 部分 中的清單 1,。）這樣就可以使用背景圖像,，而在不應(yīng)用樣式時(shí)仍然顯示文本標(biāo)題。這對(duì)于后面討論的打印樣式很有幫助,。清單 11 顯示我們隱藏 H1 文本的方法,。
清單 11. 在 header.css 中為站點(diǎn)標(biāo)題提供圖像
#banner {
background: #ddd url(/themes/ibc/i/bg_header_home.gif) no-repeat top left;
height: 100%;
overflow: hidden;
height: 61px;
}
#banner h1 {
display: none;
}
|
一個(gè)默認(rèn)的背景圖像應(yīng)用于廣告條。廣告條的尺寸是固定,，但是如果搜索表單中的文本大小增加了,，高度就會(huì)變化，背景圖像也會(huì)變大以提供另一個(gè)滑動(dòng)門(mén)效果,。然后將 H1 元素從文檔流中完全排除出去,，從而隱藏它。隱藏 H1 元素的另一種方法是,，使用樣式 text-indent: --999em 將它移動(dòng)到瀏覽器窗口之外,，這樣的話文本仍然留在文檔流中，但是用戶看不見(jiàn)它,。
我們以 Workgroups 部分為例,。因?yàn)槲覀冎?BODY 元素的 class 屬性值會(huì)設(shè)置為 workgroup，所以可以相應(yīng)地對(duì)廣告條元素應(yīng)用樣式,。清單 12 顯示了如何改變樣式來(lái)修改這個(gè)部分的外觀,。
清單 12. workgroups.css 中 Workgroup 部分的樣式
.workgroups #banner {
background: #ddd url(/themes/ibc/i/bg_header_workgroups.gif)
no-repeat top left;
}
.workgroups #nav_bar #pri_nav li#t_workgroups a {
background: transparent url(/themes/ibc/i/icon_nav_workgroups.gif)
no-repeat center left;
color: #fff;
font-weight: bold;
}
.workgroups #nav_bar #pri_nav li#t_workgroups ul li a {
background: transparent url(/themes/ibc/i/icon_nav_bullet_workgroups.gif)
no-repeat top left;
color: #d1d1d1;
}
.workgroups #nav_bar #pri_nav li#t_workgroups ul li a:hover {
color: #fff;
}
.workgroups #nav_bar, .workgroups #nav_bar #pri_nav li ul {
border-bottom: 6px solid #d50304;
}
.workgroups #footer {
border-top: 3px solid #d50304;
}
|
在這段 CSS 中可以看到，大多數(shù)樣式出現(xiàn)在主導(dǎo)航 UL 元素中,，見(jiàn) 第 7 部分 中的清單 7,。這些樣式修改 nav-bar.css 文件中的默認(rèn)樣式。在上面的 清單 12 中,，將廣告條的背景改為使用與部分相關(guān)的圖像,。然后,，修改工作組列表項(xiàng)錨元素的背景，使效果看上去像是菜單條目前面的符號(hào)改變了顏色,。為了增強(qiáng)效果,，我們修改了這個(gè)列表項(xiàng)和其中任何子列表項(xiàng)的顏色和字體粗細(xì)。還改變了子列表項(xiàng)的樣式,，讓用來(lái)創(chuàng)建符號(hào)的背景圖像顯示為對(duì)應(yīng)的顏色,。這是一種相當(dāng)簡(jiǎn)單的部分樣式。還可以使用 CSS 更充分地修改頁(yè)面的布局,。
導(dǎo)航
IBC 的主導(dǎo)航是動(dòng)態(tài)的,。導(dǎo)航的結(jié)構(gòu)使用錨元素的無(wú)序列表。為了實(shí)現(xiàn)子菜單,，我們嵌入另一級(jí) UL 元素,。第 7 部分 中的清單 7 顯示了 XHTML。按照這種方法,，在不應(yīng)用樣式時(shí),，仍然可以保持導(dǎo)航的語(yǔ)義，如 圖 11 所示,。它還使我們能夠使用 CSS 在錨元素的背景中重復(fù)顯示圖像,。因此可以輕松地添加新的菜單條目并減少下載時(shí)間。
圖 11. 不應(yīng)用樣式時(shí)的 Web 站點(diǎn)導(dǎo)航
通過(guò) CSS 使用嵌入的 UL 元素創(chuàng)建下拉菜單效果,。網(wǎng)上和出版的許多參考資料解釋了如何使用 CSS 實(shí)現(xiàn)下拉菜單,。我們選用基于 Suckerfish Dropdowns 的技術(shù)。清單 13 顯示應(yīng)用于第一級(jí) UL 元素的樣式,。
清單 13. nav-bar.css 中站點(diǎn)導(dǎo)航的第一級(jí)無(wú)序列表項(xiàng)的樣式
#pri_nav {
float: left;
display: block;
list-style: none;
margin: 0;
padding: 0 1em .5em 1em;
}
#pri_nav li {
float: left;
}
#pri_nav li#t_home {
width: 5.1em;
}
#pri_nav li#t_workgroups, #pri_nav li#t_workgroups ul li {
width: 10em;
}
#pri_nav li#t_conferences, #pri_nav li#t_conferences ul li {
width: 10em;
}
#pri_nav li#t_members, #pri_nav li#t_members ul li {
width: 8em;
}
#pri_nav li a {
background: transparent url(/themes/ibc/i/icon_nav.gif)
no-repeat center left;
border: 0;
color: #d1d1d1;
color: #e0e0e0;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-decoration: none;
text-indent: 16px;
text-transform: uppercase;
}
#pri_nav li a:hover {
color: #fff;
}
|
前兩個(gè)樣式規(guī)則設(shè)置 UL 元素,，使所有 LI 子元素水平顯示，而且前面不顯示符號(hào),。后四個(gè)樣式規(guī)則設(shè)置每個(gè)代表站點(diǎn)主要部分的 LI 元素的寬度,。它們也確保任何嵌入的下拉列表的寬度相同。圖 12 顯示以上 CSS 應(yīng)用于第一級(jí) UL 元素所產(chǎn)生的菜單效果,。
圖 12. 只對(duì)第一級(jí) UL 元素應(yīng)用樣式的導(dǎo)航
第一級(jí)列表項(xiàng)目的顯示是合適的,。但是，嵌入的 UL 元素需要正確地調(diào)整,，要顯示更好的符號(hào)圖像,，而且只當(dāng)鼠標(biāo)停留在包含它們的 LI 時(shí)出現(xiàn)。清單 14 顯示了應(yīng)用于這些嵌入的 UL 元素的 CSS,。
清單 14. nav-bar.css 中站點(diǎn)導(dǎo)航的嵌入無(wú)序列表元素的樣式
#pri_nav li {
position: relative;
}
#pri_nav li ul {
background: #000;
border-bottom: 6px solid #666;
left: -999em;
margin: 0;
padding: .7em .1em 0 .5em;
position: absolute;
top: 1.3em;
width: 10em;
}
#pri_nav li:hover ul, #pri_nav li.over ul {
left: 0;
}
#pri_nav li ul li {
float: left;
list-style: none;
width: 10em;
}
#pri_nav li ul li a {
background: transparent url(/themes/ibc/i/icon_nav_bullet.gif)
no-repeat top left;
border-top: 1px solid #333;
display: block;
font-size: 95%;
padding-left: 12px;
text-indent: 0;
text-transform: capitalize;
width: 9em;
}
#pri_nav li ul li a:hover {
color: #fff;
}
|
這段 CSS 中比較有意思的部分包含在前三個(gè)樣式規(guī)則中,。第一個(gè)規(guī)則確保可以相對(duì)于包含它們的 LI 元素對(duì)嵌入的 UL 元素進(jìn)行定位,。第二個(gè)樣式規(guī)則使用 left: -999em; 樣式將嵌入的 UL 元素定位到瀏覽器窗口的外邊,，使用戶看不到它們,。我們?cè)谶@里使用絕對(duì)定位，使這些 UL 元素脫離頁(yè)面流,，這樣它們的高度就不會(huì)添加到包含它們的元素的高度中,。如果在這里使用相對(duì)定位，就會(huì)出現(xiàn) 圖 13 所示的情況,。這里的最后三個(gè)樣式規(guī)則對(duì)齊文本并應(yīng)用樣式,，還為代表下拉列表的嵌入元素提供新的背景圖像。
圖 13. 在 nav-bar.css 中對(duì) #pri_nav li ul 選擇器使用相對(duì)定位的效果
清單 14 中的第三個(gè)樣式規(guī)則使下拉菜單出現(xiàn),，它將嵌入的 UL 元素從瀏覽器窗口外邊移動(dòng)回包含它的 LI 元素下面并對(duì)齊,。
現(xiàn)在，下拉菜單的樣式完整了,。圖 14 顯示當(dāng)鼠標(biāo)停留在 MEMBERS 鏈接上時(shí)的效果,。
圖 14. 在完成的下拉菜單上，鼠標(biāo)停留在鏈接上的效果
到編寫(xiě)本文時(shí)為止,，Internet Explorer（IE）在 LI 元素上還不支持 hover 偽類(lèi)。在 清單 14 中,，可以看到選擇器 #pri_nav li.over ul,。IE 使用 over 類(lèi)來(lái)找到嵌入的 UL 元素。這些類(lèi)可以以手工方式放進(jìn)導(dǎo)航 XHTML 中,。或者,，按照 Suckerfish Dropdown 技術(shù),，用 onload 事件觸發(fā)一小段 JavaScript，這段代碼解析 DOM 并在包含的 LI 元素中插入 over 類(lèi),。
切換布局
在參與 IBC 的用戶之間的通信和協(xié)作很重要,，而且這個(gè) Web 站點(diǎn)的需求之一是提供查看成員配置文件的不同方式。我們利用選項(xiàng)卡,，根據(jù) IBC 成員所屬的公司或在 Web 站點(diǎn)上的角色進(jìn)行查看,。我們的用戶測(cè)試表明，提供每個(gè)成員的照片是一項(xiàng)有價(jià)值的特性,，如 圖 15 所示,。
圖 15. Web 站點(diǎn)成員的照片布局
但是，IBC 站點(diǎn)管理員認(rèn)為查看更傳統(tǒng)的列表視圖（如 圖 16 所示）更合適,，這樣可以更快地看到更多的用戶信息,。
圖 16. Web 站點(diǎn)成員的緊湊布局
內(nèi)容基本上是相同的，但是成員數(shù)據(jù)的布局很不一樣,。因?yàn)榭梢允褂?CSS 控制這兩種布局,，所以我們選用一種簡(jiǎn)單的樣式切換技術(shù),。
我們已經(jīng)有了一個(gè)樣式表 members.css，它處理照片布局的樣式,。為了創(chuàng)建緊湊布局的樣式表,，我們?cè)谕荒夸浿袕?fù)制這個(gè)文件，并將它重命名為 members_alt.css,。
因?yàn)檫@組替代的成員樣式可以與常規(guī)樣式表組合在一起,，我們?cè)谕荒夸浿袕?fù)制 screen.css，并將它重命名為 screen_alt_members.css,。在這個(gè)文件中,，將 members.css 的包含語(yǔ)句（見(jiàn) 清單 1）替換為 members_alt.css。
為了完成這個(gè)過(guò)程并向?yàn)g覽器提供替代樣式,，我們?cè)?page.tpl.php 中的頁(yè)面頭部分中添加一個(gè)新的 LINK 元素,。清單 15 顯示這個(gè) LINK 元素以及在這兩者之間 title 屬性的差異。
清單 15. 在 page.tpl.php 中定義替代樣式
<link rel="stylesheet"
type="text/css"
media="screen"
href="themes/ibc/c/screen.css"
title="Default layout"/>
<link rel="alternate stylesheet"
type="text/css"
media="screen"
href="themes/ibc/c/screen_alt_member.css"
title="Alternate member layout"/>
|
瀏覽器會(huì)發(fā)現(xiàn)存在對(duì)這個(gè) Web 站點(diǎn)應(yīng)用樣式的替代方式,，并允許訪問(wèn)者通過(guò)瀏覽器界面選擇這種新的顯示方式,，如 圖 17 所示。
圖 17. 通過(guò) Firefox 瀏覽器界面切換樣式
但是,，某些瀏覽器不能識(shí)別替代樣式,；我們?nèi)匀恍枰诔蓡T部分中提供一個(gè)可視線索，表明可以切換樣式并允許用戶激活布局改變,。有多種方法可以滿足這種需求,，但是我們選用的方法基于 Paul Sowden 描述的技術(shù)（參見(jiàn) 參考資料。）
在控制成員節(jié)點(diǎn)列表的布局的模板中,，我們添加了兩個(gè)鏈接,。如 清單 16 所示，這些錨元素包含 onclick 觸發(fā)器,，它們調(diào)用 setActiveStyleSheet JavaScript 函數(shù),。
清單 16. 切換樣式的鏈接
<span class="actions common"><a
href="#" onclick="setActiveStyleSheet('Default layout');return false;"
title="Display the member information using member photographs">Photo layout</a>
</span>
<span class="actions common"><a href="#"
onclick="setActiveStyleSheet('Alternate member layout');return false;"
title="Display the member information using a compact layout">Compact layout</a>
</span>
|
這些 JavaScript 代碼解析 DOM 中 media 屬性值為 screen 的 LINK 元素，并在與 setActiveStyleSheet 函數(shù)傳遞的 title 屬性不匹配的 LINK 元素上設(shè)置 disable 屬性,。這一選擇存儲(chǔ)在 cookie 中,，以便保存活動(dòng)樣式表的狀態(tài)。
打印媒體的樣式
IBC 站點(diǎn)上存儲(chǔ)著許多參考資料,。我們最初的用戶測(cè)試表明,，許多 IBC 成員喜歡把資料打印出來(lái)供離線查看，比如研討會(huì)議程和會(huì)議資料,。設(shè)計(jì) Web 內(nèi)容的打印版本的樣式是很重要的,。通過(guò)使用打印媒體專(zhuān)用的樣式，我們能夠在大多數(shù)打印設(shè)備上創(chuàng)建便于閱讀的布局。
下面兩個(gè)圖都是 IBC Web 站點(diǎn)上的研討會(huì)頁(yè)面,，圖 18 是 Web 站點(diǎn)上的樣式,，圖 19 是使用打印媒體專(zhuān)用樣式表的輸出。
圖 18. 包含議程的研討會(huì)頁(yè)面
圖 19. 圖 18 中 Web 頁(yè)面的打印形式
在為打印媒體設(shè)計(jì)樣式時(shí),，有幾個(gè)問(wèn)題,。
- 使用實(shí)際打印機(jī)進(jìn)行測(cè)試的成本高而且費(fèi)時(shí)間。
- 通常,，無(wú)法找來(lái)許多種打印設(shè)備進(jìn)行測(cè)試,。
- 需要考慮在單色打印機(jī)上進(jìn)行打印的情況，這種打印機(jī)只使用有限的灰色色譜,。
- 打印機(jī)有時(shí)候無(wú)法打印出很亮的顏色,。高亮顯示的信息就會(huì)丟失。需要?jiǎng)?chuàng)建顯示這些信息的替代方法,。
- 大多數(shù)打印設(shè)備沒(méi)有像 Web 瀏覽器那樣提供改變字體大小或進(jìn)行縮放的方法,。需要使用一種便于大多數(shù)人閱讀的基本字體大小。
- 在 Web 頁(yè)面上有意義的某些信息（比如超鏈接或表單）在打印的頁(yè)面上可能沒(méi)有意義,。
- 因?yàn)槲覀兊?Web 頁(yè)面布局是流式的,，用戶可以改變?yōu)g覽器窗口的大小來(lái)形成更合適的顯示方式。標(biāo)準(zhǔn)的打印頁(yè)面沒(méi)有提供這種靈活性,。
- 標(biāo)準(zhǔn)的打印頁(yè)面在垂直方向上要換頁(yè),。需要決定某些內(nèi)容塊（比如邊欄信息）應(yīng)該如何放置在頁(yè)面上。
- 打印媒體專(zhuān)用的樣式在現(xiàn)代瀏覽器上還沒(méi)有完全實(shí)現(xiàn),。因此,，在進(jìn)行換頁(yè)（使用
page-break-before、page-break-inside 和 page-break-after 樣式）等設(shè)置時(shí)要謹(jǐn)慎,。在一種流行的瀏覽器的某一版本中,，使用換頁(yè)會(huì)破壞布局。
創(chuàng)建打印媒體樣式表
我們?cè)谄渌麡邮奖硭诘哪夸浿袆?chuàng)建一個(gè)新的樣式表,，print.css。為了將這個(gè)樣式表提供給瀏覽器,，我們?cè)?page.tpl.php 模板文件中 清單 15 所示的元素前面添加了另一個(gè) LINK 元素,。清單 17 顯示這個(gè)元素，它將 media 屬性值設(shè)置為 print,，從而表明這個(gè)樣式表的用途,。
清單 17. 在 page.tpl.php 中包含打印媒體專(zhuān)用樣式
<link rel="stylesheet"
type="text/css"
media="print"
href="themes/ibc/c/print.css" />
|
當(dāng)然，如果定義了 media 屬性值為 all 的 screen.css,，并將這個(gè) LINK 放在它后面,，打印樣式就會(huì)繼承所有屏幕樣式。但是,，為了保持更大的控制能力,，我們決定不這么做,。
對(duì)打印機(jī)友好的內(nèi)容
我們以 IBC Announcement 頁(yè)面為例說(shuō)明我們?nèi)绾卧O(shè)計(jì)打印樣式。圖 20 突出顯示了 Web 站點(diǎn)標(biāo)題和公告的實(shí)際內(nèi)容,，因?yàn)樗鼈円呀?jīng)經(jīng)過(guò)轉(zhuǎn)換,，可以適應(yīng)打印媒體。頁(yè)面其余部分顯示的鏈接僅僅是隱藏 Web 站點(diǎn)上的信息,、提供到這些信息的鏈接或觸發(fā)對(duì)這些信息的操作,，而沒(méi)有提供其他功能。
圖 20. 標(biāo)題（A）和內(nèi)容（B）已經(jīng)經(jīng)過(guò)轉(zhuǎn)換,，可以適應(yīng)打印媒體
語(yǔ)義標(biāo)記的作用
您可以想像到，對(duì)于每種新的媒體類(lèi)型,，都需要對(duì)所有東西重新設(shè)置樣式,。但是，如果使用正確的 XHTML 元素為內(nèi)容提供語(yǔ)義意義,，就會(huì)獲得其他一些好處,。圖 1 顯示了無(wú)樣式的站點(diǎn)的外觀，其中沒(méi)有廣告條,、搜索條,、可訪問(wèn)性信息、導(dǎo)航和邊欄,。這為 Web 站點(diǎn)創(chuàng)建了一個(gè)非常干凈的可打印的布局,。正確地使用標(biāo)記會(huì)使內(nèi)容保持可讀性，而且不需要做很多重新樣式化工作就可以建立合理的打印媒體輸出,，從而在大多數(shù)打印設(shè)備上產(chǎn)生不錯(cuò)的效果,。
基本布局
那么，如何開(kāi)始設(shè)計(jì)打印樣式呢,？首先要定義一個(gè)基本字體系列和字體大小,。盡管可以定義背景顏色、字體顏色和空白邊,，但是我們保持打印設(shè)備的默認(rèn)設(shè)置,。下一項(xiàng)工作是隱藏 Web 頁(yè)面上對(duì)打印媒體沒(méi)有意義的那些區(qū)域。如上面的 圖 20 所示,，我們只使用站點(diǎn)標(biāo)題和頁(yè)面的主要內(nèi)容區(qū)域,。清單 18 顯示最初的基本樣式。
清單 18. print.css 中的基本打印樣式
body {
font: 12pt Georgia, "Times New Roman", Times, serif;
}
#nav_bar, #sidebar, #footer {
display: none;
}
.action, .more, .return_top, .tabs, .index {
display: none;
}
|
字體樣式使用 12pt 值,，這是常用的打印媒體字體大小,。我們選用標(biāo)準(zhǔn)的 serif 字體以保持可讀性。第二個(gè)和第三個(gè)樣式規(guī)則隱藏那些在打印文檔中不需要的內(nèi)容部分。
測(cè)試打印樣式
使用可用的打印設(shè)備測(cè)試打印樣式是個(gè)好主意,。但是,，往往要經(jīng)過(guò)很多次迭代才能獲得需要的顯示效果，因此會(huì)在等待打印方面浪費(fèi)很多時(shí)間,，還會(huì)浪費(fèi)紙張,。更好的方法是使用大多數(shù)瀏覽器上都有的打印預(yù)覽選項(xiàng)，如 圖 21 所示,。
我們發(fā)現(xiàn)瀏覽器在應(yīng)用打印樣式方面存在一些差異,，但是這些差異比屏幕媒體樣式遇到的差異少得多。Web Developer extension for Firefox 這樣的插件（參見(jiàn) 參考資料）允許使用 XHTML 中定義的不同媒體類(lèi)型來(lái)查看 Web 頁(yè)面,。但是,，我們發(fā)現(xiàn)打印預(yù)覽選項(xiàng)可以更可靠地顯示打印頁(yè)面的外觀。當(dāng)然,，真正的測(cè)試是實(shí)際打印 Web 頁(yè)面,。按照這種方式，可以只在頁(yè)面的打印預(yù)覽效果令人滿意時(shí)進(jìn)行實(shí)際打印,。
圖 21. 公告的打印預(yù)覽
調(diào)整打印樣式
可以很快地建立合理的 Web 內(nèi)容打印樣式,，但是我們發(fā)現(xiàn)有許多小的調(diào)整可以提高可讀性。例如,，在標(biāo)題上應(yīng)用邊框樣式有助于提高可讀性,。下面列出了對(duì) IBC 站點(diǎn)的打印樣式的幾處修改。
空白
瀏覽器的默認(rèn)打印樣式會(huì)創(chuàng)建可讀性很好的文檔,。但是,，我們發(fā)現(xiàn)元素之間的一些空白邊不理想。例如,，我們?cè)黾恿硕温渲車(chē)目瞻滓蕴岣呖勺x性,。清單 19 顯示應(yīng)用于 P 元素的樣式，這個(gè)樣式會(huì)調(diào)整段落上下的空間,。
清單 19. print.css 中的段落調(diào)整
鏈接
我們提到過(guò),，鏈接在打印媒體上下文中不提供有意義的信息。根據(jù)讀者需求的不同,，這可能是有爭(zhēng)議的,。您可能希望強(qiáng)調(diào)某些鏈接到其他 Web 文檔的單詞或短語(yǔ)。這可能應(yīng)該采用下劃線形式,，因?yàn)榇煮w和斜體文本是常用的打印強(qiáng)調(diào)技術(shù)，使用它們可能會(huì)使內(nèi)容的含義產(chǎn)生混淆,。也可以考慮使用顏色,，這在下面討論。另一種技術(shù)是將鏈接的 URL 打印在相關(guān)文本的后面。清單 20 顯示我們?nèi)绾问褂?after 偽元素和 content 樣式顯示鏈接的 URL,。
清單 20. 在鏈接文本后面顯示 URL
a:link:after, a:visited:after {
content: "[link:"attr(href)"]";
font-size: 90%;
}
|
圖 22. Web 頁(yè)面上和打印頁(yè)面上的 IBC 鏈接
如果在 XHTML 鏈接中使用相對(duì) URL,，那么打印版本可能會(huì)使讀者覺(jué)得迷惑。與相對(duì) URL forum 相比,，絕對(duì) URL http://:96/forum 在這個(gè)上下文中更合適,。
顏色
我們希望 IBC 內(nèi)容在盡可能多的打印設(shè)備上有良好的打印效果，所以希望控制打印顏色的方式,。例如,，用來(lái)在表格數(shù)據(jù)中標(biāo)識(shí)間隔行或強(qiáng)調(diào)研討會(huì)議程的某些部分的色帶?？梢允褂门c屏幕樣式相同的顏色定義,，讓打印設(shè)備以默認(rèn)方式將它們顯示為不同的灰色底紋。但是,，通過(guò)在樣式中定義顏色,，可以定義更好的灰色底紋。
顏色的另一個(gè)用途是顯示某些實(shí)體（比如 IBC 成員）的狀態(tài),。在 Web 站點(diǎn)上,，以一種顏色突出顯示只有操作人員能夠看到的成員。為了在打印頁(yè)面上體現(xiàn)這種效果,，我們使用與 清單 21 相似的技術(shù)添加一些說(shuō)明性文本,，如 圖 23 所示。
清單 21. 顯示不可見(jiàn) IBC 成員的狀態(tài)
.member_summary.hl_red .fn:before {
content: "(Not visible) ";
}
|
圖 23. Web 頁(yè)面上和打印頁(yè)面上的不可見(jiàn) IBC 成員
隱藏的和鏈接的信息
使用 CSS 隱藏和顯示內(nèi)容是非常容易的,，因此可以在打印的內(nèi)容中添加在其他頁(yè)面中沒(méi)有的信息,。例如，對(duì)快捷鍵進(jìn)行解釋的可訪問(wèn)性內(nèi)容和研討會(huì)議程頁(yè)面,。
在提供給研討會(huì)頁(yè)面的模板文件的節(jié)點(diǎn)對(duì)象中,，不只包含議程，還有研討會(huì)地點(diǎn)等會(huì)務(wù)信息,。在屏幕樣式表（conference.css）中,，我們隱藏了 DIV 元素中的會(huì)務(wù)信息，但是提供了到包含會(huì)務(wù)信息的另一個(gè)頁(yè)面的鏈接,。在打印樣式表中,，顯示會(huì)務(wù)信息，讓讀者能夠在頁(yè)面上了解到關(guān)于研討會(huì)的更多信息,。但是,，這種做法以不一致的方式顯示信息，可能會(huì)引發(fā)某些有趣的爭(zhēng)議,。
換頁(yè)
某些信息的顯示可能需要在頁(yè)面之間進(jìn)行符合邏輯的分隔,。換頁(yè)樣式（page-break-before,、page-break-inside 和 page-break-after）提供了在 CSS 中控制分隔方式的辦法。
我們對(duì)每個(gè)包含一天中的議程的表格使用 page-break-before 樣式,。打印效果的可讀性很好,，但不幸的是，在某個(gè)流行的瀏覽器版本上進(jìn)行測(cè)試時(shí),，這會(huì)破壞整個(gè)布局,。我們認(rèn)為這個(gè) bug 現(xiàn)在已經(jīng)修復(fù)了，但是這使我們意識(shí)到某些打印樣式特性在瀏覽器中還沒(méi)有完全實(shí)現(xiàn),。
預(yù)期和測(cè)試
向包含動(dòng)態(tài)內(nèi)容的 Web 站點(diǎn)應(yīng)用樣式不是一件輕松的工作,。包含靜態(tài)內(nèi)容的 Web 站點(diǎn)提供了一個(gè)可應(yīng)用 CSS 的非常穩(wěn)定的基礎(chǔ)。這里不會(huì)有導(dǎo)致 XHTML 結(jié)構(gòu)發(fā)生更改（進(jìn)而有可能影響 CSS 效果）的異常內(nèi)容,。例如,，IBC 站點(diǎn)的內(nèi)容編輯可能會(huì)決定將一個(gè)文檔中的某些文本剪切到新公告的某個(gè)字段中。主題設(shè)計(jì)人員無(wú)法預(yù)測(cè)這些被剪切的內(nèi)容是什么,！這種內(nèi)容結(jié)構(gòu)的變化是否會(huì)導(dǎo)致某些 XHTML 標(biāo)記未正常關(guān)閉,？?jī)?nèi)容是否會(huì)超過(guò)特定的長(zhǎng)度，使文本顯示未能填充到頁(yè)面的某些元素中,？?jī)?nèi)容中是否有在頁(yè)面上無(wú)法正常顯示的特殊字符,？在某種程度上對(duì)內(nèi)容進(jìn)行限制，以及使用最大字段長(zhǎng)度和 tinyMCE 來(lái)控制用戶輸入是有幫助的,。但是,，意外情況還是會(huì)發(fā)生。
隨著在系統(tǒng)中添加更多的角色,，并根據(jù)這些角色修改用戶看到的內(nèi)容,，內(nèi)容結(jié)構(gòu)和顯示方式的不確定性就會(huì)增加。那么,，如何處理這些意外情況呢,？如果主題設(shè)計(jì)人員不可能精確地預(yù)測(cè)內(nèi)容結(jié)構(gòu)的變化，至少應(yīng)嘗試通過(guò)預(yù)期和測(cè)試預(yù)測(cè)出 80% 的情況,。
在 第 7 部分 中,，我們討論了為內(nèi)容的語(yǔ)義提供邏輯分隔的有效容器。對(duì)于包含靜態(tài)內(nèi)容的站點(diǎn),，只需將 id 或 class 屬性應(yīng)用于這些容器,，就可以對(duì)它們應(yīng)用樣式。但是,，向內(nèi)容可變的站點(diǎn)應(yīng)用樣式時(shí),，主題設(shè)計(jì)人員常常需要對(duì)模板中的內(nèi)容結(jié)構(gòu)進(jìn)行迭代，添加更多的 id 和 class 屬性,，或者在外邊加上額外的 DIV 和 SPAN 元素來(lái)控制顯示方式,。通過(guò)預(yù)測(cè)變化的內(nèi)容的效果,，可以降低這些迭代的復(fù)雜程度。Zen Garden 使用的模板就是一個(gè)很好的例子,。（參見(jiàn) 參考資料。）
測(cè)試
為了測(cè)試這些預(yù)期的效果,，我們需要數(shù)據(jù),、用戶及其適用角色。用測(cè)試數(shù)據(jù)填充 Drupal 站點(diǎn)是有幫助的,，但是在開(kāi)發(fā)階段如果能夠使用真實(shí)數(shù)據(jù),，就能更好地表現(xiàn) Web 站點(diǎn)的情況。當(dāng)然,，如果您是在對(duì) Web 站點(diǎn)進(jìn)行重新設(shè)計(jì),，就可能有足夠的真實(shí)數(shù)據(jù)，可以從舊站點(diǎn)遷移到 Drupal 數(shù)據(jù)庫(kù)中,。對(duì)于 IBC 站點(diǎn),，在這個(gè)開(kāi)發(fā)階段，我們要求客戶開(kāi)始輸入真實(shí)數(shù)據(jù),。這不但為我們提供了開(kāi)始進(jìn)行主題樣式設(shè)計(jì)所需的數(shù)據(jù),，而且還有以下好處：
- 訓(xùn)練客戶使用 Drupal 管理界面
- 對(duì)新模塊進(jìn)行測(cè)試
- 調(diào)整內(nèi)容的結(jié)構(gòu)化布局
- 從客戶那里獲得有價(jià)值的反饋
- 了解客戶的操作方式
結(jié)束語(yǔ)
在本文中，您學(xué)習(xí)了如何建立結(jié)構(gòu)符合語(yǔ)義的 Web 站點(diǎn),，以及使用 CSS 實(shí)現(xiàn)所需的屏幕和打印樣式,。還學(xué)習(xí)了這個(gè)團(tuán)隊(duì)如何對(duì)它的樣式表進(jìn)行組織、幾種基于標(biāo)準(zhǔn)的樣式技術(shù)和測(cè)試方法,。
本系列中的下一篇文章描述 Drupal 數(shù)據(jù)庫(kù)抽象層,，以及如何使用 DB2 Express-C 替代 MySQL 或 PostgreSQL。
參考資料
學(xué)習(xí)
- 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 ,。
- 訂閱 這個(gè)系列的 RSS feed,。（進(jìn)一步了解 RSS。）
- 進(jìn)一步了解這個(gè) 系列,。在這個(gè)系列中,，Internet Technology Group 團(tuán)隊(duì)描述一個(gè)需要定制 Web 站點(diǎn)的虛構(gòu)的組織，這個(gè) Web 站點(diǎn)包含文檔存儲(chǔ),、討論組,、專(zhuān)門(mén)的工作組、研討會(huì)日程安排,、日程議題描述等功能,。
- tinyMCE in Drupal：學(xué)習(xí)這個(gè) Drupal 模塊如何將 TinyMCE WYSIWYG 編輯器集成到 Drupal 站點(diǎn)中，用來(lái)編輯站點(diǎn)內(nèi)容,。
- Web Developer plug in for Firefox：學(xué)習(xí)如何使用各種 Web Developer 工具在瀏覽器中添加菜單和工具條,。
- Zen Garden：學(xué)習(xí)關(guān)于 CSS 設(shè)計(jì)的更多知識(shí),。
- Alternative Style - Working With Alternate Style Sheets：通過(guò) Paul Sowden 的文章了解一種在不同瀏覽器上動(dòng)態(tài)地切換樣式表的方法。
- Going to Print：通過(guò) Eric Meyer 的文章了解關(guān)于創(chuàng)建媒體專(zhuān)用樣式的更多信息,。
- Suckerfish Dropdowns：通過(guò) Patrick Griffiths 和 Dan Webb 的文章了解關(guān)于下拉菜單的更多信息,。
- 訪問(wèn) Eric Meyer 的 Web 站點(diǎn)，這里提供了關(guān)于瀏覽器默認(rèn)樣式的更多細(xì)節(jié),。
- Sliding Doors of CSS, Part 2：通過(guò) Douglas Bowman 的這篇文章了解如何使用簡(jiǎn)單的,、基于文本的語(yǔ)義標(biāo)記創(chuàng)建精美的界面元素。
- CSS Mastery: Advanced Web Standards Solutions ：作者是 Budd,、Moll 和 Collison,，書(shū)中介紹了尖端的 CSS 開(kāi)發(fā)技術(shù)。
- Designing with Web Standards, 2nd Edition ：Jeffrey Zeldman 所著的這本書(shū)改變了設(shè)計(jì) Web 站點(diǎn)的方式。
- Web Standard Solutions: The Markup and Style Handbook ：作者是 Dan Cederholm。
- A List Apart：這里有許多為 Web 站點(diǎn)設(shè)計(jì)人員準(zhǔn)備的文章,。
- CSS Discuss：這個(gè)郵件列表專(zhuān)門(mén)討論 CSS 以及在真實(shí)環(huán)境中使用它的方法,。
- CSS Organization Tip 1: Flags：Douglas Bowman 的一篇 blog 文章。
- 在 technology bookstore 尋找相關(guān)技術(shù)主題的圖書(shū)。
- 隨時(shí)關(guān)注 developerWorks 技術(shù)活動(dòng)和網(wǎng)絡(luò)廣播。
獲得產(chǎn)品和技術(shù)
- 使用 IBM 試用軟件 構(gòu)建您的下一個(gè)開(kāi)發(fā)項(xiàng)目，這些軟件可以從 developerWorks 直接下載,。
討論
作者簡(jiǎn)介
|
|
|
|
Alister Lewis-Bowen 是 IBM 的 Internet Technology Group 的高級(jí)軟件工程師,。他從 1993 年開(kāi)始作為 IBM 英國(guó)職員從事互聯(lián)網(wǎng)和 Web 技術(shù)方面的工作。Alister 后來(lái)到美國(guó)為 IBM 贊助的體育活動(dòng)的 Web 站點(diǎn)工作,，之后成為 ibm.com 的高級(jí)網(wǎng)管,。他當(dāng)前正在幫助創(chuàng)建語(yǔ)義 Web 原型?？梢酝ㄟ^(guò) [email protected] 聯(lián)系 Alister,。
|
|
|
|
|
Stephen Evanchik 是 IBM 的 Internet Technology Group 的軟件工程師。他是許多開(kāi)放源碼軟件項(xiàng)目的代碼貢獻(xiàn)者,，其中最著名的是 Linux 內(nèi)核中的 IBM TrackPoint 驅(qū)動(dòng)程序,。Stephen 當(dāng)前從事語(yǔ)義 Web 技術(shù)?？梢酝ㄟ^(guò) [email protected] 聯(lián)系 Stephen,。
|
|
|
|
|
Louis Weitzman 是 IBM 的 Internet Technology Group 的高級(jí)軟件工程師。他從事設(shè)計(jì)和計(jì)算已經(jīng)有 30 年了,。他曾經(jīng)幫助開(kāi)發(fā) ibm.com 使用的基于 XML 片段的內(nèi)容管理系統(tǒng),，當(dāng)前正在從事將設(shè)計(jì)過(guò)程融入新項(xiàng)目的工作?？梢酝ㄟ^(guò) [email protected] 聯(lián)系 Louis,。 | |
|
