項目1?制作課程信息管理系統(tǒng)
項目情景\t002
項目分析\t002
學習目標\t003
(一)知識目標\t003
(二)技能目標\t003
(三)素質目標\t003
知識準備\t004
1. HTML列表元素\t004
2. HTML表單元素\t006
3. HTML框架元素\t009
項目實踐\t012
1. 搭建頁面主體結構和內容\t012
2. 創(chuàng)建form表單和搜索框\t014
3. 創(chuàng)建班級列表\t014
4. 制作課程表子頁面\t014
5. 使用<iframe>標簽導入表格\t016
6. 為課程添加超鏈接,進入課程詳情頁面\t017
項目拓展\t018
項目2?設計Web博客(靜態(tài))
項目情景\t020
項目分析\t020
學習目標\t021
(一)知識目標\t021
(二)技能目標\t021
(三)素質目標\t021
知識準備\t021
1. flex彈性布局\t021
2. 邊框屬性\t028
3. linear-gradient屬性\t033
項目實踐\t039
1. 搭建頁面主頁結構\t039
2. 搭建頁面主體內容\t039
3. 添加正文內容\t040
4. 美化微博話題\t042
5. 對微博話題的字體進行美化\t043
6. 對微博話題的背景色進行美化\t043
項目拓展\t044
項目3?制作網頁計算器
項目情景\t046
項目分析\t046
學習目標\t047
(一)知識目標\t047
(二)技能目標\t047
(三)素質目標\t047
知識準備\t047
1. JavaScript文件引入方式\t047
2. JS字符串常用方法\t049
3. 數(shù)組常用方法\t054
4. 獲取DOM\t059
5. js單擊事件\t061
項目實踐\t063
1. HTML布局\t063
2. CSS添加樣式\t064
3. JavaScript計算\t066
4. 擴展功能(驗證正則表達式)\t070
項目拓展\t072
項目4?制作天氣預報網
項目情景\t074
項目分析\t074
學習目標\t074
(一)知識目標\t074
(二)技能目標\t075
(三)素質目標\t075
任務1?完成天氣預報頁面內容\t075
任務描述\t075
知識準備\t075
1. HTML5新增語義化元素\t075
2. HTML5頁面增強元素\t083
3. HTML5多媒體元素\t083
任務實施\t085
1. 制作頁面結構\t085
2. 搭建主體內容\t085
任務拓展\t088
任務2?為天氣預報頁面進行移動端適配\t089
任務描述\t089
知識準備\t089
1. 視口(viewport)應用\t089
2. 媒體查詢\t091
3. CSS單位\t093
任務實施\t093
任務拓展\t097
任務3?天氣預報網頁獲取后臺動態(tài)數(shù)據(jù)\t097
任務描述\t097
知識準備\t098
1. Ajax簡介\t098
2. Ajax訪問服務器的方法\t098
3. JavaScript操作DOM的方法\t099
任務實施\t099
1. 準備服務器端接口頁面\t099
2. 修改客戶端index.html頁面\t100
3. 查看瀏覽效果\t101
任務拓展\t102
項目5?制作分享小程序
項目情景\t104
項目分析\t104
學習目標\t104
(一)知識目標\t104
(二)技能目標\t105
(三)素質目標\t105
知識準備\t105
1. 小程序分享功能基礎\t105
2. chooseImage方法\t107
3. uploadFile方法\t108
4. request方法\t110
5. 配置域名\t111
項目實踐\t113
1. 創(chuàng)建項目并開發(fā)完整的ToDoList項目\t113
2. 開發(fā)分享功能\t114
3. 用戶上傳圖片\t116
4. 用戶自定義圖片分享\t118
5. 完整JS代碼\t118
任務拓展\t119
項目6?制作進階版分享小程序
項目情景\t122
項目分析\t122
學習目標\t122
(一)知識目標\t122
(二)技能目標\t122
(三)素質目標\t123
任務1?制作進階版分享小程序\t123
任務描述\t123
知識準備\t123
1. 注冊友盟賬戶\t123
2. 開通微信地圖\t125
3. getLocation方法\t126
4. showToast方法\t128
5. navigateTo方法\t129
6. map組件\t130
任務實施\t133
1. 友盟對接\t133
2. 使用地圖擴展功能開發(fā)\t137
3. 組件的封裝\t142
任務2?朋友圈小程序的發(fā)布與運維\t144
任務描述\t144
知識準備\t144
1. 版本管理工具\t144
2. npm支持\t150
3. 真機聯(lián)調\t156
4. 小程序更新機制\t162
任務實施\t163
1. 發(fā)布小程序\t163
2. 小程序數(shù)據(jù)統(tǒng)計\t166
3. 友盟數(shù)據(jù)統(tǒng)計\t167
任務拓展\t168
項目7?制作云數(shù)據(jù)庫版和云函數(shù)版朋友圈小程序
項目情景\t170
項目分析\t170
學習目標\t170
(一)知識目標\t170
(二)技能目標\t170
(三)素質目標\t170
任務1?制作云數(shù)據(jù)庫版朋友圈小程序\t171
任務描述\t171
知識準備\t171
1. 云開發(fā)概述和開通\t171
2. 數(shù)據(jù)庫基礎\t172
3. 操作數(shù)據(jù)庫\t174
4. 文件存儲 \t184
5. 調試工具\t186
任務實施\t187
1. 上傳圖片至云存儲\t187
2. 保存圖片地址\t189
任務2?制作云函數(shù)版朋友圈小程序\t215
任務描述\t189
知識準備\t190
1. 云函數(shù)基礎\t190
2. 云函數(shù)的配置\t190
3. 云函數(shù)調試\t193
4. 云函數(shù)常用SDK文檔\t194
任務實施\t201
1. 云函數(shù)創(chuàng)建\t201
2. 云函數(shù)操作數(shù)據(jù)庫\t203
3. 獲取用戶手機號\t205
4. 云函數(shù)的調試\t209
任務拓展\t211
項目8?制作音樂播放器
項目情景\t214
項目分析\t214
學習目標\t215
(一)知識目標\t215
(二)技能目標\t215
(三)素質目標\t215
知識準備\t215
1. 媒體組件――audio\t215
2. slider組件\t218
3. 音頻API――getBackgroundAudioManager\t219
項目實踐\t222
1. 創(chuàng)建項目和初始化項目\t222
2. 音樂播放列表展示\t224
3. 播放頁面的展示\t227
4. 初始化播放器\t231
5. 播放器銷毀\t235
6. 播放器暫停和播放\t235
7. 播放拖曳\t236
8. 音樂播放切換控制\t237
項目拓展\t238
參考文獻\t239