打開現有的主要樣式表並保存為print.css ，使之成為您的列印樣式表。為您的檔與列印媒體類型鏈結樣式表，像這樣:

創建列印風格

我們要做的第一件事就是隱藏導航，因為它在印刷版檔中是無用的。要做到這一點，我們要用display: none取代上述部分的樣式表的屬性：

我們可以縮小左邊距的值，因為我們不再需要為導航留有空間。這也是一個不錯的主意，將圖元測量（螢幕單位）轉換為分（列印單位） ，正如我們在第2章中討論的“我是否可以用pixels、points、ems或其他來設置字體的大小？ ”

如果我們在列印預覽中檢查檔，或通過流覽器列印它，如圖8.4所示 ，我們會發現，導航已經消失，而且內容已充滿空間，使得空間更有效地被利用。

Figure 8.4. The page printing more cleanly after we remove the navigation

在圖8.4頂部的線是banner的底部邊寬。我們可以隱藏banner就像我們隱藏導航一樣。首先，我們必須在樣式表中找到banner的部分：

再次，我們設立banner為display: none，並刪除與此相關的ID其餘的規則：

非常簡單，但更具可讀性列印佈局，圖8.5顯示了它的最後形式。

Figure 8.5. Using Print Preview to view the page affected by the completed style sheet

網頁列印很少，作為技術旨在使一個網頁在螢幕上好看，通常是不同於用於創建一份檔以及列印的。然而，它可能使用CSS媒體類型提供一個樣式表，適用於該檔被印刷時。

解決方案

我們可以為訪客創建特殊的列印樣式表，如：

討 論

創建一個列印樣式表對您的訪客非常有幫助，尤其是如果您的網頁上有許多圖形。從網站中印刷頁面，有很多圖形列印是非常昂貴的，並且對於舊印表機來說是非常慢的。由於顏色組合或使用的版面一些網站真的很難列印好。例如，圖8.2顯示的網頁，有一個簡單的兩欄的CSS佈局，與工具條中的導航，和一個包含食譜的主要內容的區域。

  Figure 8.2. Displaying a two-column layout in the browser

圖8.3顯示了這個佈局的列印預覽，列印時效果也是這樣的。

Figure 8.3. The layout appears in Print Preview

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

不同的流覽器可能會顯示出不同的CSS，其他設備又如何呢？

解決方案

規範的樣式表包含規範的媒體類型，它允許網頁作者限制樣式表，或給特定的媒介選擇一個樣式表。

您可以用任何一種類型的媒體標記樣式表。例如，聯繫樣式表的標記標籤使用的上聽覺流覽器。

網頁樣式表也可以這樣標記：

在這兩個例子裏，媒體屬性對已經創建樣式表的媒體類型有重要意義。這個樣式表將只用於支援特定媒體類型的設備。

討論

All                           適用於所有的設備

Braille                     適用於觸覺回饋裝置，如盲文流覽器

Embossed               適用於分頁盲文印表機

Handheld                 適用於掌上型裝置

Print                        適用於在列印預覽模式裏看檔

Projection               適用於工程介紹

Screen                    主要用於電腦螢幕顏色

Speech                   用於語音合成器

Tty                         適用於使用固定攤位字元網格的媒介，作者不應該使用圖元單位的終端媒體類型             

Tv                        適用於電視機類型的設備

除了上述所提到的媒體屬性外，我們還可以利用媒體的規則在一個樣式表裏處理多種媒體類型。舉個例子。下列樣式表決定印刷檔將以10號文字大小印刷出來，而在螢幕上，字體會以12圖元大小顯示出來。無論印刷還是螢幕，都會以黑色顯示出來。

當今，很少有設備會完全支援你想要的媒介類型。寫這文章時，帶有Emacs/w38⁸流覽器的Emacspeak⁷只被用來支援語音的的螢幕閱讀機。

大多數移動流覽器很少或不用CSS支持。那些支援CSS的尊重螢幕風格，然而，支援手持媒體屬性的仍然漏洞百出。突出的例子的是支持手持而不支援螢幕風格的Opera Mini 和Opera Mobile。

新版流覽器最支援印刷媒體類型。下次討論如何使用此媒體類型創建印刷版本的網頁。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

