關(guān)于導(dǎo)航條是網(wǎng)頁必不可少的一部分，那么怎樣制作一個(gè)高質(zhì)量的、美觀的導(dǎo)航條呢?那么下面學(xué)習(xí)啦小編跟分享了更多關(guān)于fireworks 導(dǎo)航條，希望你喜歡。

　　fireworks 導(dǎo)航條的方法/步驟：

　　該導(dǎo)航條專門用于以下五張網(wǎng)頁的導(dǎo)航(均放在同一目錄之中)。即，

　　主頁： index.html

　　個(gè)人簡介： personal.htm

　　我的學(xué)校： school.htm

　　本人作品： writing.htm

　　自薦書： oneself.htm

　　具體步驟是，先制作元件按鈕，然后在文檔窗口中復(fù)制出五個(gè)實(shí)例，并設(shè)置它們的屬性，最后將文檔導(dǎo)出成“ HTML 和圖像”。

　　1　　在fireworks中 制作按鈕

　?、艅?chuàng)建一個(gè)新文檔，屬性如圖1所示。并保存為“按鈕 .png ” 。

　　圖1 “新建文檔”對話框

　?、茊螕?ldquo;編輯”·“插入”·“新建元件”。

　　提示：可以單擊“編輯”·“插入”·“新建按鈕”，創(chuàng)建按鈕元件。但是，這樣做，按鈕名稱，默認(rèn)為“按鈕”。

　　⑶在“元件屬性”對話框上，“名稱”框中輸入“導(dǎo)航按鈕”;“類型”選項(xiàng)區(qū)中，選中“按鈕”，然后單擊“確定”。如圖2 所示。

　　圖2 “元件屬性”對話框

　?、仍诎粹o編輯窗口中，用“圓角矩形”工具制作一個(gè)圓角矩形。屬性如圖3所示。

　　圖3 圓角矩形屬性

　?、捎?ldquo;矩形”工具制作一個(gè)矩形。屬性如圖4所示。

　　圖4 矩形屬性

　?、拾醋?ldquo;指針”工具在窗口中拖曳(或按 Ctrl + A )，將兩個(gè)對象選中后，“修改”·“組合路徑”·“聯(lián)合”，將它們聯(lián)合成為一個(gè)對象。

　　提示：“聯(lián)合”， 是將多個(gè)對象結(jié)合成一個(gè)對象，新對象的輪廓，是由被聯(lián)合對象的外部界線，內(nèi)部界線將消失。填充的顏色全部改為下部對象的原填充的顏色。

　?、藛螕?ldquo;屬性”面板上，“效果”右側(cè)的“+”按鈕后，指向“斜角和浮雕”，然后單擊“內(nèi)斜角”。為聯(lián)合后的對象應(yīng)用樣式。如圖5 所示。

　?、淘?ldquo;寬度”框中，將寬度設(shè)定為“ 2 ”。如圖6所示。

　　提示：雙擊“效果”框中樣式名，即可打開樣式屬性設(shè)置對話框。

　　圖5 應(yīng)用樣式“內(nèi)斜角”

　　圖6 “樣式屬性”對話框

　　⑼用“文本”工具書寫“主頁”，并將其放置元件中央。屬性如圖7 所示。

　　圖7 文本屬性設(shè)置

　　提示：在“主”與“頁”之間加兩個(gè)全角空格。即，讓“主頁”兩字占用 4 個(gè)字的位置。因?yàn)?，?jì)劃在導(dǎo)航條放置的按鈕實(shí)例上，最多有四個(gè)字。

　　至此，按鈕的第一種狀態(tài)“釋放”制作完成，效果如圖8 所示。

　　圖8 按鈕“釋放”狀態(tài)

　?、螁螕舭粹o編輯窗口上方的“滑過”標(biāo)簽，制作“滑過”狀態(tài)。

　?、蠁螕?ldquo;復(fù)制彈起時(shí)的圖形”按鈕，將“釋放”狀態(tài)的圖形復(fù)制過來。

　?、袑⑽淖值念伾淖?yōu)楹谏?圖形對象的顏色改為黃色。如圖9 所示。

　　圖9 按鈕“滑過”狀態(tài)

　?、褑螕舭粹o編輯窗口上方的“按下”標(biāo)簽，制作“按下”狀態(tài)。

　　⒁單擊“復(fù)制彈起時(shí)的圖形”按鈕，將“滑過”狀態(tài)的圖形復(fù)制過來。

