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

來源:互聯網
上載者:User
dreamweaver|菜單   與圖形設計製作軟體的龍頭老大-Adobe公司的Photoshop相比,Macromedia公司的Fireworks 4(以下簡稱FW4)可謂短小精悍,同時,她對於網頁圖形製作的強大支援,也使其輕鬆擷取了大批網頁設計師的信任和追隨。配合Macromedia網頁製作三劍客中的另一位大名鼎鼎的劍客Dreamweaver 4(以下簡稱DW4),FW4可以輕而易舉地做出時下網頁中甚為流行的快顯功能表(亦稱下拉式功能表)。如果你對DHTML網頁編程不甚熟悉,看到代碼就頭疼,不如跟隨筆者一起親身體驗FW4的魅力所在吧!

   一、 在FW4中製作菜單
   1.製作母功能表按鈕
  開啟FW4,選擇File菜單下的New,或者按Ctrl+N快速鍵,如圖一建立一個檔案,尺寸200X30像素,精度72像素/英寸,背景透明。
  選擇Window菜單下的Tools開啟工具面板,從工具面板上選取矩形工具;
  畫一個100X30像素大小的矩形,選擇Window菜單下的Info開啟資訊面板,直接輸入數值精確調整尺寸和位置;

  選中這個矩形,Ctrl+C複製,Ctrl+V原地粘貼,這時候兩個矩形重疊,將上面這個矩形拖到旁邊,同樣使用資訊面板定位;

  然後分別選中這兩個矩形,調整它們的填充色和邊框色,方法有兩種,一是利用工具面板上的Color工具區裡的Stroke和Fill按鈕:

    二是選擇Window菜單下的Stroke和Fill分別開啟線型面板和填充面板,在面板上選擇,注意的是線型要選"Pencilà1-Pixel Hard"或"BasicàHard Line"。
 
  這樣輸出後才能做出細邊框效果;從工具面板上選擇文字工具,輸入文字,注意選擇文字的平滑度為No Anti-Alias(關閉反鋸齒)

  然後同時選中文字和其中一個矩形,從Modify菜單下的Align中分別選擇Center Vertical和Center Horizontal來對齊文字和矩形,效果如圖所示。

   2.製作快顯功能表條目
  同時選中對齊後的文字和矩形,選擇Insert菜單下的Convert to Symbol,或在矩形上點滑鼠右鍵,在右鍵菜單裡選Convert to Symbol,或者按F8快速鍵,在彈出對話方塊裡的Type中選Button(按鈕),將這個矩形轉換成一個按鈕對象。

  這時,將滑鼠移到按鈕對象中間的圓形標誌上滑鼠會變成手形,單擊圓形標誌,在快顯功能表中選擇Add Pop_up Menu…

  然後就可以在彈出的Set Pop-Up Menu設定窗中設定你的快顯功能表了。如下圖,筆者已經設定了一些菜單條目。

  大家可以在Text中設定條目的文字名稱,在Link中設定條目的連結路徑,在Target中設定開啟連結的目標視窗,設定完後點一下"+"按鈕就可以產生一個菜單條目了;如果想刪掉,點中條目,再點"-"按鈕就可以刪除條目;如果想修改條目設定,只需點中條目,修改各項設定後點Change按鈕即可。FW4的快顯功能表是可以做多級子功能表的,只要在根菜單條目下方建立子功能表條目,然後點中子功能表條目,再點視窗上方那兩個藍色表徵圖按鈕中的右邊一個Indent Menu(菜單縮排,即設為子功能表)就可以了,反之,點左邊那個Outdent Menu(菜單伸出,即設為根菜單)就可以將當前的子功能表設定成上一級根菜單。大家可能發現改變菜單條目的順序好象不方便,其實很簡單,只要點住條目並拖拉到你想要的位置就可以了。設定完菜單條目後,點Next進入菜單樣式設定窗。
   3.設定快顯功能表條目樣式
  值得一提的是,菜單樣式的設定可以分成兩種類型:
 
  一種是如前圖所示的HTML模式,一種是如後圖所示的Image(貼圖)模式。它們的區別是,HTML模式下,菜單樣式完全由代碼控制,即時計算產生,顯示速度當然極快,非常流暢;Image模式下,菜單條目的背景可以顯示圖片,每次菜單彈出時,就會即時下載背景貼圖,這樣對高速網路使用者來說幾乎感覺不到,但是對慢速網路使用者,就會明顯覺察到貼圖下載顯示的時間滯後,造成不流暢的感覺。但是由於Image模式產生的菜單可以使用漂亮的貼圖,雖然FW4種提供選擇的貼圖樣式並不多,共21種,但只要在輸出後,找到這些圖片,用自訂的尺寸一致圖片替換掉,就可以做出完全屬於自己的個性菜單,比如在貼圖上打上你自己的網站Logo等等。這裡筆者選擇HTML模式。樣式設定窗中,Up State是用來設定菜單條目處於普通狀態時的樣式,Over State是用來設定滑鼠移到菜單條目上時的樣式。另外,Font是用來選擇顯示的字型,為了在網頁上能清晰顯示字型,建議大家在字型大小Size中選擇12,"B"按鈕是使用粗體字,"I"按鈕是使用斜體字。樣式設定將即時在下方的Preview地區中顯示,完成設定後點Finish按鈕產生快顯功能表。
   4. 調整快顯功能表位置
  如圖所示,產生的快顯功能表將以藍色線框表示,它的位置就是滑鼠移到母功能表按鈕上它彈出的位置,大家可以點住快顯功能表的藍色線框,拖拉到你想要它彈出的位置,比如筆者想讓它在母功能表按鈕下方彈出。

   5.調整母功能表按鈕與快顯功能表樣式一致
  有的朋友說,既然快顯功能表已經有樣式了,那麼母菜單怎麼辦?其實筆者早已想到,所以剛開始把母菜單做成了按鈕對象,雙擊母功能表按鈕對象,開啟按鈕對象編輯窗,自己動手改按鈕的各個狀態吧,這屬於FW4的基本操作,筆者這裡就不羅嗦了。

   6.輸出快顯功能表
   剛才一直跟著做一定很累,所以另外還有一個矩形就留給大家自己練習一下。完成後可以選擇File菜單下的Export Preview,或者按Ctrl+Shift+X快速鍵開啟輸出設定視窗。如圖十七所示,在Option標籤頁下方的透底選項中選擇Alpha Transparency,Matte(基底色)中選擇你實際網頁使用的背景色,這樣菜單就可以和你的網頁天衣無縫地融為一體。

  點Export按鈕,如圖十八,自己設定輸出路徑和檔案名稱,並選擇檔案類型為HTML and Images,HTML選項中選Export HTML File,Slices選項中選Export Slices,最後點儲存按鈕,快顯功能表就輸出完成了。

  現在你可以開啟你輸出的HTML檔案看看你的工作成果了。關掉FW4吧,下面沒它的事兒了。

相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。