碳纖維風格的插入式導航菜單:HTML…

繼上篇”​​碳纖維風格的插入式導航菜單​​“，Richard Carpenter把菜單圖檔轉化為CSS/HTML文檔了。我們就一起接着學習吧！

檢視CSS/HTML完整版，請點選​​這裡​​：

​​

​​

布署檔案

在我們開始切割圖檔之前，先在本地web伺服器上布署檔案，建立檔案夾，在建立的檔案夾中建立空白HTML檔案”index.html”，空白CSS檔案”styles.css”，styles.css放在另一個檔案夾”stylesheets”中，最後再建立檔案夾”images”存放圖檔。

建立HTML元素

用代碼編輯器打開html檔案，在标簽”BODY”内建立DIV，設定ID屬性為”container”，此DIV将是所有元素的容器，代碼如下：

在”container “DIV内建立另外一個DIV，ID屬性為”nav”，是包含所有導航元素的容器，代碼如下：

在”nav”DIV内建立一個簡單的UL無序清單，設定UL的class屬性為”navigation”，每個清單元素（LI）也設定不同的class屬性，根據class屬性來設定LI的樣式。代碼如下：

以上是主要的HTML代碼，接下來開始分割導航圖檔。

準備導航圖檔

不管你相不相信，我們隻需要一張大圖檔，呈現正常和激活的狀态，然後巧用CSS改變背景圖檔位置，這種技術稱為”​​樣式表貼圖定位（CSS Sprites）​​“。

這麼cool的技術的目的就是通過整合圖檔（隻要加載一次圖檔，在激活狀态下運作也是正常的），減少對伺服器的請求次數，提高頁面加載速度。整個圖檔大小是80kb。圖檔如下：

在photoshop中打開PSD檔案，選取”矩形選框”工具，選中整個導航。

然後去往菜單”圖像>裁剪”，裁剪後，你将注意到畫布變短了，是以要增加畫布高度，記住目前畫布的高度，乘以2，畫布高度将是目前畫布的一倍。我的179px，增加一倍後是358px，去往菜單”圖像>畫布大小”。如下圖進行設定：

效果如下：

複制導航菜單

在複制之前，移除激活狀态效果。

選擇所有導航圖層并進行複制，選中複制的圖層，垂直往下移，位于原圖的正下方，保證兩圖之間沒有縫隙。如下圖所示：

上方的導航是浏覽器一加載的正常狀态，下方的是滑鼠激活的狀态，是以要給下方的每個按鈕增加激活的效果，在此過程中不要移動按鈕文字和球體。浏覽器會因為一小點的移動而失去原有的效果。

在儲存圖檔之前，移除背景圖層，這樣兩個導航的背景層是透明的，把圖檔”navigation.png”儲存到檔案夾”images”中。同時我們還要儲存一張拉絲金屬背景圖”bg.gif”到”images”中。

CSS樣式設定

打開”styles.css”，開始編輯HTML元素body和container DIV的樣式，代碼如下：

對于body，隻是簡單的增加背景圖檔，并重複出現。對于container，設定margin為auto，是能讓導航圖檔居中顯示，寬度正是導航圖檔的寬度。

接下來設定nav DIV的樣式，代碼如下：

我們必須意識到nav DIV的高度和寬度都是固定的，正是導航圖檔的高度和寬度，而且文本要縮進到-9999px，這樣是為了隐藏文本。

接下來設定每個無序清單LI的樣式：

背景圖檔都是一樣的，但是寬度和位置不一樣。寬度可以在photoshop中測量出來，如下所示：