《圖形圖像處理技術(shù)》 課件 任務(wù)8.3 制作“圖書(shū)銷售”網(wǎng)站首頁(yè)

項(xiàng)目8網(wǎng)頁(yè)設(shè)計(jì)任務(wù)8.3制作“圖書(shū)銷售”網(wǎng)站首頁(yè)圖形圖像處理技術(shù)主要內(nèi)容01任務(wù)解析02制作網(wǎng)頁(yè)重點(diǎn)難點(diǎn)12341.了解網(wǎng)頁(yè)的設(shè)計(jì)。2.掌握制作導(dǎo)航欄、分割線及登錄區(qū)的方法。3.培養(yǎng)學(xué)生綜合運(yùn)用創(chuàng)意、美學(xué)知識(shí)設(shè)計(jì)創(chuàng)新的能力。.4.培養(yǎng)學(xué)生健康樂(lè)觀的心理素質(zhì)，使學(xué)生懂得奉獻(xiàn)、分享與感恩。知識(shí)目標(biāo)素質(zhì)目標(biāo)教學(xué)目標(biāo)技能目標(biāo)能力目標(biāo)任務(wù)情境【任務(wù)場(chǎng)景】在Photoshop中制作網(wǎng)頁(yè)，主要制作網(wǎng)頁(yè)的框架。網(wǎng)頁(yè)中的元素有很多，包括導(dǎo)航條，網(wǎng)頁(yè)底部的頁(yè)腳設(shè)計(jì)，網(wǎng)頁(yè)主題內(nèi)容的確定，特效文字的制作，動(dòng)作按鈕的設(shè)計(jì)等等?！救蝿?wù)布置】分析要制作的網(wǎng)站在同類網(wǎng)站中的特色和市場(chǎng)定位，確定網(wǎng)站風(fēng)格；制定設(shè)計(jì)方案并收集整理素材；制作網(wǎng)頁(yè)要素包括背景主題、網(wǎng)頁(yè)標(biāo)題、導(dǎo)航欄及分割線、登錄區(qū)、網(wǎng)頁(yè)內(nèi)容和附加信息。8.3.1任務(wù)解析網(wǎng)上在線交易是通過(guò)網(wǎng)絡(luò)去查詢和購(gòu)買(mǎi)所需商品，使人們有更多的選擇。如今快節(jié)奏的生活狀態(tài)，使人們減少了去實(shí)體店購(gòu)買(mǎi)商品的時(shí)間，新手父母?jìng)兠τ诩覄?wù)、工作和育兒，繁忙的事務(wù)導(dǎo)致他們更喜歡網(wǎng)上購(gòu)物和交流。知識(shí)準(zhǔn)備1．分析網(wǎng)站的市場(chǎng)定位8.3.1任務(wù)解析網(wǎng)站主題越集中，網(wǎng)站提供信息的質(zhì)量也會(huì)越高；網(wǎng)站內(nèi)容豐富更受用戶歡迎，在推薦網(wǎng)站時(shí)位置也會(huì)越靠前。網(wǎng)站風(fēng)格與主題相適應(yīng)，更有利于網(wǎng)站的推廣。趣味性是培養(yǎng)兒童學(xué)習(xí)知識(shí)的原動(dòng)力。根據(jù)兒童的生理和心理特點(diǎn)，可以通過(guò)有趣的內(nèi)容調(diào)動(dòng)兒童的積極性，在潛移默化中培養(yǎng)兒童學(xué)習(xí)知識(shí)的興趣。知識(shí)準(zhǔn)備2．確定網(wǎng)站風(fēng)格8.3.1任務(wù)解析綜合以上的網(wǎng)站風(fēng)格及市場(chǎng)定位，制定網(wǎng)站的設(shè)計(jì)方案：為了適應(yīng)兒童的心理特點(diǎn)，以卡通圖案和艷麗的色彩為主題；確定網(wǎng)站名稱為“寶貝書(shū)房”；在網(wǎng)站標(biāo)識(shí)中含有圖書(shū)和兒童的元素；設(shè)計(jì)版面為“國(guó)”字型結(jié)構(gòu)布局；對(duì)所收集的素材進(jìn)行裁剪并調(diào)整色彩，保證布局的和諧統(tǒng)一。知識(shí)準(zhǔn)備3．制定設(shè)計(jì)方案8.3.1任務(wù)解析在收集整理素材時(shí)應(yīng)根據(jù)已經(jīng)確定的網(wǎng)站風(fēng)格進(jìn)行適當(dāng)?shù)恼{(diào)整，使圖像素材的色彩、色調(diào)與主題相符，使音樂(lè)、視頻素材與網(wǎng)站風(fēng)格一致。知識(shí)準(zhǔn)備4．收集整理素材8.3.2制作網(wǎng)頁(yè)根據(jù)任務(wù)目的，制作圖書(shū)銷售網(wǎng)站首頁(yè)，如圖8-12所示。知識(shí)準(zhǔn)備圖8-12圖書(shū)銷售網(wǎng)站首頁(yè)效果圖8.3.2制作網(wǎng)頁(yè)（1）打開(kāi)Photoshop，按快捷鍵Ctrl+N或執(zhí)行“文件”→“新建”命令，在打開(kāi)的“新建文檔”對(duì)話框中設(shè)置文檔：名稱為圖書(shū)銷售網(wǎng)站背景，寬度為1000像素，高度為600像素，分辨率為72像素，顏色模式為RGB，背景為白色，如圖8-13所示。單擊“創(chuàng)建”按鈕，完成畫(huà)布的創(chuàng)建，效果如圖8-14所示。知識(shí)準(zhǔn)備1．背景主題圖8-13“新建文檔”對(duì)話框圖8-14圖書(shū)銷售網(wǎng)站背景效果圖8.3.2制作網(wǎng)頁(yè)（2）選擇素材文件“8-1.psd”，建立新的圖層。執(zhí)行“文件”→“置入嵌入的對(duì)象”命令，在打開(kāi)的對(duì)話框中選擇素材文件。調(diào)整圖像與畫(huà)布大小一致。設(shè)置圖層：不透明度為30%，填充為50%。使用同樣的方法，選擇素材文件“8-2.psd”建立新的圖層，調(diào)整圖層的位置與大小，設(shè)置不透明度為80%，填充為70%。知識(shí)準(zhǔn)備8.3.2制作網(wǎng)頁(yè)（3）執(zhí)行“文件”→“打開(kāi)”命令，打開(kāi)素材文件“8-3.psd”，使用“橢圓選框工具”制作橢圓選區(qū)，使用“移動(dòng)工具”將選區(qū)移動(dòng)到文件“圖書(shū)銷售網(wǎng)站背景”中，調(diào)整選區(qū)的大小和位置，建立新圖層；使用同樣的方法，選擇素材文件“8-4.psd”建立新圖層。設(shè)置圖層：不透明度為100%，填充為80%。效果如圖8-15所示。知識(shí)準(zhǔn)備圖8-15背景主題效果圖8.3.2制作網(wǎng)頁(yè)（1）設(shè)置網(wǎng)頁(yè)標(biāo)題：選擇“橫排文字工具”，在網(wǎng)頁(yè)頂端輸入文字“寶貝書(shū)房”。設(shè)置文字：華文琥珀、60點(diǎn)、抗鋸齒為無(wú)、黑色。設(shè)置變形文字：扇形、彎曲49%、水平扭曲為13%、垂直扭曲為-59%。知識(shí)準(zhǔn)備2．網(wǎng)頁(yè)標(biāo)題8.3.2制作網(wǎng)頁(yè)（2）設(shè)置標(biāo)題色彩：?jiǎn)螕魣D層功能區(qū)右下角的“新建圖層”按鈕，建立新圖層“圖層3”。選擇“圖層3”后，選擇“畫(huà)筆工具”，設(shè)置筆尖大小為60。在屬性欄中打開(kāi)“畫(huà)筆設(shè)置”對(duì)話框，在左側(cè)的畫(huà)筆筆尖形狀區(qū)域勾選“散布”復(fù)選框，設(shè)置散布值為1000%，數(shù)量為2，如圖8-16所示。知識(shí)準(zhǔn)備2．網(wǎng)頁(yè)標(biāo)題圖8-16“散布”參數(shù)8.3.2制作網(wǎng)頁(yè)（2）設(shè)置標(biāo)題色彩：勾選“顏色動(dòng)態(tài)”復(fù)選框，并勾選“應(yīng)用每個(gè)筆尖”復(fù)選框；設(shè)置色相抖動(dòng)值為100%，飽和度抖動(dòng)值和亮度值抖動(dòng)均為10%，如圖8-17所示。選擇兩種顏色，作為前景色和背景色，顏色可以任選，但一定要新鮮艷麗。設(shè)置完成后，在“圖層3”中單擊鼠標(biāo)添加色彩，色彩添加越密集，色彩種類越多，后面的效果越明顯。知識(shí)準(zhǔn)備2．網(wǎng)頁(yè)標(biāo)題圖8-17“顏色動(dòng)態(tài)”參數(shù)8.3.2制作網(wǎng)頁(yè)（3）色彩添加完成后，在按住Alt鍵的同時(shí)，單擊圖層名稱區(qū)域中“圖層3”與“寶貝書(shū)房”兩個(gè)圖層的中間位置，得到彩色的文字效果，如圖8-18所示。知識(shí)準(zhǔn)備2．網(wǎng)頁(yè)標(biāo)題圖8-18網(wǎng)頁(yè)標(biāo)題效果圖8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（1）制作導(dǎo)航欄：選擇“矩形工具”，在網(wǎng)頁(yè)適當(dāng)位置繪制矩形，屬性設(shè)置如圖8-19所示。3．導(dǎo)航欄、分割線圖8-19“導(dǎo)航欄”屬性設(shè)置8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（2）繪制分割線：設(shè)置圖層的前景色為灰色。選擇“單列選框工具”，將導(dǎo)航欄分割為寬度相等的5份。單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“填充”命令，在彈出的對(duì)話框中設(shè)置“內(nèi)容”為“前景色”。完成顏色設(shè)置后，再一次單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行“取消選區(qū)”命令?；疑指罹€制作完成。3．導(dǎo)航欄、分割線8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（3）選擇“橫排文字工具”，在導(dǎo)航欄內(nèi)輸入文字“網(wǎng)站導(dǎo)航、聯(lián)系客服、商品分類、合作伙伴、放入書(shū)架”。設(shè)置文字：黑體、18點(diǎn)、抗鋸齒為銳利、黑色，效果如圖8-20所示。3．導(dǎo)航欄、分割線圖8-20導(dǎo)航條與分割線效果圖8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（1）繪制登錄區(qū)背景：選擇“圓角矩形工具”，在頁(yè)面的適當(dāng)位置繪制大小適中的圓角矩形。屬性設(shè)置如圖8-21所示。4．登錄區(qū)圖8-21登錄區(qū)背景屬性設(shè)置8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（2）制作有登錄區(qū)按鈕：選擇“圓角矩形工具”，在登錄區(qū)背景處繪制圖層，屬性設(shè)置如圖8-22所示。復(fù)制圖層，并選擇“橫排文字工具”，分別輸入文字“用戶名、密碼、驗(yàn)證碼、15JT”。設(shè)置文字：華文楷體、16點(diǎn)、抗鋸齒為銳利、黑色。再次選擇“圓角矩形工具”，繪制圖層，屬性設(shè)置如圖8-23所示。復(fù)制圖層完成登錄區(qū)制作，效果如圖8-24所示。4．登錄區(qū)8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備4．登錄區(qū)圖8-22登錄區(qū)按鈕屬性設(shè)置（1）圖8-23登錄區(qū)按鈕屬性設(shè)置（2）圖8-24登錄區(qū)效果圖8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（1）導(dǎo)航區(qū)：選擇“橫排文字工具”，在頁(yè)面左側(cè)區(qū)域建立圖層，輸入文字“圖書(shū)分類”。設(shè)置文字：黑體、18點(diǎn)、抗鋸齒為銳利、黑色。再次選擇“橫排文字工具”，輸入圖書(shū)類別，并在頁(yè)面右側(cè)輸入榜單名稱。設(shè)置文字：華文楷體、16點(diǎn)、抗鋸齒為銳利、黑色。5．內(nèi)容8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（2）搜索框：使用“矩形工具”在適當(dāng)位置分別繪制兩個(gè)矩形，屬性設(shè)置如圖8-25和圖8-26所示。選擇“橫排文字工具”輸入文字“搜索”，設(shè)置文字：黑體、22點(diǎn)、抗鋸齒為銳利、灰色。（3）在頁(yè)面適當(dāng)位置使用“橢圓工具”繪制兩個(gè)橢圓形狀，屬性如圖8-27所示。分別輸入文字“購(gòu)物車(chē)0”和“我的訂單”。設(shè)置文字：黑體、18點(diǎn)、抗鋸齒為銳利、黑色。5．內(nèi)容8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備5．內(nèi)容圖8-25搜索框?qū)傩栽O(shè)置（1）圖8-26搜索框?qū)傩栽O(shè)置（2）圖8-27橢圓形狀屬性設(shè)置8.3.2制作網(wǎng)頁(yè)知識(shí)準(zhǔn)備（4）執(zhí)行“文件”→“置入嵌入對(duì)象”命令，在頁(yè)面中央位置插入素材文件“8-5.psd