Dreamweaver SPRY menu 選單列 輕鬆製下拉式選單 (Spry Menubar)

Dreamweaver Spry這一篇要介紹下拉式選單列,一般在製作下拉選單通常是免不了要使用到Javascript的語法,如果對Javascript不熟的話不妨可以試試看Dreamweaver Spry選單列工具。
 

1. 首先先在Dreamweaver開啟一個空白的HTML檔案,要記得先存檔,插入Spry選單列之後會有一些附加檔案會自動儲存在網頁檔同一個資料夾下。
2. 接下來就可以後插入面板插入Spry選單列
 

 

3. 點選之後要先選取水平或垂直的樣式(範例介紹水平樣式),通常水平都是用在上方選單,而垂直都是用在左方選單。

 

4. 這是在Dreamweaver編輯畫面看到的樣子



5 . 馬上先來預覽效果看看,執行預覽會跳出一個視窗,主要是通知我們軟體自動新增了附加檔案在資料夾裡,最後上傳網站的時候也要連同附加檔案一起上傳到網頁空間,這樣Spry選單列才可以作用。

 

6. 這是在網頁上看到的樣子,總共有三層選單



7. 點選選單列上的藍色色塊屬性面板就會顯示設定項目

 
8. 在屬性面板上直接點選要編輯的項目
  • 右邊的文字輸入選單列上要顯示的文字
  • 連結的位置輸入要開啟的頁面,如果是本站頁面可以點選旁邊的資料夾用選的,站外頁面就直接輸入網址就可以了
  • 目標是頁面開啟的方式,預設是在本視窗開啟,如果要開啟新頁面就輸入"_blank"
  • 畫面上三個框格就分別表示三層選單的項目,可以按"+ -“來增加刪除項目,"上下"改變選單順序

 

 

 9. Spry物件都是利用CSS來調整視覺樣式,插入Spry物件時就會自動增加.css的檔案,只要開啟CSS樣式面板就可以修改選單列的視覺了

 

這是修改顏色後的選單列在網頁上預覽的效果

延伸閱讀:Dreamweaver SPRY menu 選單列置中

5 thoughts on “Dreamweaver SPRY menu 選單列 輕鬆製下拉式選單 (Spry Menubar)

  1. 作者已經移除這則留言。

  2. 請問若要將選單圓角化,要如何修改?

  3. 可以利用border-radious的屬性

  4. 可以照本文的第9步驟
    修改a和a:hover的規則

Leave a Reply