Fireworks制作不規(guī)則熱區(qū)頁面
發(fā)表時間：2023-12-31 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]熱區(qū)（Hotspot）有時又稱之為熱點，是圖像上帶有超鏈接的一塊區(qū)域，它可以呈矩形、圓形、甚至還可以是多邊形。和文本超鏈接的情況一樣，當(dāng)瀏覽者將鼠標(biāo)移動到熱點上時，鼠標(biāo)會變成手形�！ ∥谋竞蛨D像都可以在網(wǎng)頁上創(chuàng)建超級鏈接。一般情況下一個圖像只鏈接到一個目標(biāo)。但是有時候一幅較大的圖片上有不同的小區(qū)域...
熱區(qū)（Hotspot）有時又稱之為熱點，是圖像上帶有超鏈接的一塊區(qū)域，它可以呈矩形、圓形、甚至還可以是多邊形。和文本超鏈接的情況一樣，當(dāng)瀏覽者將鼠標(biāo)移動到熱點上時，鼠標(biāo)會變成手形。
文本和圖像都可以在網(wǎng)頁上創(chuàng)建超級鏈接。一般情況下一個圖像只鏈接到一個目標(biāo)。但是有時候一幅較大的圖片上有不同的小區(qū)域，不同的小區(qū)域的圖片要相應(yīng)地鏈接到不同的目標(biāo)上去，這樣就需要利用到熱區(qū)的功能。我們可以在這個大的圖像上相應(yīng)的部分繪制多個熱區(qū)，然后將這些熱區(qū)分別鏈接到不同的目標(biāo)文件之中就可以上述目的。在瀏覽器中瀏覽時，鼠標(biāo)放到熱區(qū)時，鼠標(biāo)變?yōu)槭譅�，單擊這些區(qū)域時會跳轉(zhuǎn)到不同的鏈接頁面上去。
下面我們以一幅圖片來具體說明熱區(qū)的概念。圖1所示的是一幅天柱山風(fēng)景名勝區(qū)的風(fēng)光圖片，在這幅圖片上有太平塔、天柱山主峰、九井河、龍?zhí)逗印⒑诨⑵僖约疤熘介T幾個景點的小的圖像。
如果還有這幾個景點的詳細(xì)介紹的HTML文件，那么我們就可以在這六張小圖上繪制六個熱點，然后分別將它們鏈接到有這幾個景點詳細(xì)介紹的頁面上去。例如，我們將鼠標(biāo)放置到太平塔的小圖片上去，這時候鼠標(biāo)能夠變成手形，點擊一下鼠標(biāo)就跳轉(zhuǎn)到了有太平塔景點詳細(xì)資料的頁面上去了。
下面我們具體講一講Fireworks中熱區(qū)的創(chuàng)建和使用方法。
圖1 天柱山風(fēng)光圖
一、創(chuàng)建熱區(qū) 我們就以上面的天柱山風(fēng)景圖為例來說明熱區(qū)的創(chuàng)建過程。
（1）首先如圖2所示在Fireworks中打開圖像。
圖2 在Fireworks中打開圖像
[page_break]
�。�2）點擊工具箱上的熱點工具，我們會看見如圖3所示的三類熱區(qū)工具，Rectangle Hotspot tool“矩形熱點”工具、Circle Hotspot tool “圓形熱點”工具和Polygon Hotspot tool “多邊形熱點”工具。下面就分別講講這三類熱區(qū)工具的使用。 
圖3 三類熱區(qū)工具
* 矩形熱點工具（Rectangle Hotspot tool）：用于繪制矩形熱點區(qū)域。選中它后在圖像適當(dāng)位置按下鼠標(biāo)左鍵拖動鼠標(biāo)，即可繪制出矩形熱區(qū)。如果同時按住Shift鍵還可以繪制正方形熱區(qū)，如圖4所示。 
圖4 繪制矩形熱區(qū)
圖5 繪制多邊形形熱區(qū)
* 圓形熱點工具（Circle Hotspot tool）：用于繪制一個圓形熱區(qū)。選擇它后在圖像適當(dāng)位置按下鼠標(biāo)左鍵拖動鼠標(biāo)，即可繪制出圓形熱區(qū)。如果同時按住Alt鍵還可以繪制以點擊的點為中心繪制一個圓形的區(qū)域。
* 多邊形熱點工具（Polygon Hotspot tool）：用于繪制多邊形熱區(qū)。選擇它后在圖上多邊形區(qū)域每個端點上單擊可繪出一段段直線，所得的填充區(qū)域是多邊形，如圖5所示。
另外，我們還可以根據(jù)路徑或者所選對象輪廓來生成熱區(qū)。首先選中作為熱區(qū)的路徑或?qū)ο�，然后選擇“Edit”菜單下的“Insert”->“Hotspot”就可以為其添加熱區(qū)了。如果選擇一個路徑對象，那么這個對象區(qū)域就被定義為熱區(qū)。
如果選擇多個對象，如圖6所示，我們選擇天柱山風(fēng)光圖的六幅小圖的邊界路徑，接著選擇“Edit”菜單下的“Insert”->“Hotspot”，這時候會跳出圖7所示的對話框，我們選擇“多重”按鈕，這樣就為所有的小圖像添加上了熱區(qū)了，如圖8所示。 
圖6 選中六幅小圖的邊界路徑
圖7 彈出對話框
圖8 插入多個熱區(qū)
[page_break]
二、編輯熱區(qū)
熱區(qū)是網(wǎng)頁對象，同其它許多對象一樣，用戶可以使用指針工具、部分選定工具和變形工具對其進(jìn)行編輯。我們還可以使用屬性面板，以數(shù)字方式更改熱點的位置和大小，甚至可以更改熱區(qū)的形狀，使其在網(wǎng)頁創(chuàng)作中更加靈活多樣。
對熱區(qū)的操作主要包括以下幾種：
1. 選擇熱區(qū)
選擇熱區(qū)可以運(yùn)用工具箱上的指針工具、部分選定工具來實現(xiàn)。
另外，雖然本質(zhì)上熱區(qū)不是圖像，但如同其他的圖像對象一樣，也可以通過單擊層面板中的熱區(qū)對象來選擇熱區(qū)，如圖9所示。 
圖9 使用層面板選擇熱區(qū)
2. 改變熱區(qū)形狀
選中熱區(qū)之后，利用指針工具或者次選擇工具拖動熱區(qū)邊框上的控制點可以改變熱區(qū)的形狀。對于矩形熱區(qū)和圓形熱區(qū)，我們只能通過控制點改變大小而不能改變形狀。如果我們需要將一種形狀的熱區(qū)變?yōu)榱硪环N形狀的熱區(qū)，只需要在選中需要改變形狀的熱區(qū)之后，在其屬性面板中“Shape”下拉列表中選擇需要的形狀即可，如圖10所示。
（圖10 改變熱區(qū)形狀 圖片較大，請拉動滾動條觀看）
3. 移動熱區(qū)
選中熱區(qū)之后，可以利用鼠標(biāo)移動熱區(qū)，也可以用方向鍵或者屬性面板的位置值。不過要注意使用鼠標(biāo)時應(yīng)避開熱區(qū)中心點，不要拖動它。
4. 改變熱區(qū)顏色
熱區(qū)在默認(rèn)情況下是透明的藍(lán)色，如果需要改變，可以在如圖10所示的熱區(qū)顏色框中選擇所需要的顏色加以替換。
5. 控制熱區(qū)的顯示與隱藏
如前面圖中所示，默認(rèn)情況下熱區(qū)覆蓋在對象之上，并為透明的藍(lán)色。為方便文件的編輯，需要將一些已經(jīng)設(shè)計好了的或者暫時不需要的熱區(qū)隱藏起來，待需要時才讓它顯示出來。
我們可以利用工具箱上的隱藏切片和熱點工具來將選中的熱區(qū)隱藏起來，在需要顯示的時候單擊顯示切片和熱點工具就可將熱區(qū)顯示出來。
另外，我們還可以利用層面板來顯示和隱藏?zé)釁^(qū)。點擊層面板的熱點前的眼睛圖標(biāo)（如圖11所示）就可以隱藏該熱區(qū)。隱藏了熱區(qū)之后，再次點擊該區(qū)域，眼睛圖標(biāo)又顯示出來了，這樣所選熱區(qū)也重新顯示出來了。
圖11 顯示和隱藏?zé)釁^(qū)
[page_break]
三、為熱區(qū)添加鏈接
我們可以利用屬性面板，或是利用URL面板為熱區(qū)添加鏈接。在選定某個熱區(qū)之后，我們可以在這兩個面板中為該熱區(qū)設(shè)置鏈接地址和鏈接屬性。
屬性面板如圖10所示，我們只需要分別在各欄里面添加鏈接地址、替代標(biāo)記和鏈接方式就可以了�，F(xiàn)在我們來熟悉URL面板和熱區(qū)屬性面板的使用。
�。�1）單擊“Windows”菜單，選擇“URL”，打開URL面板，如圖12所示，它是組合在Assets面板（資源面板）之下的。 
圖12 URL面板
�。�2）選中圖8上的天柱山主峰的圖片熱區(qū)，點擊URL面板右上角的，會彈出如圖13下拉菜單。
圖13 彈出菜單
（3）選擇“Add URL”菜單，會彈出“New URL”對話框，在該對話框中可以如圖14所示添加所要鏈接的網(wǎng)址。 
圖14 在彈出對話框中添加URL地址
（4） 這時URL地址也在熱區(qū)的屬性面板中的鏈接欄里也出現(xiàn)了，添上替代文字“天柱山主風(fēng)景區(qū)”，在鏈接目標(biāo)下拉列表中，如圖15所示選擇_blank。 
（圖15 熱點屬性面板設(shè)置） 所謂的Alt（替代文字）就是用于說明目標(biāo)網(wǎng)頁的主題的文字，當(dāng)瀏覽器無法顯示圖像時或鼠標(biāo)放上去停滯一段時間時，能夠在圖像的位置上顯示的文字，其主要目的是方便瀏覽者了解網(wǎng)頁上的內(nèi)容。而鏈接目標(biāo)是表示以何種方式打開網(wǎng)頁，它有四類，分別為：_blank，表示在新的窗口中打開鏈接的目標(biāo)網(wǎng)頁；_self，表示在當(dāng)前頁面的窗口或者框架中打開鏈接的目標(biāo)頁面；_parent，表示在當(dāng)前頁面的父級框架頁中打開鏈接的目標(biāo)頁面；_top，表示在本頁面所在的窗口中展開頁面，如果窗口中包含框架，則會剔除所有的框架。
同樣我們也可以為其他的熱區(qū)制作鏈接，分別鏈接到不同頁面上去。另外點擊熱區(qū)中間的小圓形圖標(biāo)我們還可以為熱區(qū)添加交換圖像行為、狀態(tài)欄信息和彈出菜單等。
Photoshop默認(rèn)保存的文件格式，可以保留所有有圖層、色版、通道、蒙版、路徑、未柵格化文字以及圖層樣式等。
