3.5　圖像效果實例——創建導航條

在Dreamweaver CS6中，提供了快速制作導航條的功能。導航條中的按鈕，包含4個不同顯示狀態的圖像：“一般狀態圖像”“鼠標經過圖像”“按下圖像”和“按下鼠標時經過圖像”。一般情況下，只需要設置一般狀態圖像與鼠標經過圖像就可以了。

本實例中導航條的制作，主要由“插入導航條”對話框來完成。通過本實例，學習和掌握在Dreamweaver中添加導航條的基本方法。本實例的編輯過程，主要包括以下操作環節。

（1）準備好導航條中要使用的圖像，包括“一般狀態”“鼠標經過”“按下”和“按下鼠標時經過”這4個狀態時的圖像。

（2）執行“插入記錄”→“圖像對象”→“導航條”命令，打開“插入導航條”對話框。

（3）在“插入導航條”對話框中，設置“一般狀態”“鼠標經過”“按下”和“按下鼠標時經過”這4個狀態的圖像存放地址，然后為其設置超級鏈接。

（4）執行“文件”→“保存”命令保存文件，按下“F12”鍵在瀏覽器中預覽效果。

當鼠標指針指向導航條上的導航按鈕時，按鈕的圖像會產生變化；當鼠標移開后，圖像又恢復到初始狀態；當單擊導航條上的按鈕，會跳轉到另一個頁面。下面就一起來對網頁導航條的插入編輯進行實踐練習。

3.5.1　設置導航條項目

（1）打開光盤中Chapter 3\Lesson 9小節目錄下的“start.html”文件（圖3-32）。

（2）將光標插入到文檔Logo圖像右邊的單元格中，執行“插入記錄”→“圖像對象”→“導條”命令，打開“插入導航條”對話框（圖3-33）。

“插入導航條”對話框中各項參數的功能介紹如下。

導航條元件：在列表框中顯示添加的導航條元件。選中列表框中的元件，即可在正文的選項中進行設置。

項目名稱：為導航條元件設置名稱。

狀態圖像：瀏覽器默認顯示的圖像。

鼠標經過圖像：當鼠標移動到圖像上方時顯示的圖像。

按下圖像：當按下鼠標左鍵單擊圖像時顯示的圖像。

按下鼠標時經過圖像：當按下鼠標后，經過圖像時顯示的圖像。

替換文本：當圖像無法正常顯示時，在瀏覽器中顯示的圖像。

按下時，前往的URL：設置該導航條元件的超級鏈接。

in：在其下拉列表中選擇鏈接網頁在瀏覽器中的打開方式。

3.5.2　添加導航條項目

在“插入導航條”對話框中，完成一個導航條元件的設置后，還需要添加新的導航條元件項目，以滿足導航條在網頁設計中的需要。

（1）單擊“插入導航條”對話框中的“添加項”按鈕，在“導航條元件”列表框中新添加一個項目（圖3-34）。

（2）重復開始時的操作，單擊“狀態圖像”后面的“瀏覽”按鈕，在打開的“選擇圖像源文件”對話框中，選擇“22.png”圖像文件，然后單擊“確定”按鈕（圖3-35）。

（3）單擊“鼠標經過圖像”后面的“瀏覽”按鈕，在打開的“選擇圖像源文件”對話框中，選擇“23.png”圖像文件，然后單擊“確定”按鈕（圖3-36）。

（4）在“插入導航條”對話框的“按下時，前往的URL”文本框中輸入鏈接地址，在“in”下拉列表中選擇“主窗口”選項（圖3-37）。

（5）重復前面的操作，添加新項目并進行各種圖像的設置，直到所有的項目添加完成，然后單擊“確定”按鈕（圖3-38）。

（6）在文檔中插入光標的位置，可以看到新創建的導航條（圖3-39）。

（7）執行“文件”→“保存”命令保存文件，按下“F12”鍵在瀏覽器中預覽效果（圖3-40）。