頁面創(chuàng)意設(shè)計課程教學(xué)教案

《H5頁面創(chuàng)意設(shè)計》下載原文可修改字體底色教學(xué)教案課時內(nèi)容認(rèn)識H5授課時間135分鐘課時3教學(xué)目標(biāo)掌握與H5相關(guān)的概念了解如何學(xué)好H5設(shè)計了解H5設(shè)計的相關(guān)流程教學(xué)重點H5的概念、類型、風(fēng)格H5頁面設(shè)計的原則H5設(shè)計人員應(yīng)具備的素質(zhì)H5的設(shè)計與制作流程教學(xué)難點H5的類型、風(fēng)格，H5的優(yōu)勢與不足，H5頁面設(shè)計的原則，H5設(shè)計作品應(yīng)具備的特點，H5的設(shè)計與制作流程教學(xué)設(shè)計教學(xué)思路：（1）通過對H5的概念、類型、風(fēng)格，優(yōu)勢與不足，以及設(shè)計原則的介紹，讓學(xué)生對H5與H5頁面設(shè)計有個基本認(rèn)識；（2）通過對優(yōu)秀H5頁面設(shè)計作品的特點，以及H5設(shè)計人員應(yīng)具備的能力進(jìn)行講解，告訴學(xué)生學(xué)好H5需具備的條件；（3）對H5的設(shè)計與制作流程進(jìn)行介紹，包括明確設(shè)計目標(biāo)、內(nèi)容策劃、；頁面設(shè)計、交互設(shè)計和H5的生成與發(fā)布；（4）通過項目實訓(xùn)練習(xí)本章知識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）通過理論加案例的方式講解，幫助學(xué)生快速理解知識點；（2）通過課堂討論提出問題，活躍課堂氣氛并激發(fā)學(xué)員的學(xué)習(xí)興趣。教學(xué)資料及要求：除教材中講解的知識，可以通過其他渠道了解更多H5相關(guān)知識，加以學(xué)習(xí)。教學(xué)內(nèi)容討論問題：1、H5是什么？2、學(xué)好H5設(shè)計需具備哪些能力？3、H5的設(shè)計與制作流程是怎樣的？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。1.1H5的基礎(chǔ)知識1.1.1H5是什么1.1.2H5的類型1.1.3H5的風(fēng)格1.1.4H5的優(yōu)勢與不足1.1.5H5頁面設(shè)計的五大原則1.2如何學(xué)好H5設(shè)計1.2.1優(yōu)秀的H5設(shè)計作品應(yīng)具備的特點1.2.2H5設(shè)計人員應(yīng)具備的能力1.3H5的設(shè)計與制作流程1.3.1明確設(shè)計目標(biāo)1.3.2內(nèi)容策劃1.3.3頁面設(shè)計1.3.4交互設(shè)計1.3.5H5的生成和發(fā)布1.4項目實訓(xùn)項目一旅游推廣H5頁面素材的搜集與制作項目二邀請函H5頁面素材的搜集與制作實戰(zhàn)演練小結(jié)了解H5的基礎(chǔ)知識。掌握如何學(xué)好H5設(shè)計。掌握H5的設(shè)計與制作流程實戰(zhàn)演練先利用Photoshop對端午節(jié)圖片素材（配套資源:\素材\第1章\端午節(jié)素材.psd）進(jìn)行處理，制作端午節(jié)H5頁面（配套資源:\效果\第1章\端午節(jié)H5頁面.psd），然后在MAKA中添加動畫效果并進(jìn)行預(yù)覽。下圖所示為參考效果。

