《真愛黑白配》

有關您提到 :

我想請問一下我要如何作成像
http://www.edu.tw/index.aspx
當滑鼠移到"學生園地"跳出的選單...

回答：

這邊說明一下這是以javascript及css寫function完成的選單使用div圖層開關控制，將樣式設在css或table就能完成的如果是以初學來說不易套用要學很多東西配合，只能以下方所提供的Dreamweaver教學來製作，如果對網頁設計有一定的熟悉製作程度相信會容易上手一點。

您說到可是我做了只要滑鼠移開"學生園地"跳出來的選單就不見了！
應該就是你開關沒設定好除DIV開關外也要設滑鼠執行動作。

對於對網頁設計有一定的熟悉製作程度：

將Dreamweaver開啟＞先將面版打開(視窗＞css樣式、圖層、行為)＞新增連結項目＞新增圖層
在新增連結項目點選(行為)控制顯示隱藏圖層就不需要特別會寫javascript了！)然而在div裡就能用css設計樣式如增添mouse移動離開及連結樣式。

ｃｓｓ樣式怎抹做？ 檢視圖片   

另外有關您提到 :

還有一個問題就是像這樣的網站
http://www.pecedu.com.tw/PEC/postgrad/scotland/Glasgow.htm
如果我用IE7.0去瀏覽他彈出選單的字便直式的...
那怎辦

回答：

這邊說明一下影響字變直式的原因可能是因為寬度沒設好或沒設依div延伸，IE7.0比IE6.0在寫法上更嚴謹更要注意執行後是否能正常run。

以下提供Dreamweaver 的選單製作方法：

彈出式選單

1. 啟動Dreamweaver，開啟要加入彈出式選單的頁面。若是開啟的是一個新的空白頁面，請先存檔。

2. 要加入彈出式選單，必須要先有一個超鏈結當作選單的起點，滑過此超鏈結的時候才會顯示出選單。因此先在頁面中建立一個文字或圖形的超鏈結，連結的URL輸入一個井字號或javascript: 即可。

3. 將滑鼠游標放置在該超鏈結上，或是點選文件視窗狀態列的<a>標籤，讓行為（Behaviros）面板上方顯示的是<a>動作。

4. 按下行為（Behaviros）面板的加號按鈕，選擇顯示彈出式選單（Show Pop-up Menu）。

5. 在內容（Contents）這邊設定的是選單的選項內容，先按下加號新增一個選項，然後在文字（Text）的地方輸入該選項的文字、連結（Link）的地方輸入要連結的URL或檔案、目標視窗（Target）的地方可以輸入頁框或視窗的名稱。輸入好了之後在旁邊空白的地方點一下就會更新。

6. 接著你可以繼續按下加號來新增選項，若要修改已有的選項，只要在下方的視窗中先點選該選項，再修改文字、連結和目標即可，修改之後在旁邊空白的地方點一下就會更新。

7. 點選已有的選項後，按下上下的箭頭可以將它上移或下移，排列順序。也可以按下縮排和凸排的按鈕，將選項規劃為第二層或第三層的選單。按下減號則是將它刪除，在下方的視窗內都可以看到它們彼此之間的順序和結構。

8.選單內容都編排好之後，切換到外觀（Appearances）標籤頁，這邊可以選擇要垂直或水平的選單，以及設定選單的字體和顏色。

檢視圖片

9.再來切換到進階（Advanced）標籤頁，這邊可以設定儲存格（也就是選單的一格）的高度、寬度、內距、間距、文字縮排，若沒有特殊需求使用預設值即可。

選單延遲（Menu Delay）則是滑鼠滑過連結和選單出現中間相隔的時間，以ms毫秒為單位（1秒=1000毫秒），預設值就OK了啦！

10. 最後是位置（Position）標籤頁，選擇選單出現的方向，有四種方向讓你選。勾選在滑鼠滑出時事件中隱藏選單（Hide Menu on onMouseOut Event）的話，當滑鼠離開選單的時候，選單就會自動收起來。

11. 全部完成後按下確定（OK），這時行為面板會加上兩個動作，而頁面中超鏈結的地方，也會加上JavaScript的小圖示，代表那邊有JavaScript程式碼，那個小圖示在瀏覽器中是看不到，所以不用理會。

檢視圖片

12. 將頁面存檔，然後使用瀏覽器開啟來測試。當滑鼠滑過超鏈結時，就會顯示出很漂亮的選單了，感覺很棒吧！

檢視圖片

13. 若要修改選單的內容，只要在Dreamweaver中，將滑鼠游標放置在選單的超鏈結上，或是點選文件視窗狀態列的<a>標籤，然後點兩下行為（Behaviros）面板內顯示的顯示彈出式選單（Show Pop-up Menu），就會跳出和之前一樣的對話框。隨時要修改都可以哦！

(以上單一教學範例由Dreamweaver小正正教室提供如有需要請至該網站喔！）