項(xiàng)目五H5開(kāi)發(fā)工具電子課件 中職 新媒體運(yùn)營(yíng)

項(xiàng)目五H5開(kāi)發(fā)工具電子課件中職高教版新媒體運(yùn)營(yíng)項(xiàng)目五：H5開(kāi)發(fā)工具《新媒體運(yùn)營(yíng)》新媒體運(yùn)營(yíng)項(xiàng)目綜述微信朋友圈中，常?？梢钥吹脚笥逊窒淼腍5微海報(bào)，這些海報(bào)制作精美，伴有悅耳的背景音樂(lè)、藝術(shù)的文字、妙趣的圖片、動(dòng)感的視頻、炫酷的轉(zhuǎn)場(chǎng)，動(dòng)態(tài)地展示企業(yè)或個(gè)人的信息。在信息化、移動(dòng)化、可視化的今天，H5頁(yè)面已經(jīng)成為企業(yè)或個(gè)人，宣傳推介的重要工具。本項(xiàng)目分3個(gè)任務(wù)，分別為什么是H5、初級(jí)H5頁(yè)面制作和H5互動(dòng)頁(yè)面制作。通過(guò)3個(gè)任務(wù)循序漸進(jìn)地學(xué)習(xí)，將學(xué)會(huì)如何使用H5開(kāi)發(fā)工具，制作出符合企業(yè)需求、直觀有趣、互動(dòng)性與代入感都較強(qiáng)的H5頁(yè)面，助推企業(yè)或個(gè)人更好地宣傳推廣產(chǎn)品、服務(wù)和信息。項(xiàng)目綜述PROJECTTASKS任務(wù)1什么是H5項(xiàng)目任務(wù)活動(dòng)1介紹H5制作平臺(tái)活動(dòng)2了解H5制作工具任務(wù)2初級(jí)H5頁(yè)面制作活動(dòng)1制作H5頁(yè)面活動(dòng)2制作H5小動(dòng)畫(huà)項(xiàng)目五H5開(kāi)發(fā)工具任務(wù)3H5互動(dòng)頁(yè)面制作活動(dòng)1制作H5搖一搖活動(dòng)2制作H5邀請(qǐng)函活動(dòng)3制作H5互動(dòng)知識(shí)問(wèn)答知識(shí)目標(biāo)了解H5的概念、特點(diǎn)、分類了解H5制作平臺(tái)和工具技能目標(biāo)會(huì)制作H5初級(jí)頁(yè)面會(huì)制作H5互動(dòng)頁(yè)面增強(qiáng)自主學(xué)習(xí)和探究精神培養(yǎng)文字表達(dá)和圖片處理能力培養(yǎng)熱點(diǎn)跟蹤、營(yíng)銷意識(shí)和創(chuàng)新意識(shí)情感目標(biāo)項(xiàng)目目標(biāo)李江和張敏經(jīng)過(guò)一段時(shí)間的實(shí)習(xí)磨煉，成長(zhǎng)迅速，尤其是李江，已成為“聚星公司”網(wǎng)絡(luò)拓展部門(mén)的負(fù)責(zé)人。為進(jìn)一步提升個(gè)人的業(yè)務(wù)能力，李江主動(dòng)學(xué)習(xí)H5。情景設(shè)計(jì)任務(wù)1什么是H5填寫(xiě)課前調(diào)查問(wèn)卷，觀看H5案例了解學(xué)生對(duì)H5的認(rèn)知情況培養(yǎng)學(xué)生熱點(diǎn)跟蹤能力環(huán)節(jié)1調(diào)查問(wèn)卷二維碼自主探究H5的概念、特點(diǎn)培養(yǎng)搜索、篩選和整理網(wǎng)絡(luò)信息的能力培養(yǎng)自主學(xué)習(xí)和團(tuán)隊(duì)協(xié)作探究精神培養(yǎng)學(xué)生文字表達(dá)和圖片處理能力以小組為單位運(yùn)用網(wǎng)絡(luò)搜索回答下列問(wèn)題，以PPT的形式上交。1、什么是H5？用簡(jiǎn)潔的文字闡述。2、H5有哪些特點(diǎn)？完成下表的填寫(xiě)。環(huán)節(jié)2特點(diǎn)說(shuō)明學(xué)生展示、教師點(diǎn)評(píng)培養(yǎng)溝通表達(dá)、總結(jié)歸納能力引導(dǎo)學(xué)生主動(dòng)分享、互動(dòng)小組代表展示講解搜索歸納的內(nèi)容。12環(huán)節(jié)3教師點(diǎn)評(píng)。知識(shí)點(diǎn)講解理清H5的概念、特點(diǎn)、分類等知識(shí)點(diǎn)突出重點(diǎn)、化解難點(diǎn)H5概念。播放教學(xué)視頻，強(qiáng)調(diào)要點(diǎn)。12環(huán)節(jié)4H5特點(diǎn)。H5特點(diǎn)本地存儲(chǔ)性多媒體性跨平臺(tái)性功能多樣性（一）本地存儲(chǔ)性H5可以把一些信息存在客戶端，這使得頁(yè)面擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度和更流暢的畫(huà)面。