　?、訉⑽淖值念伾淖?yōu)榘咨煮w改為“華文新魏”;圖形對象的顏色改為青色( #339999 )。如圖10 所示。

　　圖10 按鈕“按下”狀態(tài)

　　⒀單擊按鈕編輯窗口上方的“按下”標(biāo)簽，制作“按下”狀態(tài)。

　?、覇螕?ldquo;復(fù)制彈起時(shí)的圖形”按鈕，將“滑過”狀態(tài)的圖形復(fù)制過來。

　　⒂將文字的顏色改變?yōu)樗{(lán)色;圖形對象的顏色改為紅色，且在“屬性”面板上將“效果”框中的“內(nèi)斜角”效果刪除。如圖11 所示。

　　圖11 按鈕“按下時(shí)滑過”狀態(tài)

　　至此，按鈕元件制作完成。“庫”面板，如圖12 所示。

　　提示：按鈕圖形，以及文字的字體和顏色，用戶可以根據(jù)自己的喜好選定。上述僅供參考。

　　圖12 “庫”面板

　　“庫”面板上可進(jìn)行的操作

　　• 修改元件，雙擊該元件名(或預(yù)覽框中的圖形)，打開元件編輯窗口，即可以對元件進(jìn)行修改。

　　• 刪除元件，單擊“庫”面板右下角的刪除按鈕，即可刪除選中的元件。

　　• 復(fù)制元件，將元件拖到面板下部的新建按鈕上，則可復(fù)制元件。

　　2　制作導(dǎo)航條

　　回到編輯文檔窗口

　　⑴將按鈕實(shí)例，擺放到畫布的最左側(cè)后，四次從“庫”面板中將按鈕元件拖到文檔窗口，并擺放整齊。如圖13 所示。

　　圖13 導(dǎo)航條上按鈕實(shí)例

　　提示：為了使五個(gè)實(shí)例擺放整齊，可以應(yīng)用“修改”·“對齊”次級菜單中的命令，或者在“屬性”面板上，精確設(shè)定各個(gè)實(shí)例的位置( X 、 Y 值)。

　　⑵選中左側(cè)第一個(gè)后，在“屬性”面板上，“鏈接”框中輸入“ index.html ”。如圖14 所示。

　　圖14 “鏈接”設(shè)置

　　⑶選中右起第二個(gè)按鈕實(shí)例，修改屬性。如圖15 所示。

　　圖15 “個(gè)人簡介”設(shè)置

　?、冗x中中間的按鈕實(shí)例，修改屬性。如圖16 所示。

　　圖16 “我的學(xué)校”設(shè)置

　?、蛇x中右起第二個(gè)的按鈕實(shí)例，修改屬性。如圖17 所示。

　　圖17 “本人作品”設(shè)置

　?、蔬x中最右側(cè)按鈕實(shí)例，修改屬性。如圖18 所示。

　　圖18 “自薦書”設(shè)置

　　提示：“文本”框中，“自薦書”之前加了一個(gè)半角空格，這是為了保持文本在按鈕中央位置。

　　至此，導(dǎo)航條制作完成，如圖19 所示。

　　圖19 制作完成的導(dǎo)航條

　?、吮４?ldquo;按鈕 .png ”文件，以便今后修改之需。

　　3　導(dǎo)出導(dǎo)航條

　　導(dǎo)航條制作完成后，要在網(wǎng)頁中應(yīng)用，須將它導(dǎo)出。

　?、艈螕?ldquo;文件”·“導(dǎo)出”。

　　⑵在“導(dǎo)出”對話框上，選定導(dǎo)出文件的存放目錄和文件名后，單擊“確定”。如圖 20 所示。

　　圖20 “導(dǎo)出”對話框

　　提示：導(dǎo)出的文件包括，一個(gè)插入 JavaScript 客戶端腳本的網(wǎng)頁文件和一些圖像切片。

　　4　注意事項(xiàng)

　　今后，在使用 Dreamweaver 制作網(wǎng)頁時(shí)，使用“插入”·“圖像對象”·“ Fireworks HTML ”命令，將它們導(dǎo)入網(wǎng)頁。

　　制作過程中，設(shè)定了各個(gè)導(dǎo)航按鈕的“鏈接”目標(biāo)等，如果需要修改，可以在 Fireworks 中，修改原文件，也在導(dǎo)出的網(wǎng)頁文件中修改。