網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目5：掌握切片與

網(wǎng)頁(yè)圖像Project5項(xiàng)目5職場(chǎng)情境如果網(wǎng)頁(yè)上的圖像較大，瀏覽器下載整個(gè)圖像需要花很長(zhǎng)的時(shí)間。切片就是將一幅大圖像分割為一些小的圖像切片，然后在網(wǎng)頁(yè)中通過(guò)沒(méi)有間距和寬度的表格重新將這些小的圖像沒(méi)有縫隙的拼接起來(lái)，成為一幅完整的圖像。這樣做可以減小圖像的大小，減少網(wǎng)頁(yè)的下載時(shí)間，還能將圖像的一些區(qū)域用

HTML來(lái)代替。為此，小艾想使用比較專業(yè)的軟件對(duì)處理中的網(wǎng)頁(yè)進(jìn)行輸出優(yōu)化，而同事凱程告訴她，Photoshop就可以完成對(duì)一個(gè)設(shè)計(jì)的網(wǎng)頁(yè)進(jìn)行切片制作并輸出的功能。在此方面只要了解網(wǎng)頁(yè)切片輸出和網(wǎng)頁(yè)圖像的優(yōu)化與輸出即可。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握網(wǎng)頁(yè)切片輸出的方法。掌握網(wǎng)頁(yè)圖像的優(yōu)化與輸出的方法。〓技能目標(biāo)〓學(xué)會(huì)為制作的網(wǎng)頁(yè)創(chuàng)建切片。學(xué)會(huì)為制作的切片進(jìn)行輸出。學(xué)會(huì)為網(wǎng)頁(yè)圖像進(jìn)行優(yōu)化。學(xué)會(huì)為網(wǎng)頁(yè)圖像進(jìn)行輸出。〓素質(zhì)目標(biāo)〓積極積累網(wǎng)頁(yè)各個(gè)方面知識(shí)點(diǎn)并將其在工作中進(jìn)行運(yùn)用。CONTENTS任務(wù)1了解網(wǎng)頁(yè)切片目錄任務(wù)2掌握網(wǎng)頁(yè)圖像綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條課后習(xí)題任務(wù)1了解網(wǎng)頁(yè)切片“切片工具”是

Photoshop軟件自帶的一個(gè)平面圖片切割工具。使用“切片”工具可以將一個(gè)完整的網(wǎng)頁(yè)切割成許多小圖片，以便于從網(wǎng)絡(luò)上下載。活動(dòng)1了解創(chuàng)建切片Photoshop中的切片工具

主要用于在制作網(wǎng)頁(yè)時(shí)候?qū)D片進(jìn)行“瘦身”，它可以在不損失圖像效果的前提下，減小文件的容量。在打開(kāi)的圖片上，使用切片工具

，將光標(biāo)置于要?jiǎng)?chuàng)建切片的位置，按住鼠標(biāo)左鍵拖動(dòng)，拖動(dòng)到合適的切片大小繪制切片，具體的創(chuàng)建過(guò)程與矩形選框工具

相同，如圖所示。任務(wù)1了解網(wǎng)頁(yè)切片活動(dòng)2了解編輯切片如果切片大小不合適，還可以調(diào)整和編輯切片，在圖片中創(chuàng)建切片后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“劃分切片”命令，在彈出的“劃分切片”對(duì)話框中，將劃分切片的“垂直劃分為”設(shè)置為

3，設(shè)置完畢單擊“確定”按鈕，完成切片的劃分，如圖所示。任務(wù)1了解網(wǎng)頁(yè)切片其中的各項(xiàng)含義如下：水平劃分為：水平均勻分割當(dāng)前切片。垂直劃分為：垂直均勻分割當(dāng)前切片。實(shí)踐經(jīng)驗(yàn)：在圖像上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯切片選項(xiàng)”命令，彈出“切片選項(xiàng)”對(duì)話框，在對(duì)話框中可以設(shè)置切片的