課時內(nèi)容認(rèn)識H5的設(shè)計規(guī)范和工具授課時間180分鐘課時4教學(xué)目標(biāo)了解H5的設(shè)計規(guī)范掌握H5的圖像、動效等元素設(shè)計工具掌握H5的設(shè)計生成制作工具掌握H5的創(chuàng)意開發(fā)工具了解H5的輔助設(shè)計工具教學(xué)重點H5的常用設(shè)計尺寸H5頁面的安全區(qū)Photoshop、Illustrator、AfterEffects、Audition等元素設(shè)計工具M(jìn)AKA、—易企秀、兔展、人人秀、初頁等H5制作工具意派Epub360、iH5等H5創(chuàng)意開發(fā)工具格式工廠、PSPlay、TinyPNG、草料二維碼等H5輔助設(shè)計工具教學(xué)難點H5的設(shè)計規(guī)范H5的元素設(shè)計工具H5的設(shè)計生成制作工具H5的創(chuàng)意開發(fā)工具H5的輔助設(shè)計工具教學(xué)設(shè)計教學(xué)思路：（1）通過對瀏覽器的選擇、H5的常用設(shè)計尺寸、H5頁面的安全區(qū)等知識進(jìn)行講解，讓學(xué)生掌握H5的設(shè)計規(guī)范；（2）通過對Photoshop、Illustrator、AfterEffects、Audition進(jìn)行介紹，讓學(xué)生熟悉H5的元素設(shè)計工具；（3）通過對MAKA、—易企秀、兔展、人人秀、初頁等進(jìn)行介紹，讓學(xué)生熟悉H5的生成制作工具；（4）通過對意派Epub360、iH5等進(jìn)行介紹，讓學(xué)生熟悉H5的創(chuàng)意開發(fā)工具；（5）通過對格式工廠、PSPlay、TinyPNG、草料二維碼等進(jìn)行介紹，讓學(xué)生熟悉H5的輔助設(shè)計工具；（6）通過項目實訓(xùn)練習(xí)本章知識；（7）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）通過理論加案例的方式講解，幫助學(xué)生快速理解知識點；（2）通過課堂討論提出問題，活躍課堂氣氛并激發(fā)學(xué)員的學(xué)習(xí)興趣；（3）對于重點內(nèi)容進(jìn)行著重講解。教學(xué)資料及要求：除教材中講解的這些工具軟件，還可以了解其他工具的使用方法。教學(xué)內(nèi)容知識回顧：在前面介紹了H5的基礎(chǔ)知識，以及H5設(shè)計與制作的流程等內(nèi)容。討論問題：1、H5有哪些設(shè)計規(guī)范？2、H5有哪些頁面元素的設(shè)計工具？3、H5的頁面生成工具有哪些？4、H5有哪些創(chuàng)意開發(fā)工具？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。2.1H5的設(shè)計規(guī)范2.1.1瀏覽器的選擇2.1.2H5的常用設(shè)計尺寸2.1.3H5頁面的安全區(qū)2.2H5的元素設(shè)計工具2.2.1功能強大的設(shè)計工具——Photoshop2.2.2專業(yè)的矢量圖繪制工具——Illustrator2.2.3酷炫視頻特效制作工具——AfterEffects2.2.4音效設(shè)計制作工具——Audition2.3H5的設(shè)計生成制作工具2.3.1定制推廣H5制作工具——MAKA2.3.2企業(yè)營銷H5制作工具——易企秀2.3.3快速制作H5工具——兔展2.3.4微場景H5制作工具——人人秀2.3.5照片故事H5制作工具——初頁2.4H5的創(chuàng)意開發(fā)工具2.4.1專業(yè)H5工具——意派Epub36082.4.2在線編輯H5工具——iH52.5H5的輔助設(shè)計工具2.5.1音視頻壓縮工具——格式工廠2.5.2手機預(yù)覽設(shè)計稿——PSPlay2.5.3圖片壓縮工具——TinyPNG2.5.4二維碼生成工具——草料二維碼2.6項目實訓(xùn)項目一使用MAKA制作H5活動頁面項目二使用格式工廠將JPG格式的圖片轉(zhuǎn)換為PNG格式實戰(zhàn)演練小結(jié)掌握H5的設(shè)計規(guī)范。掌握H5的元素設(shè)計、生成制作、創(chuàng)意開發(fā)和輔助設(shè)計工具課后練習(xí)（1）使用人人秀中的素材制作H5頁面，要求完成后的效果不但美觀，而且能動態(tài)顯示。完成后的參考效果如下圖所示。（2）使用格式工廠將“夜景.png”（配套資源:\素材\第2章\夜景.png）轉(zhuǎn)換為TIF格式（配套資源:\效果\第2章\夜景.tif）。（3）使用草料二維碼將“夜景.png”圖片生成二維碼形式，夜景圖片及完成后的參考效果如下圖所示（配套資源:\效果\第2章\夜景二維碼.png）。課時內(nèi)容H5頁面的設(shè)計基礎(chǔ)授課時間135分鐘課時3教學(xué)目標(biāo)掌握H5原型圖的相關(guān)知識掌握H5色彩相關(guān)知識掌握H5版面相關(guān)知識教學(xué)重點H5原型圖的概念色彩三要素色彩與情感、氛圍的關(guān)系H5頁面版面類型教學(xué)難點H5原型圖應(yīng)具備的要素色彩與情感、氛圍的關(guān)系色彩搭配方法H5頁面各類型設(shè)計要點教學(xué)設(shè)計教學(xué)思路：（1）通過講解H5原型圖是什么、H5原型圖應(yīng)具備的要素，讓學(xué)生掌握H5原型圖的基礎(chǔ)知識；（2）通過介紹色彩的三大要素、色彩決定情感、色彩決定氛圍、H5頁面的配色方法，讓學(xué)生掌握色彩的相關(guān)知識；（3）通過講解H5版面類型，以及創(chuàng)建畫面焦點、單頁面視覺層級、多頁面視覺層級、讓版面設(shè)計的原則，學(xué)生掌握版面的相關(guān)知識；（4）通過項目實訓(xùn)練習(xí)本章知識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）采用理論加案例的方法進(jìn)行講解，引導(dǎo)學(xué)生快速熟悉并掌握相關(guān)知識；（2）通過課堂討論提出問題，活躍課堂氣氛并激發(fā)學(xué)員的學(xué)習(xí)興趣；（3）對于重點內(nèi)容進(jìn)行著重講解。教學(xué)資料及要求：除教材中講解的知識，可以學(xué)習(xí)其他原型圖繪制、色彩搭配和版面排版的相關(guān)知識。教學(xué)內(nèi)容知識回顧：前面講解了H5設(shè)計規(guī)范及各種設(shè)計工具等。討論問題：1、什么叫H5原型圖？有什么用？2、怎么讓H5頁面的色彩更有吸引力？3、怎么在H5頁面中引導(dǎo)用戶的瀏覽視線內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。3.1H5原型圖3.1.1H5原型圖是什么3.1.2H5原型圖應(yīng)具備的要素3.2色彩3.2.1/認(rèn)識色彩的三大要素3.2.2色彩決定情感3.2.3色彩決定氛圍3.2.4H5頁面的配色方法3.2.5案例分析“跑步App”H5頁面的色彩分析3.3版面3.3.1認(rèn)識H5版面類型3.3.2創(chuàng)建畫面焦點3.3.3單頁面視覺層級3.3.4多頁面視覺層級3.3.5版面設(shè)計的原則3.3.6案例分析分析“2020年度店長總結(jié)”H5頁面版面布局3.4項目實訓(xùn)項目一音樂H5頁面的色彩與版面鑒賞項目二抽獎H5頁面的色彩與版面鑒賞實戰(zhàn)演練小結(jié)掌握H5原型圖的基礎(chǔ)知識。掌握色彩、版面的相關(guān)知識。實戰(zhàn)演練對下圖所示的草莓音樂節(jié)H5頁面進(jìn)行鑒賞，分析其色彩運用與版面布局的特點。課時內(nèi)容H5頁面的素材設(shè)計授課時間135分鐘課時3教學(xué)目標(biāo)掌握H5頁面的圖片設(shè)計相關(guān)知識掌握H5頁面的文字設(shè)計相關(guān)知識掌握H5頁面的音效設(shè)計相關(guān)知識教學(xué)重點圖片素材的獲取H5頁面中的文字及字體H5頁面中音效素材的獲取方法教學(xué)難點圖片的設(shè)計原則H5頁面標(biāo)題文字和正文文字的設(shè)計技巧H5頁面中音效素材的選擇注意事項教學(xué)設(shè)計教學(xué)思路：（1）首先講解H5頁面圖片素材的獲取方法、H5頁面圖片的設(shè)計原則，然后通過設(shè)計案例進(jìn)行理論與實踐的結(jié)合學(xué)習(xí)；（2）接著認(rèn)識H5頁面中的文字及字體，講解H5頁面標(biāo)題文字的設(shè)計技巧、H5頁面正文文字的設(shè)計技巧等知識，再通過招聘H5頁面文字的制作進(jìn)行綜合提升；（3）然后講解H5頁面中音效設(shè)計的重要性、H5頁面音效素材的獲取方法、H5頁面音效的選擇與添加注意事項等知識，并通過Audition音效制作鞏固學(xué)習(xí)；（4）通過項目實訓(xùn)練習(xí)本章知識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）采用理論加案例的方法進(jìn)行講解，引導(dǎo)學(xué)生快速熟悉并掌握相關(guān)知識；（2）通過課堂討論提出問題，活躍課堂氣氛并激發(fā)學(xué)員的學(xué)習(xí)興趣；（3）對于重點內(nèi)容進(jìn)行著重講解。教學(xué)資料及要求：除講解教材中的知識外，可以了解圖片設(shè)計、文字設(shè)計與音效設(shè)計的其他知識。教學(xué)內(nèi)容知識回顧：在前面講解了H5原型圖、色彩、版面等H5頁面設(shè)計的基礎(chǔ)知識。討論問題：1、哪些渠道可以獲得H5頁面的圖片素材、音效素材？2、如何進(jìn)行圖片和文字的設(shè)計？3、選擇音效時需注意哪些問題？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。4.1H5頁面的圖片設(shè)計4.1.1H5頁面圖片素材的獲取方法4.1.2H5頁面圖片的設(shè)計原則4.1.3設(shè)計案例裁剪H5頁面的背景圖片4.1.4設(shè)計案例調(diào)整H5頁面的圖片色彩4.1.5設(shè)計案例繪制H5頁面的矢量人物4.1.6設(shè)計案例優(yōu)化H5頁面的圖片效果4.2H5頁面的文字設(shè)計4.2.1認(rèn)識H5頁面中的文字及字體4.2.2H5頁面標(biāo)題文字的設(shè)計技巧4.2.3H5頁面正文文字的設(shè)計技巧4.2.4設(shè)計案例制作招聘H5頁面文字4.2.5設(shè)計案例制作招聘H5頁面長圖文字4.3H5頁面的音效設(shè)計4.3.1H5頁面中音效設(shè)計的重要性4.3.2H5頁面音效素材的獲取方法4.3.3H5頁面音效的選擇與添加注意事項4.3.4設(shè)計案例使用Audition制作音效4.4項目實訓(xùn)項目一制作節(jié)氣H5頁面項目二制作搶紅包H5頁面實戰(zhàn)演練小結(jié)掌握H5頁面的圖片設(shè)計方法掌握H5頁面的文字設(shè)計方法掌握H5頁面的音效設(shè)計方法實戰(zhàn)演練（1）本例將使用Photoshop制作中秋節(jié)H5頁面。在制作時先繪制背景，然后添加月餅、玉兔等主要素材（配套資源:\素材\第4章\中秋節(jié)H5頁面素材.psd），最后輸入文字。完成后的參考效果如圖所示（配套資源:\效果\第4章\中秋節(jié)H5頁面.psd）。（2）本例將使用Photoshop制作閱讀H5頁面。在制作時先對閱讀素材（配套資源:\素材\第4章\閱讀.jpg）進(jìn)行調(diào)色，如圖4-112所示，使其符合制作需求，然后進(jìn)行閱讀H5頁面的制作，最后添加文字。完成后的參考效果如圖所示（配套資源:\效果\第4章\閱讀H5頁面.psd）。課時內(nèi)容H5頁面的動效設(shè)計授課時間135分鐘課時3教學(xué)目標(biāo)了解H5頁面的動效設(shè)計的基礎(chǔ)知識掌握H5頁面的內(nèi)頁動效設(shè)計掌握H5頁面的轉(zhuǎn)場動效設(shè)計教學(xué)重點H5頁面動效的作用內(nèi)頁動效的選擇設(shè)計轉(zhuǎn)場動效的注意事項教學(xué)難點H5頁面動效的主要類型內(nèi)頁動效的層級設(shè)計轉(zhuǎn)場動效的注意事項教學(xué)設(shè)計教學(xué)思路：（1）通過介紹H5頁面動效的作用、H5頁面的主要動效類型，讓學(xué)生了解H5頁面動效設(shè)計的基礎(chǔ)；（2）先介紹內(nèi)頁動效的選擇、內(nèi)頁動效的層級，再通過微信紅包H5頁面的內(nèi)頁動效設(shè)計案例，讓學(xué)生學(xué)會如何設(shè)計內(nèi)頁動效；（3）先介紹設(shè)計轉(zhuǎn)場動效的注意事項，再通過微信紅包H5頁面的動效轉(zhuǎn)場設(shè)計案例，讓學(xué)生掌握轉(zhuǎn)場動效的設(shè)計方法；（4）通過項目實訓(xùn)練習(xí)本章知識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）采用理論加案例的方法進(jìn)行講解，引導(dǎo)學(xué)生快速熟悉并掌握相關(guān)知識；（2）通過課堂討論提出問題，活躍課堂氣氛并激發(fā)學(xué)員的學(xué)習(xí)興趣；（3）對于重點內(nèi)容進(jìn)行著重講解。教學(xué)資料及要求：除講解教材中的知識外，可以結(jié)合自身對H5動效的了解，制作其他的動效。教學(xué)內(nèi)容知識回顧：前面講解了H5頁面的圖片設(shè)計、文字設(shè)計和音效設(shè)計等內(nèi)容。討論問題：1、如何選擇H5頁面的內(nèi)頁動效？2、如何進(jìn)行轉(zhuǎn)場動效的設(shè)計？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。5.1H5頁面動效設(shè)計基礎(chǔ)5.1.1H5頁面動效的作用5.1.2H5頁面的主要動效類型5.2H5頁面的內(nèi)頁動效設(shè)計5.2.1內(nèi)頁動效的選擇5.2.2內(nèi)頁動效的層級5.2.3設(shè)計案例制作微信紅包H5頁面的內(nèi)頁動效5.3H5頁面的轉(zhuǎn)場動效設(shè)計5.3.1設(shè)計轉(zhuǎn)場動效的注意事項5.3.2設(shè)計案例制作微信紅包H5頁面的轉(zhuǎn)場動效5.4項目實訓(xùn)項目一制作產(chǎn)品推廣H5頁面動效項目二制作招聘H5頁面動效實戰(zhàn)演練小結(jié)熟悉H5頁面動效設(shè)計基礎(chǔ)掌握H5頁面的內(nèi)頁動效設(shè)計掌握H5頁面的轉(zhuǎn)場動效設(shè)計實戰(zhàn)演練本練習(xí)將在MAKA中打開家居H5頁面的相關(guān)素材（配套資源:\素材\第5章\家居H5頁面\），將其添加到H5頁面中，然后依次為文字和圖片添加動效，完成后分享到微信平臺。完成后的參考效果如圖所示。

