整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》
本書內(nèi)容
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》秉承“思政引領(lǐng)，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對(duì)標(biāo)企業(yè)和行業(yè)需求；引入現(xiàn)代Web前端開發(fā)的核心技術(shù)，如Flex布局、Grid布局，以及人工智能編程插件，同時(shí)融入企業(yè)開發(fā)實(shí)踐，確保學(xué)習(xí)內(nèi)容與實(shí)際工作緊密相關(guān)。全書以一個(gè)完整案例為主線，結(jié)合綜合項(xiàng)目實(shí)戰(zhàn)操作，體現(xiàn)育人、應(yīng)用和創(chuàng)新三項(xiàng)能力。《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習(xí)題與答案、微課視頻、教案、教學(xué)大綱、章節(jié)測(cè)試、云題庫、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程、企業(yè)高頻面試題、學(xué)科競(jìng)賽真題等豐富的教學(xué)資源，并設(shè)有QQ群提供線上學(xué)習(xí)跟蹤和指導(dǎo)服務(wù)。
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》共分14章，系統(tǒng)地講解Web前端開發(fā)的核心技術(shù)，主要內(nèi)容包括Web前端開發(fā)概述、HTML5基礎(chǔ)、HTML5頁面元素和屬性、表單、CSS3基礎(chǔ)、CSS3修飾頁面元素、CSS3高級(jí)選擇器、CSS3盒子模型、浮動(dòng)與定位、CSS3高級(jí)應(yīng)用、網(wǎng)頁布局、Flex布局、Grid布局等，并提供“大學(xué)生參軍入伍專題網(wǎng)站”和“文創(chuàng)商城”兩個(gè)實(shí)戰(zhàn)案例。
本書作者
盧欣欣，副教授。長期從事高校教學(xué)工作，專注Web應(yīng)用開發(fā)，項(xiàng)目開發(fā)經(jīng)驗(yàn)豐富。主講《Web程序設(shè)計(jì)》《高級(jí)程序設(shè)計(jì)》《軟件開發(fā)綜合實(shí)踐》等課程，先后主編教材2部，參編教材3部。在慕課網(wǎng)上線的《企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)》課程學(xué)習(xí)人數(shù)超15萬人。
崔仲遠(yuǎn)，副教授，畢業(yè)于北京交通大學(xué)。長期從事高校教學(xué)工作和軟件項(xiàng)目開發(fā)工作，實(shí)戰(zhàn)開發(fā)經(jīng)驗(yàn)豐富。先后承擔(dān)《網(wǎng)頁特效設(shè)計(jì)》《Web前端基礎(chǔ)》《跨平臺(tái)腳本開發(fā)技術(shù)》等多門課程的教學(xué)任務(wù)，發(fā)表學(xué)術(shù)論文多篇，主編教材2部，參編教材3部、專著1部。主持省級(jí)教改項(xiàng)目1項(xiàng)、科研項(xiàng)目1項(xiàng)。
本書讀者
《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》既可作為本專科院校計(jì)算機(jī)相關(guān)專業(yè)的Web程序設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)與制作等課程的教材，也可作為Web應(yīng)用開發(fā)人員的自學(xué)手冊(cè)和技術(shù)參考書。
本書目錄
第1章 Web前端開發(fā)概述 1
1.1 Web前端開發(fā)職責(zé) 1
1.2 Web前端開發(fā)相關(guān)概念 2
1.3 Web前端開發(fā)相關(guān)技術(shù) 3
1.3.1 Web標(biāo)準(zhǔn) 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開發(fā)工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運(yùn)行工具：瀏覽器 8
1.4.3 開發(fā)者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網(wǎng)站設(shè)計(jì)與開發(fā)流程 11
1.6 實(shí)戰(zhàn)案例：網(wǎng)頁顯示“社會(huì)主義核心價(jià)值觀” 12
1.7 本章小結(jié) 13
第2章 HTML5基礎(chǔ) 14
2.1 HTML5語法基礎(chǔ) 14
2.1.1 HTML文檔結(jié)構(gòu) 14
2.1.2 HTML標(biāo)簽語法 17
2.1.3 HTML注釋 18
2.2 文本控制標(biāo)簽 19
2.2.1 標(biāo)題標(biāo)簽 19
2.2.2 段落標(biāo)簽 20
2.2.3 換行標(biāo)簽 20
2.2.4 文本格式化標(biāo)簽 21
2.2.5 特殊字符 22
2.3 圖像標(biāo)簽 23
2.3.1 網(wǎng)頁常用圖像格式 23
2.3.2 圖像標(biāo)簽的使用 24
2.3.3 相對(duì)路徑與絕對(duì)路徑 26
2.4 超鏈接標(biāo)簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書簽（錨點(diǎn)）鏈接 28
2.4.4 其他鏈接 30
2.5 列表 30
2.5.1 有序列表 31
2.5.2 無序列表 32
2.5.3 定義列表 34
2.5.4 嵌套列表 35
2.6 表格 36
2.6.1 表格結(jié)構(gòu) 36
2.6.2 表格標(biāo)簽 37
2.7 視頻和音頻標(biāo)簽 41
2.7.1 視頻標(biāo)簽 41
2.7.2 音頻標(biāo)簽 42
2.8 其他標(biāo)簽 42
2.8.1 預(yù)格式化標(biāo)簽 42
2.8.2 水平線標(biāo)簽 43
2.8.3 行內(nèi)容器標(biāo)簽 43
2.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁面 44
2.10 本章小結(jié) 46
第3章 HTML5頁面元素和屬性 47
3.1 文檔結(jié)構(gòu)標(biāo)簽 47
3.1.1標(biāo)簽 47
3.1.2標(biāo)簽 49
3.1.3標(biāo)簽 50
3.1.4標(biāo)簽 51
3.1.5標(biāo)簽 53
3.1.6標(biāo)簽 53
3.1.7和標(biāo)簽 54
3.1.8標(biāo)簽 55
3.2 交互元素 55
3.2.1 標(biāo)簽 55
3.2.2 標(biāo)簽 56
3.2.3標(biāo)簽 57
3.3 文本層次語義標(biāo)簽 58
3.3.1 標(biāo)簽 58
3.3.2 標(biāo)簽 59
3.3.3 標(biāo)簽 60
3.4 全局屬性 61
3.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁面結(jié)構(gòu) 62
3.6 本章小結(jié) 64
第4章 表單 65
4.1 表單概述 65
4.2標(biāo)簽 67
4.3 標(biāo)簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復(fù)選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標(biāo)簽 78
4.5 標(biāo)簽 79
4.6 選擇列表標(biāo)簽 80
4.7 多行文本框標(biāo)簽 83
4.8 表單常用屬性 84
4.9 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢表單 86
4.10 本章小結(jié) 88
第5章 CSS3基礎(chǔ) 89
5.1 CSS概述 89
5.2 CSS語法規(guī)則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內(nèi)樣式表 91
5.3.2 內(nèi)部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標(biāo)簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97
5.6 本章小結(jié) 98
第6章 CSS3修飾頁面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細(xì)屬性 99
6.1.2 字體風(fēng)格屬性 100
6.1.3 字體大小屬性 101
6.1.4 字體族屬性 103
6.1.5 字體屬性 106
6.2 CSS文本樣式 107
6.2.1 行高屬性 107
6.2.2 顏色屬性 109
6.2.3 文本水平對(duì)齊屬性 110
6.2.4 首行縮進(jìn)屬性 111
6.2.5 文本修飾屬性 111
6.2.6 字符間距屬性 112
6.2.7 字間距屬性 113
6.2.8 字母大小寫屬性 114
6.2.9 文本陰影效果屬性 115
6.3 CSS表格樣式 116
6.4 CSS表單樣式 118
6.4.1 單行文本框美化 119
6.4.2 按鈕美化 120
6.4.3 下拉列表美化 120
6.5 CSS列表樣式 122
6.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢頁面 123
6.7 本章小結(jié) 126
第7章 CSS3高級(jí)選擇器 127
7.1 組合選擇器 127
7.1.1 交集選擇器 127
7.1.2 并集選擇器 128
7.1.3 后代選擇器 129
7.1.4 子元素選擇器 130
7.1.5 相鄰兄弟選擇器 131
7.1.6 通用兄弟選擇器 132
7.2 屬性選擇器 133
7.3 偽類選擇器 134
7.4 偽元素選擇器 136
7.5 CSS三大特性 138
7.6 本章小結(jié) 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認(rèn)識(shí)盒子模型 142
8.1.2
標(biāo)簽 144
8.2 盒子模型的相關(guān)屬性 144
8.2.1 內(nèi)容區(qū)域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內(nèi)邊距 152
8.2.4 外邊距 153
8.3 陰影 155
8.4 box-sizing 156
8.5 背景屬性 158
8.5.1 背景顏色 158
8.5.2 背景圖像 158
8.5.3 圖像平鋪方式 158
8.5.4 背景圖像位置 160
8.5.5 背景圖像固定 161
8.5.6 背景圖像大小 161
8.5.7 背景裁剪 163
8.5.8 背景復(fù)合屬性 164
8.5.9 CSS精靈圖 165
8.6 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁面 166
8.7 本章小結(jié) 169
第9章 浮動(dòng)與定位 170
9.1 標(biāo)準(zhǔn)文檔流 170
9.2 元素的分類 171
9.2.1 塊級(jí)元素、行內(nèi)元素與行內(nèi)塊元素 171
9.2.2 元素的類型轉(zhuǎn)換 172
9.3 元素的浮動(dòng) 173
9.3.1 設(shè)置浮動(dòng) 174
9.3.2 清除浮動(dòng) 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態(tài)定位 181
9.4.4 相對(duì)定位 182
9.4.5 絕對(duì)定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級(jí)屬性 188
9.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190
9.6 本章小結(jié) 192
第10章 CSS3高級(jí)應(yīng)用 193
10.1 變換 193
10.1.1 旋轉(zhuǎn) 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點(diǎn) 198
10.2 過渡 200
10.3 動(dòng)畫 202
10.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級(jí)應(yīng)用 205
10.5 本章小結(jié) 208
第11章 網(wǎng)頁布局 209
11.1 網(wǎng)頁布局概述 209
11.1.1 網(wǎng)頁布局的概念 209
11.1.2 網(wǎng)頁布局的流程 210
11.1.3 常見的網(wǎng)頁布局方法 211
11.2 網(wǎng)頁布局命名規(guī)范 211
11.3 常見布局的實(shí)現(xiàn) 212
11.3.1 單列布局 212
11.3.2 兩列常規(guī)布局 214
11.3.3 三列常規(guī)布局 216
11.3.4 兩列自適應(yīng)等高布局 217
11.3.5 三列自適應(yīng)布局 219
11.4 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁主體部分 223
11.5 本章小結(jié) 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關(guān)概念 227
12.3 容器屬性 227
12.3.1 display屬性 228
12.3.2 flex-direction屬性 228
12.3.3 flex-wrap屬性 230
12.3.4 justify-content屬性 232
12.3.5 align-items屬性 233
12.3.6 align-content屬性 235
12.4 項(xiàng)目屬性 236
12.4.1 order屬性 236
12.4.2 flex-grow屬性 237
12.4.3 flex-shrink屬性 239
12.4.4 flex-basis屬性 240
12.4.5 flex屬性 241
12.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242
12.6 本章小結(jié) 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關(guān)概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網(wǎng)格 248
13.3.3 行間隔和列間隔 252
13.3.4 項(xiàng)目對(duì)齊方式 253
13.4 項(xiàng)目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258
13.6 本章小結(jié) 260
第14章 Web前端項(xiàng)目綜合實(shí)踐——文創(chuàng)商城 261
14.1 項(xiàng)目概述 261
14.2 需求分析 262
14.3 原型設(shè)計(jì) 262
14.4 公共部分的設(shè)計(jì)與實(shí)現(xiàn) 265
14.4.1 重置樣式 265
14.4.2 頁面頭部 265
14.4.3 頁面底部 268
14.4.4 懸浮側(cè)邊欄 270
14.5 首頁的設(shè)計(jì)與實(shí)現(xiàn) 271
14.5.1 甄選好物版塊 271
14.5.2 國博文房版塊 274
14.6 商品列表頁的設(shè)計(jì)與實(shí)現(xiàn) 277
14.6.1 商品類型篩選 277
14.6.2 分頁導(dǎo)航 278
14.7 商品詳情頁的設(shè)計(jì)與實(shí)現(xiàn) 279
14.8 本章小結(jié) 283
編輯推薦
1HTML5與CSS3是Web前端開發(fā)的兩大核心技術(shù)，它們不僅是Web前端開發(fā)工程師必須掌握的技能，也是高校一門重要的Web前端課程內(nèi)容
2《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》以“從項(xiàng)目中來到項(xiàng)目中去”為主旨，從Web前端開發(fā)的基本概念入手，系統(tǒng)介紹HTML5、CSS3網(wǎng)頁編程技巧。
3《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》采取“知識(shí)點(diǎn)講解+示例解析+案例詳講+高頻面試題+實(shí)踐操作+學(xué)科競(jìng)賽真題”的遞進(jìn)式教學(xué)模式，引導(dǎo)讀者理解理論知識(shí)，掌握開發(fā)方法，學(xué)會(huì)復(fù)雜的網(wǎng)站設(shè)計(jì)技能，全面提升讀者的Web前端開發(fā)能力。
4《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習(xí)題與答案、教案、教學(xué)大綱、章節(jié)測(cè)試、云題庫、實(shí)驗(yàn)報(bào)告、學(xué)習(xí)通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術(shù)。
本文摘自《HTML5+CSS3 Web前端開發(fā)與實(shí)例教程：微課視頻版》，獲出版社和作者授權(quán)發(fā)布。
年來，教育信息化已成為國家在深化教育改革領(lǐng)域的重要目標(biāo)，也是全行業(yè)及全社會(huì)關(guān)注的焦點(diǎn)。技術(shù)的推動(dòng)已成為行業(yè)變革重要力量，同樣，教育領(lǐng)域也是如此，教育技術(shù)的發(fā)展是深化教育改革的重要推動(dòng)力量。黨的十九大報(bào)告為國家深化教育改革指明了前進(jìn)方向，教育信息化已成為全面推動(dòng)教育現(xiàn)代化的有力支撐，因此，教育信息化已經(jīng)是勢(shì)在必行。
隨著信息技術(shù)的迅猛發(fā)展，微課應(yīng)運(yùn)而生，微課的出現(xiàn)不僅順應(yīng)了時(shí)代發(fā)展的趨勢(shì)，而且在很大程度上滿足了學(xué)生和老師的教育需求。如今，移動(dòng)端不僅是學(xué)生群體娛樂、社交的平臺(tái)，更是他們最主流的閱讀工具和學(xué)習(xí)平臺(tái)，老師可以把上課講授的關(guān)鍵內(nèi)容制作成微視頻，學(xué)生可以隨時(shí)隨地拿出自己的智能終端設(shè)備來學(xué)習(xí)，還可以反復(fù)學(xué)習(xí)。
“微課”既有別于傳統(tǒng)單一資源類型的教學(xué)課例、教學(xué)課件、教學(xué)設(shè)計(jì)、教學(xué)反思等教學(xué)資源，又是在其基礎(chǔ)上繼承和發(fā)展起來的一種新型教學(xué)資源，以時(shí)間短、主題多樣、反饋及時(shí)等特點(diǎn)而受到了很多老師和學(xué)生的喜愛。
那么，微課如何制作和實(shí)現(xiàn)的呢？毫無疑問，融合多種媒體形式的HTML5教學(xué)內(nèi)容無疑是微課制作的最好的路徑。HTML5融合了圖片、文字、視頻、音頻、圖表、動(dòng)畫、全景等媒體形式，可以讓學(xué)習(xí)內(nèi)容變得更加生動(dòng)，讓學(xué)習(xí)更具有互動(dòng)性、娛樂性。
1.童心讀世界認(rèn)知卡片搶先看
這款H5分為8個(gè)場(chǎng)景，每一個(gè)場(chǎng)景里有不同的認(rèn)知卡片，兒童可以自由選擇卡片進(jìn)行識(shí)讀，圖文結(jié)合的交互方式可以有效的達(dá)到兒童認(rèn)知的效果。
（可識(shí)別二維碼預(yù)覽）
2.點(diǎn)石成金
這款H5由三首古文組成，古文中有空白的地方需要用戶補(bǔ)充完整，用戶可以通過選擇文字將古文填充完整，填入完全正確則出現(xiàn)下一頁的提示。作品設(shè)有時(shí)間，可以激勵(lì)用戶更快更好的完成。
（可識(shí)別二維碼預(yù)覽）
3.小螞蟻
這款H5講述了小螞蟻的故事，作品通過多個(gè)畫面的轉(zhuǎn)換，給小朋友帶來很強(qiáng)的視覺感。同時(shí)，作品還配有歌曲，給作品增添了很多的趣味性，是兒童讀故事的好伴侶。
（可識(shí)別二維碼預(yù)覽）
4.童心讀世界有聲認(rèn)知卡片
這款H5是兒童認(rèn)知的卡片動(dòng)畫，作品將圖、文、聲三種認(rèn)知方式有效的結(jié)合起來，從視覺、聽覺、觸覺三個(gè)層面為用戶呈現(xiàn)，非常具有趣味性。
（可識(shí)別二維碼預(yù)覽）
5.會(huì)說話的英語報(bào)
這款H5將英語報(bào)用生動(dòng)的聲音向用戶呈現(xiàn)出來，學(xué)生可以通過聽英語提高自己的聽力能力，還可以聽故事，可以說是一舉兩得。
（可識(shí)別二維碼預(yù)覽）
6.認(rèn)五官學(xué)英語
這款H5是兒童認(rèn)五官學(xué)英語的作品，兒童可以通過點(diǎn)擊不同的五官，獲取相應(yīng)的英語讀音，邊看邊聽邊讀。同時(shí)，作品不同的表情變化，可以增加趣味性。
（可識(shí)別二維碼預(yù)覽）
7.動(dòng)畫繪本《三只小豬》
這款H5是根據(jù)《三只小豬》改編的動(dòng)畫繪本，作品通過小豬們生活的生動(dòng)場(chǎng)景向用戶講述了三只小豬的不同性格，作品配有講故事的聲音，非常具有趣味性和吸引力。
（可識(shí)別二維碼預(yù)覽）
8. 數(shù)十億年前的地球竟然是這樣的
這款H5展示的是地球成長史，用戶通過交互可以清楚的看到地球是如何形成的，整體上來說，這款作品既具有趣味性，又具有科普性。
（可識(shí)別二維碼預(yù)覽）
9. 和聆歌海一起學(xué)拼音
這款H5是教兒童學(xué)拼音的作品，兒童通過點(diǎn)擊聲調(diào)和發(fā)音兩個(gè)按鈕學(xué)習(xí)拼音的發(fā)聲，能夠有效調(diào)動(dòng)兒童的學(xué)習(xí)興趣。
（可識(shí)別二維碼預(yù)覽）
在移動(dòng)融媒體時(shí)代的優(yōu)秀交互融媒體內(nèi)容制作技術(shù)平臺(tái)，木疙瘩具有在移動(dòng)學(xué)習(xí)、互動(dòng)學(xué)習(xí)微課件制作方面的技術(shù)優(yōu)勢(shì)，如擁有類Flash習(xí)慣的專業(yè)版和類ppt習(xí)慣的簡約版充分滿足不同微課件創(chuàng)作需求等，已經(jīng)得到了教育管理部門和教育工作者們的廣泛關(guān)注，相關(guān)內(nèi)容創(chuàng)作和行業(yè)應(yīng)用已經(jīng)迅速增長，未來的發(fā)展前景也是值得期待的。
作為H5技術(shù)平臺(tái)在教育行業(yè)的先行者，木疙瘩很早關(guān)注并布局移動(dòng)教育領(lǐng)域。中央黨校、人教社、新東方、北京四中、黃岡中學(xué)等著名教育機(jī)構(gòu)都采用了木疙瘩技術(shù)或教育行業(yè)解決方案，成功實(shí)現(xiàn)了數(shù)字資源移動(dòng)化轉(zhuǎn)型。木疙瘩還與教育行業(yè)知名機(jī)構(gòu)合作，積累了豐富的教學(xué)素材，為教學(xué)資源的創(chuàng)作提供了自由的平臺(tái)。未來，木疙瘩將一如既往地關(guān)注移動(dòng)學(xué)習(xí)的發(fā)展趨勢(shì)，加強(qiáng)H5融媒體技術(shù)與教育學(xué)習(xí)的深度融合，為包括特殊教育在內(nèi)的中國教育改革與發(fā)展貢獻(xiàn)力量。（作者：王志）
隨著移動(dòng)互聯(lián)網(wǎng)學(xué)習(xí)的常態(tài)化，許多企業(yè)陸續(xù)上線了各自的移動(dòng)學(xué)習(xí)平臺(tái)。平臺(tái)的上線必然會(huì)產(chǎn)生對(duì)移動(dòng)學(xué)習(xí)課件的大量需求。此時(shí)，什么樣的課件形式比較適合移動(dòng)學(xué)習(xí)平臺(tái)？這些不同形式的課件又該如何開發(fā)制作？這些都成為開發(fā)制作移動(dòng)學(xué)習(xí)課件需要考慮的問題。
在此過程中，基于Web和瀏覽器，依托HTML5技術(shù)所制作出來的課件（下簡稱HTML5課件）因其在課件穩(wěn)定性、形式表現(xiàn)多樣性、良好的交互性以及支持跨平臺(tái)學(xué)習(xí)等各方面的天然優(yōu)勢(shì)，日益成為備受企業(yè)青睞的一種課件形式。
>>>為什么是HTML5課件？
不少課件制作開發(fā)人員可能都曾使用過傳統(tǒng)網(wǎng)頁技術(shù)來制作E-learning課件，特別是要快速開發(fā)制作出一些E-learning課程時(shí)，網(wǎng)頁瀏覽課件方式常常成為快捷之選。因?yàn)橹谱骶W(wǎng)頁的技能并不困難，對(duì)于會(huì)使用WORD的人而言，只要再加上一些編輯工具或網(wǎng)頁范例即可以套用。就連企業(yè)內(nèi)人員也可自行編寫，有助于建成企業(yè)員工自學(xué)的瀏覽式教材庫。
但是，由于傳統(tǒng)網(wǎng)頁技術(shù)本身的局限，此類課件通常通篇下來就是文字和一些圖片，由于缺乏聲影的配合，更無法引入一些交互參與的教學(xué)設(shè)計(jì)，使得學(xué)員注意力難以集中，學(xué)習(xí)效果也不盡如人意。因此，在實(shí)際運(yùn)用中，此類課件通常只是被用于制作諸如介紹企業(yè)專業(yè)新知識(shí)、產(chǎn)業(yè)環(huán)境、新產(chǎn)品特性等更新迅速的信息、資訊類資料。
而基于HTML5技術(shù)開發(fā)制作的網(wǎng)頁課件顛覆了這一切。相較于傳統(tǒng)網(wǎng)頁技術(shù)，HTML5所帶來的改變和規(guī)范體現(xiàn)在網(wǎng)頁技術(shù)的方方面面，比如：描述性更強(qiáng)的新標(biāo)簽，增強(qiáng)多媒體支持，更強(qiáng)大的前端Web API接口，完善的本地存儲(chǔ)機(jī)制，配合CSS3的更精美的界面設(shè)計(jì)，可訪問性的提升……
那上述這些技術(shù)上的變化對(duì)移動(dòng)學(xué)習(xí)網(wǎng)頁課件的開發(fā)與制作意味著什么呢？這些變化意味著：如果我們使用HTML5技術(shù)來開發(fā)制作移動(dòng)學(xué)習(xí)課件，課件將具備以下特點(diǎn)：
1、HTML5課件能將各種課件形式融合起來，實(shí)現(xiàn)文字、圖片、表格、音頻、視頻、交互、色彩、創(chuàng)意的有機(jī)結(jié)合。
這種有機(jī)結(jié)合之所以能夠?qū)崿F(xiàn)正是因?yàn)镠TML5支持視頻、音頻等多媒體元素，CSS3支持字體嵌入、版面排版，以及最令人印象深刻的動(dòng)畫功能等。這些強(qiáng)大的技術(shù)支持使得HTML5網(wǎng)頁課件徹底告別了傳統(tǒng)網(wǎng)頁課件缺乏聲影、形式單一等各種不足。
在一個(gè)典型的HTML5網(wǎng)頁課件中，我們可以有文本、圖片，還可以有視頻和交互。顯然，HTML5網(wǎng)頁課件使得學(xué)習(xí)內(nèi)容的表現(xiàn)形式變得更加豐富，能極大的提升學(xué)員學(xué)習(xí)興趣，增強(qiáng)學(xué)習(xí)效果。
2、HTML5課件能實(shí)現(xiàn)良好的學(xué)習(xí)交互。
相較于傳統(tǒng)網(wǎng)頁技術(shù)，HTML5在用戶的可用性和友好體驗(yàn)上帶來非常大的改進(jìn)。在開發(fā)設(shè)計(jì)網(wǎng)頁課件時(shí)，教學(xué)設(shè)計(jì)人員可充分發(fā)揮出這一技術(shù)優(yōu)勢(shì)，結(jié)合內(nèi)容特點(diǎn)，設(shè)計(jì)一些學(xué)習(xí)交互點(diǎn)，提升學(xué)員的學(xué)習(xí)參與度。
3、HTML5課件能支持跨平臺(tái)學(xué)習(xí)，有助于在不同學(xué)習(xí)終端獲得一致的良好學(xué)習(xí)體驗(yàn)。
HTML5的優(yōu)勢(shì)目前主要是體現(xiàn)在終端上，尤其是跨平臺(tái)、跨分辨率、終端自適應(yīng)等方面。可以說，相較于傳統(tǒng)HTML技術(shù)，它的很多新特性，都是針對(duì)終端設(shè)備，為的就是在終端設(shè)備上有更好的體驗(yàn)和交互。
顯然，在這一點(diǎn)上，HTML5課件特點(diǎn)與移動(dòng)學(xué)習(xí)需求可謂有著天然的契合。因?yàn)樵谝苿?dòng)互聯(lián)網(wǎng)時(shí)代，用戶的終端設(shè)備是各式各樣的，同一個(gè)用戶也可能擁有多個(gè)不同的終端設(shè)備，課件只有支持跨平臺(tái)學(xué)習(xí)并能實(shí)現(xiàn)終端自適應(yīng)才能保證學(xué)員獲得良好一致的學(xué)習(xí)體驗(yàn)。
在我們對(duì)HTML5課件所具備的特點(diǎn)及優(yōu)勢(shì)有了一定了解后，也就不難理解為什么許多企業(yè)在開發(fā)制作移動(dòng)學(xué)習(xí)課程時(shí)對(duì)HTML5課件形式青眼相加。與此同時(shí)，如何開發(fā)制作出一個(gè)優(yōu)秀的HTML5課件也就成為一個(gè)新的挑戰(zhàn)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
