Fireworks 8 彈出式選單的優點

經常閱讀 Fireworks 討論區文章的讀者應該都知道我是誰了。我已經獲得了改革鬥士的稱號, 因為我一向對原本用於 Macromedia Fireworks MX 2004 和較舊版本的 Fireworks 彈出式選單頗由微詞。這些都是事實。我花了相當多的時間撰寫反對使用這些彈出式選單的文章, 列出諸多原因和缺點。

那麼, 我現在又為何要寫這篇文章呢？請看看我的理由吧：

• 我想要告訴 Fireworks 小組, 他們這次做出來的新選單系統很棒, 看得出來他們花費了不少心力。
• 我想告訴大家, 我不打算再寫些反對使用這個選單系統的文章了。
• 我非常希望 Dreamweaver 開發小組可以將我的意見列入考慮, 在以後的 Dreamweaver 程式版本中改進彈出式選單的功能。

總歸一句, 我想告訴大家, Fireworks 8 的彈出式選單功能已經大幅改進了！

我將在本文中, 簡短地說明各種模式的選單建立方法。我還會檢查並討論 Fireworks 建立用來匯入 Dreamweaver 的標記, 並說明這個結果標記值得改進的地方。

需求

要完成本教學課程, 您必須安裝下列軟體：

Fireworks 8

• 試用
• 購買

Dreamweaver 8

• 試用
• 購買

必備知識

對於 HTML 和 CSS 具備一定程度的熟悉度, 且先前用過 Fireworks 的彈出式選單。

建立彈出式選單

曾經用過舊版 Fireworks 彈出式選單功能的讀者對於新版的彈出式選單想必不陌生。Fireworks MX 2004 和 Fireworks 8 的設定和對話面板外觀相同, 其中的選項亦完全相同。您可以使用 Fireworks 8 的這項功能來建立美觀的選單集, 讓您選單功用一目瞭然。

要檢查 Fireworks 8 建立的彈出式選單, 必須先建立多個極簡檔案。要建立第一個極簡檔案, 請開啟 Fireworks 並選取「檔案＞開新檔案」以建立新頁面 (我們可以選 640 x 400 像素的頁面)。選取文字工具, 然後在頁面任意處輸入「Link1」。

結束文字工具, 然後拉出一個分割圍住 Link1 (我用的寬度是 41 像素, 高度是 23 像素)。選取這個分割, 將它命名為「link1button」, 然後用所選分割的紅心放入快顯選單, 再從選單選項中選取「增加彈出式選單」。這時會開啟一個面板, 您可以將這個分割設定為簡單的單一選項子選單。請在這個面板中的「文字」欄標題底下輸入「Sub1-1」。不需要輸入連結或目標。

現在, 按「下一步」以進入「外觀」索引標籤 (或是直接按一下這個索引標籤), 將這個選單設為垂直選單。如果不多做調整, 這個子選單就會出現在第一個選單選項的上方。所以, 請先到「位置」索引標籤, 按一下左邊數過來的第二個位置圖示。將此索引標籤的其他設定保持不變, 並保留其他索引標籤的預設值, 然後按一下「完成」以結束選單設定。將檔案儲存為「singlebutton.png」。

要預覽選單, 請選取「檔案＞在瀏覽器中預覽」, 然後選擇您的瀏覽器。這時您應該會看到一個只有單一按鈕的選單, 而且會在滑鼠移過時放下一個包含單一選項的子選單。

趁著 singlebutton.png 仍在開啟狀態, 您可以多加幾個按鈕到選單中。本教學課程需要多加三個選單按鈕, 然後為各選單按鈕增加一個單一彈出式子選單。首先, 請取消選取「網頁圖層」工具中的可見分割選項、按兩下 Link1, 然後附加 Link2 Link3 Link4 (各連結名稱之間以兩個空格隔開)。

接著, 結束文字模式並啟用可見分割選項, 然後選取分割工具為這三個新選單選項各別新增一個與 link1button 相同尺寸的分割。從 Link2 開始, 使用以下命名規則為各個新分割命名：link2button、link3button 和 link4button。依序選取每個新分割, 然後使用紅心新增一個具有單一子選單的彈出式選單：Sub2-1、Sub3-1 和 Sub4-1。將這個新的選單安排命名為「fourbutton.png」。

您可以再次使用瀏覽器預覽您美妙的成果。

將彈出式選單匯入 Dreamweaver

目前為止, 您已經建立了兩個選單 (一個有單一按鈕和單一彈出式選單, 另外一個有四個按鈕, 各按鈕各有一個單一彈出式選單)。現在, 該將這些選單匯入 Dreamweaver 並檢查其標記了。