課時內(nèi)容H5頁面的創(chuàng)意設(shè)計授課時間135分鐘課時3教學(xué)目標(biāo)掌握H5頁面的交互創(chuàng)意設(shè)計掌握H5頁面的動態(tài)創(chuàng)意設(shè)計教學(xué)重點使用H5+720度全景技術(shù)查看全景畫面使用H5+人臉識別技術(shù)讓內(nèi)容更有趣使用H5+手指跟隨技術(shù)讓操作更生動使用H5+快閃廣告提升瀏覽體驗使用H5+視頻提升內(nèi)容的展現(xiàn)效果使用H5+GIF動畫讓畫面更生動教學(xué)難點使用H5+物理引擎技術(shù)創(chuàng)建虛擬世界使用H5+重力感應(yīng)技術(shù)讓用戶的互動體驗更強使用H5+粒子特效提升視覺體驗使用H5+多屏互動提升營銷的娛樂性教學(xué)設(shè)計教學(xué)思路：（1）先介紹H5+720度全景技術(shù)、H5+人臉識別技術(shù)、H5+物理引擎技術(shù)、H5+重力感應(yīng)技術(shù)、5+手指跟隨技術(shù)，再通過制作凡科微傳單全景H5頁面案例進(jìn)行實踐練習(xí)，讓學(xué)生掌握H5頁面的交互創(chuàng)意設(shè)計方法；（2）先介紹H5+快閃廣告、H5+粒子特效、H5+視頻、H5+多屏互動、H5+GIF動畫等知識，再通過制作快閃廣告H5頁面，讓學(xué)生掌握H5頁面的動態(tài)創(chuàng)意設(shè)計方法；（3）通過項目實訓(xùn)練習(xí)本章知識；（4）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）理論配合案例講解基礎(chǔ)知識；（2）重點內(nèi)容需要結(jié)合案例圖片來具體講解。教學(xué)資料及要求：除講解教材中的知識外，可以結(jié)合自己的理解學(xué)習(xí)并使用更多的技術(shù)進(jìn)行H5頁面的創(chuàng)意設(shè)計。教學(xué)內(nèi)容知識回顧：在前面講解了H5頁面動效設(shè)計的基礎(chǔ)知識，以及H5內(nèi)頁動效與轉(zhuǎn)場動效等內(nèi)容。討論問題：1、如何進(jìn)行H5頁面的交互創(chuàng)意設(shè)計？2、如何進(jìn)行H5頁面的動態(tài)創(chuàng)意設(shè)計？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。6.1H5頁面的交互創(chuàng)意設(shè)計6.1.1使用H5+720度全景技術(shù)查看全景畫面6.1.2使用H5+人臉識別技術(shù)讓內(nèi)容更有趣6.1.3使用H5+物理引擎技術(shù)創(chuàng)建虛擬世界6.1.4使用H5+重力感應(yīng)技術(shù)讓用戶的互動體驗更強6.1.5使用H5+手指跟隨技術(shù)讓操作更生動6.1.6設(shè)計案例使用凡科微傳單制作全景H5頁面6.2H5頁面的動態(tài)創(chuàng)意設(shè)計6.2.1使用H5+快閃廣告提升瀏覽體驗6.2.2使用H5+粒子特效提升視覺體驗6.2.3使用H5+視頻提升內(nèi)容的展現(xiàn)效果6.2.4使用H5+多屏互動提升營銷的娛樂性6.2.5使用H5+GIF動畫讓畫面更生動6.2.6設(shè)計案例制作快閃廣告H5頁面6.3項目實訓(xùn)制作元旦GIF動畫實戰(zhàn)演練小結(jié)1、掌握H5頁面的交互創(chuàng)意設(shè)計。2、掌握H5頁面的動態(tài)創(chuàng)意設(shè)計課后練習(xí)（1）本練習(xí)將使用凡科微傳單制作房屋720°全景H5頁面（配套資源:\素材\第6章\房屋720°全景H5頁面\）。在制作時先將背景添加到720°全景的內(nèi)圖中，最后依次添加素材并設(shè)置動畫效果。完成后的參考效果如圖所示。（2）本練習(xí)將使用Photoshop制作夏日H5頁面的GIF動畫（配套資源:\效果\第6章\夏日H5頁面效果.psd），完成制作后可使文字以動畫的形式展現(xiàn)。參考效果如圖所示。

