通過重定義CSS,實現網頁內容完美打印輸出

原作者:Matthew Griffin

雖說已是互聯網無所不能的時代,但還是會需要將網頁內容打印出來閱讀。對于網生的電子報、電子期刊這些更適合于在網絡環境中閱讀的內容,怎樣通過打印輸出生成適當的紙媒頁面呢?長時間來,這一直是一個課題。爲了寫如下這篇博文,作者對相關問題進行了深入思考,並爲Bits O' NewMedia網站編寫了適于打印輸出的樣式表,現將相關經驗分享給大家。

設定適于打印輸出的樣式表

這並不象想象中那麽難,第一步要做的是複制原用的CSS文件,將其命名爲print_style.css,接下來,就是要在其首行加入語句:

<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />

我們看到,這一條語句惟一特別的地方在于,media參數被賦值爲"print"。而如果在頁面內加入了這樣的一條語句,那麽再執行file>>print(文件>>打印)指令時,print_style.css樣式表就會替代原有的樣式表被調用。

注意:如果是IE6或是Firefox用戶,就一定要將網絡鏈接標記樣式中的media參數賦值爲 "screen",否則,打印出來的頁面內容會發生出血的問題,以及其他一些問題。IE7用戶就不用擔心了。

完善頁面的主體部分

現在,我們來調整一下頁面主體相關的參數。一般情況下,網頁的主體部分都會有背景色或是背景圖案。我們現在就要將背景去除,以確保打印出來的頁面相對整潔。當然,多數浏覽器默認支持在打印時自動去除背景,但還是要手動調整一下來得保險。

同時,還要考慮爲將打印樣式表中的color參數賦值爲#000或"black"。彩色的文字在網頁上看起來固然很眩,但要輸出如此色彩眩麗的頁面,就會耗費相當昂貴的墨水。

接下來,我們要調整的就是margin參數了,系統默認的頁邊距設置一般都會比較小,我們現在試著爲左、右邊距各增加3em,可以通過語句margin 0em 3em 0em 3em來實現。

調整分欄版式參數

我們都知道,並不是所有的網頁內容都有必要打印出來的,比如說導航條,在網頁上是必要信息,但打印出來就純屬浪費頁面了。這時,我們就需要在打印樣式表中對那些沒有必要打印出來的選項,添加屬性"display: none"。

同時,爲了讓所有的內容都完美地垂直排列在打印出的頁面上,而不是一個接一個地堆在頁面上,就需要對每一個必打項的float參數賦數爲"none",或幹脆直接將float參數項刪去。

還要爲每一個必打項的width參數賦值爲"auto"。這樣,對于利用div標記對頁面進行了分欄的時候,就可以確保分欄的內容能夠自動填滿頁面。以下爲打印樣式表的編寫內容示例:

div.template_fill_wrapper_top{

display: none;

}

div.template_fill_wrapper_middle{

margin: 0;

width: auto;

text-align: center;

clear: both;

}

In the web stylesheet

div.template_fill_wrapper_top{

overflow:hidden;

text-align:center;

background-color: #313131;

height: 48px;

overflow: hidden;

}

div.template_fill_wrapper_middle{

margin: 0 auto;

text-align: left;

padding-top:10px;

clear:both;

}

PX參數下課,Em及PT上位

一般情況下,在爲網頁編寫樣式表時,針對間距、寬、高、頁邊距及字體大小等參數,我們習慣用pixel或em度量單位。這主要是由于數碼顯示器一般是采用像素及字符寬度爲顯示單位的。而對于打印機來說,像素單位就不好使了,需要將原來使用像素單位的間距、寬、高、頁邊距等值轉換爲em單位值;而字體大小則需被轉換爲磅值(建議將字體大小設置在9pt~11pt之間)。.

以下即爲Bits O' NewMedia網站的打印樣式表示例:

body {

margin: 0em 3em 0em 3em;

padding: 0;

border: 0;

color: black;

background: white;

font: normal 10pt "Bakersville Old Face", "Times New Roman", Times, serif;

text-align: left;

}

