中職教育二年級下學(xué)期電子與信息《設(shè)計店鋪首頁》教學(xué)設(shè)計

1/9《設(shè)計店鋪首頁》教學(xué)設(shè)計授課課題設(shè)計店鋪首頁課程計算機平面設(shè)計學(xué)校教學(xué)對象中職學(xué)生授課課時13分19秒授課類型理實一體教學(xué)設(shè)計描述本次課程在以人為本的教學(xué)理念下，遵循在教師指導(dǎo)下的以“學(xué)生”為中心的學(xué)習(xí)模式，用講授法和案例演示達(dá)相結(jié)合，引導(dǎo)學(xué)生主動思考學(xué)習(xí)，讓學(xué)生學(xué)習(xí)新知識的時候，不是一味接受老師的知識，而是主動思考消化新的知識。激發(fā)學(xué)生的學(xué)習(xí)興趣和創(chuàng)造力。教學(xué)對象分析前面的課程，學(xué)生對電商網(wǎng)頁設(shè)計基礎(chǔ)理論知識有了一定的了解，但對一些深層次的電商網(wǎng)頁設(shè)計知識的認(rèn)知還比較匱乏和片面，通過講授店鋪首頁的設(shè)計，讓學(xué)生在學(xué)習(xí)過程中，明白店鋪首頁的設(shè)計要領(lǐng)，讓他們形成較好的問題分析和探究能力，并提升他們的設(shè)計創(chuàng)作能力。教學(xué)目標(biāo)知識目標(biāo)1、了解店鋪首頁的基本結(jié)構(gòu)和常見板式。2、掌握設(shè)計好店鋪首頁的基本要領(lǐng)。能力目標(biāo)學(xué)生可以充分發(fā)揮自身的創(chuàng)造力與想像力，培養(yǎng)學(xué)生綜合運用知識的能力。情感目標(biāo)促進(jìn)學(xué)生獲取信息的能力、設(shè)計能力、審美能力的提高，鼓勵學(xué)生溶入自己的個性制作出新穎、吸引人的作品。思政目標(biāo)通過真實案例的設(shè)計，培養(yǎng)學(xué)生領(lǐng)悟力及執(zhí)行力，培養(yǎng)精益求精的工匠精神。教學(xué)重點理解店鋪首頁的基本結(jié)構(gòu)和常見板式。教學(xué)難點熟練掌握店鋪首頁設(shè)計的綜合方法和技巧教學(xué)方法案例教學(xué)、ppt講授法學(xué)習(xí)方法自主學(xué)習(xí)、練習(xí)法教具多媒體平臺、網(wǎng)絡(luò)教室教學(xué)結(jié)構(gòu)教師：導(dǎo)入講授考察學(xué)習(xí)情況交流評價討論交流評價討論學(xué)生：思考聽講、總結(jié)反饋教材的設(shè)計思路及分析《店鋪首頁》這次課程，是為了拓寬學(xué)生電商網(wǎng)頁設(shè)計這方面的理論知識，培養(yǎng)學(xué)生設(shè)計店鋪首頁的綜合能力。本節(jié)課以一組優(yōu)秀的店鋪首頁為案例來吸引學(xué)生的注意力，并設(shè)置提問環(huán)節(jié)，引發(fā)學(xué)生對店鋪首頁的思考，導(dǎo)入本次的課程主題。再用PPT講授店鋪首頁的基本結(jié)構(gòu)和常見版式，講解設(shè)計店鋪首頁的基本要領(lǐng)，后再以一個案例演示制作一個店鋪首頁的全過程，幫助學(xué)生透徹的學(xué)習(xí)店鋪首頁的相關(guān)知識。進(jìn)而全面提升學(xué)生的店鋪首頁設(shè)計的綜合能力。教學(xué)過程教學(xué)環(huán)節(jié)教師活動學(xué)生活動設(shè)計意圖情景引入教師：PPT展示幾組普通和優(yōu)秀的的店鋪首頁供大家賞析，待看完后，引導(dǎo)學(xué)生做思考，總結(jié)歸納優(yōu)秀店鋪的基本要點，2分鐘后學(xué)生舉手發(fā)言回答。觀賞優(yōu)秀店鋪首頁，思考并總結(jié)優(yōu)秀店鋪首頁的特點讓學(xué)生對店鋪首頁有初步的認(rèn)識，并被其創(chuàng)作、設(shè)計出來的精美效果所吸引。從而引發(fā)學(xué)生的學(xué)習(xí)興趣。結(jié)構(gòu)分析教師講授ppt,店鋪首頁的結(jié)構(gòu)分析：1）店招，店招是店鋪的總導(dǎo)航，一切商品、一切分類都可以在這里快速便捷的找到，包括基本的logo,廣告語、關(guān)注、導(dǎo)航；可選的優(yōu)惠券、主圖款、售后保障、收藏本店。2）全屏海報，全屏海報統(tǒng)一的寬度尺寸是1920px，非全屏的是950px,高度可以根據(jù)設(shè)計效果自己設(shè)定，海報的分類一般分為活動海報和單品海報，活動海報是直接鏈接到另外一個活動頁面的地址；單品海報是直接鏈接到我們店鋪內(nèi)的單個寶貝詳情。3）寶貝分類區(qū)域，可以把寶貝分為新品、爆款、寶貝分類，首先新品很重要，它可以提高二次回頭率的重要來源之一.爆款的話，可以去搜集當(dāng)季的熱銷的產(chǎn)品，或者根據(jù)顧客群體清楚當(dāng)下流行的元素，從而來調(diào)整爆款商品，也可以采用模特實物結(jié)合或者半身模特的排版方式來展現(xiàn)的，可以凸顯爆款的氣質(zhì).最后的寶貝分類主要就是為了區(qū)分不同風(fēng)格的寶貝，為了讓客戶簡單快捷的銷售.4）頁尾，頁面尾部的布局一般是促成成交的一下保障，比如可以做些支付方式、配送物流的流程、售后保障做上去.讓買家有一個保障。店鋪首頁的2種板式：“T”字形板式首頁主要包括店招、導(dǎo)航、輪播海報、標(biāo)題banner、產(chǎn)品展示、尾頁幾大部分。T字型版式，就是前半部分店招、導(dǎo)航、輪播海報、標(biāo)題banner為全屏，產(chǎn)品展示板塊不全屏全屏版式首頁主要包括店招、導(dǎo)航、輪播海報、標(biāo)題banner、產(chǎn)品展示、尾頁幾大部分。所有板塊全屏展示。學(xué)生認(rèn)真聽講，做好筆記?？紤]到學(xué)生這方面的知識比較匱乏，由老師整理歸納講授，引導(dǎo)學(xué)生學(xué)習(xí)這方面的知識，全面提升學(xué)生這方面的認(rèn)知?；疽I(lǐng)設(shè)計店鋪首頁有什么要求呢？１、統(tǒng)一店鋪風(fēng)格電商行業(yè)發(fā)張迅速，競爭混亂激烈，在設(shè)計首頁時，要了解產(chǎn)品市場上的消費人群，自身要有個清晰的市場定位。根據(jù)人群消費特點和產(chǎn)品內(nèi)容確立店鋪的色調(diào)，從而建立店鋪的品牌風(fēng)格。２、首屏海報首屏海報是一個店鋪視覺核心，體現(xiàn)著店鋪整體的色調(diào)?，F(xiàn)如今店鋪都是推出大屏海報，能夠鋪滿全屏，視覺效果沖擊也更強烈。真正讓人有眼前一亮的感覺也是通過其首屏海報體現(xiàn)的，可以在海報上放上最重要的信息，展開店鋪活動，盡充分吸引消費者的視線。第二屏，三屏的海報也要和首屏色調(diào)統(tǒng)一，體現(xiàn)店鋪品牌風(fēng)格。３、分類導(dǎo)航導(dǎo)航的裝飾不能太雜亂，要簡潔清爽，明確分類好模塊，做到有效分流。在字體類型和顏色方面也要和店鋪風(fēng)格統(tǒng)一。4、主推產(chǎn)品最首頁黃金區(qū)域充分展現(xiàn)產(chǎn)品，結(jié)合產(chǎn)品特點深層打造賣點，激發(fā)消費者對產(chǎn)品的興趣和購買欲，打造出店鋪爆款。學(xué)生在老師的指引下作出分析，并形成自己的工作思路考慮到學(xué)生在這方面的經(jīng)驗比較欠缺，教師給予適當(dāng)?shù)闹敢?，充分體現(xiàn)新課改課堂中“教師為輔，學(xué)生為主”的理念。案例演示教師進(jìn)行案例演示：1、首屏部分新建畫布進(jìn)行區(qū)域劃分，店招部分是950*150，建立一個矩形為950*150，ctrl+a,全選居中，ctrl+b取消，再拉取參考線，將矩形改為950*120，留出30px,導(dǎo)航的部分。再拉一條參考線。再把矩形刪除。新建一個1920*150的矩形，給店招鋪一個背景，選取淺灰色，“alt+delete”填充，給logo加一個矩形底色，再把logo放上面。文字工具，打出導(dǎo)航文字“店鋪首頁/純銀項鏈/手鏈?zhǔn)骤C/波西耳飾”空格再一個豎線，調(diào)整合適的文字大小和距離。自定義形狀工具畫出一個心，吸一下logo的顏色，“alt+delete”填充。文字工具打上“收藏我們”。字體顏色調(diào)淺一點，放在右上角。（）海報尺寸1920*600，放進(jìn)來。這里我們放的是一個單品海報，是店鋪的主推款。2、寶貝分類部分畫一個矩形1920*260，顏色比店招的底色深一點點的灰色打上“您在尋找什么？、PRODUCTS，這里的文字與上方的保持一致。ctrl+a,全選居中。下方畫又1條直線，用直線工具，按住shift,調(diào)整下不透明度，淡一點就可以了。1）制作一組寶貝的圖標(biāo)我們先來畫一個戒指，用圓形工具，按住shift,畫一個正圓，再選擇小黑工具，按住alt鍵就復(fù)制出來了一個，這時是在同一個圖層，用路徑工具減去頂層，按住alt+shift,調(diào)整圓圈的大小，畫出指環(huán)的形狀，同樣的方法，我們建立一個矩形框，ctrl+t,自由變換，旋轉(zhuǎn)壓扁一點，減去頂層，缺口就做好了，現(xiàn)在要在上方畫一個寶石，另起一個圖層，用多邊形工具畫一個五邊形，自由變換旋轉(zhuǎn)方向。壓扁一點，尖角朝下，更接近鉆戒的形狀。同樣的用小黑工具，復(fù)制減去頂層，再畫一個矩形加選。小黑工具選中下面的圖形，用小白工具調(diào)節(jié)杠桿，適當(dāng)修一下形狀。圖層很多，合并形狀組件，ctrl+e合并形狀。重新命名戒指。耳墜，自定義形狀畫一個五角星，上方畫一個圓角矩形，頭部加個小圓，ctrl+j復(fù)制一個，縮小一點，再復(fù)制一個，用小黑工具，對其進(jìn)行分割，同樣的小面兩個小點，再ctrl+e合并所有圖層。重新命名耳墜。排版，打上“戒指”、“Ring”，調(diào)整戒指的字體大小，和字間距，英文用淺一點的顏色。將圖片文字的圖層選中，ctrl+g,合并到同一組。復(fù)制五個大致分布開。再按照戒指圖標(biāo)的大小作為規(guī)范，調(diào)整其他幾組圖標(biāo)的大小。將其中一個圖標(biāo)改成預(yù)選中狀態(tài)，我們選耳墜，給圖標(biāo)加一個方塊的底色，圖標(biāo)和字體的顏色改成白色，下方還有一塊綠色的矩形，我們將這部分一起打個組。2）下面的區(qū)域是一組文字細(xì)節(jié)化的分類文字我們可以復(fù)制上方的文字，一共六大類，畫一個矩形框，我們間隔分布，每個部分再左對齊。復(fù)制五個。編輯成一個組。下方是店鋪爆款?？梢?/p>