URL、目標(biāo)、信息文本等，如圖所示。其中的各項(xiàng)含義如下：切片類型：輸出切片的設(shè)置，包括圖像、無(wú)圖像和表。名稱：顯示當(dāng)前選擇的切片名稱，也可以自行定義。URL：在網(wǎng)頁(yè)中的單擊當(dāng)前切片可以鏈接的網(wǎng)址。目標(biāo)：設(shè)置打開(kāi)網(wǎng)頁(yè)的方式，主要包含以下5種

_blank、_self、_parent、_top和自定義，依次表示為：新窗口、當(dāng)前窗口、父窗口、頂層窗口和框架。當(dāng)所指名稱的框架不存在時(shí)，自定義作用等同于_blank。信息文本：在網(wǎng)頁(yè)中當(dāng)鼠標(biāo)移動(dòng)到當(dāng)前切片上時(shí)，網(wǎng)絡(luò)瀏覽器中狀態(tài)欄顯示的內(nèi)容。AIT標(biāo)記：在網(wǎng)頁(yè)中當(dāng)鼠標(biāo)移動(dòng)到當(dāng)前切片上時(shí)，彈出的提示信息。當(dāng)網(wǎng)絡(luò)上不顯示圖片時(shí)，圖片位置將顯示“Alt標(biāo)記”框中的內(nèi)容。尺寸：X和Y代表當(dāng)前切片的坐標(biāo)，W和H代表當(dāng)前切片的寬度和高度。切片背景類型：設(shè)置切片背景在網(wǎng)頁(yè)中的顯示類型。在下拉菜單中包括無(wú)、雜色、白色、黑色和其他。當(dāng)選擇“其他”選項(xiàng)時(shí)，會(huì)彈出“拾色器”對(duì)話框，在對(duì)話框中設(shè)置切片背景的顏色。任務(wù)1了解網(wǎng)頁(yè)切片課堂實(shí)操—通過(guò)切片連接到網(wǎng)絡(luò)使用“存儲(chǔ)為

Web和設(shè)備所用格式”命令可以導(dǎo)出和優(yōu)化切片圖像，Photoshop會(huì)將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的

HTML或

CSS代碼。具體的操作方法如下。任務(wù)2掌握網(wǎng)頁(yè)圖像優(yōu)化網(wǎng)頁(yè)使之能快速下載是頁(yè)面制作中很重要的考慮因素。網(wǎng)頁(yè)優(yōu)化涉及方方面面，圖片優(yōu)化則是其中重要手段之一，本此任務(wù)就講述如何進(jìn)行網(wǎng)頁(yè)圖像的優(yōu)化。活動(dòng)1掌握?qǐng)D像的優(yōu)化及應(yīng)用顏色表1.圖像的優(yōu)化現(xiàn)在的網(wǎng)站大量地使用圖片，那么如何優(yōu)化這些圖片才好呢?在網(wǎng)站設(shè)計(jì)之初，就先要做好規(guī)劃，如背景圖片如何使用，做到心中有數(shù)。編輯圖片的時(shí)候，要做好裁剪，只展示必要的、重要的、同內(nèi)容相關(guān)的部分。在輸出圖片的時(shí)候，圖片大小要設(shè)置妥當(dāng)，長(zhǎng)度和寬度就設(shè)成所需要的大小，而不要輸出大圖片，在使用的時(shí)候，再指定較小的長(zhǎng)度和寬度，縮放圖片。JPG圖片也可以模糊背景，壓縮的時(shí)候，可以壓縮得更多。頁(yè)面上的邊框和背景，盡可能使用CSS的方式來(lái)展示，而不要使用圖片。圖片盡量使用PNG格式，以替代過(guò)去常用的GIF和JPG格式。在保證質(zhì)量的情況下，用最小的文件。在html中明確指定圖片的大小。對(duì)于GIF和PNG文件格式，最小化顏色位數(shù)。如果圖片上要添加文字，盡量不要把文字嵌入到圖片中，而是采用透明背景圖片，或者使用CSS定位讓文字覆蓋在圖片上，這樣既能獲得相等的效果，還能把圖片更大程度地壓縮。在較小的GIF和PNG圖片上，可以使用有損壓縮?？赡艿脑?，使用局部壓縮，可在保證前景清楚的基礎(chǔ)上，較大程度地壓縮背景。圖片在優(yōu)化之前，若能降噪的話，可以獲得20%多的額外壓縮。任務(wù)2掌握網(wǎng)頁(yè)圖像2.應(yīng)用顏色表如果將圖像優(yōu)化為GIF格式、PNG-8格式和WBMP格式時(shí)，可以通過(guò)“儲(chǔ)存為Web所用格式”對(duì)話框中的“顏色表”部分對(duì)顏色進(jìn)行進(jìn)一步設(shè)置，如圖所示。其中的各項(xiàng)含義如下。

