Fireworks 8 尋夢之旅(9):制作彈出菜單

2024-09-11 13:33:32

字體：大中小

供稿：網(wǎng)友

　　六、css格式彈出菜單制作導(dǎo)出

　　有關(guān)彈出菜單的制作方法，不是我們本部分的講授重點，有關(guān)css格式控制的地方，才是需要我們注意的。所以本小節(jié)就通過一個簡單的彈出菜單的制作講解，使大家對于fireworks 8里面新增的css格式化菜單有一個初步的了解和印象，以更好的進(jìn)一步的來使用它。

　　源文件下載(37kb, winzip壓縮)

　　1、打開fireworks 8，新建一個文件，文件的大小可以根據(jù)菜單的大小直接來設(shè)置。在編輯區(qū)繪制需要在頁面上顯示的菜單。

　　2、使用工具箱的“矩形熱點”工具給菜單欄直接插入熱區(qū)，不做轉(zhuǎn)化為按鈕元件的操作了。

　　3、選中“新書推薦”欄所在熱區(qū)，選擇菜單“修改|彈出菜單|添加彈出菜單”命令。在“內(nèi)容”設(shè)置對話框內(nèi)，將彈出菜單內(nèi)容的文本、鏈接及其目標(biāo)等都設(shè)定完畢，單擊“繼續(xù)”按鈕，轉(zhuǎn)到“外觀”設(shè)置對話框。

　　4、在“外觀”設(shè)置對話框內(nèi)，選擇單元格格式為“html”，將字體、文本大小、彈起狀態(tài)、滑過狀態(tài)的文本、單元格顏色都做一個設(shè)置。設(shè)置完畢，單擊“繼續(xù)”按鈕，切換到“高級”設(shè)置對話框。

　　5、在本處，將單元格的相關(guān)屬性進(jìn)行一番設(shè)置，具體的內(nèi)容設(shè)置此處就不詳細(xì)講解了，大家可以參考fireworks先前版本的有關(guān)教程來對其作深入了解，掌握。全部設(shè)置完畢后，單擊“繼續(xù)”按鈕切換到“位置”設(shè)置對話框。

　　6、菜單位置我們選擇“將菜單位置設(shè)置到切片的底部”這種格式，如果對于y值不滿意的話，此處可以調(diào)整，也可以通過后期進(jìn)行調(diào)整，這就需要用到我們今天要著重介紹的css格式菜單的知識了。設(shè)置完畢了，完成即可。

　　7、參照上述方法，將其它菜單內(nèi)容添加完畢。然后單擊工具欄上的“導(dǎo)出”按鈕，將菜單文件導(dǎo)出html格式文件。在隨后彈出的“導(dǎo)出”對話框中，單擊右側(cè)的“選項”按鈕，探出“html設(shè)置對話框”，注意一定要選定“對彈出菜單應(yīng)用css、將css寫入外部文件”這兩項前面的復(fù)選框，才可以感受到css格式化菜單的魅力所在。

　　8、將菜單文件導(dǎo)出到你準(zhǔn)備好的文件夾內(nèi)，打開該文件夾，會發(fā)現(xiàn)里面出現(xiàn)了一個css層疊樣式表文檔，如下圖所示。這就是我們需要重點介紹的主角兒了。

　　9、使用html編輯器或者記事本（使用記事本其實足夠了，因為文件并不復(fù)雜）打開這個css文件。我們可以發(fā)現(xiàn)一些html代碼在里面，如果我們對html一竅不通也不要害怕，你可以憑借著剛才在fireworks里面設(shè)置菜單的印象來尋找一些與彈出菜單的設(shè)置有關(guān)的內(nèi)容，比如我們在節(jié)選的一段css描述里面可以發(fā)現(xiàn)對于菜單對象的一些描述第一個劃紅線的地方所指示的“general apperance”也就是我們在“菜單編輯器”中進(jìn)行外觀設(shè)置的那一些內(nèi)容，仔細(xì)看可以看到里面有“font-family”，有關(guān)字體的設(shè)置；還有 “font-size”，有關(guān)字體大小的設(shè)置，具體到還有字體顏色、背景顏色、字體樣式等等內(nèi)容的設(shè)置，只要你稍微懂一些英文的話，下面這些應(yīng)該對你沒有什么大礙的。下圖中第2處劃紅線的地方是來設(shè)置鼠標(biāo)滑過時的狀態(tài)的，主要是對文本顏色和單元格背景色這兩方面進(jìn)行的設(shè)置。