（二）多媒體特性支持文字、圖片、音樂(lè)、視頻，三維圖及特效，互動(dòng)性強(qiáng)。

（三）跨平臺(tái)性PC端與移動(dòng)端、Windows與Linux、安卓與IOS、微信與QQ都可以運(yùn)行，兼容性強(qiáng)。

（四）功能多樣性可以支持投票、表單收集、趣味游戲、畫(huà)板、地圖、照片墻等，可用于展示產(chǎn)品、吸納粉絲、增加用戶粘度等。

知識(shí)點(diǎn)講解理清H5的概念、特點(diǎn)、分類等知識(shí)點(diǎn)突出重點(diǎn)、化解難點(diǎn)H5的分類。3環(huán)節(jié)4分類標(biāo)準(zhǔn)分類代表案例展示形式信息型《我們之間就一個(gè)字》活動(dòng)型《蓋倫提莫》游戲型《圍住神經(jīng)貓》測(cè)試型《四六級(jí)方言考試》展示效果全景/AR/VR型《穿越宇宙的邀請(qǐng)函》《淘寶購(gòu)物節(jié)》《2016廣州車(chē)展線上VR展廳》《星際探索之旅》3D操作畫(huà)面型《杜蕾斯美術(shù)館》重力感應(yīng)型《敢在辦公室瘦嗎》雙屏互動(dòng)型《七夕鵲橋會(huì)，愛(ài)更多》H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：我們之間就一個(gè)字1環(huán)節(jié)5案例：蓋倫莫提2環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：圍住神經(jīng)貓34環(huán)節(jié)5案例：四六級(jí)方言考試H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：穿越宇宙邀請(qǐng)函56環(huán)節(jié)5案例：淘寶購(gòu)物節(jié)H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：星際探索之旅78環(huán)節(jié)5案例：2016廣州車(chē)展線上VR展廳H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：杜蕾斯美術(shù)館910環(huán)節(jié)5案例：NIKE：每雙球鞋都有一個(gè)故事H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：你敢在辦公室瘦嗎1112環(huán)節(jié)5案例：為最愛(ài)的TA倒一杯好奶H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：七夕鵲橋會(huì)，愛(ài)更多1314案例：LOVESTYLE邀你過(guò)七夕環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣案例：杜蕾斯勞動(dòng)節(jié)15環(huán)節(jié)5H5的分類案例展示加強(qiáng)學(xué)生對(duì)H5的認(rèn)識(shí)激發(fā)學(xué)生對(duì)H5的學(xué)習(xí)興趣H5制作平臺(tái)網(wǎng)站/APP特點(diǎn)