顏色總數(shù)：顯示“顏色表”調(diào)板中顏色的總和。

將選中的顏色映射為透明：在“顏色表”調(diào)板中選擇相應(yīng)的顏色后，單擊該按鈕，可以將當(dāng)前優(yōu)化圖像中的選取顏色轉(zhuǎn)換成透明。Web轉(zhuǎn)換：可以將在“顏色表”調(diào)板中選取的顏色轉(zhuǎn)換成Web安全色。

顏色鎖定：可以將在“顏色表”調(diào)板中選取的顏色鎖定，被鎖定的顏色樣本在右下角會(huì)出現(xiàn)一個(gè)被鎖定的方塊圖標(biāo)。新建顏色：?jiǎn)螕粼摪粹o可以將吸管工具

吸取的顏色添加到“顏色表”面板中，新建的顏色樣本會(huì)自動(dòng)處于鎖定狀態(tài)。

刪除：在“顏色表”面板中選擇顏色樣本后，單擊此按鈕可以將選取的顏色樣本刪除，或者直接拖曳到刪除按鈕上將其刪除。任務(wù)2掌握網(wǎng)頁(yè)圖像活動(dòng)2掌握?qǐng)D像大小及保存圖像1.圖像大小顏色設(shè)置完畢后還可以通過(guò)“儲(chǔ)存為Web所用格式”對(duì)話框中的“圖像大小”部分對(duì)優(yōu)化的圖像進(jìn)行進(jìn)一步設(shè)置輸出大小，如圖所示。其中的各項(xiàng)含義如下：

新建長(zhǎng)寬：用來(lái)設(shè)置修改圖像的寬度和長(zhǎng)度。

百分比：設(shè)置縮放比例。

品質(zhì)：可以在下拉列表中選擇一種插值方法，以便對(duì)圖像重新取樣。任務(wù)2掌握網(wǎng)頁(yè)圖像活動(dòng)2掌握?qǐng)D像大小及保存圖像2.保存圖像當(dāng)制作完成一張圖片后需要將它們保存，以備未來(lái)使用，這時(shí)就需要對(duì)圖片進(jìn)行存儲(chǔ)，在存儲(chǔ)的時(shí)候也會(huì)相應(yīng)地出現(xiàn)一些文件格式待選擇。執(zhí)行菜單欄中的“文件/導(dǎo)出/導(dǎo)出為”命令，彈出“導(dǎo)出為”對(duì)話框，選擇導(dǎo)出格式后，單擊“導(dǎo)出”按鈕，彈出“另存為”對(duì)話框。在該對(duì)話框中選擇文件存儲(chǔ)的位置，如圖5-11所示，單擊“保存”按鈕，即可保存圖像。任務(wù)2掌握網(wǎng)頁(yè)圖像課堂實(shí)操—通過(guò)儲(chǔ)存為Web所用格式輸出透明

GIF圖如何從

Photoshop輸出透明背景的

GIF圖像呢？下面就來(lái)講述輸出透明

