如何挑選捲軸顏色
想要製作、呈現出獨具風格的網頁捲軸與圖示，並無法單單只靠大家平日熟悉使用的
Dreamweaver、Photoshop、ImageReady 等編輯軟體來完成。因為這些編輯軟體並未提供這些功能。有一部分原因也是由於特定的網頁捲軸與圖示呈現，並非
W3C 中央標準局所認可的標準。然而如果瀏覽者使用 IE 5.5 以上的瀏覽器，就可看到這些特定效果。
了解這些小小的局限之後，接下來讓我們一步一步開始製作專屬於你的網頁捲軸吧！
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：參考實例
網頁捲軸的顏色搭配不妨配合網頁內容的主色調，如此更能顯現出渾然一體的相映成趣風格。例如：筆者的每個網站採用略為不同的背景邊框色調，因此每個單元頁及其系列頁面，均各自配以相映相襯的的捲軸顏色。
|
Copyright
2007