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