|
■ Fireworks 4/Dreamweaver 4雙劍合壁造彈出菜單
作者：POPOEVER
與圖形設(shè)計(jì)制作軟件的龍頭老大-Adobe公司的Photoshop相比，Macromedia公司的Fireworks 4(以下簡(jiǎn)稱FW4)可謂短小精悍，同時(shí)，她對(duì)于網(wǎng)頁圖形制作的強(qiáng)大支持，也使其輕松獲取了大批網(wǎng)頁設(shè)計(jì)師的信任和追隨。配合Macromedia網(wǎng)頁制作三劍客中的另一位大名鼎鼎的劍客Dreamweaver 4(以下簡(jiǎn)稱DW4)，F(xiàn)W4可以輕而易舉地做出時(shí)下網(wǎng)頁中甚為流行的彈出菜單(亦稱下拉菜單)。如果你對(duì)DHTML網(wǎng)頁編程不甚熟悉，看到代碼就頭疼，不如跟隨筆者一起親身體驗(yàn)FW4的魅力所在吧！
一、 在FW4中制作菜單
1．制作母菜單按鈕
打開FW4，選擇File菜單下的New，或者按Ctrl+N快捷鍵，如圖一新建一個(gè)文件，尺寸200X30像素，精度72像素/英寸，背景透明。
選擇Window菜單下的Tools打開工具面板，從工具面板上選擇矩形工具，
畫一個(gè)100X30像素大小的矩形，選擇Window菜單下的Info打開信息面板，直接輸入數(shù)值精確調(diào)整尺寸和位置；
選中這個(gè)矩形，Ctrl+C復(fù)制，Ctrl+V原地粘貼，這時(shí)候兩個(gè)矩形重疊，將上面這個(gè)矩形拖到旁邊，同樣使用信息面板定位；
然后分別選中這兩個(gè)矩形，調(diào)整它們的填充色和邊框色，方法有兩種，一是利用工具面板上的Color工具區(qū)里的Stroke和Fill按鈕，
二是選擇Window菜單下的Stroke和Fill分別打開線型面板和填充面板，在面板上選擇，注意的是線型要選"Pencilà1-Pixel Hard"或"BasicàHard Line"(如圖)，
 
