3.5　圖像效果實(shí)例——?jiǎng)?chuàng)建導(dǎo)航條

在Dreamweaver CS6中，提供了快速制作導(dǎo)航條的功能。導(dǎo)航條中的按鈕，包含4個(gè)不同顯示狀態(tài)的圖像：“一般狀態(tài)圖像”“鼠標(biāo)經(jīng)過圖像”“按下圖像”和“按下鼠標(biāo)時(shí)經(jīng)過圖像”。一般情況下，只需要設(shè)置一般狀態(tài)圖像與鼠標(biāo)經(jīng)過圖像就可以了。

本實(shí)例中導(dǎo)航條的制作，主要由“插入導(dǎo)航條”對(duì)話框來完成。通過本實(shí)例，學(xué)習(xí)和掌握在Dreamweaver中添加導(dǎo)航條的基本方法。本實(shí)例的編輯過程，主要包括以下操作環(huán)節(jié)。

（1）準(zhǔn)備好導(dǎo)航條中要使用的圖像，包括“一般狀態(tài)”“鼠標(biāo)經(jīng)過”“按下”和“按下鼠標(biāo)時(shí)經(jīng)過”這4個(gè)狀態(tài)時(shí)的圖像。

（2）執(zhí)行“插入記錄”→“圖像對(duì)象”→“導(dǎo)航條”命令，打開“插入導(dǎo)航條”對(duì)話框。

（3）在“插入導(dǎo)航條”對(duì)話框中，設(shè)置“一般狀態(tài)”“鼠標(biāo)經(jīng)過”“按下”和“按下鼠標(biāo)時(shí)經(jīng)過”這4個(gè)狀態(tài)的圖像存放地址，然后為其設(shè)置超級(jí)鏈接。

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

當(dāng)鼠標(biāo)指針指向?qū)Ш綏l上的導(dǎo)航按鈕時(shí)，按鈕的圖像會(huì)產(chǎn)生變化；當(dāng)鼠標(biāo)移開后，圖像又恢復(fù)到初始狀態(tài)；當(dāng)單擊導(dǎo)航條上的按鈕，會(huì)跳轉(zhuǎn)到另一個(gè)頁面。下面就一起來對(duì)網(wǎng)頁導(dǎo)航條的插入編輯進(jìn)行實(shí)踐練習(xí)。

3.5.1　設(shè)置導(dǎo)航條項(xiàng)目

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

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

“插入導(dǎo)航條”對(duì)話框中各項(xiàng)參數(shù)的功能介紹如下。

導(dǎo)航條元件：在列表框中顯示添加的導(dǎo)航條元件。選中列表框中的元件，即可在正文的選項(xiàng)中進(jìn)行設(shè)置。

項(xiàng)目名稱：為導(dǎo)航條元件設(shè)置名稱。

狀態(tài)圖像：瀏覽器默認(rèn)顯示的圖像。

鼠標(biāo)經(jīng)過圖像：當(dāng)鼠標(biāo)移動(dòng)到圖像上方時(shí)顯示的圖像。

按下圖像：當(dāng)按下鼠標(biāo)左鍵單擊圖像時(shí)顯示的圖像。

按下鼠標(biāo)時(shí)經(jīng)過圖像：當(dāng)按下鼠標(biāo)后，經(jīng)過圖像時(shí)顯示的圖像。

替換文本：當(dāng)圖像無法正常顯示時(shí)，在瀏覽器中顯示的圖像。

按下時(shí)，前往的URL：設(shè)置該導(dǎo)航條元件的超級(jí)鏈接。

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

3.5.2　添加導(dǎo)航條項(xiàng)目

在“插入導(dǎo)航條”對(duì)話框中，完成一個(gè)導(dǎo)航條元件的設(shè)置后，還需要添加新的導(dǎo)航條元件項(xiàng)目，以滿足導(dǎo)航條在網(wǎng)頁設(shè)計(jì)中的需要。

（1）單擊“插入導(dǎo)航條”對(duì)話框中的“添加項(xiàng)”按鈕，在“導(dǎo)航條元件”列表框中新添加一個(gè)項(xiàng)目（圖3-34）。

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

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

（4）在“插入導(dǎo)航條”對(duì)話框的“按下時(shí)，前往的URL”文本框中輸入鏈接地址，在“in”下拉列表中選擇“主窗口”選項(xiàng)（圖3-37）。

（5）重復(fù)前面的操作，添加新項(xiàng)目并進(jìn)行各種圖像的設(shè)置，直到所有的項(xiàng)目添加完成，然后單擊“確定”按鈕（圖3-38）。

（6）在文檔中插入光標(biāo)的位置，可以看到新創(chuàng)建的導(dǎo)航條（圖3-39）。

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