CSS Sprite 教學 – 條例式按鈕設計

大家好,在上一次飛肯教學文中,所提到的「CSS Sprite」語法技巧,不知道各位都練習過了嗎?(如果有新同學加入的話,請參考右邊的這個教學文網址: http://www.flycan.com/article/css/css-icon-sprite-1938.html)

延續上次的主題,今天我們再來做一個也很實用的「條例式按鈕」語法練習,也就是大家常常見到、用來取代表格排版的「 <ul> 、<li>  – 項目清單」;在這篇教學文中,我們會先做一次一般版本的寫法,接著,我們就會教大家如何使用「CSS Sprite」技巧,讓自己的網頁更為精簡、優化喔~

底下,就請跟著我們的教學文步驟,一起來練功吧~

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - fly-ok


【步驟一】 新建一個 HTML 頁面

如下方圖示,先開啟一個 HTML 頁面,使用<ul>及<li>標籤,建立數個用超連結(此範例中是以不同課程名稱來命名)所建構而成的項目清單。

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - ul-li-htm


【步驟二】 附加外部CSS樣式表

先新增一個 CSS 樣式表(名稱為”MAIN.css”),附加在剛剛建立的 HTML 網頁中;

並且,在項目清單的 <li>標籤中,使用 class 選取器(分別命名為”PS”、”DW”、”FL”、”AS”、”HC”),如下方圖示。

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - class


【步驟三】CSS語法部分 – 一般版本寫法

接下來,開啟剛剛建立的 “MAIN.css” ,我們要來編寫主要的 CSS 語法部分。

首先,從 ul 跟 li 的語法開始,大家可以參照下方圖示的解說:

(需特別注意的是,”水平排列”的 CSS 語法一定要記得寫在 li 標籤上喔~)

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - css-ul-li


接下來,使用事先準備好的按鈕圖片,做滑鼠變換前、後的語法編寫:

(如圖示,記得要先將超連結改為區塊模式;然後使用 “background-position” 的屬性,來做按鈕圖片的位置變換。)

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - css-li-ps-a


完成”PS”的部分之後,其他4個超連結都依此類推,除了需要各自套用不同的按鈕圖片之外,其餘的寫法是一樣的。

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - the-same-li-a-hover

以上,

就完成了一般版本的條例式按鈕語法練習。

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - fly-ok


【步驟四】 CSS Sprite 優化版本

當同學熟悉了一般版本的 CSS 語法之後,

從這個步驟開始,

我們要來教各位直接使用「 CSS  Sprite 」技巧,把剛剛的條例式按鈕語法精簡化。

首先,

將所有使用到的按鈕圖片( btn01.jpg ~ btn05.jpg )全部合併成一張(如下方圖示,並另存新檔為 “menu.jpg” ):

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - btn-sprite

ul 跟 li 兩個標籤的 CSS 語法與一般版本是相同的(請參考步驟三之圖示1);

但由於圖片合併的關係,所以每個超連結要改為統一套用同一張背景。

→  li a { background-image:url(menu.jpg); }

另外,此步驟中最重要的,就是將 “background-position” 改為座標寫法(如下圖);至於X、Y軸座標的設定,請各位同時參照上面那張 “menu.jpg” 的圖示說明喔。

CSS 教學 - 網頁排版  - CSS Sprite 教學 - 條例式按鈕設計 - css-sprite

以上,只要把所有座標位置正確寫上之後,就可大功告成囉。

寫到這邊,不知道各位同學發現了沒?

原本要70行才能寫完的長篇語法,用了 Sprite 技巧之後,只需要用一半的行數就可以整篇打完,是不是太神奇啦!傑克~

雖然,最後呈現在瀏覽器上面的結果是一模一樣的,但是,這個 CSS Sprite 技巧不僅可優化網頁,又能為自己的專業度加分,請大家一定要把這招好好學起來喔!

(小編也要努力用功去囉~ See you ! ^_^ )

 

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版 and tagged , , , , , , .

留言功能已關閉。