fireworks怎樣做網(wǎng)頁(yè)切片
在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下，運(yùn)用切片來(lái)減少網(wǎng)頁(yè)下載時(shí)間而又不影響圖片的效果，現(xiàn)在我給你們?cè)敿?xì)介紹fireworks切片功能使用方法。也給大家介紹了在fireworks中網(wǎng)頁(yè)的制作，下面學(xué)習(xí)啦小編給大家整理了關(guān)于fireworks做logo的方法，希望你們喜歡。
fireworks做網(wǎng)頁(yè)切片的方法步驟：
一、切片在網(wǎng)頁(yè)制作中的作用
在網(wǎng)頁(yè)上的圖片較大的時(shí)候，瀏覽器下載整個(gè)圖片的話需要花很長(zhǎng)的時(shí)間，切片的使用使得整個(gè)圖片分為多個(gè)不同的小圖片分開(kāi)下載，這樣下載的時(shí)間就大大地縮短了，能夠節(jié)約很多時(shí)間。在目前互聯(lián)網(wǎng)帶寬還受到條件限制的情況下，運(yùn)用切片來(lái)減少網(wǎng)頁(yè)下載時(shí)間而又不影響圖片的效果，這不能不說(shuō)是一個(gè)兩全其美的辦法了。
除了減少下載時(shí)間之外，切片也還有其他一些優(yōu)點(diǎn)：
* 制作動(dòng)態(tài)效果：利用切片可以制作出各種交互效果。例如前面將的按鈕的這種狀態(tài)其實(shí)最后導(dǎo)出的文件實(shí)質(zhì)上就是不同狀態(tài)的切片。
* 優(yōu)化圖像：完整的圖像只能使用一種文件格式，應(yīng)用一種優(yōu)化方式，而對(duì)于作為切片的各幅小圖片我們就可以分別對(duì)其優(yōu)化，并根據(jù)各幅切片的情況還可以存為不同的文件格式。這樣既能夠保證圖片質(zhì)量，有能夠使得圖片變小。
* 創(chuàng)建鏈接：切片制作好了之后，就可以對(duì)不同的切片制作不同的鏈接了，而不需要在大的圖片上創(chuàng)建熱區(qū)了。
二、創(chuàng)建切片的方法：
使用Fireworks工具箱上的切片工具可以為已經(jīng)制作好的圖片創(chuàng)建切片。如圖1所示，切片工具有兩類，分別為“矩形切片”工具(Slice tool)和“多邊形切片”工具(Polygon Slice tool)。
下面我們分別就這兩類熱區(qū)工具的使用作介紹。
圖1 兩類切片工具
1. 創(chuàng)建矩形切片
首先打開(kāi)圖像，選擇工具箱上的的切片工具，在圖像的適當(dāng)位置上按下鼠標(biāo)左鍵并拖動(dòng)繪制一個(gè)矩形區(qū)域，當(dāng)矩形大小適當(dāng)時(shí)釋放鼠標(biāo)，這樣就生成了一個(gè)切片，如圖2所示。該切片區(qū)域被半透明的綠色所覆蓋，稱為切片對(duì)象，另外Fireworks根據(jù)切片對(duì)象的位置以紅色分割線對(duì)圖像進(jìn)行了分割，稱為切片向?qū)А?/p>
圖2 繪制矩形切片
要使切片與對(duì)象區(qū)域緊密匹配，可以和熱點(diǎn)一樣先選中要制作成為切片的對(duì)象，然后點(diǎn)擊“Edit”菜單，選擇“Insert”->“Slice”;如果選擇了多個(gè)對(duì)象，則會(huì)出現(xiàn)一個(gè)對(duì)話框，選擇“Multiple”按鈕，可以創(chuàng)建多個(gè)切片，如圖4所示。
圖4 制作多個(gè)切片
2. 創(chuàng)建多邊形切片
如圖5所示，打開(kāi)一幅圖像，可以利用多邊形切片工具在多邊形的每個(gè)頂點(diǎn)單擊制作多邊形切片，如圖6所示。
圖5打開(kāi)圖像
圖6 創(chuàng)建多邊形切片
由上圖可見(jiàn)，圖像中的切片向?qū)匀皇撬胶痛怪钡模傻那衅募策€是矩形的。實(shí)際上多邊形切片的形狀主要是用于設(shè)置相應(yīng)的行為觸發(fā)區(qū)域的。如果切片對(duì)象被設(shè)置了鏈接，那么在瀏覽器中顯示的時(shí)候，只有點(diǎn)擊到多邊形區(qū)域時(shí)才會(huì)實(shí)現(xiàn)鏈接跳轉(zhuǎn)，而在這個(gè)切片的其他區(qū)域則不會(huì)出現(xiàn)鏈接跳轉(zhuǎn)。
同理，如果切片和對(duì)象區(qū)域完全符合或者說(shuō)用戶是基于路徑對(duì)象制作切片，只需點(diǎn)擊“編輯”菜單，再選擇“Insert”->“Slice”即可。
三、編輯切片
和熱區(qū)的編輯非常類似，如果要選取切片，可以利用指針工具、部分選定工具來(lái)選中它，也可以使用層面板來(lái)進(jìn)行;選中切片之后，若要移動(dòng)切片可以利用鼠標(biāo)、方向鍵或者屬性面板的位置值。
默認(rèn)情況下熱區(qū)是透明的綠色，如果需要改變熱切片的顏色，只需要在圖7所示的切片屬性面板中的切片顏色框中選擇所需要的顏色即可。
(圖7 切片屬性面板 圖片較大，請(qǐng)拉動(dòng)滾動(dòng)條觀看)
在切片屬性面板中，類型欄的下拉菜單中有圖像和HTML兩項(xiàng)，選擇HTML會(huì)出現(xiàn)圖8所示的面板，點(diǎn)擊按鈕，在圖9所示的彈出窗口中設(shè)置HTML代碼可以創(chuàng)建一個(gè)文本鏈接。
(圖8 將切片類型改為HTML 圖片較大，請(qǐng)拉動(dòng)滾動(dòng)條觀看)
圖9 Edit HTML Slice對(duì)話框
(圖10 選擇優(yōu)化方式 圖片較大，請(qǐng)拉動(dòng)滾動(dòng)條觀看)
此外，在屬性面板的優(yōu)化下拉列表中還有幾類優(yōu)化方式，我們可以依據(jù)實(shí)際情況選擇一種優(yōu)化方式，如圖10所示。
可以利用工具箱上的隱藏切片和熱點(diǎn)工具來(lái)將選中的切片隱藏起來(lái)，需要顯示切片的時(shí)候單擊顯示切片和熱點(diǎn)工具即可將切片顯示出來(lái)。如同熱區(qū)的顯示和隱藏一樣，我們同樣還可以利用層面板上的眼睛圖標(biāo)顯示和隱藏該切片。
四、添加鏈接
為切片添加鏈接同樣有兩種方法，一是利用屬性面板，二是利用URL面板。當(dāng)我們選定某個(gè)切片之后，我們可以在這兩個(gè)面板中為該熱區(qū)設(shè)置鏈接地址和鏈接屬性。方法和熱區(qū)的鏈接方法類似，這里不再重復(fù)了。
五、命名切片
在Fireworks中命名切片有如下三種方式：自動(dòng)命名切片文件、自定義命名切片文件和更改默認(rèn)的自動(dòng)命名慣例。
命名切片的步驟1. 自動(dòng)命名切片文件
如果用戶沒(méi)有在屬性面板或?qū)用姘逯休斎肭衅Q，則Fireworks 會(huì)為切片自動(dòng)命名。自動(dòng)命名將根據(jù)默認(rèn)的命名慣例自動(dòng)為每個(gè)切片文件指定一個(gè)唯一的名稱。在導(dǎo)出經(jīng)過(guò)切片的圖像時(shí)，于“Export”對(duì)話框的“文件名”文本框中輸入一個(gè)名稱。注意不要添加文件擴(kuò)展名，因?yàn)镕ireworks 會(huì)在導(dǎo)出時(shí)自動(dòng)向切片文件添加文件擴(kuò)展名。
命名切片的步驟2. 自定義命名切片文件
為了能夠在站點(diǎn)文件結(jié)構(gòu)中輕松地標(biāo)識(shí)切片文件，用戶可以為切片自行命名。自定義命名切片有兩種方法：在畫布上選擇切片，在屬性面板的Slice框中輸入一個(gè)名稱，然后按回車鍵;在層面板中雙擊切片的名稱，輸入一個(gè)新名稱，然后按回車鍵。
命名切片的步驟3. 更改默認(rèn)的自動(dòng)命名慣例
還可以在“HTML Setup”對(duì)話框的“Document Specific”(文檔特定信息)選項(xiàng)欄中更改切片的命名慣例。點(diǎn)擊“File”菜單，選擇下拉菜單的“HTML Setup”，如圖11所示在彈出的對(duì)話框中選擇“Document Specific”選項(xiàng)欄。我們可以用多種多樣的的命名選項(xiàng)來(lái)生成自己的命名慣例，創(chuàng)建的命名慣例最多可包含六個(gè)元素。每個(gè)元素具體解釋如下：
圖11 文檔特定信息項(xiàng)目欄
* None：元素钚應(yīng)用任何名稱。
* doc.name：元素采用文檔的名稱。
* slice：可以向命名慣例中插入“slice”一詞
* Slice(1、2、3...)/Slice(01、02、03...)/Slice(A、B、C...)/Slice(a、b、c...): 根據(jù)所選擇的特定樣式，按數(shù)字順序或字母順序?qū)υ剡M(jìn)行標(biāo)記。
* row/column(r3_c2、r4_c7...): row (r##) 和column (c##) 指定 Web 瀏覽器用來(lái)重建切片圖像的表的行和列。
* Underscore/Period/Space/Hyphen:下劃線/句號(hào)/空格/連字符，通常使用這些字符作為與其它元素的分隔符。
例如，如果文檔名為index，則命名慣例doc.name + "slice"+Slice(A、B、C...)所產(chǎn)生的切片名稱就是indexsliceA。實(shí)際上，不需要使用包含全部六個(gè)元素的命名慣例。如果一個(gè)切片包含多個(gè)幀，則默認(rèn)情況下 Fireworks 將為每個(gè)幀的文件添加一個(gè)數(shù)字。我們也可以使用“HTML Setup”對(duì)話框?yàn)榘鄠€(gè)幀的切片創(chuàng)建自己的命名慣例。例如，如果為一個(gè)包含三種狀態(tài)的按鈕輸入自定義切片文件名 home，則Fireworks 將“Up”狀態(tài)圖形命名為 home.gif，將“Over”狀態(tài)圖形命名為 home_f2.gif，將“Down”狀態(tài)圖形命名為 home_f3.gif。
六、導(dǎo)出切片
介紹完了命名原則之后，我們來(lái)說(shuō)一下切片導(dǎo)出的具體步驟：
導(dǎo)出切片第一步：如圖12所示打開(kāi)切片圖像。
圖12
導(dǎo)出切片第二步：選擇“File”->“Export”，會(huì)彈出導(dǎo)出對(duì)話框。選擇需要保存的文件夾，在文件名中輸入文件名稱，如圖13所示。
導(dǎo)出切片第三步：在切片下拉列表中選擇三個(gè)選項(xiàng)：
* Export Slice(導(dǎo)出切片)：表示根據(jù)切片對(duì)象導(dǎo)出多個(gè)切片文件
* None(無(wú))：表示不生成切片文件，只是將文件導(dǎo)出為一個(gè)圖像文件
* Slice Along Guides(沿引導(dǎo)線切片)：表示依據(jù)文件中現(xiàn)有切片向?qū)?dǎo)出切片
另外，如果我們只希望導(dǎo)出一部分切片，只需要選中所需要導(dǎo)出的切片，右擊鼠標(biāo)在快捷菜單中選擇“Export Selected Slice”(導(dǎo)出所選切片)即可。
看過(guò)“ fireworks怎樣做網(wǎng)頁(yè)切片“的認(rèn)還看了：