瞭解用螢幕流覽器訪問你網站人的經驗的最好辦法是自己試一試。然而，當今最流行最知名的螢幕閱讀器很貴而且學習起來了很困難。對螢幕閱讀器，網頁開發人員還有其他的方法來測試網站嗎？

解決方案

Fire Vox可以讓你的網站給人留下一個極好的印像，當該網站是通過螢幕閱讀器流覽時。也可以下載Windows裏運行的Firefox，比如Mac OS X, 或 Linux。在Charles L. Chen的網站⁵上下載Firefox，並按照安裝指示進行安裝。網站裏所提供的簡短的教程將幫助你開始使用Fire Vox。

討論

使用螢幕閱讀器是體驗視障用戶上網感覺的好方法，我們這些有好視力的人是很難體會到這感覺的。因此，除非你有時間來學習使用軟體，用螢幕閱讀器測試網站應該被看作是深入瞭解這些用戶的好方法。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

CSS允許我們隔開介紹網站檔的結構和內容。這也就意味著訪客不能改變網站的設計風格。要麼是因為他們技術有限，如一些PDF和手機用戶，要麼是他們自身的優勢所導致的，如造福視障用戶的螢幕讀卡機仍然可以存取內容。然而，我們仍然可以為那些使用可支援CSS流覽器的用戶創造出更美的設計。

當隔開內容和結構以及考慮如何最好的設計基本檔的結構時，也就意味著使用不支援CSS的螢幕讀卡機和流覽器的用戶會更容易地理解你的網站。但你還需要瞭解其他那些可以看到你網站的設計又有無障礙環境需要的用戶。僅使用CSS來完成佈局目標並不能使每個人都喜歡你的網站。舉個例子，那些遭受某種程度視力喪失的人可以閱讀可被放大的文本。本章還包括使用替代樣式表，針對不同媒體的樣式表和基於JavaScript幫助下的流覽器。

如何在一個純文字的流覽器測試網站

使用純文字的流覽器來檢查網站是瞭解如何利用它的一種好方法。如果您發現可以使用純文字流覽器輕鬆地流覽網站，使用螢幕閱讀器的訪客也可能會這樣覺得。

解決方案

您可以通過線上Lynx Viewer.1 來使用Lynx（一純文本流覽器）查看您網站上的網頁。Lynx可以免費下載、安裝，為什麼不在你的系統中安裝一個呢？這個選項提供了額外的好處，你就可以在將它們上傳到網上之前測試網頁。

Linux / UNIX用戶

您可能會發現，您的系統中已經安裝Lynx;如果沒有的話，您可以通過套裝軟體管理系統輕鬆地安裝一個。另外，您也可以從Lynx軟體分發網站下載.

Windows用戶

過去在Windows裏安裝Lynx是一個微妙的過程，但現在可以從csant.info.裏下載。下載並運行安裝程式，也可以讓Lynx在開始功能表裏可用到。

Mac OSX用戶 

討論

Lynx一貫橫跨所有平臺，但您需要瞭解一些簡單的命令，以便利用它來流覽網頁。圖8.1展示了顯示在Lynx典型的網站。

Figure 8.1. Viewing a site in Lynx

要打開一個網頁，點擊G和輸入網址，然後按下ENTER ，Lynx將下載該網址。如果你將要訪問的網站使用任何形式的餅乾，Lynx會問你如果你願意接受他們。鍵入Y表示接受， N表示拒絕，A表示總是接受，V表示永遠不接受。使用箭頭鍵來流覽。向上和向下箭頭可以讓您在鏈結和鏈結之間往返。右箭頭鍵將遵循目前的鏈結，而左箭頭鍵將帶您返回到前一頁。

為了完成一表格，流覽到每個表單欄位使用向下鍵。你可以使用Lynx 來流覽本地檔。如果你用的是本地流覽器，比如Apache 或IIS，你只需點擊當地網址。如果你提供了路徑和檔案名，該流覽器也可直接閱讀HTML。想要瞭解如何使用Lynx 的更多資訊，點擊H，就會出現幫助系統，你就可以流覽你想流覽的任何網頁。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

在第4章，我們學到了如何創建圖像和JavaScript，用下拉功能表可以實現同樣的效果嗎？

解決方法

答案是肯定的...但由此產生的菜單不在Internet Explorer 6運行！然而，圖4.25說明瞭這種技術，與Internet Explorer 7同樣在市場上的收益發揮很大的作用。

Figure 4.25. Creating a CSS-only drop-down menu

