Dreamweaver 中的 Spry 是以 HTML、Javascript、CSS 三種語法撰寫而成的互動式元素,讓某些不會撰寫程式語法的人也能夠輕易地做出效果性十足的互動式網頁。在 Spry 中的選單列、摺疊式面版、標籤面板、可收合面板、工具提示等,都只需簡單幾個步驟,即可由 Dreamweaver 透過內建的 Spry 組件來完成且修改容易。

我們以 Spry 選單列為例,在設計網頁時,只要網頁上顯示幾個主要的連結功能表,當滑鼠移到某一個項目上時,再顯示出含有更多連結的子功能表,這就是所謂的 Spry 選單列。在 Dreamweaver 中,可利用 Spry 選單列來完成上述的效果。製作大型專案時,就如購物網站、社群網站…等,便可使用此種效果來呈現。這樣一來,可節省頁面連結內容的分佈並達到與使用者互動的趣味性。接下來就帶您實際體驗 Spry 選單列的魅力!


以下幾個網站都是有使用類似的方式呈現,但不一定是使用 Dreamweaver – Spry 選單列做的喔!

http://buy.yahoo.com.tw

http://www.payeasy.com.tw

http://www.momoshop.com.tw


我們就以現有的網頁版型來加入 Spry 選單列。大致上分為兩大階段,分別是:

  1. 使用 Dreamweaver 的 Spry 組件插入選單列。
  2. 修改 CSS 以美化 Spry 選單列。

使用 Dreamweaver 的 Spry 組件插入選單列

Step. 1

請將游標停留在所需插入的位置(位於 <h1> 與 <img> 中間)並點選 Spry \ Spry 選單列。

Step. 2

此時,會出現一對話視窗詢問您要以水平或垂直來呈現。

Step. 3

插入後,請點選 Spry 選單列的藍色標籤即可在屬性列中修改其文字內容、連結位置與子選單連結(最多達三層)。

Step. 4

儲存檔案後,會將所需之影像、CSS、Javascript 一併加入到您的資料夾中。

Step. 5

至於儲存到我們的資料夾哪裡呢?如下圖所示,就在 Dreamweaver 幫我們產生的 SpryAssets 資料夾中。


修改 CSS 以美化 Spry 選單列

各位所插入的 Spry 選單列是最陽春的呈現狀態,若要美化它就必須動用到 CSS 了。

Step. 1

首先,請在 HTML 中加上一些標籤,如 <br>、<span>。在為某些標籤套用我們所設定好的 Class(類別)。若不熟悉請看下方原始碼:

<ul id="MenuBar1" class="MenuBarHorizontal resetSpace">
  <li class="color1"><a href="http://www.dfuns.idv.tw/about.html">關於掌櫃<br><span>About</span></a></li>
  <li class="color2"><a href="http://www.dfuns.idv.tw/gallery.html" class="MenuBarItemSubmenu">設計畫廊<br><span>Galleries</span></a>
    <ul class="resetSpace">
      <li><a href="#">插畫設計</a></li>
      <li><a href="#">User Interface</a></li>
      <li><a href="#">繪畫塗鴉</a></li>
      <li><a href="#">平面設計</a></li>
    </ul>
  </li>
  <li class="color3"><a href="http://www.dfuns.idv.tw/closed.html" class="MenuBarItemSubmenu">專案企劃<br><span>Planning</span></a>
    <ul class="resetSpace">
      <li><a href="#">網頁設計</a></li>
      <li><a href="#">網頁互動特效</a></li>
      <li><a href="#">企業識別</a></li>
    </ul>
  </li>
  <li class="color4"><a href="http://www.dfuns.idv.tw/teaching.html" class="MenuBarItemSubmenu">教學專區<br><span>Teaching</span></a>
    <ul class="resetSpace">
      <li><a href="#">基本排版</a></li>
      <li><a href="#">CSS 進階排版</a></li>
      <li><a href="#">CSS3 視覺動態特效</a></li>
      <li><a href="#">Behavior</a></li>
      <li><a href="#">Spry</a></li>
      <li><a href="#">Flash 時間軸動畫</a></li>
      <li><a href="#">ActionScript</a></li>
      <li><a href="#">Javascript</a></li>
      <li><a href="#">JQuery</a></li>
    </ul>
  </li>
</ul>

Step. 2

由於 Spry 組件幫我們產生出來的 CSS 相當地複雜,故 Away 便將不需要 CSS 都清除掉並修改為欲呈現之效果。

ul.MenuBarHorizontal {
  list-style-type: none;
  font-size: 100%;
  cursor: default;
  width: auto;
  height: 48px;
  position: absolute;
  top: 94px;
}

ul.MenuBarActive {
  z-index: 1000;
}

ul.MenuBarHorizontal li {
  list-style-type: none;
  font-size: 100%;
  position: relative;
  text-align: left;
  cursor: pointer;
  float: left;
  margin-right: 5px;
}

ul.MenuBarHorizontal ul {
  list-style-type: none;
  font-size: 100%;
  z-index: 1020;
  cursor: default;
  position: absolute;
  left: -1000em;
  background: #EEE url(../images/sub_ul.gif) repeat-x left bottom;
  padding: .4em .2em;
  border-radius: 0 5px 5px 5px;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
  left: auto;
}

ul.MenuBarHorizontal ul li {
  float: none;
  border-radius: 5px;
  display: block;
  margin: .2em 0 .2em 0;
}

ul.MenuBarHorizontal ul ul {
  position: absolute;
  margin: -5% 0 0 95%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
  left: auto;
  top: 0;
}

ul.MenuBarHorizontal a {
  display: block;
  cursor: pointer;
  padding: 0.5em 0.75em;
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  background: url(../images/btn.gif);
  border-radius: 5px 5px 0 0;
}

ul.MenuBarHorizontal ul a {
  text-align: left;
  border-radius: 0;
  color: #0A78C7;
  background: none;
  padding: .3em .4em;
  font-size: .8em;
}

ul.MenuBarHorizontal ul a:hover {
  background: none;
  color: #FFF;
  padding: .3em .4em;
  margin: 0;
}

ul.MenuBarHorizontal a span {
  font-size: .7em;
  -webkit-text-size-adjust: none;
}

li.color1 a { background-position: 0 0;}
li.color2 a { background-position: 0 -50px;}
li.color3 a { background-position: 0 -100px;}
li.color4 a { background-position: 0 -150px;}
.color2 li:hover { background: #FC0;}
.color3 li:hover { background: #090;}
.color4 li:hover { background: #F39;}

ul.MenuBarHorizontal a.MenuBarItemHover,
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
  background: url(../images/hover.gif);
  color: #000;
  padding: 0.5em 0.75em .8em;
  margin-top: -.3em;
}

就這樣囉 ! 如果看不太懂的同學們請多多複習一下 CSS 喔 !