zonble’s promptbook

2003 年 12 月 28 日

我的電腦 在MovableType使用列印專用CSS樣式

MovableType這套網誌工具提供了相當具有彈性的模板(template)功能,使用者可以根據自己的需要設置各種模板。在MT預設的模板當中,只提供一組CSS的樣式設計,大多使用者在視覺方面的設計與調整,也是透過修改這個CSS模板完成,不過僅有一組CSS模板的情況下,會遇到這樣的困擾︰使用者可能會想要將您在weblog當中的文章列印後閱讀,或是使用如PDA等其他不同於一般在電腦瀏覽器的使用界面下閱讀文章,如果是將網頁列印閱讀,那麼您會覺得在版面上有許多用以導覽,或與使用者線上互動的內容如近期文章、近期迴響等部份,並沒有列印出來的必要,反而似乎有些浪費紙張與墨水,您會想要在列印的時候,只要列印文章本文的部份,要使用者將內文複製後再貼到文書軟體再列印,雖然也是一種方案,但是其實可以不需要這麼麻煩。

在CSS2當中,規範了CSS的媒體定義,您可以針對不同的顯示媒體,定義不同的CSS樣式表,您可以參見CSS2規格書第七章部份,裡頭便定義了許多不同的媒體類型,不過最常使用的是screen,就是一般在瀏覽器閱讀網頁的狀況,而只將媒體定義設為print,就是供作為列印時使用的樣式表。

在movableType裡頭,請您在各個不同的網頁模板上,在<head>與</head>之間的部份,找到適合的地方,插入下面這一行︰

<link rel=”stylesheet” type=”text/css” media=”print” href=”<$MTBlogURL$>/print.css” />

然後,您可以建立一個索引模板,輸出時的檔名叫做print.css即可。在這個模板當中的內容,就是您用以列印的CSS樣式表。通常來說,您可能會想做的,是不管原本網頁背景與文字是什麼顏色,在列印時,都將文字設為白底黑字,另外您會想要將content或container放大到整個版面的寬度,將width改為100%,另外,就是旁邊的選單以及使用者發表迴響的界面不要印出來,那麼請將#menu改為display:none,在使用者迴響介面加上一個DIV,然後也設定為display:none即可。

修改之後,您只要用瀏覽器的預覽列印,便可以看到列印時會使用不同的樣式表,目前常用的瀏覽器如Internet Explorer以及Mozilla等,都支援顯示與列印時,使用不同的樣式。您也可以把這個CSS樣式表當作是一個螢幕顯示樣式使用,只要在適當的地方加上︰

<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”<$MTBlogURL$>/print.css” title=”print”/>

這樣,支援多重樣式表的瀏覽器如Mozilla、Firebird等等,就可以將您的網頁,切換成清爽的列印樣式。

文章分類: — zonble @ 6:16 pm #

7 項留言回應 »

  1. 喔!這是對我的提名正式的解說版本嗎?沖沖沖。(亮票行為不知是否合法)

    來自 躲 的 迴響留言 — 2003 年 12 月 28 日 @ 11:11 pm

  2. 我倒是覺得為列印做一個CSS,應該是很基本的事情。如果只是這樣就要提名什麼最佳設計還什麼的,實在沒有意義,只少WordPress本身就已經內建了print.css。亮票什麼的,我覺得沒差,我跟Jedi說過了我不想參賽。

    來自 zonble 的 迴響留言 — 2003 年 12 月 28 日 @ 11:54 pm

  3. 我雖然對比賽結果沒有興趣,不過我還是對提名這件事覺得很有趣。至少我認識一些之前沒有注意過的blog,或者例如讓別人知道有print style這種呈現方式(我雖然一直用mozilla,但也是很晚才注意到你提供兩個css style),至少在這方面我還覺得滿有趣。

    來自 躲 的 迴響留言 — 2003 年 12 月 29 日 @ 11:57 pm

  4. [轉貼]在MovableType使用列印專用CSS樣式
    zonble’s @rsenal.: 在MovableType使用列印專用CSS樣式 在MovableType使用列印專用CSS樣式 MovableType這套網誌工具提供了相當具有彈性的模板(template)功能,使用者可以根據自己的需要設置各種模板。在M…

    來自 CAD 部落格站台 的 Trackback — 2004 年 1 月 2 日 @ 4:41 am

  5. 更清爽的列印
    替使用者節省墨水或碳粉啦。 參考zonble的說明作的。…

    來自 酋長的部落格 Chieftain's BLOG 的 Trackback — 2004 年 1 月 4 日 @ 12:44 pm

  6. 不好意思,ping的時候發現系統出現error字樣,又多按了幾次,ping得這篇文章到處都是我的字。對不起啦,就煩請你刪之。

    來自 酋長 的 迴響留言 — 2004 年 1 月 4 日 @ 12:52 pm

  7. 話說有的時候會覺得Auto Discovery頂煩人的。呵。

    來自 zonble 的 迴響留言 — 2004 年 1 月 4 日 @ 3:15 pm


Powered by WordPress 2.6.2, Yichi.org,
ideas and cares
.

Weizhong Yang(a.k.a zonble)
Email:zonble@gmail.com
AIM: zonble@man.com