GIF圖像的方法。素養(yǎng)小課堂在為網(wǎng)頁(yè)及圖像進(jìn)行優(yōu)化與輸出中，要積極增強(qiáng)自己的分析能力、溝通能力，在實(shí)操作中懂得了把所學(xué)知識(shí)會(huì)運(yùn)用到操作中的重要性，懂得了團(tuán)結(jié)協(xié)作在工作中的重要性，在學(xué)習(xí)中還要時(shí)刻增加自己的責(zé)任感、使命感以及榮譽(yù)感。綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)訓(xùn)練要求掌握切片工具的使用掌握網(wǎng)頁(yè)布局中進(jìn)行圖像切片制作對(duì)圖像進(jìn)行優(yōu)化處理實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目5/電商網(wǎng)頁(yè)宣傳頁(yè)，如圖所示。項(xiàng)目編號(hào)5-1項(xiàng)目名稱綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)頁(yè)面進(jìn)行切割與優(yōu)化的一般流程課堂實(shí)踐：電商主題，打開(kāi)素材、創(chuàng)建切片、導(dǎo)出網(wǎng)頁(yè)和圖像，完成一個(gè)網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化?？己藰?biāo)準(zhǔn)：切片位置創(chuàng)建明確，符合網(wǎng)頁(yè)要求。10分對(duì)圖像中的切片進(jìn)行優(yōu)化。10分導(dǎo)出網(wǎng)頁(yè)與圖像10分切片中的圖片數(shù)量要統(tǒng)一10分導(dǎo)出網(wǎng)頁(yè)能夠打開(kāi)10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：任務(wù)單綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化，如圖所示。綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo實(shí)戰(zhàn)訓(xùn)練要求掌握?qǐng)A角矩形的繪制掌握調(diào)出多個(gè)圖層的選區(qū)掌握漸變色的填充掌握鍵入文字調(diào)整間距調(diào)整不透明度實(shí)戰(zhàn)素材素材文件：無(wú)任務(wù)單項(xiàng)目編號(hào)5-2項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo時(shí)間地點(diǎn)目的：實(shí)踐通過(guò)文字及圖形設(shè)計(jì)logo的一般流程課堂實(shí)踐：電商主題，新建文檔、繪制正圓、繪制圓角矩形、調(diào)整圖形位置、調(diào)出選區(qū)清除多余圖像、填充漸變色，完成一個(gè)網(wǎng)頁(yè)logo的設(shè)計(jì)與制作?？己藰?biāo)準(zhǔn)：設(shè)置圓角位置。10分清除多余圖像。10分填充徑向漸變色

10分鍵入文字調(diào)整間距10分統(tǒng)一漸變色調(diào)整不透明度

10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)Logo，如圖所示。綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條實(shí)戰(zhàn)訓(xùn)練要求掌握新建文檔填充漸變色作為背景的方法掌握?qǐng)A角矩形的繪制的方法掌握自定義形狀工具繪制標(biāo)志及搜索的方法掌握鋼筆工具的使用掌握添加圖層樣式的方法掌握鍵入文字調(diào)整大小實(shí)戰(zhàn)素材素材文件：無(wú)任務(wù)單項(xiàng)目編號(hào)5-3項(xiàng)目名稱綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條

時(shí)間地點(diǎn)目的：實(shí)踐通過(guò)形狀及漸變和圖層樣式制作導(dǎo)航條的一般流程課堂實(shí)踐：電商主題，新建文檔、填充漸變色、繪制圓角矩形、繪制自定義形狀、添加圖層樣式，完成一個(gè)網(wǎng)頁(yè)導(dǎo)航條的設(shè)計(jì)與制作?？己藰?biāo)準(zhǔn)：繪制圓角矩形填充漸變色。10分繪制自定義形狀調(diào)整合適大小。10分添加漸變疊加和投影圖層樣式。10分鋼筆工具繪制路徑轉(zhuǎn)換成選區(qū)填充漸變色

10分鍵入文字調(diào)整大小10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—網(wǎng)頁(yè)頁(yè)面的切割與優(yōu)化實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目5/綜合實(shí)戰(zhàn)—設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航條，如圖所示。課后習(xí)題一．選擇題Photoshop中的（

）主要用于在制作網(wǎng)頁(yè)時(shí)候?qū)D片進(jìn)行“瘦身”，它可以在不損失圖像效果的前提下，減小文件的容量。A切片工具

B切片選擇工具

C矩形選框工具

D鋼筆工具使用“

”命令可以導(dǎo)出和優(yōu)化切片圖像，Photoshop會(huì)將每個(gè)切片存儲(chǔ)為單獨(dú)的文件并生成顯示切片圖像所需的

HTML或

CS