Stephanie Sullivan
www.communitymx.com
www.violetsky.net
Adrian Senior
www.webade.co.uk
www.communitymx.com
- cgi">Send feedback
- Get an e-mail update of new articles
目的
在新聞組中, 經常有問題問到如何能在打印情況下依然能組織良好。從前, 開發者需要通過為站點中的所有網頁分別創建一個僅包含文本和相關圖像的副本來達到這個目的。CSS 完全改變了這樣的狀況。 在 Community MX 中, 我們已經通過層疊樣式表為打印單獨指定樣式表的特性而得益。由於 Community MX 有大量的教程, 這樣做能大大地節省時間。跟上來看看決定背後的原因和方法。
本文將會分析我們的布局是如何在屏幕上顯示一套元素, 而當打印時使用一套包含沒有顯示在屏幕上元素的布局。你將會學習媒體類型以及如何利用它們，還有就是使用層疊技巧來創建輕量級、實用的打印布局。由於Community MX 經常性更改它的站點, 如果你在本文發布幾個月後閱讀它，有些東西可能會有少許不同。
要求
要完成本教程，你需要安裝下面的軟件和文件:
Dreamweaver MX 2004
- vcenter_dw_try">
Try - vcenter_dw_buy">
Buy
Media 屬性: Screen, Print, 和 All
在 Community MX, 由於用戶主要由網頁開發者組成, 我們決定不在站點上支持Netscape 4 (NN4) 和 Internet Explorer 4 (IE 4) 浏覽器。你將不會在本文中看到兼容老式浏覽器的示例, 但你會知道假如你要提供NN4支持的話，媒體類型是如何影響它的。一共有九種媒體描述符來讓你為不同的設備上自定義顯示方式。如果你還對媒體類型以及它們的應用不太熟悉, 查看Stephanie Sullivan 在Community MX上的文章 media types。
我們的網站使用了三個不同的樣式表來控制每個教程。每個XHTML文檔都鏈接到媒體類型設置為all的主樣式表(cmxlayout.css) 。這指明了所有的設備都會使用這個樣式表。然後我們把主打印樣式表(newprint.css) 的媒體類型設置為 print。這指示浏覽器在打印預覽和打印時應用它。除了 newprint.css中的內容以外，我們把cmxlayout.css 中的所有選擇符用在了打印中，原因是層疊規則以及它的媒體類型—— all。 我們只需為那些需要在打印時被隱藏或更改的選擇符使用 newprint.css 。
注: NN4 僅理解沒有指定媒體類型或指定為screen 的媒體類型的CSS文檔。它無法理解 all 媒體類型。 因此, 如果您希望 NN4 能看到樣式, 你必須使用這裡其中一個方法。 IE4 能夠讀取媒體類型為 all的css。如果一定要支持那麼老的浏覽器, 你可能需要用javascript的方法或通過包含的方式來隱藏媒體類型為 all 的 CSS。請記住當打印的時候，媒體類型為 screen 的樣式表將不會參與打印的樣式層疊。為此,你需要重寫所有在 screen 樣式表中出現的選擇符，將其轉移到 print 樣式表中以便令它們能用於打印。
我們在 Community MX 上使用的第三個樣式表(pdfprint.css) 用於從每篇文章或教程中動態創建 PDF 文檔。由於 PDF 文檔和文檔打印時使用相同的樣式表, 我們於是用ColdFusion 設計了一個動態的方法來指定我們所需的樣式表。使用這三個樣式表的優點在於我們能從一個集中位置統籌全局— 那些 XHTML 文檔。如果我們需要更改一篇教程，我們只需簡單快速地修改XHTML文檔。然後，得益於 CSS 的力量, 我們能夠立即創建一份PDF，CSS會自動照看屏幕和打印版本。
順序是很重要的
基於層疊的原因, 在X/HTML文檔頭部鏈接的樣式表的順序,會影響到在所有設備的處理效果。由於 cmxlayout.css 使用了 all 媒體類型, 它在繼承順序中處於最上層。 任何顯示信息的設備都將訪問這個文件。當有一天, 手持設備對CSS提供更多支持時, 我們將很可能添加一個使用handheld 媒體類型的樣式表來在那些設備上重新格式化信息。如果用了 handheld 樣式表的話, 它會跟隨在主樣式表後。下一步, 我們放置了newprint.css so 以便它也可以通過繼承 cmxlayout.css 得到好處。最後,我們還設置了動態的 PDF樣式表, 你在這裡是看不到的。PDF 樣式表將對PDF使用用一個與打印樣式稍有不同的、包含更豐富色彩的外觀。它看起來更像是屏幕與打印版本的混合體。下面是以正確順序排列(XHTML格式) 的樣式表:
這是由上面各樣式表分別處理後的同一個頁面.
圖 1. 兩個使用不同樣式表的頁面版本
正如您看到的, 兩個頁面外觀不同但內容一樣。 打印時用戶不需要導航元素、廣告或者是邊欄的信息。因為他只是對教程的內容感興趣。記住了這一點，你就會移除那些不需要的元素來建立一個干淨的、有意義的打印樣式。下面，看看我們是如何創建這些的。
從打印樣式表中隱藏元素
在Community MX, 站點的左列包含了最新訂閱、免費內容以及可訪問性工具等信息。這些信息位於一個 id 為 #infodiv的div元素中。該選擇符在 cmxlayout.css, 是這樣定義的:
#infodiv{ position: absolute; top: 160px; left: 7px; width: 10em; z-index: 1;background-color: #fff; color: #036; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}要在 newprint.css中將該元素完全移除，只需在newprint.css 重新定義 #infodiv 選擇符, 如下所示:
#infodiv{ display: none;}這很簡單也很容易從字面上看出意義。你只需簡單的把 display:none 說明給浏覽器知道, 就能從打印顯示中移除 #infodiv 。要保持 newprint.css 簡潔精悍, 把你希望在打印時隱藏的全部選擇符組合起來，通過一個逗號和空格將它們分開。在本例中，我們隱藏 cmxlayout.css, 中的元素如下。
#nav, #logo, #infodiv, #blue, #subbar, #menufooter, #tall, #ads, #sbg, #cacheit, .feedback{ display: none;}注意: 您可能會想知道為什麼我們要用 display:none 而不是由看起來效果應該相同的 visibility:hidden 來做同樣的事情。這兩種方法都能防止元素的顯示 , 但是 visibility 屬性會保留元素原來占有的空間。而 display 屬性不會留下空位, 在這個情況下我們更希望這種效果—這個也是需要記住的。
優化頁面元素
當在 newprint.css 當中刪除或優化元素時, 使用與原樣式表一模一樣的選擇符名稱是必須的。盡管事實上, 選擇符 div#articlecontent 和一個 ID 為 #articlecontent 的div選擇的是同一個對象, 有時它們會在打印樣式表中導致問題發生。 div#articlecontent 選擇符在某些情況下將 無法 覆蓋原有的 #articlecontent 選擇符。所以當要重新定義一個在 #articlecontent div中的H1元素時, 即使可能頁面中就只有這一個在 #articlecontent div 中的 H1 , 你還是應該寫 #articlcontent h1—正如原樣式表裡的一樣。請在這一點上相信我們; 不然你可能會花費數小時來查找哪裡出了問題!
外邊距和寬度
由於在 Community MX 中的教程處於一個id 為 #articlecontent 的div中 , 我們就需要針對它在 newprint.css中進行最多的修改。我們希望用戶打印的內容富有平衡感而且能吸引人。請記住你現在是個打印設計師。因此, 你現在要通過英寸和點數來代替像素作為度量單位，以取得恆定的結果。請記住在打印頁面上的外邊距(margin)是由用戶的打印機設置決定的。在朋友或者同事的電腦上進行反復測試是很好的方法，以便能盡可能檢驗設計能在多數的設置下正常。
我們把 #articlecontent div設為7英寸寬。我的測試顯示這個設置能在我們中正常工作。我們把頂邊距(top-margin)和底邊距(bottom-margin)設置為0，而把兩側邊距設置為 auto。 這樣做我們就不會增加打印機本來設置的邊距了。注意到我們把字體顏色重設為黑色。如果你不太熟悉在我們多數選擇符中出現的那些快捷 CSS 屬性寫法, 你可能會覺得John Gallant 和 Holly Bergevin的 Writing Efficient CSS 會很有幫助。
#articlecontent { color: #000; width: 7in; padding: 0; margin: 0 auto;}更換 Logo
在打印版本中的簡化 logo 其實一直都存在於 XHTML 文檔中。只是正如我們從打印視圖中隱藏一樣，我們用了 display:none 方法在 cmxlayout.css 中從屏幕上隱藏了打印版的logo。下面的選擇符隱藏了打印版logo。
#printlogo{ display: none;}When a browser uses newprint.css, #printlogo takes its proper position at the head of the page and hides the screen logo (#logo).
#logo{ display: none;}由於 #printlogo 本來是隱藏的, 正常的層疊規則會保持它的原狀, 所以我們必須在 newprint.css改變該選擇符的聲明。 如下所示。
#printlogo{ display: block;}注意: 如果您使用了絕對定位的層，你必須把它們在打印樣式表中放回到文檔流中,記得把它們改成 position:static 來覆蓋 position:absolute。你可能也需要設置 width:auto 聲明。記得更改他們以後要繼續測試這些變更。
優化字體
Sans-serif 字體在屏幕上看起來很棒, 但是什麼才在打印頁上是最好的? 有很大的原因使書本不用 Verdana, Lucida Grande, 或 Arial 來印刷。 在打印時，Serif字體能更好的幫助眼睛辨識字母形狀。把你的打印頁面的字體改成像 Times New Roman 那樣的Serif字體能讓你的頁面比用你的默認屏幕字體更好看、更易讀。
我肯定你已經聽說過像素和點數之爭了。而且你也 知道 不要在網頁文檔裡應用點數定義。但正如先前提到的那樣, 你正在為打印制作樣式。這也是很好的時機把字體大小更改成點數。如果你原來不是用黑色的話，那還要把字體顏色改過來。在多種把黑色作為字體顏色的浏覽器中測試。記住很多人都不會打印你彩色的網頁的。把它壓縮成灰階是很重要的。我們把標題保留為根屏幕相同的藍色以與黑色的主體形成對比。用標題大小的字體, 即使用灰階，深灰色也是很易讀的。
重新定義特殊選擇符
Community MX 的文章和教程會用一些具有邊框和背景色的特殊class來突出 提示、警告和代碼塊。 很多人設置他們的打印偏好使背景顏色不被打印。但是並非所有的平台/浏覽器 組合能讓你控制這個。當用灰階打印時，背景顏色可能會產生問題。因此, 我們決定用新的打印友好的樣式來覆蓋我們的屏幕樣式。在這些樣式裡, 背景顏色設為白色來與頁面背景相匹配，邊框也被重新賦予了風格。這意味著即使在灰階情況下，用戶仍能分辨出代碼塊和提示框。
作為一個示例, 看看#articlecontent .tip 選擇符的前後兩個版本。在 cmxlayout.css裡, 該選擇符有藍色背景和1像素的邊框。它看起來像這樣:
#articlecontent .tip{ background-color: #99B5E1; border: 1px solid #036; color: #000;font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif; margin-bottom: 10px;
margin-right: 0px; padding: 5px; width: auto;}
在 newprint.css裡, 我們把背景改成上面說的那樣, 並把邊框設為更寬並且用虛線表示, 並且在兩側進行縮進以便它可以在頁面裡更為突出。我們設置了80% 寬度以及每邊 10% 的邊距來讓它居中。沒有了側邊距(side margin), 這個提示框會左對齊，並顯示為其父級元素的80%。
#articlecontent .tip{ width: 80%; border: 2px dashed #0158A6; font: 0.8em "Times New Roman", Times, serif;
background-color: #FFF; margin-right: 10%; margin-left: 10%;}
注意上面的選擇符, font-family有所不同。由於顏色和內邊距(padding)通過層疊由 cmxlayout.css 繼承，就無需再定義了。在樣式表中，我們也重新定義了教程中所有的內聯元素的樣式，以便內聯的以及重要的代碼,通常有著不同的背景色, 通過一種深的字體顏色和/或斜體來幫助突出這些文本。
我們希望這個實踐能對您游泳並能幫助你學習如何為您的站點創建打印樣式表。