這樣輸出后才能做出細(xì)邊框效果；從工具面板上選擇文字工具，輸入文字，注意選擇文字的平滑度為No Anti-Alias（關(guān)閉反鋸齒，如圖），
然后同時(shí)選中文字和其中一個(gè)矩形，從Modify菜單下的Align中分別選擇Center Vertical和Center Horizontal來對(duì)齊文字和矩形，效果如圖所示。
2．制作彈出菜單條目
同時(shí)選中對(duì)齊后的文字和矩形，選擇Insert菜單下的Convert to Symbol，或在矩形上點(diǎn)鼠標(biāo)右鍵，在右鍵菜單里選Convert to Symbol，或者按F8快捷鍵，在彈出對(duì)話框里的Type中選Button(按鈕)，將這個(gè)矩形轉(zhuǎn)換成一個(gè)按鈕對(duì)象，
這時(shí)，將鼠標(biāo)移到按鈕對(duì)象中間的圓形標(biāo)志上鼠標(biāo)會(huì)變成手形，單擊圓形標(biāo)志，在彈出菜單中選擇Add Pop_up Menu…，
然后就可以在彈出的Set Pop-Up Menu設(shè)置窗中設(shè)置你的彈出菜單了。如下圖，筆者已經(jīng)設(shè)置了一些菜單條目。
大家可以在Text中設(shè)置條目的文字名稱，在Link中設(shè)置條目的鏈接路徑，在Target中設(shè)置打開鏈接的目標(biāo)窗口，設(shè)置完后點(diǎn)一下"+"按鈕就可以生成一個(gè)菜單條目了；如果想刪掉，點(diǎn)中條目，再點(diǎn)"-"按鈕就可以刪除條目；如果想修改條目設(shè)置，只需點(diǎn)中條目，修改各項(xiàng)設(shè)置后點(diǎn)Change按鈕即可。FW4的彈出菜單是可以做多級(jí)子菜單的，只要在根菜單條目下方建立子菜單條目，然后點(diǎn)中子菜單條目，再點(diǎn)窗口上方那兩個(gè)藍(lán)色圖標(biāo)按鈕中的右邊一個(gè)Indent Menu（菜單縮進(jìn)，即設(shè)為子菜單）就可以了，反之，點(diǎn)左邊那個(gè)Outdent Menu（菜單伸出，即設(shè)為根菜單）就可以將當(dāng)前的子菜單設(shè)置成上一級(jí)根菜單。大家可能發(fā)現(xiàn)改變菜單條目的順序好象不方便，其實(shí)很簡(jiǎn)單，只要點(diǎn)住條目并拖拉到你想要的位置就可以了。設(shè)置完菜單條目后，點(diǎn)Next進(jìn)入菜單樣式設(shè)置窗。
3．設(shè)置彈出菜單條目樣式
值得一提的是，菜單樣式的設(shè)置可以分成兩種類型，
一種是如前圖所示的HTML模式，一種是如后圖所示的Image（貼圖）模式。它們的區(qū)別是，HTML模式下，菜單樣式完全由代碼控制，即時(shí)計(jì)算生成，顯示速度當(dāng)然極快，非常流暢；Image模式下，菜單條目的背景可以顯示圖片，每次菜單彈出時(shí)，就會(huì)即時(shí)下載背景貼圖，這樣對(duì)高速網(wǎng)絡(luò)用戶來說幾乎感覺不到，但是對(duì)慢速網(wǎng)絡(luò)用戶，就會(huì)明顯覺察到貼圖下載顯示的時(shí)間滯后，造成不流暢的感覺。但是由于Image模式生成的菜單可以使用漂亮的貼圖，雖然FW4種提供選擇的貼圖樣式并不多，共21種，但只要在輸出后，找到這些圖片，用自定義的尺寸一致圖片替換掉，就可以做出完全屬于自己的個(gè)性菜單，比如在貼圖上打上你自己的網(wǎng)站Logo等等。這里筆者選擇HTML模式。樣式設(shè)置窗中，Up State是用來設(shè)置菜單條目處于普通狀態(tài)時(shí)的樣式，Over State是用來設(shè)置鼠標(biāo)移到菜單條目上時(shí)的樣式。另外，F(xiàn)ont是用來選擇顯示的字體，為了在網(wǎng)頁上能清晰顯示字體，建議大家在字體大小Size中選擇12，"B"按鈕是使用粗體字，"I"按鈕是使用斜體字。樣式設(shè)置將即時(shí)在下方的Preview區(qū)域中顯示，完成設(shè)置后點(diǎn)Finish按鈕生成彈出菜單。
4． 調(diào)整彈出菜單位置
如圖所示，生成的彈出菜單將以藍(lán)色線框表示，它的位置就是鼠標(biāo)移到母菜單按鈕上它彈出的位置，大家可以點(diǎn)住彈出菜單的藍(lán)色線框，拖拉到你想要它彈出的位置，比如筆者想讓它在母菜單按鈕下方彈出。
5．調(diào)整母菜單按鈕與彈出菜單樣式一致
有的朋友說，既然彈出菜單已經(jīng)有樣式了，那么母菜單怎么辦？其實(shí)筆者早已想到，所以剛開始把母菜單做成了按鈕對(duì)象，雙擊母菜單按鈕對(duì)象，打開按鈕對(duì)象編輯窗，自己動(dòng)手改按鈕的各個(gè)狀態(tài)吧，這屬于FW4的基本操作，筆者這里就不羅嗦了。
6．輸出彈出菜單
剛才一直跟著做一定很累，所以另外還有一個(gè)矩形就留給大家自己練習(xí)一下。完成后可以選擇File菜單下的Export Preview，或者按Ctrl+Shift+X快捷鍵打開輸出設(shè)置窗口。如圖十七所示，在Option標(biāo)簽頁下方的透底選項(xiàng)中選擇Alpha Transparency，Matte（基底色）中選擇你實(shí)際網(wǎng)頁使用的背景色，這樣菜單就可以和你的網(wǎng)頁天衣無縫地融為一體。
點(diǎn)Export按鈕，如圖十八，自己設(shè)置輸出路徑和文件名，并選擇保存類型為HTML and Images，HTML選項(xiàng)中選Export HTML File，Slices選項(xiàng)中選Export Slices，最后點(diǎn)保存按鈕，彈出菜單就輸出完成了。
現(xiàn)在你可以打開你輸出的HTML文件看看你的工作成果了。關(guān)掉FW4吧，下面沒它的事兒了。
二、 在DW4中設(shè)置彈出菜單
1． 將彈出菜單導(dǎo)入DW4
打開DW4，新建或打開一個(gè)站點(diǎn)（Site），在站點(diǎn)中新建一個(gè)HTML文件，存盤，然后選擇Insert菜單下的Interactive Images中的Fireworks HTML，或者選擇Window菜單下的Objects或按Ctrl+F2快捷鍵打開Objects（對(duì)象）面板，從面板上的Common類中選擇那個(gè)Fireworks的圖標(biāo)（如圖十九），
在彈出的對(duì)話窗中點(diǎn)Browser按鈕，選擇你剛才FW4中輸出的HTML文件，點(diǎn)OK按鈕，剛才做好的彈出菜單就導(dǎo)進(jìn)來了。如果你的FW4彈出菜單輸出文件沒有在當(dāng)前的站點(diǎn)中，那么DW4還會(huì)問你是否要將這些文件復(fù)制到站點(diǎn)中來，一定要選OK，并且最好單獨(dú)為這些文件在站點(diǎn)中建一個(gè)文件夾�，F(xiàn)在可以按F12預(yù)覽一下效果了，是不是不像想象中的那么cool？彈出菜單好象邊框很粗！因?yàn)楫?dāng)前使用的是默認(rèn)的樣式。沒關(guān)系，接下來就來動(dòng)點(diǎn)小手術(shù)！
2． 在DW4中重新設(shè)置菜單樣式
如圖可以看到剛才復(fù)制到站點(diǎn)中來的FW4彈出菜單文件中有這樣一個(gè)文件--fw_menu.js，
用DW4將它打開，在文件的開頭部分可以看到這樣一段代碼：
this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs||12;
this.fontWeight = "plain";
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif";
this.fontColor = fclr||"#000000";
this.fontColorHilite = fhclr||"#ffffff";
this.bgColor = "#555555";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";
注意this.后面的變量名，下面是直接影響菜單效果的變量名對(duì)應(yīng)的菜單屬性：
menuWidth: 菜單寬度
menuItemHeight : 菜單條目高度
fontWeight: 菜單條目文字粗細(xì)
fontFamily: 菜單條目文字字體
fontSize: 菜單條目文字大小
fontColor: 菜單條目文字顏色
fontColorHilite: 菜單條目文字高亮色（即鼠標(biāo)移到菜單上時(shí)文字的顏色）
bgColor: 菜單暗邊背景色
menuBorder: 菜單邊框?qū)挾?BR>menuItemBorder: 菜單條目邊框?qū)挾龋ㄆ鋵?shí)是菜單內(nèi)各條目之間分隔線的寬度）
menuItemBgColor: 菜單條目背景色
menuLiteBgColor: 菜單亮邊背景色
menuBorderBgColor: 菜單邊框背景色
menuHiliteBgColor: 菜單條目背景高亮色（即鼠標(biāo)移到菜單上時(shí)背景的顏色）
childMenuIcon: 子菜單擴(kuò)展標(biāo)記（默認(rèn)是個(gè)小黑箭頭）
彈出菜單的樣式是遵循下圖中的規(guī)則的，大家可以細(xì)細(xì)研究一下，對(duì)照起來修改參數(shù)。
由于篇幅限制，筆者在這里就不贅述了，先給出一個(gè)修改其中一些參數(shù)的樣例，余下的大家可以自行測(cè)試：
this.bgColor = "#000000";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#000000";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";
存盤，回到菜單的HTML文件，F(xiàn)12預(yù)覽，菜單樣式已經(jīng)發(fā)生了變化，菜單邊框變細(xì)致了，是不是很cool啊！
3． 彈出菜單縮回停留時(shí)間的修改
大家會(huì)發(fā)現(xiàn)彈出菜單要收回似乎要等待一兩秒的時(shí)間，沒關(guān)系，在fw_menu.js中找到這句代碼：
fwHideMenuTimer = setTimeout("fwDoHide()", 1000);
將其中的1000改成300，再找到這句代碼：
if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}
將其中的1000改成300，1100改成330，存盤，再回到HTML文件按F12預(yù)覽一下，是不是快多了。這些數(shù)值是以毫秒為單位的，也就是說1000代表1秒，建議這些數(shù)值不要設(shè)得太小，否則菜單收回太快會(huì)導(dǎo)致你點(diǎn)不中彈出菜單。
4． 特殊效果的彈出菜單
運(yùn)用Javascript來調(diào)用和控制CSS濾鏡還可以為菜單帶來意想不到的效果。在fw_menu.js中使用這樣的參數(shù)設(shè)置：
this.bgColor = "";
this.menuBorder = 3;
this.menuItemBorder = 3;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";
并在下面加上一句：
this.alpha = "Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)";
然后找到這句：
l.style.backgroundColor = menu.menuItemBgColor;
在它下面加上一句：
l.style.filter = menu.alpha;
存盤，回到HTML文件按F12預(yù)覽，效果如下圖所示，是不是很有趣�。∵@樣的CSS濾鏡還有很多，大家可以自己找一些相關(guān)資料實(shí)踐一下。
順便提一下，大家在查找代碼時(shí)可以充分利用DW4的查找替換功能，在頁面中按Ctrl+F快捷鍵調(diào)出查找替換窗，輸入要查找的代碼，按Find Next就可以了。
好了，寫到這里寫意正濃，但不得不罷筆，免得小編罵我騙稿費(fèi)，有什么不清楚的大家可以給電腦報(bào)的欄目編輯去e-mail詢問。
下一篇我們將講如何用Flash來制作下拉菜單。
出處：
責(zé)任編輯：藍(lán)色
上一頁 Dreamweaver篇 下一頁 Flash篇
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 Fireworks篇
