( 此為舊的兩隻老虎網站, 全新的兩隻老虎 blog 在此 . jUst cLick here ! )
瞭望 Web Services
無廢話 XML eBook
成為 Adobe 認可專家
網頁唯美派
網頁唯美派 5 --
製作獨具風格的網頁捲軸
( 2002 / 10 / 1)
美美的網站講求的是整體美美的 look and feel，不僅外觀要長得美，親切易用性也美，得同時兼顧外觀與功能性。
在設計編排網頁內容之餘，其實花點時間，為精心設計的網頁搭配上相映成趣的捲軸，以及清楚易辨認的「我的最愛」圖示 (icon)，不僅能襯托出網站的整體美，同時更加強了親切易用性。只需簡單幾個步驟，小兵立大功，大家何樂而不為？
想要製作、呈現出獨具風格的網頁捲軸與圖示，並無法單單只靠大家平日熟悉使用的 Dreamweaver、Photoshop、ImageReady 等編輯軟體來完成。因為這些編輯軟體並未提供這些功能。有一部分原因也是由於特定的網頁捲軸與圖示呈現，並非 W3C 中央標準局所認可的標準。因此如果瀏覽者使用 Netscape 瀏覽器，並看不到獨具風格的網頁捲軸與圖示效果（但也沒什麼不良妨礙）。然而如果瀏覽者使用 IE 5.5 以上的瀏覽器，就可看到這些特定效果（全世界使用 IE 瀏覽器者至少佔 70% ~ 80% 以上）。
了解這些小小的局限之後，接下來讓我們一步一步開始製作專屬於你的網頁捲軸吧！
Step 1：切換到程式碼畫面
如果你使用 Dreamweaver 這類的視覺化網頁編輯工具，首先開啟某一 HTML 頁面，將後切換到程式碼畫面 (code view)：執行 View / Code，或按下工具列上的「Show Code View」按鈕。
-- 在 Dreamweaver
裡按下工具列上的「Show Code View」按鈕，切換到程式碼畫面。
Step 2：鍵入設定捲軸顏色的 Style Sheet
在 HTML 文件裡的 <HEAD> 標籤下，鍵入下列有關捲軸顏色設定的 CSS Style Sheet 編碼。
<style type="text/css"><!--
body {
scrollbar-face-color: 自行設定顏色;
scrollbar-shadow-color: 自行設定顏色;
scrollbar-highlight-color: 自行設定顏色;
scrollbar-3dlight-color: 自行設定顏色;
scrollbar-darkshadow-color: 自行設定顏色;
scrollbar-track-color: 自行設定顏色;
scrollbar-arrow-color: 自行設定顏色;
}
--></style>
Step 3：一一調配出喜歡的顏色
接著在上述的「自行設定顏色」處，一一調配出自己喜歡的顏色。這些顏色名稱可以使用瀏覽器已預先設定接受的普遍顏色名稱，像是：red、blue、yellow、black、white ... 這類簡單明瞭的顏色。如果要得到更細膩生動的色彩搭配，強烈建議你使用較精密的 16 進位顏色表示法，亦即「#RRGGBB」形式的表色法。
由於成功滿意的配色需要不斷的嘗試、調整。我個人喜歡使用 ImageReady 軟體裡的「設定前景顏色」工具，來不斷嘗試調配，找到一個滿意的顏色後，直接將16 進位的顏色碼拷貝、貼入上述的 Style Sheet「自行設定顏色」處，節省不斷打字修改的麻煩。
-- 在 ImageReady 裡按下「設定前景顏色」工具，
找到滿意的顏色後，直接將 16 進位顏色碼拷貝、貼入 Style Sheet。
Step 4：了解捲軸各分項的意義
一個表面看起來似乎不太複雜的捲軸，實際上在作顏色設定時，居然也有七、八個項目得做設定！以下我簡單解說各項目意指哪裡，大家配合著說明圖觀看，應該就能一目瞭然了。
scrollbar-face-color: 是指拖拉捲軸處、以及向上箭頭與向下箭頭的按鈕表面顏色。
scrollbar-shadow-color: 是指拖拉捲軸處、以及向上箭頭與向下箭頭的靠右邊、靠下面陰暗顏色。
scrollbar-highlight-color: 是指拖拉捲軸處、以及向上箭頭與向下箭頭的靠左邊、靠上面較亮的顏色。
scrollbar-3dlight-color: 是指拖拉捲軸處、以及向上箭頭與向下箭頭的靠左邊、靠上面最外圍一圈，襯托出捲軸立體造型的較亮顏色。
scrollbar-darkshadow-color: 是指拖拉捲軸處、以及向上箭頭與向下箭頭的靠右邊、靠下面最外圍一圈，襯托出捲軸立體造型的較陰暗顏色。
scrollbar-track-color: 是指拖拉捲軸的軌道顏色。
scrollbar-arrow-color: 是指向上箭頭與向下箭頭按鈕上的三角形顏色。
-- 圖解細分捲軸各分項的顏色設定。
Step 5：參考實例
網頁捲軸的顏色搭配不妨配合網頁內容的主色調，如此更能顯現出渾然一體的相映成趣風格。例如：筆者的網站「兩隻老虎」，每個單元頁採用略為不同的背景邊框色調，因此每個單元頁及其系列頁面，均各自配以相映相襯的的捲軸顏色。
-- 網頁捲軸不妨配合網頁內容的主色調，如此更能顯出渾然一體的相映成趣風格。
-- 不同的單元頁採用不同的背景邊框色調，因此也各自配以相映相襯的的捲軸顏色。
-- Bluewave
設計公司的網頁捲軸，故意去除 3D 立體效果，而讓捲軸顏色徹底與大片背景色相容，顯現出極簡派的優雅與大方。
-- 版權歸屬 Bluewave
設計公司網站：http://www.bluewave.com/
而如果某一特定的捲軸顏色搭配，將被一系列的網頁共同使用，不妨將此捲軸的 Style Sheet 獨立抽出，成為一可供其他 HTML 檔外部連結的共通 Style Sheet，如此不僅可免除重覆定義捲軸顏色的瑣碎步驟，更可確保網站捲軸一致的 look and feel。
做法是將 Step 2. 裡的 body {....} 編碼全部獨立抽出，將它剪下、貼入一個全新的純文字檔案裡，儲存在網站的根目錄下，設為 .css 格式。
然後回到 Dreamweaver 裡，叫出 CSS Styles 工作面板，點按「連結外部 Style Sheet」的按鈕，將剛才做好的 .css 檔連結進來，如此便能很方便的供其他網頁重複使用。
-- 在 Dreamweaver
裡，點按「連結外部 Style Sheet」按鈕，將獨立抽出的 .css 檔連結進來，如此即可免除重覆定義捲軸顏色的瑣碎步驟。
|
本文作者: 胭脂虎，Adobe 認可 Photoshop 專家，新媒體視覺設計作家，「兩隻老虎」工作室網頁設計師。More... email 胭脂虎: -- 多觀摩名家作品可提昇你製作美美網頁的功力 : |
此為舊的兩隻老虎網站, 全新的兩隻老虎 blog 在此, jUst cLick here !
瞭望 Web Services
無廢話 XML eBook
成為 Adobe 認可專家
網頁唯美派
內容最後修改時間： December 10, 2002 16:40
Copyright 1997-2006 Two-Tigers Workshop
智慧財產權所有, 禁止轉載或複製於其他網站或媒體.
本站所有內容均受國際著作權公法保護.
URL ： http://www.2tigers.net/