DW MX實例:製作彈出菜單
彈出功能表在網頁製作中是一種非常常用的功能表方式,這種功能表不但製作簡單,而且效果也很好。 效果說明 本實例所要完成的效果是當滑鼠移動到文字上時,就會彈出一個漂亮的功能表,如圖 17-1 和圖 17-2 所示。
創作思想 本實例首先在網頁中輸入一行文字,並對文字做一個特殊的超鏈結,然後利用 網頁設計軟體 MX 2004 自帶的行為製作彈出菜單。
操作步驟 [便宜超值網頁設計 www.6000.com.tw]
( 1 )輸入文字並設置超鏈結。在網頁中輸入文字,因為單獨的文本文字是無法添加行為的,按照 網頁設計軟體 中的約定,將文字的超鏈結設置為“ javascript:; ”才能夠添加行為。所以將文字的超鏈結設為“ javascript:;
”,並執行【顯示彈出式功能表】行為,如圖 17-3 所示。
( 2 )設置菜單項和子功能表項,並為功能表設置超鏈結,然後安排好各個功能表的次序,如圖 17-4 所示。
3 )設置頁面元素。將功能表設置為垂直功能表,並分別設置功能表的字體、字型大小、對齊方式、一般狀態和滑鼠滑過時的狀態,如圖 17-5 所示。
( 4 )設置【高級】標籤。在【高級】標籤選項中設置功能表的延遲時間,以及是否顯示功能表邊框。然後設置邊框的寬度、顏色、陰影、高亮,如圖 17-6 所示。
注意:【功能表延遲】中時間的單位是毫秒( ms ), 1000 毫秒等於 1 秒,在設置時注意換算。 [便宜超值網頁設計 www.6000.com.tw]
( 5 )設置的 x 軸和 y 軸參數。在【位置】標籤選項中設置彈出功能表的 x 軸和 y 軸參數,這兩個參數表示彈出菜單左上角到網頁左上角的距離,如圖 17-7 所示。
( 6 )保存網頁檔,然後在流覽器中打開該網頁,將滑鼠遊標移動到文字上方時即可看到有功能表彈出,本實例操作完畢。通過 網頁設計軟體 ,可以快速製作出以往只能用複雜代碼才能實現的彈出功能表,這樣可以實現複雜功能表的彈出和收縮,方便使用又能讓頁面美觀、整潔。
|