介紹H5制作平臺(tái)和工具了解H5制作平臺(tái)和工具培養(yǎng)自主探究和團(tuán)隊(duì)合作精神、溝通能力以小組為單位根據(jù)H5網(wǎng)絡(luò)制作平臺(tái)或者APP，填寫(xiě)下表。12木疙瘩歡慶網(wǎng)易企秀兔展人人秀秀米……環(huán)節(jié)6教師介紹H5制作平臺(tái)介紹木疙瘩木疙瘩是一個(gè)在線制作和管理H5交互頁(yè)面的平臺(tái)，是北京樂(lè)享云創(chuàng)有限公司在2012年研發(fā)的。在2017年，經(jīng)過(guò)5年的發(fā)展，木疙瘩從1.0版本升級(jí)到2.0版本。目前使用的2.0版本，除了提供通用H5平臺(tái)的頁(yè)面制作、發(fā)布和統(tǒng)計(jì)服務(wù)，支持文字、圖片、音視頻、數(shù)據(jù)圖表等全媒體形式，可實(shí)現(xiàn)觸控、定位、投票等交互外，關(guān)鍵還支持類似FLASH時(shí)間軸關(guān)鍵幀等專業(yè)交互動(dòng)畫(huà)模式的可視化操作，給初入門(mén)或者專業(yè)H5制作者更多自由發(fā)揮的空間，成了視覺(jué)與創(chuàng)意具備的專業(yè)H5制作平臺(tái)。環(huán)節(jié)1注冊(cè)木疙瘩平臺(tái)了解平臺(tái)賬號(hào)注冊(cè)規(guī)則掌握平臺(tái)賬號(hào)的注冊(cè)環(huán)節(jié)2登錄木疙瘩網(wǎng)址，注冊(cè)木疙瘩平臺(tái)賬號(hào)。網(wǎng)址/介紹木疙瘩工作臺(tái)界面熟悉木疙瘩工作臺(tái)的界面分布環(huán)節(jié)3介紹木疙瘩制作界面熟悉制作界面的菜單分布了解常用的工具按鈕環(huán)節(jié)4李江在認(rèn)識(shí)、了解木疙瘩H5制作工具時(shí)，在木疙瘩官網(wǎng)的工作臺(tái)首頁(yè)，觀看了大量H5案例和視頻教程，也探究了木疙瘩H5制作界面的工具操作，想制作簡(jiǎn)單、初級(jí)的H5頁(yè)面，體驗(yàn)一下木疙瘩制作H5的奇妙之處。情景設(shè)計(jì)任務(wù)2初級(jí)H5頁(yè)面制作環(huán)節(jié)1H5頁(yè)面元素序號(hào)元素123……以小組為單位，瀏覽討論H5案例，概括H5頁(yè)面包括的元素。登錄網(wǎng)址/lessonlist.php，學(xué)習(xí)制作教程，歸納制作心得。要素制作心得背景文本圖片音樂(lè)視頻形狀動(dòng)畫(huà)環(huán)節(jié)

2H5要素的制作心得

準(zhǔn)備素材

制作H5頁(yè)面構(gòu)思H5頁(yè)面草圖1環(huán)節(jié)3H5頁(yè)面的制作步驟H5頁(yè)面的制作步驟23環(huán)節(jié)4制作過(guò)程及預(yù)覽二維碼環(huán)節(jié)5歸納制作心得序號(hào)制作步驟心得1

2

3

4

5

……

環(huán)節(jié)1知識(shí)儲(chǔ)備一、 關(guān)鍵幀關(guān)鍵幀是指物體或者角色變化或者運(yùn)動(dòng)等關(guān)鍵動(dòng)作所處的那一幀。二、 關(guān)鍵幀動(dòng)畫(huà)關(guān)鍵幀動(dòng)畫(huà)是指通過(guò)設(shè)定一個(gè)動(dòng)畫(huà)的起始和結(jié)束兩個(gè)關(guān)鍵幀，然后通過(guò)軟件自動(dòng)生成動(dòng)畫(huà)過(guò)程的一種形式。任何元素的變化過(guò)程都可以通過(guò)關(guān)鍵幀動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。三、 時(shí)間軸木疙瘩的時(shí)間軸是制作動(dòng)畫(huà)的關(guān)鍵，時(shí)間軸把圖層和圖像幀進(jìn)行組合和播放，形成動(dòng)畫(huà)，功能和flash相似，無(wú)需代碼，即可制作交互動(dòng)畫(huà)。時(shí)間軸面板由圖層、元素幀以及幀區(qū)間組合而成，包含按鈕有新建圖層，新建圖層夾、刪除圖層、洋蔥皮、關(guān)閉可視化圖層、鎖定圖層、轉(zhuǎn)換為遮罩、添加到遮罩、切換為遮罩顯示、幀數(shù)、當(dāng)前幀、當(dāng)前幀時(shí)間等，分別如圖所示。環(huán)節(jié)2H5小動(dòng)畫(huà)的制作步驟進(jìn)入網(wǎng)址/lesson.php?id=5948eb0f9aeb7060c44f03d8學(xué)習(xí)關(guān)于小動(dòng)畫(huà)的網(wǎng)絡(luò)教程，歸納H5小動(dòng)畫(huà)制作步驟和心得。序號(hào)制作步驟心得1

2

3

……

環(huán)節(jié)2制作H5小動(dòng)畫(huà)的步驟插入關(guān)鍵幀動(dòng)畫(huà)插入關(guān)鍵幀添加元素添加路徑制作步驟設(shè)置動(dòng)畫(huà)方式環(huán)節(jié)2制作過(guò)程及預(yù)覽二維碼環(huán)節(jié)3填寫(xiě)H5小動(dòng)畫(huà)制作心得序號(hào)制作步驟心得1

2

3

4

5

……