標記的例子：

效果執行的規則：

討論

雖然下拉功能表容易受影響而無法在Internet Explorer 6中運行，但可有幾個新的流覽器支持工作。該解決方案允許您不使用任何JavaScrip創建一個下拉功能表。該技術是基於除了詳細名單上的Suckerfish選單解決方案。功能表本身是基於簡單的無序列表。頂層功能表項由一個主要的清單組成，每一個主要項目包括整套的名單：

可以看到在圖4.26時，當製作不適用於功能表上的時候，該網頁顯示為一個邏輯結構和容易發現無序清單。

首先，我們取消其名單的風格來製作頂級功能表，。可以水準動態清單專案。該名單的專案有了聯繫的價值立場後，動態的功能表就可以放置：

在鏈結功能表顯示模組，填補矩形領域界定的功能表項。最早的Internet Explorer 6無法識別這個功能表項，但每一個環節設置100 ％的寬度可以確保以補載塊擴展點的選地區,

下一步，點擊整個包括動態功能表的清單，在默認情況下，顯示無。然而，我們確實規定可以顯示絕對定位，而不影響剩下的其他檔：

為了防止我們的動態功能表像主功能表專案從橫向浮動，需要設置為無浮動的標誌：

最後，我們使用遊標移到它的時候，懸停在偽類那就可顯示出動態功能表內的任何專案主功能表：

這些基本的CSS規則的地方，功能表顯示如圖4.27 。

此代碼最初設置嵌套名單顯示：無。當用戶將遊標停留在主功能表列表專案，該整個名單內的清單專案設置為顯示：塊、菜單出現。然而，這一做法不能Internet Explorer工作 ，像在該流覽器中懸停偽類只用於鏈結上，而不用與其他方面。其餘的CSS僅僅適用於視覺樣式而使功能表好看。

本章討論了各種不同的方式，使我們可以使用創建導航結構健全的標記，並提供了範例，以此為出發點自己可以創建。在現有的網站技術中是完全不可能設計的，採用基於CSS的導航系統不影響其外觀來改善網站的無障礙環境和負載的速度被認為是一種很好的方式。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

基於CSS的導航可以提供一些非常有趣的效果，但仍然有些效果需要使用圖像。是否可能享受基於文本的導航後仍然可使用圖像。

解決方案

是否有可能結合圖像和CSS來創建的無JavaScript的捲軸呢？這種解決方案是基於WellStyled.com.2中所描述的技術。

從圖4.23中可以看出結果，如果你想要享有充分的效果，我建議你自己試試吧。不要忘記點擊一個鏈結或兩個。

Figure 4.23. Using images to advantage in the completed menu

討論

該導航有三個狀態，但這三種狀態並沒有用三張獨立的圖像來描述，是用一張包含這三種狀態的圖像來描述的。圖4.24說明瞭這一點。

導航被做成一簡單的列表：

我們在導航宣傳欄內控制背景圖像的顯示。然而，圖像遠遠大於這一因素所需的面積，最初我們只能看到黃色。

當懸停狀態被啟動時，背景圖像的圖元就會上升到所需要的圖元。在這個例子中，我不得不將它移到了69圖元，但是這個數位將取決於你所使用的圖像。也許你可用數學方法解決這一問題，或者你可以像我這樣做，只是增加背景位置的圖元，直到它在正確的位置盤旋。

活躍的狀態被啟動時，背景圖片再次轉變，這一次，當鏈結被點擊顯示青椒：

就是這麼簡單！如果用戶把文本流覽器調整為更大的字體，邊緣被隱藏的圖示也會顯示出來。在一定程度上，你可以通過在三張圖像之間留下相當大的空間來預測這種可能性。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

當遊標移到網頁上任何一個有鏈結的地方時，遊標都會改變成圖示手。有時候，為了適合特定的介面，你也許想要改變游標來代表其他一些東西。

解決方法

我們可用CSS遊標特性來改變遊標。表4.1列出在CSS2中也可用到的一些性能以及它們如何出現在Internet Explorer 6中。圖4.22說明瞭這一點。

討論

遊標性能有很多好處。改變遊標顯示可以為友好介面的web應用提供寶貴的回饋意見。例如，您可能會決定使用一個問號遊標移動到顯示幫助文本。

