巧用firework工具以及CSS制作網頁動態導航欄

摘要:本文介紹了如何使用dreamweaver的CSS樣式表以及firework軟件來制作一個精美的動態導航欄，并且點擊動態導航欄的鏈接發生鏈接相應的變化以及跳到相對應的頁面的方法，通過一個實例來講述具體制作方法，總結此方法的優缺點。

關鍵詞:firework 8.0 dreamweaver 8.0 CSS 網頁動態導航欄 超級鏈接

0 引言

隨著日新月異的網絡的發展，一個公司，一個企業如何能夠通過網頁來宣傳的產品，樹立自己的形象，制作一個美觀而有創意的主頁越來越起到了至關重要的作用了，隨著現在對網頁技術的要求越來越高，一個主頁除了有個很漂亮的標題欄之外，有個吸引眼球動態導航欄往往能夠讓頁面達到意想不到的效果。本文通過一個實例來講解制作一個漂亮的動態導航欄的制作方法。

1 效果功能介紹

如今流行的動態導航欄通常有如下圖1所示:

功能通常如下:當網頁顯示在首頁時候，導航欄的首頁鏈接背景為紅色文字藍色效果其他鏈接為藍色背景文字白色效果。當鼠標經過導航欄的每個鏈接時，鏈接的顏色變成首頁鏈接效果，點擊某個鏈接后頁面切換到相應的頁面同時鏈接也進行相應的切換。

2 制作步驟

下面我們通過一個具體的實例來講解這種效果的制作過程:

2.1 背景圖片文件的制作與準備:

第一步:打開firework軟件;新建一個長度為100像素，高度為35像素的空白文件，背景隨意。

第二步:通過矩形工具畫一個與背景畫布一樣大小的矩形(可以為其他形狀);

第三步:填充過渡顏色;通過左邊的顏料桶工具選擇漸變顏色如圖2所示:

通過調節過渡填充的杠桿以及填充過渡方向產生如下圖3所示的顏色:

第四步:利用文件菜單的圖像預覽功能導出為gif格式的圖像文件，注意導出時候的高度與寬度與畫布一樣大小;以同樣的方法制作出如圖4的黑色gif圖片，黑色圖片文件名為hei.gif，紅色圖片文件名為hong.gif。

2.2 通過dreamweaver的CSS樣式來制作動態導航欄鏈接:

第一步:打開dreamweaver8.0軟件，在dreamweaver工具的代碼區輸入以下鏈接列表的代碼:

• 首頁
• 我的風采
• 聯系我們

第二步:通過dreamweaver工具自帶的CSS樣式新建樣式中選擇統一樣式 li樣式，設定好高與寬，注意高與寬度和制作好的圖像高度與寬度一致，設置左浮動，代碼為:

li{

float: left;

height: 35px;

width: 100px;

margin: 0px;

list-style-type: none;

}

第三步:給每個文字在dreamweaver工具屬性面板中加鏈接分別為:shouye.html，fengcai.html，lxwm.html;

第四步:新建CSS樣式選擇統一樣式中的a，設置鏈接屬性為:背景圖像選擇黑色圖片不重復，設置填充高度，計算方式為:li的總高度減去文字大小等于鏈接上面填充與下面填充之和，顯示方式為區塊，文本居中;其具體代碼為:

a {

font-size: 14px;

text- align: center;

background-image: url(hei.gif);

background-repeat: no-repeat;

color: #FFFF00;

display: block;

padding-top: 10px;

padding-bottom: 11px;

text-decoration: none;

font-weight: bold;

}

第五步:新建樣式中選擇高級樣式a:hover，設置好鼠標經過的狀態，改變背景圖片為紅色圖片不重復，文字顏色改變一下，其具體代碼為:

a:hover {

background-image: url(hong.gif);

background-repeat: no-repeat;

color: #FFFF00;

}

這樣，鼠標經過鏈接便背景圖片的動態效果制作完成。

2.3 通過CSS實現點擊鏈接后鏈接背景變化以及跳轉頁面:

第一步:回到dreamweaver工具面板的代碼區域的CSS代碼部分，

在樣式部分加入以下特殊樣式:樣式屬性與鼠標經過的屬性一樣。具體代碼為:

li.pan a{

background-image: url(hong.gif);

background-repeat: no-repeat;

color: #FFFF00;

}

第二步:應用此樣式到每個列表中，注意:不是應用到a鏈接標簽中，而是應用到li的列表項中。比如主頁頁面的應用為:

• 首頁

保存頁面為shouye.html

第三步:依次類推，改掉頁面標題文字，將特殊樣式應用到其他頁面的相對應的列表鏈接中并且保存文件名即可，大功告成!預覽效果為如圖5:

點擊我的風采鏈接跳轉到如圖5效果的網頁。

3 總結

本文介紹了如何使用dreamweaver的CSS樣式表以及firework軟件來制作一個精美的動態導航欄，并且點擊動態導航欄的鏈接發生鏈接相應的變化以及跳到相對應的頁面的方法，通過這種方法制作的動態導航欄優點:制作步驟簡單，網頁瀏覽速度快;不擔心瀏覽器兼容性的問題。缺點:不能想flash制作動態導航欄一樣可以形成過程動畫。

參考文獻:

[1]楊明.《網頁設計與制作:Dreamweaver CS3+Firework》.清華大學出版社.2009年10月第一版.

[2]曾順.《精通CSS+DIV網頁樣式與布局》.人民郵電出版社.2007年8月第一版.