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

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

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

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

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

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