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樣式面板就可以修改選單列的視覺了
這是修改顏色後的選單列在網頁上預覽的效果
作者已經移除這則留言。
請問若要將選單圓角化,要如何修改?
請問要如何修改顏色設定?
可以利用border-radious的屬性
可以照本文的第9步驟
修改a和a:hover的規則