CSS技巧综合应用.ppt

第 16 章 CSS 技巧 綜合應用 本章提要 16-1 多欄式版面設計 16-2 套用濾鏡特效 16-3 自訂捲軸的配色 16-4 網頁換頁特效 16-1 多欄式版面設計 在大多數商業網站的網頁, 通常會將要呈現的文字與圖案分門別類, 以兩欄或三欄的方式排列, 讓讀者更容易找到所要的資訊。這種分欄式的版面, 可以說是網頁設計人員必學的手法。 不過, 『戲法人人會變, 各有巧妙不同』, 達成多欄式版面設計的方法不只一種, 為了讓讀者能輕鬆理解, 我們將以最簡單的程式碼來實作, 相信讀者在看懂本節的範例之後, 要再學其它的技巧就會容易多了。 16-1-1 兩欄式版面 我們將利用 div 標籤定義出 『區塊』, 兩欄就定義兩個區塊, 這是基本原則。在此原則下, 又可以區分為 『變動寬度』 和 『固定寬度』 的區塊。 當使用者改變瀏覽器視窗的大小時, 就能明顯地看出兩種區塊所導致的差異, 以下我們分別舉例說明。 使用變動寬度的區塊 使用變動寬度區塊所設計的第一個範例結構如下： 使用變動寬度的區塊 左區塊包含 4 個連結, 右區塊包含 4 個圖形, 兩個區塊分別靠左、右排列, 這樣就能迅速地製作出陽春的兩欄式版面, 其對應的程式碼及畫面如下： 使用變動寬度的區塊 使用變動寬度的區塊 使用變動寬度的區塊 使用變動寬度的區塊 雖然我們已經做出了兩欄式的版面, 但是這種方式有一個大缺點－當瀏覽器視窗的大小改變時, 內容的排列方式也會隨之更動。例如： 使用變動寬度的區塊 使用變動寬度的區塊 因為我們當初定義區塊時, 並未設定大小, 而是採用預設的『自動調整』（Auto）, 所以會根據視窗大小而改變區塊大小。 當文字或圖片比區塊還寬時, 就會被往下擠。為了要解決這個問題, 我們接著介紹如何用 width 屬性來固定區塊的大小。 使用固定寬度的區塊 我們利用前面的例子來修改, 一方面加以美化；另一方面改善網頁內容會隨著視窗大小而改變排列的問題, 基本架構如下： 使用固定寬度的區塊 本例多了『上區塊』 和 『背景區塊』, 前者只是為了美觀而加上的橫幅(banner)圖, 即使沒有也無妨；而後者則是為了固定整個網頁的大小。此外, 我們將對左區塊設定底色與文字顏色、加粗左框線, 並設定滑鼠指標移到連結時會改變顏色, 其實也就是予以美化。 至於右區塊則與前例相同。以上這 4 個區塊都用 width 屬性固定了大小, 由於 CSS 的部分增加了不少程式碼, 所以我們將它單獨存成 CSS 檔。 使用固定寬度的區塊 在 HTML 檔, 主要是用 link href=... 與 CSS 檔建立連結, 所對應的程式碼與畫面如下： 使用固定寬度的區塊 使用固定寬度的區塊 使用固定寬度的區塊 使用固定寬度的區塊 連結之 CSS 檔（2_field.css）的內容如下： 使用固定寬度的區塊 使用固定寬度的區塊 使用固定寬度的區塊 使用固定寬度的區塊 固定了各個區塊的寬度之後, 即使縮小瀏覽器視窗, 圖形或文字的位置都不會被擠掉,純粹只是顯示範圍變小而已： 使用固定寬度的區塊 以上的方式雖然可以避免網頁內容亂掉的問題, 可是為了確保內容不會太寬或太窄, 必須精確計算每個區塊、圖形和段落文字等等的寬度, 無形中增加了工作負擔, 所以孰優孰劣, 就得由設計人員自行取捨囉。 16-1-2 三欄式版面 三欄式的版面設計, 在不少網站也都經常出現。基本上, 運用兩欄式版面的技巧, 多加一個區塊, 就成為三欄式版面。 同樣地, 也會面臨是否要固定區塊寬度的問題？這部分我們就不再重複比較說明, 請自行參考前文。 若要固定區塊的寬度, 只要能將各元件的寬度計算得精確, 版面就不會亂掉。 16-1-2 三欄式版面 以下仍用變動寬度的區塊為例, 來說明其網頁架構： 16-1-2 三欄式版面 此架構主要是用 div 標籤多加了一個右區塊, 但是為了避免縮小視窗時, 右區塊會被往下擠, 所以固定了左、右區塊的寬度, 剩下的寬度則全部留給中間區塊。其對應的程式碼與畫面如下： 16-1-2 三欄式版面 16-1-2 三欄式版面 16-1-2 三欄式版面 16-1-2 三欄式版面 所連結之 CSS 檔（3_field.css）內容如下： 16-1-2 三欄式版面 16-1-2 三欄式版面 16-2 套用濾鏡特效 『濾鏡（Filter）特效』是在影像處理上經常用到的效果, 利用不同的濾鏡, 可以讓一張圖片呈現出多種不同的風貌, 因此諸如 Photoshop、PhotoImpact 等等專業的影像處理軟體, 都具備豐富的濾鏡特效。 可是, 就算不使用這些專業軟體, 我們光憑著 CSS 所支援的濾鏡功能, 同樣也能表現出夠水準的特效。 16-2-1 為圖片加上立體效果