每個png文件都有一個特殊的層—web layer，web layer就是專門用來記錄熱區(qū)和切割信息的，這些信息包含了html語言的特性，因此被稱作網(wǎng)絡(luò)層（web layer）。
熱區(qū)（hotspots）就是當(dāng)一張圖片包含數(shù)個超鏈接時用于指定哪部分區(qū)域指向哪個超鏈接地址的對象，在標(biāo)準(zhǔn)的html語言中用<map>標(biāo)簽表示。
切割（slices）是fireworks最先提出來的概念，以前當(dāng)網(wǎng)絡(luò)速度不很理想而圖片又稍大時，設(shè)計師通常把一張大圖片分成小圖片放在表格中，使得圖片的顯示速度加快，但是這項(xiàng)工作費(fèi)時費(fèi)力，于是fireworks提供了可視化進(jìn)行切割圖片的工具，大大減少了設(shè)計師們重復(fù)勞動的工作。
熱區(qū)和切割最后會被輸出成標(biāo)準(zhǔn)的html代碼，你只要將這些代碼插入到頁面相應(yīng)的位置就可以了。我們應(yīng)該很容易找到熱區(qū)和切割在工具欄中的位置，并且看到他們的擴(kuò)展工具，入圖：
我們先來看熱區(qū)工具，熱區(qū)工具中包含3個工具，分別用來建立矩形、圓形和不規(guī)則形狀的熱區(qū)，就象使用其他繪圖工具一樣使用他們就可以建立任何形狀的熱區(qū)。

如果這些工具不能滿足你對熱區(qū)形狀精確控制的要求，那么我們還有其他的方法。例如我們要建立一個星型的熱區(qū)，我們可以這樣做：首先，在畫板上繪制一個預(yù)想中的星型，使用多邊型工具（polygon tool）應(yīng)該非常容易做到這一點(diǎn)，然后選擇insert->hotspot，fireworks就會根據(jù)這個多邊形的路徑創(chuàng)建一個形狀和大小相同的熱區(qū)（注意：fireworks是新創(chuàng)建了一個熱區(qū)對象，而不是轉(zhuǎn)換這個路徑，因此原來的多邊形仍舊存在），完成之后就可以把一開始的那個多邊形刪除掉了。

如果現(xiàn)在我們用節(jié)點(diǎn)工具（subselection tool）拖動熱區(qū)上的某個節(jié)點(diǎn)，可以看到熱區(qū)依然保持著很好的可編輯性?。?！
現(xiàn)在我們要為熱區(qū)添加和超鏈接有關(guān)的html特性。打開object面版（window->object），可以看到相關(guān)的參數(shù)。其中包括鏈接的url地址，alt的文字，以及打開鏈接的方式（target），在最后的shape菜單里我們還可以將熱區(qū)在最基本的3種形狀之間互相轉(zhuǎn)換。

完成了這些之后就可以用file->export輸出html格式的代碼了。下面就是輸出后的結(jié)果，試著用右鍵單擊矩形框的內(nèi)部就會看到一個星型的形狀，同時我還在這個熱區(qū)上增加了一個onmouseover時，在瀏覽器狀態(tài)欄內(nèi)顯示文字的behavior，有興趣的話可以自己試試。