課時內(nèi)容綜合案例：活動運營H5頁面的設(shè)計與制作授課時間135分鐘課時3教學(xué)目標(biāo)掌握元宵節(jié)活動H5頁面的前期準(zhǔn)備了解元宵節(jié)活動H5頁面設(shè)計內(nèi)容了解元宵節(jié)活動H5頁面動效的制作與發(fā)布教學(xué)重點元宵節(jié)活動H5頁面設(shè)計構(gòu)思設(shè)計元宵節(jié)活動H5標(biāo)題頁設(shè)計元宵節(jié)活動H5內(nèi)容頁設(shè)計元宵節(jié)活動H5紅包頁設(shè)計元宵節(jié)活動H5介紹頁發(fā)布元宵節(jié)活動H5頁面教學(xué)難點繪制元宵節(jié)活動H5頁面原型圖搜集元宵節(jié)活動H5頁面素材設(shè)計元宵節(jié)活動H5標(biāo)題頁設(shè)計元宵節(jié)活動H5內(nèi)容頁設(shè)計元宵節(jié)活動H5紅包頁設(shè)計元宵節(jié)活動H5介紹頁為元宵節(jié)活動H5頁面添加動效教學(xué)設(shè)計教學(xué)思路：（1）通過分析元宵節(jié)活動H5頁面的，明確該H5頁面的設(shè)計構(gòu)思，然后繪制原型圖并搜集素材，做好前期準(zhǔn)備工作；（2）根據(jù)前期準(zhǔn)備的內(nèi)容，進(jìn)行元宵節(jié)活動H5頁面的標(biāo)題頁、內(nèi)容頁、紅包頁、介紹頁的設(shè)計；（3）接著為元宵節(jié)活動H5頁面添加動效和音效，最后再發(fā)布元宵節(jié)活動H5頁面；（4）通過項目實訓(xùn)練習(xí)活動運營型H5頁面的設(shè)計與制作方法識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）理論配合案例講解設(shè)計思路；（2）使用各設(shè)計軟件設(shè)計H5頁面，并添加音效和動效；（3）重難點內(nèi)容著重進(jìn)行講解。教學(xué)資料及要求：除教材中的活動運營型H5頁面外，學(xué)生還可以設(shè)計并制作其他的H5頁面，提升自己的設(shè)計與制作能力。教學(xué)內(nèi)容知識回顧：前面講解了H5頁面的交互創(chuàng)意設(shè)計與動態(tài)創(chuàng)意設(shè)計等內(nèi)容。討論問題：1、如何構(gòu)思元宵節(jié)活動H5頁面？2、如何設(shè)計元宵節(jié)活動H5頁面的內(nèi)容？3、如何為元宵節(jié)活動H5頁面添加動效？4、如何發(fā)布元宵節(jié)活動H5頁面？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。7.1制作元宵節(jié)活動H5頁面的前期準(zhǔn)備7.1.1元宵節(jié)活動H5頁面設(shè)計構(gòu)思7.1.2繪制元宵節(jié)活動H5頁面原型圖7.1.3搜集元宵節(jié)活動H5頁面素材7.2元宵節(jié)活動H5頁面的設(shè)計7.2.1設(shè)計元宵節(jié)活動標(biāo)題頁7.2.2設(shè)計元宵節(jié)活動內(nèi)容頁7.2.3設(shè)計元宵節(jié)活動紅包頁7.2.4設(shè)計元宵節(jié)活動介紹頁7.3元宵節(jié)活動H5頁面的動效制作與發(fā)布7.3.1為元宵節(jié)活動H5頁面添加動效7.3.2為元宵節(jié)活動H5頁面添加音效7.3.3/發(fā)布元宵節(jié)活動H5頁面7.4項目實訓(xùn)項目一制作會議邀請函H5頁面項目二制作會議邀請函H5頁面動效實戰(zhàn)演練小結(jié)掌握元宵節(jié)活動H5頁面的前期準(zhǔn)備掌握元宵節(jié)活動H5頁面的內(nèi)容設(shè)計掌握元宵節(jié)活動H5頁面的動效制作與發(fā)布實戰(zhàn)演練本練習(xí)將使用素材文件（配套資源:\素材\第7章\端午節(jié)活動頁面素材.psd）制作端午節(jié)活動H5頁面。使用Photoshop將H5頁面分為首頁、活動內(nèi)容和活動介紹3個部分進(jìn)行制作（配套資源:\效果\第7章\端午節(jié)活動頁面\）。制作完成后使用人人秀制作動效并進(jìn)行發(fā)布。完成后的參考效果如圖所示。

