《商品信息采編》（文求實(shí)）719-8 教案 第18課 設(shè)計(jì)數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)

PAGE10PAGE10PAGE11PAGE11

課題設(shè)計(jì)數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）了解數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)的模塊安排（2）能夠完成數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)的設(shè)計(jì)工作素質(zhì)目標(biāo)：感受中國(guó)傳統(tǒng)手工藝的魅力，為留住手藝、傳承匠心貢獻(xiàn)一分力量教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)的設(shè)計(jì)教學(xué)難點(diǎn)：數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)的設(shè)計(jì)教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→任務(wù)實(shí)施（28min）→課堂討論（10min）第2節(jié)課：→任務(wù)實(shí)施（27min）→課堂討論（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，使學(xué)生預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)，增加學(xué)生的學(xué)習(xí)興趣考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：數(shù)碼電器類(lèi)商品詳情頁(yè)中應(yīng)安排些什么內(nèi)容？【學(xué)生】聆聽(tīng)、思考、舉手回答【教師】總結(jié)學(xué)生的回答數(shù)碼電器類(lèi)商品詳情頁(yè)中除了要安排宣傳或促銷(xiāo)、賣(mài)點(diǎn)等模塊外，一些大件商品還會(huì)安排售后服務(wù)模塊，讓消費(fèi)者買(mǎi)得放心、安心。【知識(shí)鏈接】一些網(wǎng)店還會(huì)在商品詳情頁(yè)安排一個(gè)用于展示營(yíng)業(yè)許可的模塊來(lái)提升消費(fèi)者對(duì)品牌的信任度。通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣任務(wù)實(shí)施（28min）【教師】講解設(shè)計(jì)移動(dòng)硬盤(pán)詳情頁(yè)的具體步驟，并要求學(xué)生以小組為單位完成相關(guān)任務(wù)?【教師】組織學(xué)生掃碼觀看“設(shè)計(jì)移動(dòng)硬盤(pán)詳情頁(yè)”視頻（詳見(jiàn)教材），讓學(xué)生對(duì)設(shè)計(jì)過(guò)程有一個(gè)大致地了解設(shè)計(jì)思路（1）模塊安排：頁(yè)頭安排宣傳內(nèi)容，以吸引消費(fèi)者注意；接下來(lái)的三個(gè)模塊均安排移動(dòng)硬盤(pán)的賣(mài)點(diǎn)，讓消費(fèi)者深入了解移動(dòng)硬盤(pán)及其特點(diǎn)；最后兩個(gè)模塊分別安排移動(dòng)硬盤(pán)詳細(xì)信息和套餐內(nèi)容，讓消費(fèi)者全面了解移動(dòng)硬盤(pán)。（2）配色分析：移動(dòng)硬盤(pán)圖片多為灰色調(diào)，采用白色背景和黑色、灰色文案，能打造具有高級(jí)感的畫(huà)面效果，而一些圖標(biāo)、線條使用品牌標(biāo)志顏色（紅色），既可以引導(dǎo)消費(fèi)者識(shí)別品牌，又可以豐富畫(huà)面效果，為畫(huà)面增添活力。?【教師】提出以下問(wèn)題，隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答移動(dòng)硬盤(pán)詳情頁(yè)的布局方式應(yīng)該使用哪一種布局？為什么？?【學(xué)生】聆聽(tīng)、思考、回答?【教師】總結(jié)學(xué)生的回答，并通過(guò)多媒體展示“移動(dòng)硬盤(pán)詳情頁(yè)效果”圖片（詳見(jiàn)教材）（3）布局方式：采用層疊布局方式，可以增加畫(huà)面的層次感?！窘處煛孔寣W(xué)生分組討論設(shè)計(jì)思路【學(xué)生】組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)、總結(jié)各組的發(fā)言2.設(shè)計(jì)步驟1）制作宣傳模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1新建一個(gè)名為“移動(dòng)硬盤(pán)詳情頁(yè)”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書(shū)配套素材“IMG_9759.jpg”文件，并調(diào)整其大小和位置，然后打開(kāi)項(xiàng)目5中制作的“移動(dòng)硬盤(pán)主圖.psd”文件，選中標(biāo)志所在圖層，將其復(fù)制到“移動(dòng)硬盤(pán)詳情頁(yè)”文檔中，最后在標(biāo)志下方添加文本和矩形裝飾。需要注意的是，移動(dòng)硬盤(pán)圖片有些發(fā)灰，需用CameraRaw濾鏡調(diào)整其對(duì)比度（在“基本”設(shè)置項(xiàng)下的“對(duì)比度”編輯框中輸入“40”）。步驟3用“橢圓工具”繪制一個(gè)寬度為60像素、高度為60像素的正圓，然后設(shè)置其填充為無(wú)，描邊色為紅色，描邊寬度為1像素，最后在其內(nèi)部和下方添加文本。步驟4復(fù)制步驟2中制作的圖標(biāo)并修改內(nèi)容，然后用“直線工具”在圖標(biāo)之間添加豎線?！拘√崾尽啃枰⒁獾氖?，Photoshop提供智能參考線，在移動(dòng)對(duì)象時(shí)會(huì)自動(dòng)顯示，因此，移動(dòng)復(fù)制的圖標(biāo)時(shí)要充分利用智能參考線，讓圖標(biāo)之間間距相等?！緦W(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作宣傳模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑2）制作賣(mài)點(diǎn)模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1創(chuàng)建第一個(gè)賣(mài)點(diǎn)模塊標(biāo)題（后續(xù)大部分文本所用的字體樣式、大小與此相同，以下不再贅述），然后在標(biāo)題下方添加正文并放置本書(shū)配套素材“IMG_9766.jpg”文件。步驟2創(chuàng)建第二個(gè)賣(mài)點(diǎn)模塊標(biāo)題并添加矩形裝飾，然后在標(biāo)題下方添加正文，右側(cè)放置本書(shū)配套素材“IMG_9538.jpg”“IMG_9553.jpg”文件，并為移動(dòng)硬盤(pán)標(biāo)注尺寸，接著繪制一個(gè)寬度為682像素、高度為452像素的矩形，并設(shè)置其填充為無(wú)，描邊色為淺灰色（#c9caca），描邊寬度為2像素，最后在矩形偏左上方放置本書(shū)配套素材“IMG_9772.jpg”文件。步驟3采用步驟1的方法制作賣(mài)點(diǎn)模塊3。【學(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作賣(mài)點(diǎn)模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑3）制作商品信息和套餐模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1繪制矩形裝飾，并在其中添加本書(shū)配套素材“IMG_9545.jpg”文件和文本。步驟2用“直線工具”在文本“容量”和“尺寸”之間繪制直線，然后在工具屬性欄設(shè)置描邊色為淺灰色（#c9caca），描邊寬度為2像素，在“設(shè)置形狀描邊類(lèi)型”下拉面板中選擇虛線類(lèi)型。步驟3復(fù)制步驟2中繪制的虛線裝飾并移至其他文本之間?！拘√崾尽咳绻摼€效果不理想，可單擊“設(shè)置形狀描邊類(lèi)型”下拉面板中的“更多選項(xiàng)”按鈕，在打開(kāi)的“描邊”對(duì)話框中設(shè)置虛線的間隙。步驟4首先創(chuàng)建套餐模塊標(biāo)題，然后置入本書(shū)配套素材“IMG_9776.jpg”文件，接著用“直線工具”和“橢圓選框工具”繪制指示器，最后添加標(biāo)注文本。至此，移動(dòng)硬盤(pán)詳情頁(yè)制作完成?！緦W(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作商品信息和套餐模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑【學(xué)生】制作完成后，由小組代表展示本組設(shè)計(jì)的商品詳情頁(yè)圖片【教師】與學(xué)生一起評(píng)選出最佳的商品詳情頁(yè)通過(guò)設(shè)計(jì)移動(dòng)硬盤(pán)詳情頁(yè)任務(wù)，幫助學(xué)生熟悉設(shè)計(jì)數(shù)碼電器類(lèi)商品詳情頁(yè)的流程和方法課堂討論（10min）【教師】組織學(xué)生分組討論音響詳情頁(yè)的設(shè)計(jì)思路參照以下提示梳理音響詳情頁(yè)的設(shè)計(jì)思路。（1）確定模塊安排：確定音響詳情頁(yè)中安排哪些模塊，并根據(jù)模塊安排確定具體內(nèi)容，包括圖片和文案。需要注意的是，在賣(mài)點(diǎn)模塊中可放置使用場(chǎng)景圖及相關(guān)文案，以表現(xiàn)其可隨處安放的特點(diǎn)。（2）確定配色方案：此款音響詳情頁(yè)的配色方案可參考移動(dòng)硬盤(pán)詳情頁(yè)的配色方案。（3）確定布局方式：根據(jù)模塊及模塊中的元素安排選擇合適的布局方式。組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)各組的發(fā)言通過(guò)小組討論，幫助學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)第二節(jié)課問(wèn)題導(dǎo)入（3min）【教師】提出以下問(wèn)題：珠寶首飾類(lèi)商品詳情頁(yè)中應(yīng)設(shè)計(jì)哪些模塊？【學(xué)生】聆聽(tīng)、思考、舉手回答【教師】總結(jié)學(xué)生的回答珠寶首飾類(lèi)商品詳情頁(yè)中除了要安排宣傳或促銷(xiāo)、搭配、賣(mài)點(diǎn)等模塊外，通常還會(huì)安排工藝和包裝等模塊，以展示商品的附加值。通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣任務(wù)實(shí)施（27min）【教師】講解設(shè)計(jì)項(xiàng)鏈詳情頁(yè)的具體步驟，并要求學(xué)生以小組為單位完成相關(guān)任務(wù)?【教師】組織學(xué)生掃碼觀看“設(shè)計(jì)項(xiàng)鏈詳情頁(yè)”視頻（詳見(jiàn)教材），讓學(xué)生對(duì)設(shè)計(jì)過(guò)程有一個(gè)大致地了解1.設(shè)計(jì)思路（1）模塊安排：頁(yè)頭安排宣傳內(nèi)容，吸引消費(fèi)者注意；接下來(lái)安排賣(mài)點(diǎn)模塊，讓消費(fèi)者了解項(xiàng)鏈的特點(diǎn)；最后兩個(gè)模塊分別展示項(xiàng)鏈佩戴效果和項(xiàng)鏈詳細(xì)信息，讓消費(fèi)者全面、深入地了解項(xiàng)鏈。（2）配色分析：用白色作為背景顏色，用黑色和不同深淺的灰色作為文案顏色，能使整個(gè)頁(yè)面呈現(xiàn)出干凈、大氣，又極具層次感的效果。此外，一些地方用藍(lán)色線條和色塊作裝飾，能豐富頁(yè)面色彩，避免畫(huà)面顯得單調(diào)。?【教師】提出以下問(wèn)題，隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答哪一種布局方式更適合項(xiàng)鏈詳情頁(yè)？?【學(xué)生】聆聽(tīng)、思考、回答?【教師】總結(jié)學(xué)生的回答，并通過(guò)多媒體展示“項(xiàng)鏈詳情頁(yè)效果”圖片（詳見(jiàn)教材）（3）布局方式：采用層疊和錯(cuò)位布局方式，可以增強(qiáng)畫(huà)面的層次感和動(dòng)感?！窘處煛孔寣W(xué)生分組討論設(shè)計(jì)思路【學(xué)生】組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)、總結(jié)各組的發(fā)言2.設(shè)計(jì)步驟1）制作宣傳模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1新建一個(gè)名為“項(xiàng)鏈詳情頁(yè)”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書(shū)配套素材“IMG_9622.jpg”文件，然后將其轉(zhuǎn)換為普通圖層，接著用“矩形選框工具”框選圖片底部多余背景，并按“Delete”鍵刪除?？蜻x圖片頂部背景，并用變換工具調(diào)整所選區(qū)域的高度，最后按“Ctrl+D”組合鍵取消選區(qū)。步驟3在圖片上添加文本。其中，“YOURETHEONLYONE”文本需添加下劃線（單擊“字符”面板底部的“下劃線”按鈕添加）?！緦W(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作宣傳模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑2）制作賣(mài)點(diǎn)模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1先創(chuàng)建賣(mài)點(diǎn)模塊標(biāo)題，然后新建一個(gè)圖層，用“矩形選框工具”繪制一個(gè)寬度為664像素、高度為3像素的矩形選區(qū)，并為其填充淺灰色（#f5f5f5），最后按“Ctrl+D”組合鍵取消選區(qū)。步驟2首先新建一個(gè)圖層，然后繪制一個(gè)寬度為345像素、高度為300像素的矩形選區(qū)，并為其填充淺藍(lán)色（#eef4fe），接著按“Ctrl+D”組合鍵取消選區(qū)，最后拷貝矩形并移至合適的位置，為其填充白色、添加描邊圖層樣式。步驟3置入本書(shū)配套素材“IMG_9581.jpg”文件（保證其在復(fù)制矩形圖層的上方），按住“Alt”鍵的同時(shí)將光標(biāo)移至該圖層與復(fù)制矩形圖層之間，當(dāng)光標(biāo)呈狀時(shí)單擊創(chuàng)建剪貼蒙版。步驟4在圖片右側(cè)添加文本和線條裝飾，然后在文本左側(cè)添加一個(gè)寬度為5像素、高度為85像素的淺藍(lán)色（#eef4fe）矩形裝飾。?【教師】提出以下問(wèn)題，隨機(jī)邀請(qǐng)學(xué)生進(jìn)行回答在PS軟件中，復(fù)制圖層有哪些方法？?【學(xué)生】聆聽(tīng)、思考、回答?【教師】總結(jié)學(xué)生的回答步驟5復(fù)制兩份步驟2至步驟4創(chuàng)建的圖層，并調(diào)整位置、修改內(nèi)容?！緦W(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作賣(mài)點(diǎn)模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑3）制作商品展示和商品信息模塊【教師】演示并講解設(shè)計(jì)步驟及具體操作步驟1復(fù)制賣(mài)點(diǎn)模塊標(biāo)題并修改內(nèi)容。步驟2置入本書(shū)配套素材“IMG_7121.jpg”“IMG_7122.jpg”“IMG_7124.jpg”文件并放在合適的位置，然后用CameraRaw濾鏡調(diào)整圖片的影調(diào)和細(xì)節(jié)，使其與整體頁(yè)面效果協(xié)調(diào)統(tǒng)一。步驟3在圖片下方添加文本并設(shè)置其字體樣式為“方正北魏楷書(shū)簡(jiǎn)體”，字體大小為“18點(diǎn)”，行距為“36點(diǎn)”。步驟4復(fù)制商品展示模塊標(biāo)題并修改內(nèi)容。步驟5新建一個(gè)圖層，然后繪制一個(gè)寬度為66像素、高度為20像素的矩形選區(qū)，并為其填充藍(lán)色（#69a3d8），最后在相應(yīng)的位置添加文本。步驟6復(fù)制九份步驟5中創(chuàng)建的圖層并修改內(nèi)容。至此，項(xiàng)鏈詳情頁(yè)制作完成?！緦W(xué)生】聆聽(tīng)、觀看、理解、記憶【教師】讓學(xué)生分組進(jìn)行制作【學(xué)生】組內(nèi)分工，根據(jù)本組的設(shè)計(jì)思路完成制作商品展示和信息模塊任務(wù)【教師】巡堂輔導(dǎo)、答疑解惑【學(xué)生】制作完成后，由小組代表展示本組設(shè)計(jì)的商品詳情頁(yè)圖片【教師】與學(xué)生一起評(píng)選出最佳的商品詳情頁(yè)通過(guò)設(shè)計(jì)項(xiàng)鏈詳情頁(yè)任務(wù)，幫助學(xué)生熟悉設(shè)計(jì)珠寶首飾類(lèi)商品詳情頁(yè)的流程和方法課堂討論（10min）【教師】組織學(xué)生分組討論手表詳情頁(yè)的設(shè)計(jì)思路參照以下提示梳理手表詳情頁(yè)的設(shè)計(jì)思路。（1）確定模塊安排：確定手表詳情頁(yè)中安排哪些模塊，并根據(jù)模塊安排確定具體內(nèi)容，包括圖片和文案。（2）確定配色方案：該款手表的目標(biāo)消費(fèi)者為女性，因此配色可以亮色調(diào)、暖色調(diào)為主，使整個(gè)頁(yè)面充滿女性氣息。（3）確定布局方式：根據(jù)模塊及模塊中的元素安排選擇合適的布局方式。組內(nèi)討論、確定思路、由小組代表發(fā)表討論結(jié)果【教師】點(diǎn)評(píng)各組的發(fā)言通過(guò)小組討論，幫助學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)課堂小結(jié)（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課學(xué)習(xí)了設(shè)計(jì)數(shù)碼電器類(lèi)和珠寶首飾類(lèi)商品詳情頁(yè)的相關(guān)知識(shí)，同時(shí)通過(guò)具體的設(shè)計(jì)任務(wù)，幫助大家熟悉了這兩類(lèi)商品詳情頁(yè)的設(shè)計(jì)方法，希望大家在課下多加復(fù)習(xí)，鞏固