每個PNG文件都有一個特殊的層—Web Layer,Web Layer就是專門用來記錄熱區和切割信息的,這些信息包含了HTML語言的特性,因此被稱作網絡層(Web Layer)。
熱區(Hotspots)就是當一張圖片包含數個超鏈接時用于指定哪部分區域指向哪個超鏈接地址的對象,在標準的HTML語言中用<map>標簽表示。
切割(Slices)是Fireworks最先提出來的概念,以前當網絡速度不很理想而圖片又稍大時,設計師通常把一張大圖片分成小圖片放在表格中,使得圖片的顯示速度加快,但是這項工作費時費力,于是Fireworks提供了可視化進行切割圖片的工具,大大減少了設計師們重復勞動的工作。
熱區和切割最后會被輸出成標準的HTML代碼,你只要將這些代碼插入到頁面相應的位置就可以了。我們應該很容易找到熱區和切割在工具欄中的位置,并且看到他們的擴展工具,入圖:
我們先來看熱區工具,熱區工具中包含3個工具,分別用來建立矩形、圓形和不規則形狀的熱區,就象使用其他繪圖工具一樣使用他們就可以建立任何形狀的熱區。
如果這些工具不能滿足你對熱區形狀精確控制的要求,那么我們還有其他的方法。例如我們要建立一個星型的熱區,我們可以這樣做:首先,在畫板上繪制一個預想中的星型,使用多邊型工具(Polygon Tool)應該非常容易做到這一點,然后選擇Insert->Hotspot,Fireworks就會根據這個多邊形的路徑創建一個形狀和大小相同的熱區(注意:Fireworks是新創建了一個熱區對象,而不是轉換這個路徑,因此原來的多邊形仍舊存在),完成之后就可以把一開始的那個多邊形刪除掉了。
如果現在我們用節點工具(Subselection Tool)拖動熱區上的某個節點,可以看到熱區依然保持著很好的可編輯性!!!
現在我們要為熱區添加和超鏈接有關的HTML特性。打開Object面版(Window->Object),可以看到相關的參數。其中包括鏈接的URL地址,alt的文字,以及打開鏈接的方式(Target),在最后的shape菜單里我們還可以將熱區在最基本的3種形狀之間互相轉換。
完成了這些之后就可以用File->Export輸出HTML格式的代碼了。下面就是輸出后的結果,試著用右鍵單擊矩形框的內部就會看到一個星型的形狀,同時我還在這個熱區上增加了一個OnMouseOver時,在瀏覽器狀態欄內顯示文字的Behavior,有興趣的話可以自己試試。
接下來,我們來講切割。前面已經說過,設計師為了加快頁面加載的速度把大圖片分割成小圖片放在表格中,這在以前是一件費時又費力的事,現在使用了切割Fireworks會按照你的切割自動生成HTML的表格代碼,你只需要將生成的代碼放在頁面的相應位置就可以了。
可能有的朋友要問,難道圖片切割之后下載速度就加快了嗎?對,如果合理的切割的話,確實可以減小下載量,因為將同樣顏色的大色塊切割成一個單獨的文件并使用較少的顏色輸出就會得到尺寸較小的文件。另一個切割圖片的理由是可以減少瀏覽者的心理等待時間。當你等待一副大圖片出來時會覺得速度很慢,因為這時你什么也不能做,但是當圖片切割后,小圖片很快就能出來并且一張接
新聞熱點
疑難解答