開啟 singlebutton.png, 選取「檔案＞匯出」。從中選取檔案的存放位置 (我建立了一個名為 single 的資料夾, 然後將檔案放到這裡面)。仔細查看「匯出」面板, 確認「匯出」欄位已設為「HTML 和影像」、「HTML」欄位已設為「轉存 HTML 檔案」、「分割」欄位已設為「轉存分割」, 且已啟用「包含沒有分割的區域」核取方塊。

按一下「選項」按鈕, 選取您要的 HTML 樣式和副檔名。在「HTML 設定」面板的四個核取方塊中, 至少要選取底下兩項 (「彈出式選單使用 CSS」和「將 CSS 寫入外部檔案」)。按一下「確定」離開「HTML 設定」面板和之前的「匯出」面板, 以便儲存檔案。

對於 fourbutton.png 執行相同動作 (我建立了一個名為 fourbutton 的資料夾, 將檔案放在裡面)。現在, 您已建完了本教學課程所需的其餘所有檔案。對我而言, 這個程序可以將下列相關檔案加入單一資料夾 (同樣地, 也可將 fourbutton 相關檔案加入 fourbutton 資料夾)：singlebutton.html、singlebutton.css 和 mm_css_menu.js。singlebutton 檔案將用來說明選單及其結構的詳細資訊。fourbutton 檔案則可用來檢查這個較為「實際」範例所需的 CSS。

將選單插入 Dreamweaver 的程序, 歷經數個版本未變。首先, 開啟 Dreamweaver 頁面, 將插入點置於您要插入選單的地方, 然後選取「插入＞影像物件＞Fireworks HTML」。接下來, 本教學課程要教您檢查 Fireworks 所寫的程式碼, 以瞭解這些選單的建立和運作方式。我會用 Fireworks 8 所寫的原始檔案來進行說明。

查看程式碼

快速瀏覽 HTML, 即可發現這些選單與舊版 Fireworks 所建的選單相當不同。最重大的不同之處在於連結並非寫入頁面的純 HTML 標記。

我已經在 Dreamweaver 中定義了一個專用於本教學課程的網站。這個網站根同時包含 singlebutton 和 fourbutton 資料夾。要瞭解 Fireworks 如何建立這些選單, 先從簡單的地方下手。在 Dreamweaver 中使用「程式碼」檢視查看 simple 資料夾中的 singlebutton.html 內容。您應該會看到下列標記內容：

• 頁面已連結至 mm_css_menu.js, mm_css_menu.js 只是一個 80 行的 JavaScript 檔案 (與原本的 mm_menu.js 比起來小多了), 其中包含用來顯示和隱藏子選單的函數以及設定其螢幕外觀時間的函數。
• CSS 樣式表已經由內嵌的 @import 規則指定, 它會隱藏 Netscape 4 之前的樣式。
• CSS 已經與「螢幕」媒體類型連結, 所以看不到印表機或其他裝置。
• 選單及其相關子選單均放在同一個外部 div 容器中, 這個容器將稱為「選單 div」。
• 選單本身為標準的 HTML 錨點, 置於表格儲存格中。這個表格將稱為「選單表格」。
• 子選單其實就是放在 div 容器 (位於選單 div 標記底部, 表格結尾標籤和結尾 </div> 標籤之間) 中的巢狀 div 標籤。這個額外的巢狀結構可能是為了容納複雜的多層級子選單系統而建立的。
• 子選單本身會在其專用容器 div 中形成巢狀結構。
• 在彈出式選單的設定中 (「外觀」索引標籤), 您可以選擇子選單連結要使用 HTML 或影像。在本教學課程中, 我們保留預設值 (HTML)。也就是說, 子選單會建立自純文字連結, 也就是「Sub1-1」。
• 這些元素依照特定的命名方式命名：選單 div、子選單容器 div 和特定子選單 div。相信您會覺得這個命名方式有點難懂。

這裡會顯示重要的 HTML 標記 (還會附上我的加註, 並顯示 div 採用的命名慣例)：

