在網(wǎng)頁(yè)設(shè)計(jì)中，分割圖像最大的作用就是可以局部?jī)?yōu)化圖像，從而易于在網(wǎng)絡(luò)中傳輸；另外一個(gè)作用則是可以給同一圖像中的各個(gè)分割區(qū)域設(shè)置超鏈接。例如，如圖8.92所示的圖像是一個(gè)網(wǎng)頁(yè)主圖，這么一個(gè)大圖在設(shè)計(jì)網(wǎng)頁(yè)時(shí)直接應(yīng)用到網(wǎng)頁(yè)中是不合適的，因?yàn)閳D像文件太大，瀏覽者需要很長(zhǎng)時(shí)間才能下載此圖片。為了解決這一問(wèn)題，可以使用Photoshop的分割功能，將大圖變成小圖，這樣就有利于瀏覽了。
【操作步驟】
第1步，啟動(dòng)Photoshop，打開(kāi)制作好的網(wǎng)頁(yè)圖像。
第2步，在工具箱中選擇【切片工具】，然后移動(dòng)鼠標(biāo)指針至窗口中，單擊并拖動(dòng)鼠標(biāo)即可拉出一個(gè)分割區(qū)域。
提示：建立切片之后，如果不滿意，可以按Ctrl+Z快捷鍵還原操作，即可重新創(chuàng)建新切片。也可以在工具箱中單擊【切片工具】右下方的下三角，從彈出的下拉選項(xiàng)中選擇【切片選取工具】，然后單擊選擇切片，拖動(dòng)切片邊框來(lái)調(diào)整切片區(qū)域大小。
第3步，用同樣的方法將圖像分割成如圖8.94所示的8個(gè)區(qū)域，這樣在輸出時(shí)就會(huì)被分為8個(gè)圖像文件進(jìn)行保存。在網(wǎng)絡(luò)上傳輸時(shí)，就能分開(kāi)傳輸了，從而加快了圖像傳輸速度。
第4步，圖像被分割后，分割區(qū)域左上角會(huì)顯示一個(gè)順序編號(hào)，這塊區(qū)域就是分割區(qū)域。使用【切片選取工具】可以選中某個(gè)切片區(qū)域，該切片四周會(huì)顯示控制柄，表示此時(shí)可以對(duì)該切片區(qū)域進(jìn)行編輯操作，如改變大小、位置。
提示：在使用【切片工具】分割效果圖時(shí)，應(yīng)該注意3個(gè)問(wèn)題：
?切片之間不要預(yù)留空隙。在切分圖片時(shí)，應(yīng)該確保切片之間不要留出空隙，讀者可以通過(guò)切片編號(hào)觀察，從上到下，從左到右，如果切片編號(hào)出現(xiàn)跳躍，則可能中間出現(xiàn)空隙區(qū)域。
?切片之間不要重疊。除了切片之間不要預(yù)留空隙外，也不能夠出現(xiàn)切片重疊現(xiàn)象。如果出現(xiàn)重疊現(xiàn)象，應(yīng)該及時(shí)使用【切片選取工具】進(jìn)行調(diào)整。
?確保切片之間對(duì)齊?？紤]到切片最終都被轉(zhuǎn)換為表格，因此不規(guī)則的切片會(huì)產(chǎn)生大量嵌套表格，并產(chǎn)生很多冗余代碼。在操作時(shí)，應(yīng)該盡量確保上下、左右切片之間保持對(duì)齊。
第5步，右擊當(dāng)前編輯狀態(tài)切片，在彈出的菜單中可以選擇為切片執(zhí)行各種操作。
第6步，如果從快捷菜單中選擇【編輯切片選項(xiàng)】命令，可以打開(kāi)【切片選項(xiàng)】對(duì)話框，定義切片的類型、名稱，以及輸出為網(wǎng)頁(yè)后會(huì)產(chǎn)生的URL、鏈接目標(biāo)（目標(biāo)）、描述的信息文本（信息文本）、鼠標(biāo)經(jīng)過(guò)時(shí)的提示文字（Alt標(biāo)記）。另外，在【尺寸】選項(xiàng)組中可以精確定位切片的坐標(biāo)位置（X和Y），以及切片大小（W和H）。設(shè)置完畢，單擊【確定】按鈕即可。
提示：在網(wǎng)站建設(shè)實(shí)際操作中網(wǎng)頁(yè)圖像會(huì)被分割得很細(xì)，這樣方便在Dreamweaver中進(jìn)行編輯。新建切片之后，除了使用【切片選取工具】調(diào)整切片的位置和大小外，也可以使用【切片選取工具】雙擊切片區(qū)域，打開(kāi)【切片選項(xiàng)】對(duì)話框。
當(dāng)前文章標(biāo)題：案例實(shí)戰(zhàn)：分割圖像
當(dāng)前URL：http://mnamateurbaseball.com/news/wzzz/3140.html
