| 使用熱區(qū)和切割（hotspots and slices）（下） /接下來(lái)，我們來(lái)講切割。前面已經(jīng)說(shuō)過(guò)，設(shè)計(jì)師為了加快頁(yè)面加載的速度把大圖片分割成小圖片放在表格中，這在以前是一件費(fèi)時(shí)又費(fèi)力的事，現(xiàn)在使用了切割fireworks會(huì)按照你的切割自動(dòng)生成html的表格代碼，你只需要將生成的代碼放在頁(yè)面的相應(yīng)位置就可以了。 可能有的朋友要問，難道圖片切割之后下載速度就加快了嗎？對(duì)，如果合理的切割的話，確實(shí)可以減小下載量，因?yàn)閷⑼瑯宇伾拇笊珘K切割成一個(gè)單獨(dú)的文件并使用較少的顏色輸出就會(huì)得到尺寸較小的文件。另一個(gè)切割圖片的理由是可以減少瀏覽者的心理等待時(shí)間。當(dāng)你等待一副大圖片出來(lái)時(shí)會(huì)覺得速度很慢，因?yàn)檫@時(shí)你什么也不能做，但是當(dāng)圖片切割后，小圖片很快就能出來(lái)并且一張接著一張，在下載的過(guò)程中瀏覽者就能夠先看到圖片的一部分，因此他不會(huì)有等待的感覺，這就是為什么我們要使用切割的道理。其實(shí)道理和之后使用在網(wǎng)絡(luò)多媒體播放中的流式技術(shù)是異曲同工的，雖然可能這個(gè)比較不是很恰當(dāng)。 除了用來(lái)分割圖片，在fireworks中翻轉(zhuǎn)圖、按鈕、導(dǎo)航條等帶有交互動(dòng)作的對(duì)象都是基于切割的。 創(chuàng)建切割非常容易，只要使用切割工具如同畫矩形一樣就可以創(chuàng)建出需要的切割，使用多邊形切割工具（polygon slice tool）更可以創(chuàng)建出任意形狀的切割，如圖：  圖上綠色的區(qū)域就是切割的區(qū)域（fireworks默認(rèn)使用綠色表示切割，藍(lán)色表示熱區(qū)，當(dāng)然你可以通過(guò)修改設(shè)置來(lái)改變他們的顏色，但是我不建議你們這樣做），紅色的線條是圖片輸出后生成的表格的線條，這些紅色的線條組成的一個(gè)個(gè)矩形就對(duì)應(yīng)了表格的每個(gè)單元格。 你可能注意到了，當(dāng)使用不規(guī)則形狀做切割時(shí)，fireworks會(huì)沿著這個(gè)多邊形的最邊緣建立一個(gè)矩形，這是因?yàn)楸砀窈蛨D片只接受矩形這種形狀，輸出后的結(jié)果將會(huì)被處理成在一張矩形的圖片上有一個(gè)多邊形的熱區(qū)這種形式。 說(shuō)了這么多，我們來(lái)動(dòng)手做一下，我們的目標(biāo)是要?jiǎng)?chuàng)建一個(gè)圓形的切割，雖然沒有圓形的切割工具，但是我們可以把一個(gè)圓形的熱區(qū)轉(zhuǎn)換成切割（這也是創(chuàng)建精確切割圖形的方法）。先用圓形工具（ellipse tool）在畫板上畫一個(gè)圓，然后選擇insert->hotspot創(chuàng)建一個(gè)和圓形一樣形狀的熱區(qū)，最后選擇insert->slice把熱區(qū)轉(zhuǎn)換為切割。如果中間沒有經(jīng)過(guò)熱區(qū)這一步，而直接選擇insert->slice，那么fireworks將創(chuàng)建一個(gè)矩形的切割。  選中這個(gè)切割，打開object面版（window->object），可以看到和切割相關(guān)的屬性：鏈接的url地址，alt的文字，打開鏈接的方式（target）這些都和熱區(qū)一樣，auto-name slices是用來(lái)設(shè)置是否自動(dòng)為切割的圖片命名。  在type菜單里可以看到2項(xiàng)：image和text。選擇image切割就會(huì)被輸出成圖片保存；選擇text后，可以在object面版中輸入文本格式的文字，輸出后這部分切割會(huì)留出空白的單元格用文本填寫。這個(gè)功能對(duì)于需要經(jīng)常更改消息的頁(yè)面相當(dāng)方便，這樣就不用每次都創(chuàng)建圖片。  在最后輸出之前，選擇file->html setup來(lái)到document specific這項(xiàng)可以設(shè)置fireworks自動(dòng)命名文件名的規(guī)律，一般沒有特殊要求就使用默認(rèn)設(shè)置吧。  然后就可以輸出html代碼了，選擇file->export完成最后的工作。最后我要說(shuō)的是，在輸出時(shí)選擇include areas without slices的話，那么畫板上沒有切割的部分也將被輸出成等同大小的圖片，如果不選擇此項(xiàng)，那么fireworks只會(huì)把有切割的部分生成圖片，沒有切割的部分用一張1x1的透明gif圖片（pacer.gif）撐開，使得表格在不同的瀏覽器中看起來(lái)一樣。我的建議是使用spacer.gif撐開表格，至于道理嘛，我想我不說(shuō)你也應(yīng)該明白。 |
新聞熱點(diǎn)
疑難解答
