將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面_XHTML教程
在以前,為Web頁(yè)面創(chuàng)建一個(gè)打印機(jī)友好的版本意味著要設(shè)計(jì)一個(gè)布局和格式都經(jīng)過(guò)修改的單獨(dú)頁(yè)面,這樣才能夠在打印的時(shí)候獲得令人滿足的效果�,F(xiàn)在,通過(guò)使用結(jié)構(gòu)化的XHTML和CSS,你可以實(shí)現(xiàn)同樣的效果而只用花費(fèi)少得多的精力。
從屏幕顯示到打印效果
大多數(shù)的Web頁(yè)面都是設(shè)計(jì)適用于在計(jì)算機(jī)屏幕上觀看的。然而,有的時(shí)候用戶需要將某些頁(yè)面打印出來(lái),也許就是為了保留一個(gè)長(zhǎng)期的記錄,或者將其用作方便的離線參考資料。
現(xiàn)在的麻煩是,讓W(xué)eb頁(yè)面在計(jì)算機(jī)彩色屏幕上看起來(lái)引人注目和五彩繽紛的很多特性,都無(wú)法在打印版的Web頁(yè)面上表現(xiàn)出相同的效果——尤其當(dāng)打印機(jī)是黑白的時(shí)候。在被降級(jí)為灰度打印的時(shí)候,彩色的組合會(huì)失去(原有的)對(duì)比效果;圖形會(huì)看起來(lái)失真,而且耗費(fèi)太長(zhǎng)的打印時(shí)間;在Web頁(yè)面上起著重要作用的導(dǎo)航按鈕在打印頁(yè)面上也毫無(wú)用處。
為了克服這些問(wèn)題,Web的創(chuàng)建者經(jīng)常會(huì)為頁(yè)面專門設(shè)計(jì)一個(gè)打印機(jī)友好的版本,這樣訪問(wèn)者就有打印的欲望。打印機(jī)友好的版本通常都包括有和主要Web頁(yè)面相同的內(nèi)容,但是會(huì)省略掉大多數(shù)的圖形、背景和導(dǎo)航元素。頁(yè)面還會(huì)把彩色轉(zhuǎn)換成某種形式,以便生成能夠讓人接受的灰度圖像。
CSS的解決方案
使用結(jié)構(gòu)化的XHTML標(biāo)示和CSS格式將內(nèi)容和表示分離開來(lái)的一個(gè)優(yōu)勢(shì)在于,通過(guò)更改CSS樣式,你可以很輕易就把內(nèi)容重新格式化。因此,創(chuàng)建一個(gè)打印機(jī)友好的頁(yè)面就是把一個(gè)不同的CSS文件鏈接到相同的XHTML頁(yè)面上。
你可以同時(shí)把屏幕樣式表和打印樣式表鏈接到同一個(gè)XHTML文件里,所以就沒(méi)有必要單獨(dú)創(chuàng)建一個(gè)打印機(jī)友好的頁(yè)面,只需要一個(gè)打印機(jī)友好的樣式表就行了。當(dāng)你在鏈接代碼里加入多媒體類型的文件時(shí),這就是在告訴瀏覽器為了進(jìn)行屏幕輸出要遵循或者忽略哪些CSS的規(guī)則,而為了打印輸出要使用哪些規(guī)則。
下面是鏈接到一對(duì)CSS文件的例子:
| 以下為引用的內(nèi)容: <link rel="stylesheet" type="text/css" media="screen" href="mysite-screen.css"/> <link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" /> |
假如需要支持老版本的瀏覽器,那你就必須堅(jiān)持使用CSS1的媒體描述符screen和print。它們是相互排斥的,因此在為屏幕顯示而生成頁(yè)面的時(shí)候,瀏覽器會(huì)忽略掉打印樣式表,反之亦然。所以,每個(gè)樣式表都需要包含相同的樣式選擇器,但是有不同的規(guī)則聲明,以便為不同的輸出設(shè)備分別生成頁(yè)面樣式。
簡(jiǎn)化CSS
假如你愿意放棄照顧老版本的瀏覽器,并假設(shè)你的用戶正在使用支持CSS2的瀏覽器(比如說(shuō)IE5及以上版本或者Netscape 6及以上版本),你可以使用新的all媒體描述符來(lái)極大地簡(jiǎn)化CSS代碼。
下面就是使用CSS2媒體描述符的鏈接的例子:
| 以下為引用的內(nèi)容: <link rel="stylesheet" type="text/css" media="all" href="mysite-all.css" /> <link rel="stylesheet" type="text/css" media="print" href="mysite-print2.css"/> |
- HTML5 INPUT placeholder及兼容性處理
- HTML表單里的Label標(biāo)簽
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁(yè)布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- title和alt 標(biāo)簽介紹及其異同
- 淺析HTML標(biāo)簽strong和em的區(qū)別
- 說(shuō)說(shuō)XHTML中的alt屬性和title屬性
- Semantics語(yǔ)義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- 九個(gè)W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問(wèn)題
- 請(qǐng)注意頁(yè)面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗(yàn)證HTML代碼穿越多重瀏覽器標(biāo)準(zhǔn)
- XHTML具有語(yǔ)義的標(biāo)簽:有關(guān)H1位置的討論
XHTML教程Rss訂閱Div+Css教程搜索
XHTML教程推薦
- W3C公布最新的HTML5標(biāo)準(zhǔn)草案
- HTML高級(jí)教程聲明
- HTML初級(jí)教程title文檔標(biāo)題
- HTML表格標(biāo)記教程(40):表頭的暗邊框色屬性BORDERCOLORDARK
- HTMLDOCTYPEDefinitionandUsage-doctype的定義及用法
- 網(wǎng)頁(yè)制作中使用規(guī)范的HTML代碼的幾點(diǎn)
- 添加和刪除HTML節(jié)點(diǎn)的簡(jiǎn)單示例
- Defaultstylesheet-HTML4標(biāo)簽的默認(rèn)樣式列表
- HTML高級(jí)教程標(biāo)準(zhǔn)要點(diǎn)(xhtml)
- CSS網(wǎng)頁(yè)布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- 相關(guān)鏈接:
- 教程說(shuō)明:
XHTML教程-將XHTML CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面
。