H5頁面設計（Mugeda版）（微課版）
張衛東 薛衛星 王曉翠
商品描述
本書系統地介紹使用Mugeda設計H5頁面的方法，首先介紹H5頁面和Mugeda的基礎知識；然後詳細講解繪制與調整圖形，添加媒體文件與文字，製作動畫，行為、觸發條件與控件，以及關聯與表單等內容，幫助讀者逐漸掌握使用Mugeda製作H5頁面的方法；最後通過綜合實訓—設計企業招聘H5頁面，帶領讀者對所學知識進行綜合運用。
本書採用章節式體例結構，將理論與實際操作聯系起來，講解深入淺出，並且設計了豐富的知識欄目，提供了實戰案例和綜合訓練。此外，本書還配有豐富的多媒體教學資源，讀者可掃描二維碼觀看。
本書可作為高等院校藝術設計、新媒體、數字媒體等專業相關課程的教材，也可供H5設計從業人員學習和參考。
作者簡介
張衛東，男，山東傳媒職業學院副院長，教授，國家課程思政示範課教學團隊和山東省黃大年式教學團隊主要成員。研究方向為職業教育，專業領域為通信工程。先後承擔《數字通信》《數字電路》《數字衛星傳輸技術》等課程教學任務。主持省級以上課題2項，出版專著《質量型高職擴招研究》1部，主編國家職業資格培訓教材《有線廣播電視機線員--基礎知識》、十三五規劃教材《大學生就業指導》，參編《數字通信技術》等教材，發表《質量型擴招背景下高職人才培養模式探究》等多篇論文。獲職業教育教學成果獎國家級二等獎2項，省級特等獎1項、一等獎1項、二等獎1項。獲國家廣播電影電視總局科技創新獎三等獎、山東省廣播電視局合理化建議和技術改進一等獎等獎項。
目錄大綱
第 1 章 認識H5 頁面 1
1.1 H5 概述 3
1.1.1 H5 是什麽 3
1.1.2 H5 頁面的基本特點 4
1.1.3 H5 頁面的應用 4
1.1.4 H5 頁面的風格 6
1.2 H5 頁面的設計原則 9
1.2.1 一致性原則 9
1.2.2 簡潔性原則 10
1.2.3 條理性原則 10
1.2.4 切身性原則 12
1.2.5 創新性原則 12
1.3 H5 頁面的設計規範 13
1.3.1 頁面尺寸 13
1.3.2 頁面適配 14
1.3.3 文件大小 14
1.4 H5 頁面的設計流程 15
1.4.1 明確設計目的 15
1.4.2 策劃內容 16
1.4.3 搜集素材 18
1.4.4 進行頁面設計 18
1.4.5 進行交互設計 20
1.4.6 生成和發布H5 20
綜合訓練 21
分析《方寸之間看徽州》拼圖H5 游戲 21
知識拓展 22
本章小結 23
課後習題 24
第 2 章 Mugeda 的基本操作 26
2.1 初識Mugedea 28
2.1.1 認識Mugeda 平臺 28
2.1.2 Mugeda 的優勢和功能 28
2.2 新建、管理和發布H5 29
2.2.1 新建H5 頁面 29
2.2.2 管理H5 作品 31
2.2.3 發布H5 作品 33
2.3 模板管理與素材管理 34
2.3.1 將H5 作品轉換為模板 34
2.3.2 模板管理 34
2.3.3 素材管理 35
2.4 Mugeda 中的H5 編輯器界面 36
2.4.1 菜單欄 37
2.4.2 工具欄 39
2.4.3 “時間線”面板 40
2.4.4 工具箱 41
2.4.5 “頁面編輯”面板 42
2.4.6 頁面編輯區 42
2.4.7 “屬性”面板 44
綜合訓練 44
使用模板製作出游季H5 頁面 44
知識拓展 46
本章小結 46
課後習題 47
第3 章 繪制與調整圖形 48
3.1 繪制圖形 50
3.1.1 直線 50
3.1.2 矩形 51
3.1.3 橢圓 52
3.1.4 圓角矩形 52
3.1.5 多邊形 53
3.1.6 曲線 53
3.1.7 實戰案例：製作旅行網圖標 54
3.2 調整圖形 59
3.2.1 調整圖形平滑度 60
3.2.2 變換圖形形態 61
3.2.3 實戰案例：繪制小貓形狀 62
3.3 圖形的排列與組合 66
3.3.1 排列 66
3.3.2 對齊 66
3.3.3 變形 67
3.3.4 組合 67
3.3.5 合並 68
3.3.6 實戰案例：繪制音樂圖標 69
綜合訓練 72
繪制“節約用水”H5 公益廣告圖形 72
知識拓展 74
本章小結 75
課後習題 75
第4 章 添加媒體文件與文字 77
4.1 添加媒體文件 79
4.1.1 添加圖片 79
4.1.2 添加音頻/ 音效 80
4.1.3 添加視頻 81
4.1.4 添加幻燈片 81
4.1.5 添加網頁 82
4.1.6 實戰案例：製作旅行宣傳
H5 頁面 83
4.1.7 添加圖表 87
4.1.8 添加虛擬現實 89
4.1.9 添加直播 91
4.1.10 實戰案例：製作年中總結
H5 頁面 91
4.2 輸入與編輯文字 95
4.2.1 輸入文字 95
4.2.2 編輯文字 96
4.2.3 實戰案例：製作七夕節H5
頁面 98
綜合訓練 99
製作房地產宣傳H5 頁面 99
知識拓展 101
本章小結 102
課後習題 102
第5 章 製作動畫 104
5.1 幀動畫 106
5.1.1 幀的基本類型 106
5.1.2 幀的基本操作 107
5.1.3 關鍵幀動畫 108
5.1.4 序列幀動畫 108
5.1.5 實戰案例：製作汽車公司H5
進入頁和首頁 109
5.2 特型動畫 112
5.2.1 元件動畫 112
5.2.2 路徑動畫 113
5.2.3 進度動畫 114
5.2.4 變形動畫 115
5.2.5 遮罩動畫 116
5.2.6 實戰案例：製作H5加載動畫 116
5.3 預置動畫 122
5.3.1 添加預置動畫 122
5.3.2 設置預置動畫 122
5.3.3 自定義預置動畫 123
5.3.4 實戰案例：製作元旦H5 頁
面首頁 123
綜合訓練 125
製作口紅產品推廣H5 頁面 125
知識拓展 127
本章小結 128
課後習題 128
第6 章 行為、觸發條件與控件 130
6.1 行為與觸發條件 132
6.1.1 認識行為 132
6.1.2 編輯行為 132
6.1.3 設置觸發條件 133
6.1.4 實戰案例：為游戲H5 首頁按鈕添加行為 133
6.2 控件 134
6.2.1 陀螺儀控件 134
6.2.2 點贊控件 135
6.2.3 擦玻璃控件 136
6.2.4 投票控件 137
6.2.5 抽獎控件 138
6.2.6 其他控件 140
6.2.7 實戰案例：製作企業員工評選H5 頁面 141
綜合訓練 145
製作端午節活動H5 頁面 145
知識拓展 146
本章小結 147
課後習題 147
第7 章 關聯與表單 149
7.1 關聯 151
7.1.1 舞臺動畫關聯 151
7.1.2 實戰案例：為H5 頁面添加
舞臺動畫關聯 151
7.1.3 元件動畫關聯 153
7.1.4 基礎屬性關聯 153
7.2 表單 155
7.2.1 自定義表單 155
7.2.2 實戰案例：製作“城市人口
愛好”調查表H5 頁面 158
7.2.3 定製表單內容 162
綜合訓練 163
製作“受歡迎景區”調查表H5 頁面 163
知識拓展 166
本章小結 167
課後習題 167
第8章 綜合實訓——設計企業招聘H5 頁面 169
8.1 實訓背景 171
8.2 前期準備 171
8.2.1 設計構思 171
8.2.2 繪制原型圖 172
8.2.3 搜集素材 172
8.3 任務實施 173
8.3.1 製作企業招聘H5 頁面 173
8.3.2 為企業招聘H5 頁面添加動效 175
8.3.3 保存並發布企業招聘H5頁面 178
本章小結 179
課後習題 180