接下來，我們來講切割。前面已經(jīng)說過，設(shè)計師為了加快頁面加載的速度把大圖片分割成小圖片放在表格中，這在以前是一件費(fèi)時又費(fèi)力的事，現(xiàn)在使用了切割fireworks會按照你的切割自動生成html的表格代碼，你只需要將生成的代碼放在頁面的相應(yīng)位置就可以了。
可能有的朋友要問，難道圖片切割之后下載速度就加快了嗎？對，如果合理的切割的話，確實(shí)可以減小下載量，因?yàn)閷⑼瑯宇伾拇笊珘K切割成一個單獨(dú)的文件并使用較少的顏色輸出就會得到尺寸較小的文件。另一個切割圖片的理由是可以減少瀏覽者的心理等待時間。當(dāng)你等待一副大圖片出來時會覺得速度很慢，因?yàn)檫@時你什么也不能做，但是當(dāng)圖片切割后，小圖片很快就能出來并且一張接著一張，在下載的過程中瀏覽者就能夠先看到圖片的一部分，因此他不會有等待的感覺，這就是為什么我們要使用切割的道理。其實(shí)道理和之后使用在網(wǎng)絡(luò)多媒體播放中的流式技術(shù)是異曲同工的，雖然可能這個比較不是很恰當(dāng)。
除了用來分割圖片，在fireworks中翻轉(zhuǎn)圖、按鈕、導(dǎo)航條等帶有交互動作的對象都是基于切割的。
創(chuàng)建切割非常容易，只要使用切割工具如同畫矩形一樣就可以創(chuàng)建出需要的切割，使用多邊形切割工具（polygon slice tool）更可以創(chuàng)建出任意形狀的切割，如圖：

圖上綠色的區(qū)域就是切割的區(qū)域（fireworks默認(rèn)使用綠色表示切割，藍(lán)色表示熱區(qū)，當(dāng)然你可以通過修改設(shè)置來改變他們的顏色，但是我不建議你們這樣做），紅色的線條是圖片輸出后生成的表格的線條，這些紅色的線條組成的一個個矩形就對應(yīng)了表格的每個單元格。
你可能注意到了，當(dāng)使用不規(guī)則形狀做切割時，fireworks會沿著這個多邊形的最邊緣建立一個矩形，這是因?yàn)楸砀窈蛨D片只接受矩形這種形狀，輸出后的結(jié)果將會被處理成在一張矩形的圖片上有一個多邊形的熱區(qū)這種形式。
說了這么多，我們來動手做一下，我們的目標(biāo)是要創(chuàng)建一個圓形的切割，雖然沒有圓形的切割工具，但是我們可以把一個圓形的熱區(qū)轉(zhuǎn)換成切割（這也是創(chuàng)建精確切割圖形的方法）。先用圓形工具（ellipse tool）在畫板上畫一個圓，然后選擇insert->hotspot創(chuàng)建一個和圓形一樣形狀的熱區(qū)，最后選擇insert->slice把熱區(qū)轉(zhuǎn)換為切割。如果中間沒有經(jīng)過熱區(qū)這一步，而直接選擇insert->slice，那么fireworks將創(chuàng)建一個矩形的切割。

選中這個切割，打開object面版（window->object），可以看到和切割相關(guān)的屬性：鏈接的url地址，alt的文字，打開鏈接的方式（target）這些都和熱區(qū)一樣，auto-name slices是用來設(shè)置是否自動為切割的圖片命名。

在type菜單里可以看到2項(xiàng)：image和text。選擇image切割就會被輸出成圖片保存；選擇text后，可以在object面版中輸入文本格式的文字，輸出后這部分切割會留出空白的單元格用文本填寫。這個功能對于需要經(jīng)常更改消息的頁面相當(dāng)方便，這樣就不用每次都創(chuàng)建圖片。

在最后輸出之前，選擇file->html setup來到document specific這項(xiàng)可以設(shè)置fireworks自動命名文件名的規(guī)律，一般沒有特殊要求就使用默認(rèn)設(shè)置吧。

然后就可以輸出html代碼了，選擇file->export完成最后的工作。最后我要說的是，在輸出時選擇include areas without slices的話，那么畫板上沒有切割的部分也將被輸出成等同大小的圖片，如果不選擇此項(xiàng)，那么fireworks只會把有切割的部分生成圖片，沒有切割的部分用一張1x1的透明gif圖片（pacer.gif）撐開，使得表格在不同的瀏覽器中看起來一樣。我的建議是使用spacer.gif撐開表格，至于道理嘛，我想我不說你也應(yīng)該明白。

最新評論