WebMenuShop是一款用於快速建立網頁菜單的軟件,可以很輕松的制作形式多樣的網頁菜單,在制作過程中可以即時預覽所得到的菜單內容,並且能夠很方便地把菜單保存下來作為他用。而且值得一提的是,整個WebMenuShop的菜單制作流程只有四個步驟,因此很快就能夠輕松搞定這一切。
第一步:選擇菜單的風格
運行WebMenuShop之後,先在右邊的【樣式效果】標簽下確定菜單的風格。這裡提供了水平菜單、豎直菜單和嵌入浏覽器三種主菜單樣式,而且在點擊“高級選項”之後還能夠針對主菜單的位置進行設定,例如我們可以通過距離左邊和上邊的距離來定位菜單在網頁中的絕對位置,也能夠設定菜單保持在顯示區域的固定位置,並不隨著滾動條的拖動而改變位置。
針對子菜單而言,這裡可以設定子菜單采用普通、滑動或者使淡入淡出的顯示方式,還有子菜單顯示在主菜單上方還是下方,並且能夠設置當鼠標移動到主菜單上就立即顯示出子菜單,這樣就無需我們點擊鼠標來激活子菜單,同時也使得你的主頁更加具有人性化。
第二步:定義菜單結構和屬性
在進行這一步之前需要提醒大家一個事項:主菜單可以沒有子菜單,但是子菜單下不能再有子菜單。點擊【結構屬性】標簽之後,我們最好先點擊工具條上的“+”來添加幾個子菜單,這些都可以在左邊的菜單結構區域中預覽到。接著選擇主菜單,並在右邊的屬性設置窗口中分別確定菜單的標題、鏈接地址、目標框架等內容,而且還能夠通過GIF或者是JPEG圖片代替菜單標題,這樣當鼠標移動到圖片上之後就會有子菜單彈出。
設定好主菜單之後,我們再逐一選取子菜單項,同樣按照上述的方法設定好相關的屬性,同時還能夠增加一個狀態說明文本,它的作用是在浏覽器下部的狀態欄中給每個子菜單進行解釋,以便浏覽者能夠明確理解每個子菜單的功能。
在定義菜單結構的時候,如果發現子菜單的順序顛倒了,不需要重新建立一個子菜單,只要點擊工具條中的上下箭頭就能夠調整菜單的位置順序,而且通過左右箭頭還可以把當前選中的菜單變為主菜單或者是作為上級主菜單下的一個子菜單。有了這個功能的幫助,像筆者一樣的馬虎人就再也不怕了。
第三步:定義菜單外觀
點擊【外觀】標簽來改變菜單的外觀尺寸、字體大小和鼠標指針等屬性,還能夠在每一個菜單項前面添加一個修飾符號,使得菜單看起來更加醒目。由於菜單的外觀對於整個頁面的影響很大,所以建議大家每做一次修改都通過工具欄中的IE圖標來預覽一下,然後再有針對性的進行更改設置。
第四步:選擇菜單顏色
WebMenuShop默認的顏色為Windows2000菜單顏色,如果你不喜歡的話也可以按照自己的意願來重新設定,不過這裡就需要你有一些藝術細胞了,呵呵。
上面的操作完成之後,點擊工具條中的IE圖標激活浏覽器預覽一下,看看效果怎麼樣?滿意之後我們就需要把制作好的菜單添加到網頁中了。這時可以按下列步驟進行:
1、把軟件所在目錄的workspace子目錄下的menu.jse、define.js和hr.gif這3個文件拷貝到網頁所在目錄。可以通過點擊菜單中的“菜單文件->菜單文件拷貝至目錄...”命令或者工具欄中的相應按鈕來實現這一步。
2、在網頁的<head>和</head>之間添加以下2句:
<script language="jscript.encode" src="menu.js"></script>
<script src="define.js"></script>
可以通過點擊菜單中的“剪貼板->復制菜單定義代碼到剪貼板”來將這兩句代碼復制到剪貼板。
3、在需要菜單的地方加上一句<script>document_load()</script>即可。不過當你設計嵌入浏覽器風格的菜單,那麼你只能把<script>document_load()</script>寫在網頁的<body>標記的後面。
OK,這樣一來,你的主頁就有了很COOL的菜單功能,看看是不是很有一種專業的味道?