<div id="FWTableContainer165705776"><!-- 這是外部選單容器 div -->
<table border="0" cellpadding="0" cellspacing="0" width="640"><!-- 這是選單表格 -->
<!-- fwtable fwsrc="singlebutton.png" fwbase="singlebutton.gif" fwstyle="Dreamweaver" fwdocid = "165705776" fwnested="0" -->
<tr>
<!-- Shim row, height 1. -->
...snip...
<tr><!-- row 1 -->
...snip...
</tr>
<tr><!-- row 2 -->
<td rowspan="2">...snip...</td>
<td><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer0817151145_0', 'MMMenu0817151145_0',0,23,'link1button');"><img name="link1button" src="images/link1button.gif" width="41" height="23" border="0" alt=""></a></td><!-- 這是頂端選單連結影像 (link1button) --> 
<td rowspan="2">...snip...</td>
<td>...snip...</td>
</tr>
<tr><!-- row 3 -->
<td>...snip...</td>
<td>...snip...</td>
</tr>
<!--   這個表格會由 Macromedia Fireworks 自動建立   -->
<!--   http://www.macromedia.com   -->
</table>
<div id="MMMenuContainer0817151145_0"><!-- 這是子選單 div -->
<div id="MMMenu0817151145_0" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();">
<a href="#" id="MMMenu0817151145_0_Item_0" class="MMMIFVStyleMMMenu0817151145_0" onMouseOver="MM_menuOverMenuItem('MMMenu0817151145_0');">
Sub1-1
</a>
</div>
</div>
</div>

選單功能是由套用至各種 </div> 標籤的事件處理常式所控制。這個邏輯, 與我們幾年前用 DHTML 時間線建立這類選單的邏輯非常相似。將滑鼠移到選單連結上方, 會顯示呼叫 MM_menuShowMenu 的子選單, 將滑鼠移開則會啟動內部計時器。當計時器啟動時, 子選單便會關閉。將滑鼠移到子選單 div 上方會呼叫 MM_menuResetTimeout, 停止之前啟動的計時器；將滑鼠移開這個 div 則會再次啟動計時器。

這個選單的 CSS 撰寫方式如下：

• 開頭有一個規則強制表格儲存格中的影像顯示：封鎖。這是用來解決 Netscape 對於影像行內顯示的嚴格解譯問題, 以免在不具備有效和完整文件類型的頁面上, 文字下緣底下出現空格。
• 有一連串規則會按照您的期望控制多個選單和子選單 div 及其內容的樣式。
• 選單 div 有 position:relative, 讓選單可以視需要出現在表格儲存格內部, 即使選單使用絕對定位亦然。
• 子選單上有一個方框模型, 適用於 IE6 之前的 Internet Explorer。
• 將子選單 div 視需要置於頂端功能表連結底下的絕對定位。

如需 CSS 檔案規則的詳細資訊, 請查看匯出後所產生的個別 CSS 檔案。

就 singlebutton.html 而言, CSS 檔案的長度有 81 行。就 fourbutton.html, CSS 檔案長度有 282 行, 多出來的幾行是各子選單的個別樣式設定。這代表著越複雜的選單需要越長的 CSS 檔案。

可別以為我忘了討論這個特殊的命名結構。div 標籤 ID (當然也包括它們的樣式規則選取器) 的命名方式有點難懂, 而且過於冗長。我覺得最好可以用分割名稱來簡化這些 ID, 這樣就不必在 Dreamweaver 標籤選取器、程式碼和 CSS 中用上一堆空間列出這些 ID。使用者可能需要手動編輯這些 ID, 讓它們更好理解。

此外, 針對各別子選單提供獨立的樣式選項 (這真的是使用者介面強加於選單上的功能, 因為每個子選單都是獨立個體) 似乎帶來更多彈性, 但是代價也不小。頁面上的標記以及選取器的命名方式均因為這個彈性功能, 變得過於複雜。我個人覺得, 這個額外的個別子選單樣式功能可以去掉。簡化後的選單系統將會更為好用。

總之, 我覺得這些彈出式選單的設計雖然只能說是標準, 算不上先進。在最近出現、討論和使用過的選單系統中, 大部分均使用巢狀清單模型, 而非具備顯示/隱藏 div 動作的獨立錨點標籤。巢狀清單模型真正的優點在於無法使用 JavaScript 時的簡單表示功能及語義標記 (清單的意義是承繼而來, 而非與一連串相鄰的錨點標籤共用)。我非常希望在未來的 Fireworks 版本中可以改用巢狀清單模型。

還有, 彈出式選單應該要與 Dreamweaver 樣本相容, 而且要讓具備中等 HTML/CSS 程度者可以輕鬆修改或除錯。選單本身可以由搜尋引擎蜘蛛解讀, 但是在未啟用 JavaScript 時卻無法運作 (這也是其他許多選單系統的通病)。

最後我覺得該給點鼓勵的話。我真的很高興可以開啟「舊版」的選單, 然後重新儲存為 CSS 選單。我認為, 這個功能可以解救許多與舊版全 JavaScript 選單搏鬥的使用者。這個貼心的新功能值得嘉獎。

關於作者