fireworks導航條

　　關于導航條是網頁必不可少的一部分，那么怎樣制作一個高質量的、美觀的導航條呢?那么下面學習啦小編跟分享了更多關于fireworks 導航條，希望你喜歡。

　　fireworks 導航條的方法/步驟：

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

　　主頁： index.html

　　個人簡介： personal.htm

　　我的學校： school.htm

　　本人作品： writing.htm

　　自薦書： oneself.htm

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

　　1　　在fireworks中 制作按鈕

　　⑴創建一個新文檔，屬性如圖1所示。并保存為“按鈕 .png ” 。

　　圖1 “新建文檔”對話框

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

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

　?、窃?ldquo;元件屬性”對話框上，“名稱”框中輸入“導航按鈕”;“類型”選項區中，選中“按鈕”，然后單擊“確定”。如圖2 所示。

　　圖2 “元件屬性”對話框

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

　　圖3 圓角矩形屬性

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

　　圖4 矩形屬性

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

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

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

　　⑻在“寬度”框中，將寬度設定為“ 2 ”。如圖6所示。

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

　　圖5 應用樣式“內斜角”

　　圖6 “樣式屬性”對話框

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

　　圖7 文本屬性設置

　　提示：在“主”與“頁”之間加兩個全角空格。即，讓“主頁”兩字占用 4 個字的位置。因為，計劃在導航條放置的按鈕實例上，最多有四個字。

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

　　圖8 按鈕“釋放”狀態

　?、螁螕舭粹o編輯窗口上方的“滑過”標簽，制作“滑過”狀態。

　?、蠁螕?ldquo;復制彈起時的圖形”按鈕，將“釋放”狀態的圖形復制過來。

　　⑿將文字的顏色改變為黑色;圖形對象的顏色改為黃色。如圖9 所示。

　　圖9 按鈕“滑過”狀態

　?、褑螕舭粹o編輯窗口上方的“按下”標簽，制作“按下”狀態。

　　⒁單擊“復制彈起時的圖形”按鈕，將“滑過”狀態的圖形復制過來。

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

　　圖10 按鈕“按下”狀態

　?、褑螕舭粹o編輯窗口上方的“按下”標簽，制作“按下”狀態。

　　⒁單擊“復制彈起時的圖形”按鈕，將“滑過”狀態的圖形復制過來。

　?、訉⑽淖值念伾淖優樗{色;圖形對象的顏色改為紅色，且在“屬性”面板上將“效果”框中的“內斜角”效果刪除。如圖11 所示。

　　圖11 按鈕“按下時滑過”狀態

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

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

　　圖12 “庫”面板

　　“庫”面板上可進行的操作

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

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

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

　　2　制作導航條

　　回到編輯文檔窗口

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

　　圖13 導航條上按鈕實例

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

　?、七x中左側第一個后，在“屬性”面板上，“鏈接”框中輸入“ index.html ”。如圖14 所示。

　　圖14 “鏈接”設置

　　⑶選中右起第二個按鈕實例，修改屬性。如圖15 所示。

　　圖15 “個人簡介”設置

　　⑷選中中間的按鈕實例，修改屬性。如圖16 所示。

　　圖16 “我的學校”設置

　　⑸選中右起第二個的按鈕實例，修改屬性。如圖17 所示。

　　圖17 “本人作品”設置

　?、蔬x中最右側按鈕實例，修改屬性。如圖18 所示。

　　圖18 “自薦書”設置

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

　　至此，導航條制作完成，如圖19 所示。

　　圖19 制作完成的導航條

　　⑺保存“按鈕 .png ”文件，以便今后修改之需。

　　3　導出導航條

　　導航條制作完成后，要在網頁中應用，須將它導出。

　?、艈螕?ldquo;文件”·“導出”。

　?、圃?ldquo;導出”對話框上，選定導出文件的存放目錄和文件名后，單擊“確定”。如圖 20 所示。

　　圖20 “導出”對話框

　　提示：導出的文件包括，一個插入 JavaScript 客戶端腳本的網頁文件和一些圖像切片。

　　4　注意事項

　　今后，在使用 Dreamweaver 制作網頁時，使用“插入”·“圖像對象”·“ Fireworks HTML ”命令，將它們導入網頁。

　　制作過程中，設定了各個導航按鈕的“鏈接”目標等，如果需要修改，可以在 Fireworks 中，修改原文件，也在導出的網頁文件中修改。