| 導購 | 订阅 | 在线投稿
分享
 
 
 

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

2008-08-15 05:13:23  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  原作者: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!
 
原作者: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!
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有