整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
隨著移動互聯網學習的常態化，許多企業陸續上線了各自的移動學習平臺。平臺的上線必然會產生對移動學習課件的大量需求。此時，什么樣的課件形式比較適合移動學習平臺？這些不同形式的課件又該如何開發制作？這些都成為開發制作移動學習課件需要考慮的問題。
在此過程中，基于Web和瀏覽器，依托HTML5技術所制作出來的課件（下簡稱HTML5課件）因其在課件穩定性、形式表現多樣性、良好的交互性以及支持跨平臺學習等各方面的天然優勢，日益成為備受企業青睞的一種課件形式。
>>>為什么是HTML5課件？
不少課件制作開發人員可能都曾使用過傳統網頁技術來制作E-learning課件，特別是要快速開發制作出一些E-learning課程時，網頁瀏覽課件方式常常成為快捷之選。因為制作網頁的技能并不困難，對于會使用WORD的人而言，只要再加上一些編輯工具或網頁范例即可以套用。就連企業內人員也可自行編寫，有助于建成企業員工自學的瀏覽式教材庫。
但是，由于傳統網頁技術本身的局限，此類課件通常通篇下來就是文字和一些圖片，由于缺乏聲影的配合，更無法引入一些交互參與的教學設計，使得學員注意力難以集中，學習效果也不盡如人意。因此，在實際運用中，此類課件通常只是被用于制作諸如介紹企業專業新知識、產業環境、新產品特性等更新迅速的信息、資訊類資料。
而基于HTML5技術開發制作的網頁課件顛覆了這一切。相較于傳統網頁技術，HTML5所帶來的改變和規范體現在網頁技術的方方面面，比如：描述性更強的新標簽，增強多媒體支持，更強大的前端Web API接口，完善的本地存儲機制，配合CSS3的更精美的界面設計，可訪問性的提升……
那上述這些技術上的變化對移動學習網頁課件的開發與制作意味著什么呢？這些變化意味著：如果我們使用HTML5技術來開發制作移動學習課件，課件將具備以下特點：
1、HTML5課件能將各種課件形式融合起來，實現文字、圖片、表格、音頻、視頻、交互、色彩、創意的有機結合。
這種有機結合之所以能夠實現正是因為HTML5支持視頻、音頻等多媒體元素，CSS3支持字體嵌入、版面排版，以及最令人印象深刻的動畫功能等。這些強大的技術支持使得HTML5網頁課件徹底告別了傳統網頁課件缺乏聲影、形式單一等各種不足。
在一個典型的HTML5網頁課件中，我們可以有文本、圖片，還可以有視頻和交互。顯然，HTML5網頁課件使得學習內容的表現形式變得更加豐富，能極大的提升學員學習興趣，增強學習效果。
2、HTML5課件能實現良好的學習交互。
相較于傳統網頁技術，HTML5在用戶的可用性和友好體驗上帶來非常大的改進。在開發設計網頁課件時，教學設計人員可充分發揮出這一技術優勢，結合內容特點，設計一些學習交互點，提升學員的學習參與度。
3、HTML5課件能支持跨平臺學習，有助于在不同學習終端獲得一致的良好學習體驗。
HTML5的優勢目前主要是體現在終端上，尤其是跨平臺、跨分辨率、終端自適應等方面。可以說，相較于傳統HTML技術，它的很多新特性，都是針對終端設備，為的就是在終端設備上有更好的體驗和交互。
顯然，在這一點上，HTML5課件特點與移動學習需求可謂有著天然的契合。因為在移動互聯網時代，用戶的終端設備是各式各樣的，同一個用戶也可能擁有多個不同的終端設備，課件只有支持跨平臺學習并能實現終端自適應才能保證學員獲得良好一致的學習體驗。
在我們對HTML5課件所具備的特點及優勢有了一定了解后，也就不難理解為什么許多企業在開發制作移動學習課程時對HTML5課件形式青眼相加。與此同時，如何開發制作出一個優秀的HTML5課件也就成為一個新的挑戰。
HTML5+CSS3 Web前端開發與實例教程：微課視頻版》
本書內容
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》秉承“思政引領，立德樹人”的教育理念，自然融入多維度、深層次的思政元素，全面對標企業和行業需求；引入現代Web前端開發的核心技術，如Flex布局、Grid布局，以及人工智能編程插件，同時融入企業開發實踐，確保學習內容與實際工作緊密相關。全書以一個完整案例為主線，結合綜合項目實戰操作，體現育人、應用和創新三項能力。《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》配套提供課程思政元素、案例源代碼、PPT課件、課后習題與答案、微課視頻、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程、企業高頻面試題、學科競賽真題等豐富的教學資源，并設有QQ群提供線上學習跟蹤和指導服務。
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》共分14章，系統地講解Web前端開發的核心技術，主要內容包括Web前端開發概述、HTML5基礎、HTML5頁面元素和屬性、表單、CSS3基礎、CSS3修飾頁面元素、CSS3高級選擇器、CSS3盒子模型、浮動與定位、CSS3高級應用、網頁布局、Flex布局、Grid布局等，并提供“大學生參軍入伍專題網站”和“文創商城”兩個實戰案例。
本書作者
盧欣欣，副教授。長期從事高校教學工作，專注Web應用開發，項目開發經驗豐富。主講《Web程序設計》《高級程序設計》《軟件開發綜合實踐》等課程，先后主編教材2部，參編教材3部。在慕課網上線的《企業網站綜合布局實戰》課程學習人數超15萬人。
崔仲遠，副教授，畢業于北京交通大學。長期從事高校教學工作和軟件項目開發工作，實戰開發經驗豐富。先后承擔《網頁特效設計》《Web前端基礎》《跨平臺腳本開發技術》等多門課程的教學任務，發表學術論文多篇，主編教材2部，參編教材3部、專著1部。主持省級教改項目1項、科研項目1項。
本書讀者
《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》既可作為本專科院校計算機相關專業的Web程序設計、網頁設計與制作等課程的教材，也可作為Web應用開發人員的自學手冊和技術參考書。
本書目錄
第1章 Web前端開發概述 1
1.1 Web前端開發職責 1
1.2 Web前端開發相關概念 2
1.3 Web前端開發相關技術 3
1.3.1 Web標準 3
1.3.2 HTML 4
1.3.3 CSS 4
1.3.4 JavaScript 5
1.4 Web前端開發工具 5
1.4.1 代碼編輯工具：VSCode 6
1.4.2 代碼運行工具：瀏覽器 8
1.4.3 開發者工具 9
1.4.4 人工智能輔助編程工具 10
1.5 網站設計與開發流程 11
1.6 實戰案例：網頁顯示“社會主義核心價值觀” 12
1.7 本章小結 13
第2章 HTML5基礎 14
2.1 HTML5語法基礎 14
2.1.1 HTML文檔結構 14
2.1.2 HTML標簽語法 17
2.1.3 HTML注釋 18
2.2 文本控制標簽 19
2.2.1 標題標簽 19
2.2.2 段落標簽 20
2.2.3 換行標簽 20
2.2.4 文本格式化標簽 21
2.2.5 特殊字符 22
2.3 圖像標簽 23
2.3.1 網頁常用圖像格式 23
2.3.2 圖像標簽的使用 24
2.3.3 相對路徑與絕對路徑 26
2.4 超鏈接標簽 27
2.4.1 文本鏈接 27
2.4.2 圖像鏈接 28
2.4.3 書簽（錨點）鏈接 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 表格結構 36
2.6.2 表格標簽 37
2.7 視頻和音頻標簽 41
2.7.1 視頻標簽 41
2.7.2 音頻標簽 42
2.8 其他標簽 42
2.8.1 預格式化標簽 42
2.8.2 水平線標簽 43
2.8.3 行內容器標簽 43
2.9 實戰案例：“大學生參軍網站”兵役登記頁面 44
2.10 本章小結 46
第3章 HTML5頁面元素和屬性 47
3.1 文檔結構標簽 47
3.1.1標簽 47
3.1.2標簽 49
3.1.3標簽 50
3.1.4標簽 51
3.1.5標簽 53
3.1.6標簽 53
3.1.7和標簽 54
3.1.8標簽 55
3.2 交互元素 55
3.2.1 標簽 55
3.2.2 標簽 56
3.2.3標簽 57
3.3 文本層次語義標簽 58
3.3.1 標簽 58
3.3.2 標簽 59
3.3.3 標簽 60
3.4 全局屬性 61
3.5 實戰案例：“大學生參軍網站”頁面結構 62
3.6 本章小結 64
第4章 表單 65
4.1 表單概述 65
4.2標簽 67
4.3 標簽 68
4.3.1 單行文本框 69
4.3.2 密碼框 69
4.3.3 文件域 70
4.3.4 單選按鈕和復選框 71
4.3.5 隱藏域 73
4.3.6 按鈕 73
4.3.7 HTML5新增輸入元素 76
4.4 標簽 78
4.5 標簽 79
4.6 選擇列表標簽 80
4.7 多行文本框標簽 83
4.8 表單常用屬性 84
4.9 實戰案例：“大學生參軍網站”網上咨詢表單 86
4.10 本章小結 88
第5章 CSS3基礎 89
5.1 CSS概述 89
5.2 CSS語法規則 90
5.3 CSS樣式的引入方法 91
5.3.1 行內樣式表 91
5.3.2 內部樣式表 92
5.3.3 外部樣式表 93
5.4 CSS基本選擇器 94
5.4.1 標簽選擇器 94
5.4.2 ID選擇器 95
5.4.3 類選擇器 95
5.4.4 通用選擇器 97
5.5 實戰案例：“大學生參軍網站”公共樣式表制作 97
5.6 本章小結 98
第6章 CSS3修飾頁面元素 99
6.1 CSS字體樣式 99
6.1.1 字體粗細屬性 99
6.1.2 字體風格屬性 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 文本水平對齊屬性 110
6.2.4 首行縮進屬性 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 實戰案例：“大學生參軍網站”在線咨詢頁面 123
6.7 本章小結 126
第7章 CSS3高級選擇器 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 本章小結 141
第8章 CSS3盒子模型 142
8.1 盒子模型概述 142
8.1.1 認識盒子模型 142
8.1.2
標簽 144
8.2 盒子模型的相關屬性 144
8.2.1 內容區域的寬度和高度 144
8.2.2 邊框 145
8.2.3 內邊距 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 背景復合屬性 164
8.5.9 CSS精靈圖 165
8.6 實戰案例：“大學生參軍網站”登錄頁面 166
8.7 本章小結 169
第9章 浮動與定位 170
9.1 標準文檔流 170
9.2 元素的分類 171
9.2.1 塊級元素、行內元素與行內塊元素 171
9.2.2 元素的類型轉換 172
9.3 元素的浮動 173
9.3.1 設置浮動 174
9.3.2 清除浮動 176
9.4 元素的定位 180
9.4.1 定位的概念 180
9.4.2 定位屬性 181
9.4.3 靜態定位 181
9.4.4 相對定位 182
9.4.5 絕對定位 183
9.4.6 固定定位 186
9.4.7 粘性定位 187
9.4.8 層疊等級屬性 188
9.5 實戰案例：“大學生參軍網站”輪播圖效果 190
9.6 本章小結 192
第10章 CSS3高級應用 193
10.1 變換 193
10.1.1 旋轉 194
10.1.2 傾斜 195
10.1.3 縮放 196
10.1.4 平移 197
10.1.5 變換原點 198
10.2 過渡 200
10.3 動畫 202
10.4 實戰案例：“大學生參軍網站”CSS3高級應用 205
10.5 本章小結 208
第11章 網頁布局 209
11.1 網頁布局概述 209
11.1.1 網頁布局的概念 209
11.1.2 網頁布局的流程 210
11.1.3 常見的網頁布局方法 211
11.2 網頁布局命名規范 211
11.3 常見布局的實現 212
11.3.1 單列布局 212
11.3.2 兩列常規布局 214
11.3.3 三列常規布局 216
11.3.4 兩列自適應等高布局 217
11.3.5 三列自適應布局 219
11.4 實戰案例：“大學生參軍網站”首頁主體部分 223
11.5 本章小結 225
第12章 Flex布局 226
12.1 Flex布局概述 226
12.2 Flex布局相關概念 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 項目屬性 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 實戰案例：“大學生參軍網站”導航條 242
12.6 本章小結 244
第13章 Grid布局 245
13.1 Grid布局概述 245
13.2 Grid布局相關概念 246
13.3 容器屬性 246
13.3.1 display屬性 247
13.3.2 劃分網格 248
13.3.3 行間隔和列間隔 252
13.3.4 項目對齊方式 253
13.4 項目屬性 255
13.4.1 grid-column和grid-row屬性 255
13.4.2 grid-area屬性 257
13.5 實戰案例：“大學生參軍網站”視頻展播列表 258
13.6 本章小結 260
第14章 Web前端項目綜合實踐——文創商城 261
14.1 項目概述 261
14.2 需求分析 262
14.3 原型設計 262
14.4 公共部分的設計與實現 265
14.4.1 重置樣式 265
14.4.2 頁面頭部 265
14.4.3 頁面底部 268
14.4.4 懸浮側邊欄 270
14.5 首頁的設計與實現 271
14.5.1 甄選好物版塊 271
14.5.2 國博文房版塊 274
14.6 商品列表頁的設計與實現 277
14.6.1 商品類型篩選 277
14.6.2 分頁導航 278
14.7 商品詳情頁的設計與實現 279
14.8 本章小結 283
編輯推薦
1HTML5與CSS3是Web前端開發的兩大核心技術，它們不僅是Web前端開發工程師必須掌握的技能，也是高校一門重要的Web前端課程內容
2《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》以“從項目中來到項目中去”為主旨，從Web前端開發的基本概念入手，系統介紹HTML5、CSS3網頁編程技巧。
3《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》采取“知識點講解+示例解析+案例詳講+高頻面試題+實踐操作+學科競賽真題”的遞進式教學模式，引導讀者理解理論知識，掌握開發方法，學會復雜的網站設計技能，全面提升讀者的Web前端開發能力。
4《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》配套資源非常豐富，包括思政元素、案例源代碼、PPT課件、微課視頻、習題與答案、教案、教學大綱、章節測試、云題庫、實驗報告、學習通在線課程，能幫助讀者快速掌握HTML5與CSS3前端技術。
本文摘自《HTML5+CSS3 Web前端開發與實例教程：微課視頻版》，獲出版社和作者授權發布。
TML5課件
玩微信的朋友對HTML5都不陌生，它就像一個絕世大美女，一出場就受到了各方的強烈關注，自然也受到了移動學習平臺（m-learning）的青睞。HTML5的資本在于它支持跨平臺，在于它可以實現文字、圖片、表格、音頻、視頻的有機結合，在于它良好的交互性。
支持跨平臺學習
相對于傳統的HTML技術，HTML5針對終端設備增加了許多新特性，只需一個版本即可實現跨平臺、跨分辨率、終端自適應等。不需要再考慮是得用電腦還是手機，得用蘋果還是安卓。不管什么設備，只需要一個支持HTML5的瀏覽器，統統搞定。
HTML5的這個特性對于移動學習來說無疑是個特大好消息，簡直就是為了移動學習量身定做的。如此一來，HTML5課件可以跨平臺，并實現終端自適應，既節省了培訓課件開發者的時間，又能讓學員獲得良好一致的學習體驗。
文字、圖片、音頻、視頻等多種呈現方式
Web剛出現的時候，我們都在網上看些基礎文檔學習，隨著互聯網技術的發展，純靜態頁面已經難以吸引用戶的眼球，而HTML5課件的出現，讓人眼前一亮，音頻、視頻等多媒體元素的支持，讓學習內容變得更加豐富多彩，極大地提升了學員的學習興趣，這在課件形式上也是一場質的飛躍。
良好的交互性
上學的時候，老師都比較喜歡積極發言的同學，因為互動。同樣，在開發設計網頁課件時，教學設計人員也希望可以與用戶互動。HTML5的特性，正可以讓教學設計人員設計一些學習交互點，提升學員的學習參與度。
正因為HTML5課件有如此多特性，使得企業在培訓的微課形式上，更喜歡HTML5課件。思創擁有16年e-learning綜合服務經驗，為客戶提供課程定制開發服務，課件形式包括：快速開發、圖文類、綜合動畫、HTML5交互。
更多資訊關注微信公眾號：思創云學習
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
