Fireworks/Dreamweaver雙劍合壁造快顯功能表(2)

來源:互聯網
上載者:User
dreamweaver|菜單
  二、 在DW4中設定快顯功能表
  1. 將快顯功能表匯入DW4
   開啟DW4,建立或開啟一個網站(Site),在網站中建立一個HTML檔案,存檔,然後選擇Insert菜單下的Interactive Images中的Fireworks HTML,或者選擇Window菜單下的Objects或按Ctrl+F2快速鍵開啟Objects(對象)面板,從面板上的Common類中選擇那個Fireworks的表徵圖。

  在彈出的對話窗中點Browser按鈕,選擇你剛才FW4中輸出的HTML檔案,點OK按鈕,剛才做好的快顯功能表就導進來了。如果你的FW4快顯功能表輸出檔案沒有在當前的網站中,那麼DW4還會問你是否要將這些檔案複製到網站中來,一定要選OK,並且最好單獨為這些檔案在網站中建一個檔案夾。現在可以按F12預覽一下效果了,是不是不像想象中的那麼cool?快顯功能表好象邊框很粗!因為當前使用的是預設的樣式。沒關係,接下來就來動點小手術!
  2. 在DW4中重新設定菜單樣式
   如圖可以看到剛才複製到網站中來的FW4快顯功能表檔案中有這樣一個檔案--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.後面的變數名,下面是直接影響菜單效果的變數名對應的菜單屬性:
menuWidth: 菜單寬度
menuItemHeight : 菜單條目高度
fontWeight: 菜單條目文字粗細
fontFamily: 菜單條目文字字型
fontSize: 菜單條目文字大小
fontColor: 菜單條目文字顏色
fontColorHilite: 菜單條目文字高亮色(即滑鼠移到菜單上時文字的顏色)
bgColor: 菜單暗邊背景色
menuBorder: 菜單邊框寬度
menuItemBorder: 菜單條目邊框寬度(其實是菜單內各條目之間分隔線的寬度)
menuItemBgColor: 菜單條目背景色
menuLiteBgColor: 菜單亮邊背景色
menuBorderBgColor: 菜單邊框背景色
menuHiliteBgColor: 菜單條目背景高亮色(即滑鼠移到菜單上時背景的顏色)
childMenuIcon: 子功能表擴充標記(預設是個小黑箭頭)
   快顯功能表的樣式是遵循下圖中的規則的,大家可以細細研究一下,對照起來修改參數。

  由於篇幅限制,筆者在這裡就不贅述了,先給出一個修改其中一些參數的範例,餘下的大家可以自行測試:
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檔案,F12預覽,菜單樣式已經發生了變化,菜單邊框變細緻了,是不是很cool啊!

  3. 快顯功能表縮回停留時間的修改
  大家會發現快顯功能表要收回似乎要等待一兩秒的時間,沒關係,在fw_menu.js中找到這句代碼:fwHideMenuTimer = setTimeout("fwDoHide()", 1000);
  將其中的1000改成300,再找到這句代碼:
if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}
  將其中的1000改成300,1100改成330,存檔,再回到HTML檔案按F12預覽一下,是不是快多了。這些數值是以毫秒為單位的,也就是說1000代表1秒,建議這些數值不要設得太小,否則菜單收回太快會導致你點不中快顯功能表。
  4. 特殊效果的快顯功能表
  運用Javascript來調用和控制CSS濾鏡還可以為菜單帶來意想不到的效果。在fw_menu.js中使用這樣的參數設定:
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預覽,效果如下圖所示,是不是很有趣啊!這樣的CSS濾鏡還有很多,大家可以自己找一些相關資料實踐一下。
  順便提一下,大家在尋找代碼時可以充分利用DW4的尋找替換功能,在頁面中按Ctrl+F快速鍵調出尋找替換窗,輸入要尋找的代碼,按Find Next就可以了。


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。