發新話題

[教學]FW MX 2004教程:鏈接設置

[教學]FW MX 2004教程:鏈接設置

在Fireworks中,為圖像設置鏈接區域是靠「切片」或「熱點」工具來完成,因此「切片」或「熱點」區域又被稱為鏈接區域。它們不是以圖像的形式存在,而是在圖像導出成網頁格式後,以HTML代碼的形式出現。

  1、切片與熱點

  網頁層:所有的「切片」和「熱點」區域都被保存在「層」面板中的「網頁層」內,以劃分它們與圖像層的區別。但同時也可以像對待圖像層那樣對網頁層進行例如重命名、選擇、刪除、展開/折疊層、隱藏/顯示層、鎖定/編輯層等操作,如圖10—01。



圖10—01

  鏈接區的變形:對於各種形狀的圖形可為其選擇不同的「切片」或「熱點」工具,為圖像劃分出所需的切片或熱點區域。同時也可以使用各種「變形」工具對該區域進行變形處理,如圖10—02。



圖10—02

  設置鏈接:為圖像設置好「切片」或「熱點」的鏈接區域後,在其區域的屬性對話框中就可以輸入或設置鏈接的相關內容。如圖10—03。

訪客無法瀏覽此圖片或連結,請先 註冊登入會員

圖10—03

  而對於「切片」區域除了可以為圖像設置一個鏈接範圍以外,還可以將該範圍作為HTML的語言區域進行導出。只需在「切片」屬性框中的類型下拉列表裡選擇「HTML」項,如圖10—04。

訪客無法瀏覽此圖片或連結,請先 註冊登入會員

圖10—04

  然後點擊類型列表下的「編輯」按鈕即可在「編輯HTML切片」窗口中輸入HTML代碼。如此一來,也就把該切片區域轉成了HTML的語言區域。



圖10—05

控制手柄:在「切片」 區域的中心有一個圓形的控制手柄,右鍵點擊即可彈出這個切片目前所能用到的所有行為指令。如圖10—06。



圖10—06

  導出所選切片——可把圖像中的切片區域作為圖像進行導出保存。在導出前,還可以使用「優化」面板對該區域進行各項設置,如圖10—07。



圖10—07

  排列——調整該切片在網頁層中上下的排列位置;

  添加簡單變換圖像行為——為圖形的切片區域建立簡單的圖形變換效果;

  添加交換圖像形為——可啟動「變換圖像」的詳細設置窗口,為切片區域的圖像建立較複雜的圖形變換效果;

  添加狀態欄信息——選擇該項後會彈出一個 「設置狀態欄文本」對話框,在消息欄中可輸入要顯示在瀏覽器狀態欄上的文字信息。如圖10—08。



圖10—08

  添加導航欄——將圖形的切片區域設置為網頁的導航欄;

  添加彈出菜單——在切片位置添加一個彈出菜單的按鈕;

  編輯彈出菜單——可重新設置彈出菜單中的各項內容。

同樣的,在「熱點」區域的中心位置上也有個控制手柄,點擊右鍵即可彈出相關行為,如圖10—09。



圖10—09

  為 「切片」或「熱點」所添加的全部指令都保存在「行為」面板中。同時,點擊「行為」面板上的「添加」 或「刪除」 按鈕也可以為切片、熱點添加或刪除相關的行為指令,如圖10—10。



圖10—10

2、製作彈出菜單

  先製作或引入一個要用來製作彈出式菜單的主按鈕,如圖10—11。



圖10—11

  接著為該按鈕添加一個切片或熱點,並在其控制手柄的彈出菜單中選擇「添加彈出菜單」項,如圖10—11。



圖10—11

  此時將會啟動「彈出菜單編輯器」窗口,如圖10—12。



如圖10—12

  在「內容」選項卡中,點擊「添加菜單項」 或「刪除菜單項」 按鈕,可在文本欄中加入或刪除一個菜單項;

  文本欄——可輸入彈出菜單中各選項的名稱;

  鏈接欄——輸入菜單菜單項所要鏈接的地址;

  目標欄——選擇鏈接對像在瀏覽器中的打開方式。

  如果要把文本欄中某個菜單選項再設置為另一個菜單的下一級目錄時,只需點擊「下級菜單」 按鈕即可。如圖10—13;



圖10—13

     可以看到,「菜單2」已成了「菜單1」的下級目錄了。而點擊「上級菜單」 按鈕則可以將「菜單2」又向上恢復一級。

     菜單項上下位置的調整可能用鼠標的拖拽來完成,如圖10—14,我們把「菜單5」向上移動了一格。



圖10—14

  在「內容」選項卡的設置完成之後,點擊右下角的「繼續」按鈕,進入下「外觀」選項卡,如圖10—15。



圖10—15

在單元格選項中,可以將彈出式菜單的風格設定為「HTML」或「圖像」,而兩種風格都可以在下面的預覽框中先行查看;

  在單元格右邊的下拉列表中可以選擇菜單的排列方式,分別有「垂直菜單」和「水平菜單」;

  字體欄及旁邊的文字設置工具,都是用於對菜單文字的各項設置;

  在「彈起狀態」框中有兩個顏色選擇框,分別用於菜單在彈起狀態時,文字顏色及其背景色的設置;

  在「滑過狀態」框中也有兩個顏色選擇框,是用於菜單在鼠標滑過狀態時,文字顏色及背景色的設置。

  在「外觀」選項卡的設置完成後,我們點擊「繼續」按鈕,進入下一個選項卡。如圖10—16。



圖10—16

  在「高級」選項卡中可以進一步對菜單的邊框及邊框顏色等進行詳細的設置。完成後點擊「繼續」按鈕。
  在「位置」選項卡中可以對彈出菜單的彈出方式及位置進行設定,如圖10—17。



圖10—17

  菜單位置——設置主菜單的彈出位置。也可以直接輸入主菜單彈出位置的坐標值;

  子菜單位置——選擇子菜單的彈出位置,同樣也可以在下面的坐標中直接輸入相關數值。而取消「放在同一位置」選項時,則子菜單總會與它的上一級菜單在同一水平位置上彈出。

  點擊「完成」按鈕後,彈出式菜單的製作就大功告成了,按F12鍵即可在瀏覽器中查看效果。



圖10—18

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。