將XHTML CSS頁面轉換為印表機頁面_HTML/Xhtml_網頁製作

　　在以前，為Web頁面創建一個印表機友好的版本意味著要設計一個佈局和格式都經過修改的單獨頁面，這樣才能夠在打印的時候獲得令人滿意的效果。現在，透過使用結構化的XHTML和CSS，你可以實現同樣的效果而只花費少得多的精力。
　　從螢幕顯示到列印效果
　　大多數的Web頁面都是設計適用於在電腦螢幕上觀看的。然而，有的時候用戶需要將某些頁面列印出來，也許就是為了保留一個長期的記錄，或者將其用作方便的離線參考資料。
　　現在的麻煩是，讓Web頁面在電腦彩色螢幕上看起來引人注目和五彩繽紛的很多特性，都無法在印刷版的Web頁面上表現出相同的效果——尤其當印表機是黑白的時候。在被降級為灰度打印的時候，彩色的組合會失去（原有的）對比效果；圖形會看起來失真，而且耗費太長的打印時間；在Web頁面上起著重要作用的導航按鈕在打印頁面上也毫無用處。
　　為了克服這些問題，Web的創建者常常會為頁面專門設計一個打印機友好的版本，這樣訪問者就有打印的慾望。印表機友善的版本通常都包含有和主要Web頁面相同的內容，但是會省略掉大多數的圖形、背景和導航元素。頁面也會把彩色轉換成某種形式，以便產生能夠讓人接受的灰階影像。
　　CSS的解決方案
　　使用結構化的XHTML標示和CSS格式將內容和表示分離開來的一個優點在於，透過更改CSS樣式，你可以很輕易就把內容重新格式化。因此，建立一個印表機友善的頁面就是把一個不同的CSS檔案連結到相同的XHTML頁面上。
　　你可以同時把螢幕樣式表和列印樣式表連結到同一個XHTML檔案裡，所以就沒有必要單獨建立一個印表機友善的頁面，只需要一個印表機友善的樣式表就行了。當你在連結程式碼裡加入多媒體類型的檔案時，這就是在告訴瀏覽器為了進行螢幕輸出要遵循或忽略哪些CSS的規則，而為了列印輸出要使用哪些規則。
　　下面是連結到一對CSS檔案的範例：
以下為引用的內容：


　　如果需要支援舊版的瀏覽器，那你就必須堅持使用CSS1的媒體描述符screen和print。它們是相互排斥的，因此在為螢幕顯示而產生頁面的時候，瀏覽器會忽略掉列印樣式表，反之亦然。所以，每個樣式表都需要包含相同的樣式選擇器，但有不同的規則聲明，以便分別為不同的輸出裝置產生頁面樣式。
　　簡化CSS
　　如果你願意放棄照顧舊版本的瀏覽器，並假設你的用戶正在使用支援CSS2的瀏覽器（比如說IE5以上版本或Netscape6以上版本） ，你可以使用新的all媒體描述符來大幅簡化CSS程式碼。
　　以下就是使用CSS2媒體描述符的連結的例子：
以下為引用的內容：


　　這些連結幾乎和前面的完全一樣；不同之處在於CSS檔案裡包含有用於列印媒體的樣式。
　　CSS檔案裡同media="all"連結在一起的樣式可以套用於螢幕顯示、列印，以及其他所有的媒體，所以你可以把所有建立的樣式都放到這個檔案裡。同media="print"單獨聯繫在一起的CSS檔案可以小得多，因為頁面從所有的媒體檔案繼承了所有的樣式，這就沒有必要再複製列印媒體檔案裡的這些樣式了。
　　列印媒體CSS檔案裡唯一需要的樣式是那些為列印輸出而變更或新增頁面樣式。一般來說，這只不過是一些禁止顯示包含有圖形和導航內容的div的樣式，和把主體標籤以及主要div的寬度和空白設定替換成適合列印輸出的設定。
　　這個技巧能夠運作是因為所有的媒體CSS檔案和列印媒體CSS檔案都組合成了相同的層疊樣式規則。因此，對這些CSS檔案的連結順序相當重要。所有的媒體檔案連結都必須放在列印媒體檔案連結之前。
　　以下是一些關於使用列印媒體CSS檔案的提示：
　　如果禁止某個div的顯示，就要使用display:none而不能用visibility:hidden。
　　點（pt）和英吋（in）都不是用於螢幕顯示的正確度量單位，但是它們是列印輸出的正確度量單位。
　　在列印媒體檔案裡使用的選擇器要和你在所有媒體檔案裡使用的選擇器完全相同。例如，如果你使用div#sidenav來選擇所有媒體檔案裡id為sidenav的div，那麼在列印媒體檔案裡使用#sidenav就可能無法成功地達到你的目的。
　　不要忘記明確地強制取代從一個文件到另一個文件都會發生改變的規則聲明。例如，如果你在所有的媒體檔案裡為一個元素設定了padding，並希望在列印輸出裡去掉這個padding，那麼在列印媒體檔案中加入一個忽略padding聲明的樣式是不夠的——你必須明確地設置padding:0pt，以取代前面的設定。
　　如果你正在使用諸如Dreamweaver這樣的圖形編輯器，你就可以預覽生成頁面的螢幕效果，而不是列印輸出的效果。要在Dreamweaver的設計（Design）查看窗裡預覽列印樣式，就要把到列印媒體CSS檔案的連結改成media="screen"。這就讓你可以預覽列印媒體檔案裡的CSS樣式。不要忘了在發布你的頁面之前把媒體描述符改回到media="print"。
　　當你需要為自己的訪客提供一個印表機友善的Web頁面，你不再需要為原有的頁面建立一個單獨的版本。添加一個對帶有media="print"媒體描述符的CSS樣式表的鏈接，就能夠把任何XHTML/CSS頁面轉換成為一個印表機友好的頁面。