經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和初級(jí)H5頁(yè)面的制作，李江的H5制作技術(shù)突飛猛進(jìn)，也對(duì)H5頁(yè)面的制作產(chǎn)生了濃厚的興趣，特別是H5互動(dòng)頁(yè)面，交互性強(qiáng)，應(yīng)用面廣。因此，李江打算制作H5互動(dòng)頁(yè)面，運(yùn)用在公司的日常工作中。情景設(shè)計(jì)任務(wù)3H5互動(dòng)頁(yè)面制作知識(shí)儲(chǔ)備環(huán)節(jié)1以小組為單位搜索完成以下問(wèn)題，以PP的形式上交并進(jìn)行展示。1.什么是客戶關(guān)懷？2.客戶關(guān)懷對(duì)公司有什么作用？3.客戶關(guān)懷的方式有哪些？抽獎(jiǎng)活動(dòng)環(huán)節(jié)2聚星公司借周年慶之際，組織老客戶關(guān)懷活動(dòng)，凡是現(xiàn)場(chǎng)參加公司周年慶活動(dòng)的老客戶都能通過(guò)掃碼進(jìn)入H5頁(yè)面，搖一搖隨機(jī)抽取禮品。通過(guò)搖一搖隨機(jī)派發(fā)禮品進(jìn)行客戶關(guān)懷有哪些優(yōu)勢(shì)和劣勢(shì)？?jī)?yōu)勢(shì)劣勢(shì)制作步驟環(huán)節(jié)31.制作頁(yè)面2.設(shè)置頁(yè)面隨機(jī)跳轉(zhuǎn)3.設(shè)置觸發(fā)條件4.設(shè)置禁止翻頁(yè)制作步驟制作過(guò)程及預(yù)覽二維碼環(huán)節(jié)4填寫(xiě)H5抽獎(jiǎng)頁(yè)面制作心得環(huán)節(jié)5序號(hào)制作步驟心得1

2

3

4

5

……

知識(shí)儲(chǔ)備環(huán)節(jié)1公司活動(dòng)邀請(qǐng)函基本需要包括活動(dòng)名稱、活動(dòng)描述、活動(dòng)時(shí)間、活動(dòng)地點(diǎn)、聯(lián)系人等基本信息，為了便于邀請(qǐng)對(duì)象參加活動(dòng)，還可以設(shè)置溫馨提示，附上行車(chē)路線、定位地圖、停車(chē)推薦等信息。而現(xiàn)在流行的H5邀請(qǐng)函，還基本包括信息提交表單，便于統(tǒng)計(jì)參加活動(dòng)情況。H5邀請(qǐng)函優(yōu)點(diǎn)環(huán)節(jié)2以小組為單位討論H5邀請(qǐng)函的優(yōu)點(diǎn)H5邀請(qǐng)函制作步驟環(huán)節(jié)31.制作頁(yè)面2.制作提交表單3.設(shè)置數(shù)據(jù)提交4.設(shè)置頁(yè)面滑動(dòng)5.設(shè)置頁(yè)面指定位置跳轉(zhuǎn)步驟制作過(guò)程及預(yù)覽二維碼環(huán)節(jié)3制作心得環(huán)節(jié)4制作H5邀請(qǐng)函，歸納制作心得。序號(hào)制作步驟心得1

2

3

4

5

……

環(huán)節(jié)1知識(shí)儲(chǔ)備服務(wù)態(tài)度打字速度應(yīng)變能力學(xué)習(xí)能力客服人員環(huán)節(jié)2制作步驟頁(yè)面制作設(shè)置自動(dòng)評(píng)分設(shè)置翻頁(yè)環(huán)節(jié)3制作過(guò)程及預(yù)覽二維碼環(huán)節(jié)4制作心得為聚星公司制作一個(gè)H5互動(dòng)知識(shí)問(wèn)答頁(yè)面，了解應(yīng)聘者的客服知識(shí)儲(chǔ)備情況，并填寫(xiě)制作心得。序號(hào)制作步驟心得1

2

3

4

5

……

項(xiàng)目檢測(cè)項(xiàng)目檢測(cè)一、判斷題（請(qǐng)?jiān)诶ㄌ?hào)中填寫(xiě)“√”或“×”）1、H5可以把一些信息存在客戶端，這使得頁(yè)面擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度和更流暢的畫(huà)面。（）2、關(guān)鍵幀指的是時(shí)間軸把圖層和圖像幀進(jìn)行組合和播放形成動(dòng)畫(huà)，它的功能和Flash相似，無(wú)須代碼，即可制作交互動(dòng)畫(huà)。（）3、在制作H5互動(dòng)頁(yè)面時(shí)，在沒(méi)有插入其他