表4.1列出了在標準的CSS裏可用到的各種性能，這些性能可被大多數新版的流覽器支持，包括Internet Explorer 6+, Safari, Opera, and Firefox。圖4.2列出只能被Internet Explorer流覽器支持的一些額外的數值（雖然每個新版本的Firefox也會支援這些數值）。

 在撰寫本報告時，網頁上所顯示的自定義圖像的遊標只能被Windows上的Firefox支援。

頁面的頂部用標籤式的導航是一個流行的選擇。很多網站用圖片來做標籤。但是，這就遇到了文字和圖片的問題，這個問題我們在前面的單元已經討論過了。但是，用CSS結合背景圖片和文字是可以實現標籤效果的。

圖4.16中所顯示的標籤導航可以有水準列表來創建

底下是要達到這一效果所使用的HTML和CSS

討論

我這裏用的這個標籤式導航是Douglas Bowman邊門式的基本形式，用來試驗標籤。這個導航的結構是我們用過的一個簡單的無序列表，除了列表專案用來描述鏈結的class。我們已經把整個列表放在一個header的一個div中。這個技術用2張圖片來實現，其中一張圖片重疊另外一張圖片，而且，當文字伸展時，圖片自動平鋪。

你需要4張圖片來實現這個效果：2張實現正常的顏色，還有2張是在標籤被選中時的圖片。圖12中顯示的是我在這裏例子中圖片。如你所見，他們比標籤需要的更寬，更高？這使在用戶的流覽器的字體很大時，標籤有充裕的空間去擴展。

以下是基本的導航清單專案：

第一步是定義包含導航的容器(div)。我們將給我們的header加底部實線，但在現實網站中，可能在標籤中還會有其他的元素(比如logo或者搜索引擎)：

和你觀察到的一樣，我們把header放在左邊。我們也會使各個列表項漂浮；定義div的float屬性使他們固定，邊框就在下麵顯示。

下面，我們定義一個header中的ul的樣式規則：

這裏去掉了圓點（列表前的圓點），改變了列表的margin和padding屬性－我們在元素裏的padding-top裏添加2em。下圖顯示了我們的結果。

現在我們必須設計專案清單：

這個規則用了float屬性來水準定位列表項。接下來我們添加第一張“滑動門”圖片--標籤左邊細的那張--作為背景圖片。一個圖元的右邊距使列表項前後之間有一點空隙。圖4.9顯示。

接下來，我們來定義鏈結，完成標籤在未被選中時的樣式。標籤右邊的圖片已經應用於每個鏈結：

圖4.20顯示了結果：

如果你增加流覽器的文字大小，你會看到標籤也跟著變大。實際上，這是由於我們在用圖片時已經給定了變大充裕的空間.要完成這個導航，我們需要選中標籤時顯示對應的網頁。你會想起我們已經在每個列表項給定了一個唯一的class。如果我們給body一個ID，這個ID的值相當於每個列表項的class，那CSS就可以做剩下的事情了：

雖然，看上去又很多的代碼，用來定義body的ID的CSS代碼使簡單的。我用在標籤上的圖片這裏再複製一遍，但是他們是不同顏色的，形成了被高亮選中的效果。

CSS是這樣的：

用了這些規則以後，尤其是body的recipes的ID使“食譜”被高亮選中，使Contact Us的標籤被高亮等等。圖4.21顯示了該結果。

推薦給同仁



您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com

很多網站都用按鈕式的導航。這種導航經常使用圖片來使它看起來像按鈕。還有更多的使用JavaScript代碼來換圖片，這樣在滑鼠放上去時，就點在圖片上。可以只用CSS來創建按鈕式的導航系統嗎？當然！

解決方案

可以確定，用CSS做一個像圖4.15那樣的按鈕式效果是可行的。做成這種效果的關鍵在於你使用CSS種的border屬性

圖4.15.用CSS創建按鈕式導航

這裏是你需要的代碼：

討 論

做成這種效果，我們將會用到做水準導航那部分內容。但是，做成按鈕式的效果，我們將在每個按鈕的上邊和左邊用不同顏色的邊框而不是下邊和右邊。通過給按鈕的上邊和左邊邊緣淺淡的顏色而不是在按鈕的下邊和右邊，我們做成了下邊的效果：

我們做相反的顏色邊框，使之看上去像按鈕被按了下去：

試著用深的邊框，改變鏈結的背景圖片來做成適合你設計的效果。