成果驗收

要使每一位網站用戶都有一個好的體驗,作爲力求完美的網站建設者,就要經曆無數次的試驗、失敗、調整、再試驗......我們堅信這樣做的結果一定會爲你帶來無限成就感。

如下所示爲Bits O' NewMedia網站中某一篇文章的打印效果預覽截圖,你也可以通過以上的打印樣式表調整步驟,打印出理想的頁面來。

Wish you every success!

CSS制作教程:網頁內容換行控制-css設計
  在進行DivCSS布局時,需要對文本進行控制,我們在以前的文章中,也講過這方面的知識,今天系統的向大家介紹一下。CSS中控制換行的四種屬性。  一、white-space  可以實現HTML中PRE標簽的效果,以及單元格的n...查看完整版>>CSS制作教程:網頁內容換行控制-css設計
 
通過java.net.URL類抓取某個網頁的內容
/** 文件名 : OpenUrl.java 描述 :通過 java.net.URL 類訪問一個頁面,並且返回結果 作者: 慈勤強 參考: **/import java.net.*;import java.io.*;public class OpenUrl{ public String getContent(String str...查看完整版>>通過java.net.URL類抓取某個網頁的內容
 
控制網頁文件大小通過精簡CSS實現
  盡管對于現如今的帶寬來說,網頁文件那僅以K來算的大小實在是微不足道,但如何將這以K來計算的網頁文件精簡到最小還是網頁設計師們所應該考慮的問題之一。   衆所周之,在不影響整個網頁構架與功能的情況下,網...查看完整版>>控制網頁文件大小通過精簡CSS實現
 
原創:通過修改CSS樣式,在網頁中實現圖片等比例縮放!
  您是否常常在做網頁的過程中發現一個問題呢?當圖片上傳的時候,如果圖片太大 ,就會把網頁撐破,唯一做的就要先把它用軟件縮小,再上傳上去,這樣重複的工作,您是否已經厭煩呢?  我昨天在做網頁的時候也遇到這...查看完整版>>原創:通過修改CSS樣式,在網頁中實現圖片等比例縮放!
 
在Swing的JEditorPane控件中實現超級鏈接的CSS定義
如下一個HTML文件<html> <head> <style type='text/css'> A{text-decoration: none; color: #000000; } A:hover {text-decoration: underline; color: #FF0000; } </st...查看完整版>>在Swing的JEditorPane控件中實現超級鏈接的CSS定義
 
通過Dreamweaver設計網頁時組織CSS的建議
  一般地講,樣式表(style sheet)就是控制網頁內容外觀的格式化的規則的集合。可以以三種不同的方式在你的頁面中使用CSS:   代碼式(Inline):寫入到代碼中的一次性的樣式。   內嵌式(Embedded):可控制...查看完整版>>通過Dreamweaver設計網頁時組織CSS的建議
 
CSS實現完美垂直居中
  之前看到很多人一直都問這個問題,不過當時我沒當一回事,因爲在 CSS 中要垂直居中,多數是在有高度的情況下,或者容器高度不定的情況下才用,看上去比較舒服,而且實現的方法也不少,不一定要拘泥于和 table 布...查看完整版>>CSS實現完美垂直居中
 
CSS實現完美垂直居中
之前看到很多人一直都問這個問題,不過當時我沒當一回事,因爲在 CSS 中要垂直居中,多數是在有高度的情況下,或者容器高度不定的情況下才用,看上去比較舒服,而且實現的方法也不少,不一定要拘泥于和 table 布局一...查看完整版>>CSS實現完美垂直居中
 
一句css代碼實現黑白素色網頁,向遇難者志哀
一句css代碼實現黑白素色網頁,向遇難者志哀,在網站的css代碼中,在第一行加上入:BODY { FILTER: gray;}即可實現網頁全部以黑白素色顯示.樣例如: www.11players.net...查看完整版>>一句css代碼實現黑白素色網頁,向遇難者志哀
 
 
回到王朝網路首頁