課時內(nèi)容綜合案例：產(chǎn)品推廣H5頁面的設(shè)計與制作授課時間135分鐘課時3教學(xué)目標(biāo)掌握設(shè)計制作產(chǎn)品推廣H5頁面的前期準(zhǔn)備掌握產(chǎn)品推廣H5頁面設(shè)計掌握產(chǎn)品推廣H5頁面動效的制作與發(fā)布教學(xué)重點產(chǎn)品推廣H5頁面設(shè)計構(gòu)思繪制產(chǎn)品推廣H5頁面原型圖設(shè)計產(chǎn)品推廣H5首頁設(shè)計產(chǎn)品推廣H5內(nèi)頁設(shè)計產(chǎn)品推廣H5尾頁為產(chǎn)品推廣H5頁面添加動效為產(chǎn)品推廣H5頁面添加音效教學(xué)難點產(chǎn)品推廣H5頁面設(shè)計構(gòu)思繪制產(chǎn)品推廣H5頁面原型圖設(shè)計產(chǎn)品推廣H5首頁設(shè)計產(chǎn)品推廣H5內(nèi)頁設(shè)計產(chǎn)品推廣H5尾頁為產(chǎn)品推廣H5頁面添加動效為產(chǎn)品推廣H5頁面添加音效教學(xué)設(shè)計教學(xué)思路：（1）通過分析產(chǎn)品推廣H5頁面的，明確該H5頁面的設(shè)計構(gòu)思，然后繪制原型圖并搜集素材，做好前期準(zhǔn)備工作；（2）根據(jù)前期準(zhǔn)備的內(nèi)容，進(jìn)行產(chǎn)品推廣H5頁面的首頁、內(nèi)頁、尾頁的設(shè)計；（3）接著為產(chǎn)品推廣H5頁面添加動效和音效，最后再發(fā)布產(chǎn)品推廣H5頁面；（4）通過項目實訓(xùn)練習(xí)產(chǎn)品推廣H5頁面的設(shè)計與制作方法識；（5）安排實戰(zhàn)演練鞏固本章所學(xué)知識，提升設(shè)計能力與動手能力。教學(xué)手段：（1）理論配合案例講解設(shè)計思路；（2）使用各設(shè)計軟件設(shè)計H5頁面，并添加音效和動效；（3）重難點內(nèi)容著重進(jìn)行講解。教學(xué)資料及要求：除教材中的產(chǎn)品推廣型H5頁面外，學(xué)生還可以設(shè)計并制作其他的H5頁面，提升自己的設(shè)計與制作能力。教學(xué)內(nèi)容知識回顧：前面講解了元宵節(jié)活動H5頁面設(shè)計與制作的前期準(zhǔn)備、元宵節(jié)活動H5頁面的標(biāo)題頁、內(nèi)容頁、介紹頁等的設(shè)計，以及音效、動態(tài)的添加和頁面的發(fā)布等內(nèi)容。討論問題：1、如何產(chǎn)品推廣H5頁面的前期構(gòu)思？2、如何進(jìn)行產(chǎn)品推廣H5頁面的設(shè)計與動效制作？內(nèi)容大綱：具體可結(jié)合本章的PPT課件進(jìn)行配合講解。8.1?H5的基礎(chǔ)知識8.1制作產(chǎn)品推廣H5頁面的前期準(zhǔn)備8.1.1產(chǎn)品推廣H5頁面設(shè)計構(gòu)思8.1.2繪制產(chǎn)品推廣H5頁面原型圖8.1.3搜集產(chǎn)品推廣H5頁面素材8.2產(chǎn)品推廣H5頁面的設(shè)計8.2.1設(shè)計產(chǎn)品推廣H5首頁8.2.2設(shè)計產(chǎn)品推廣H5內(nèi)頁8.2.3設(shè)計產(chǎn)品推廣H5尾頁8.3產(chǎn)品推廣H5頁面的動效制作與發(fā)布8.3.1為產(chǎn)品推廣H5頁面添加動效8.3.2為產(chǎn)品推廣H5頁面添加音效8.3.3發(fā)布產(chǎn)品推廣H5頁面8.4項目實訓(xùn)項目一制作紅酒推廣H5頁面項目二制作紅酒推廣H5頁面動效實戰(zhàn)演練小結(jié)掌握產(chǎn)品推廣H5頁面制作的前期準(zhǔn)備。掌握產(chǎn)品推廣H5頁面的設(shè)計。掌握產(chǎn)品推廣H5頁面的動效制作與發(fā)布課后練習(xí)（1）本練習(xí)將使用素材文件（配套資源:\素材\第8章\家裝節(jié)產(chǎn)品推廣素材.psd）制作家裝節(jié)產(chǎn)品推廣H5頁面（配套資源:\效果\第8章\家裝節(jié)產(chǎn)品推H5頁面\）。使用Photoshop將H5頁面分為首頁、產(chǎn)品介紹和活動內(nèi)容3個部分，完成后的參考效果如圖所示。（2）本練習(xí)將使用人人秀制作家裝節(jié)產(chǎn)品推廣H5頁面的動效。在設(shè)計時先添加語音來電互動，然后依次添加首頁、產(chǎn)品介紹、活動內(nèi)容等頁面，并為文字添加動效，完成后發(fā)布H5頁面內(nèi)容。完成后的參考效果如圖所示。課時內(nèi)容綜合案例：企業(yè)招聘H5頁面的設(shè)計與制作授課時間135分鐘課時3教學(xué)目標(biāo)掌握企業(yè)招聘H5頁面的前期準(zhǔn)備掌握企業(yè)招聘H5頁面的設(shè)計掌握企業(yè)