網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件 2-2-4 課件：英博特網(wǎng)站開發(fā)準(zhǔn)備-裁切網(wǎng)站首頁效果圖

第二篇：項目實戰(zhàn)篇任務(wù)2：“英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備2.4裁切網(wǎng)站首頁效果圖2.4裁切網(wǎng)站首頁效果圖（1）熟練使用Photoshop軟件裁切網(wǎng)頁效果圖。（2）掌握創(chuàng)建和編輯切片的方法。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述在Photoshop中將“英博特智能科技”企業(yè)網(wǎng)站首頁設(shè)計圖進(jìn)行裁切，獲取網(wǎng)頁制作的圖片素材文件2.4裁切網(wǎng)站首頁效果圖任務(wù)思考（1）Photoshop切片工具的作用？（2）純色背景需要創(chuàng)建切片嗎？（3）切片的原則有哪些？2.4裁切網(wǎng)站首頁效果圖切片作用2.4裁切網(wǎng)站首頁效果圖切片可以使整個圖片分為多個不同的小圖片分開下載，這樣下載的時間就大大地縮短了，能夠節(jié)約很多時間。切片可以優(yōu)化圖像。對于作為切片的各幅小圖片就可以分別對其優(yōu)化，并根據(jù)各幅切片的情況還可以存為不同的文件格式。切片原則2.4裁切網(wǎng)站首頁效果圖（1）切片是使用HTML+CSS實現(xiàn)網(wǎng)頁布局的依據(jù)，切片的過程要先總體后局部，即先把網(wǎng)頁整體切分成幾個大部分，再細(xì)切其中的小部分。（2）沒有使用特殊文字效果的網(wǎng)頁正文不需要切，可以直接使用HTML代碼來實現(xiàn)。（3）裁切的時候要注意平衡，比如右側(cè)裁切了，那么左側(cè)也要等高地裁切一下。（4）純色背景和線型邊框線不需要切片，可以直接由CSS代碼實現(xiàn)。（5）如果某個對象的范圍正好是要裁切的大小，可以直接使用“新建基于圖層的切片”功能。（6）如果區(qū)域面積不大，可以不進(jìn)行細(xì)致劃分，只需將其整體裁切即可。（7）如果圖片上面不需要添加文字，也就沒有必要將其作為背景圖案，直接作為圖片處理即可。切片種類（1）用戶切片：使用切片工具創(chuàng)建的切片。（2）基于圖層的切片：從圖層創(chuàng)建的切片。（3）自動切片：創(chuàng)建新的用戶切片或基于圖層的切片時，將生成占據(jù)圖像其余區(qū)域的附加切片。2.4裁切網(wǎng)站首頁效果圖任務(wù)實施具體要求見任務(wù)書2.4裁切網(wǎng)站首頁效果圖編輯首頁切片02.命名首頁切片03.01.創(chuàng)建首頁切片導(dǎo)出首頁切片04.討論區(qū)請對“英博特智能科技”網(wǎng)站首頁效果圖進(jìn)行切片，并將psd中的切片效果圖以及切出的所有圖片縮略圖截圖上傳討論區(qū)。2.4裁切網(wǎng)站首頁效果圖完成5個在線測試題運用本課學(xué)習(xí)的技術(shù)，完成主題網(wǎng)站首頁及子頁效果圖的裁切，生成對應(yīng)圖片文件夾。（詳見