對(duì)一個(gè)站點(diǎn)來說，導(dǎo)航系統(tǒng)是很重要的。如果你的站點(diǎn)導(dǎo)航系統(tǒng)設(shè)計(jì)得好，訪問你的網(wǎng)站的用戶就會(huì)感到特別方便，反之，用戶會(huì)感到無所適從。本次課程我們要討論如何在頁面插入Dreamweaver的導(dǎo)航條，并對(duì)頁面中的導(dǎo)航條的創(chuàng)建方法進(jìn)行總結(jié)。另外，還順便討論一下如何插入flash動(dòng)畫等頁面元素的方法。
一、規(guī)劃和創(chuàng)建頁面導(dǎo)航元素
1、打開留言板站點(diǎn)主頁面文檔（main.asp）。將頁面頂部的表格重新拆分調(diào)整為如圖1所示的效果。
圖1 main.asp頁面頂部表格
2、根據(jù)圖1所示的表格尺寸，在Fireworks MX和Flash MX中創(chuàng)建圖像和動(dòng)畫。（在這里下載）
你下載的是一個(gè)rar壓縮包（image5.rar），其中包括以下內(nèi)容：
△一個(gè)寬300像素、高120像素的圖像文件（top001.gif），在Fireworks MX制作完成。
△一個(gè)寬455像素、高90像素的flash動(dòng)畫文件（top1.swf），在Flash MX制作完成。
△5組共10個(gè)寬91像素、高30像素的圖像文件（daohang*_*），在Fireworks MX制作完成。
3、將圖像top001.gif插入到圖1中①所標(biāo)示的單元格。
4、將flash動(dòng)畫top1.swf插入到圖1中②所標(biāo)示的單元格，具體步驟是：
?、艑⒐鈽?biāo)定位到圖1中②所標(biāo)示的單元格中。
?、茊螕舨迦霗谥械?#8220;插入flash”命令，彈出如圖2所示的“選擇文件“對(duì)話框。在其中瀏覽選擇需要插入的flash動(dòng)畫文件。
圖2 選擇要插入的flash動(dòng)畫文件
?、沁x中插入的flash動(dòng)畫，在屬性面板可以對(duì)它進(jìn)行設(shè)置和操作，如圖3所示。
圖3 flash動(dòng)畫屬性面板
二、插入導(dǎo)航條
1、將鼠標(biāo)光標(biāo)定位到圖1中③所標(biāo)示的單元格，然后單擊插入欄中的“插入導(dǎo)航條”命令，如圖4所示。
圖4 插入導(dǎo)航條
2、單擊“插入導(dǎo)航條”命令以后，會(huì)彈出如圖5所示的“插入導(dǎo)航條“對(duì)話框。
圖5 插入導(dǎo)航條對(duì)話框
3、在如圖5所示的插入導(dǎo)航條對(duì)話框中，我們要定義5個(gè)導(dǎo)航項(xiàng)目，將來得到的是5個(gè)水平排列的導(dǎo)航按鈕。每個(gè)導(dǎo)航項(xiàng)目分別使用前面下載的在Fireworks MX制作完成5組圖像文件。
▲完成以后的留言板站點(diǎn)主頁面效果：單擊這里觀看
三、創(chuàng)建頁面導(dǎo)航條方法總結(jié)
1、自定義簡單導(dǎo)航條
①布局表格，導(dǎo)航條中有幾個(gè)項(xiàng)目，就創(chuàng)建幾個(gè)單元格。
?、谠趩卧裰休斎胛谋净蛘卟迦雸D像。
?、鄯謩e定義每個(gè)單元格中的文本或者圖像的超級(jí)鏈接。
2、創(chuàng)建Dreamweaver導(dǎo)航條（方法請(qǐng)參考前面）
3、通過插入“代碼面板/代碼片段/導(dǎo)航”創(chuàng)建常見的導(dǎo)航條，如圖5所示。
代碼片段中有很多常用的導(dǎo)航條代碼模板，利用它我們可以很容易的創(chuàng)建一些常見的導(dǎo)航條。
圖6 代碼片段：導(dǎo)航
4、創(chuàng)建Fireworks MX導(dǎo)航條
Fireworks MX中也提供了創(chuàng)建導(dǎo)航條的具體工具和方法，我們?cè)贔ireworks MX中設(shè)計(jì)導(dǎo)航條，然后再插入到Dreamweaver MX中進(jìn)行編輯。
如圖7所示，單擊插入欄中的插入Fireworks HTML命令可以實(shí)現(xiàn)Fireworks HTML文檔的插入。
圖7 插入Fireworks HTML文檔
5、創(chuàng)建Flash按鈕導(dǎo)航條
如圖8所示，單擊插入欄下媒體標(biāo)簽下的Flash按鈕命令可以實(shí)現(xiàn)在頁面文檔插入Flash按鈕的目的。將多個(gè)Flash按鈕集合在一起也能實(shí)現(xiàn)導(dǎo)航條的功能。
圖8 插入Flash按鈕
