DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks制作不規則熱區網頁
Fireworks制作不規則熱區網頁
編輯:Fireworks基礎     
熱區(Hotspot)有時又稱之為熱點,是圖像上帶有超鏈接的一塊區域,它可以呈矩形、圓形、甚至還可以是多邊形。和文本超鏈接的情況一樣,當浏覽者將鼠標移動到熱點上時,鼠標會變成手形。

  文本和圖像都可以在網頁上創建超級鏈接。一般情況下一個圖像只鏈接到一個目標。但是有時候一幅較大的圖片上有不同的小區域,不同的小區域的圖片要相應地鏈接到不同的目標上去,這樣就需要利用到熱區的功能。我們可以在這個大的圖像上相應的部分繪制多個熱區,然後將這些熱區分別鏈接到不同的目標文件之中就可以上述目的。在浏覽器中浏覽時,鼠標放到熱區時,鼠標變為手狀,單擊這些區域時會跳轉到不同的鏈接頁面上去。

  下面我們以一幅圖片來具體說明熱區的概念。圖1所示的是一幅天柱山風景名勝區的風光圖片,在這幅圖片上有太平塔、天柱山主峰、九井河、龍潭河、黑虎瀑以及天柱山門幾個景點的小的圖像。

  如果還有這幾個景點的詳細介紹的Html文件,那麼我們就可以在這六張小圖上繪制六個熱點,然後分別將它們鏈接到有這幾個景點詳細介紹的頁面上去。例如,我們將鼠標放置到太平塔的小圖片上去,這時候鼠標能夠變成手形,點擊一下鼠標就跳轉到了有太平塔景點詳細資料的頁面上去了。

  下面我們具體講一講Fireworks中熱區的創建和使用方法。


圖1 天柱山風光圖




  一、創建熱區

  我們就以上面的天柱山風景圖為例來說明熱區的創建過程。

  (1)首先如圖2所示在Fireworks中打開圖像。


圖2 在Fireworks中打開圖像

  (2)點擊工具箱上的熱點工具,我們會看見如圖3所示的三類熱區工具,Rectangle Hotspot tool“矩形熱點”工具、Circle Hotspot tool “圓形熱點”工具和Polygon Hotspot tool “多邊形熱點”工具。下面就分別講講這三類熱區工具的使用。


圖3 三類熱區工具

  * 矩形熱點工具(Rectangle Hotspot tool):用於繪制矩形熱點區域。選中它後在圖像適當位置按下鼠標左鍵拖動鼠標,即可繪制出矩形熱區。如果同時按住Shift鍵還可以繪制正方形熱區,如圖4所示。


圖4 繪制矩形熱區


圖5 繪制多邊形形熱區

  * 圓形熱點工具(Circle Hotspot tool):用於繪制一個圓形熱區。選擇它後在圖像適當位置按下鼠標左鍵拖動鼠標,即可繪制出圓形熱區。如果同時按住Alt鍵還可以繪制以點擊的點為中心繪制一個圓形的區域。

  * 多邊形熱點工具(Polygon Hotspot tool):用於繪制多邊形熱區。選擇它後在圖上多邊形區域每個端點上單擊可繪出一段段直線,所得的填充區域是多邊形,如圖5所示。

  另外,我們還可以根據路徑或者所選對象輪廓來生成熱區。首先選中作為熱區的路徑或對象,然後選擇“Edit”菜單下的“Insert”->“Hotspot”就可以為其添加熱區了。如果選擇一個路徑對象,那麼這個對象區域就被定義為熱區。

  如果選擇多個對象,如圖6所示,我們選擇天柱山風光圖的六幅小圖的邊界路徑,接著選擇“Edit”菜單下的“Insert”->“Hotspot”,這時候會跳出圖7所示的對話框,我們選擇“多重”按鈕,這樣就為所有的小圖像添加上了熱區了,如圖8所示。


圖6 選中六幅小圖的邊界路徑


圖7 彈出對話框


圖8 插入多個熱區

   二、編輯熱區

  熱區是網頁對象,同其它許多對象一樣,用戶可以使用指針工具、部分選定工具和變形工具對其進行編輯。我們還可以使用屬性面板,以數字方式更改熱點的位置和大小,甚至可以更改熱區的形狀

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved