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