Fireworks_制作彈出菜單

1、商務(wù)網(wǎng)站制作與網(wǎng)頁設(shè)計課程實驗報告實驗名稱Fireworks 制作彈出菜單指導(dǎo)老師實驗日期2009-12-25 實驗成績姓名學(xué)號專業(yè)年級一、實驗?zāi)康呐c要求:用CSS格式彈出菜單制作導(dǎo)出,有關(guān)彈出菜單的制作方法,不是我們本部分的講授重點,有關(guān)CSS格式控制的地方,才是需要我們注意的。所以本小節(jié)就通過一個簡單的彈出菜單的制作講解,使大家對于Fireworks 8里面新增的CSS格式化菜單有一個初步的了解和印象,以更好的進(jìn)一步的來使用它。二、實驗課時:1課時三、實驗步驟:1、打開Fireworks 8,新建一個文件,文件的大小可以根據(jù)菜單的大小直接來設(shè)置。在編輯區(qū)繪制需要在頁面上顯示的菜單。 2、使

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)教程來對其作深入了解,掌握。全部

3、設(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)備好的文

4、件夾內(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)對于菜單對象的一些描述第一個劃紅線的地方所指示的“gener al apperance”也就是我們在“菜單編輯器”中進(jìn)行外觀設(shè)置的那一些內(nèi)容,仔細(xì)看可以看到里面有“font-family”

5、,有關(guān)字體的設(shè)置;還有“font-size”,有關(guān)字體大小的設(shè)置,具體到還有字體顏色、背景顏色、字體樣式等等內(nèi)容的設(shè)置,只要你稍微懂一些英文的話,下面這些應(yīng)該對你沒有什么大礙的。下圖中第2處劃紅線的地方是來設(shè)置鼠標(biāo)滑過時的狀態(tài)的,主要是對文本顏色和單元格背景色這兩方面進(jìn)行的設(shè)置。當(dāng)然，還有其他的有關(guān)菜單外觀、及其單元格邊框、背景色、菜單放置 位置等內(nèi)容的設(shè)置，都包含在這個 css 文件里面了。 10、在沒有對該 css 文件進(jìn)行修改時，彈出菜單的樣式如下圖所示。 11、接下來，我們對該 css 文件的內(nèi)容做一個簡單的調(diào)整。如下圖所示 的淡*區(qū)域所示，我們將彈出菜單的文本顏色、背景顏色、還有鼠標(biāo)已過時 的文本顏色、及其相應(yīng)的背景顏色都做了一個簡單的改變。 PDF 文件使用 "pdfFactory Pro" 試用版本創(chuàng)建 12、經(jīng)過設(shè)置后，再次在瀏覽器中預(yù)覽彈出菜單的效果，發(fā)現(xiàn)已經(jīng)發(fā)生 變化了，如下圖所示。 四、實驗小結(jié)： 通過此次實驗，我們學(xué)會運用 firewor