本書共 8 個(gè)項(xiàng)目，項(xiàng)目 1 ～ 3 主要講解 HTML5、CSS3 和 JavaScript 的基礎(chǔ)知識和使用技巧， 項(xiàng)目 4 介紹移動(dòng)端網(wǎng)頁開發(fā)，項(xiàng)目 5 ～ 7 介紹微信小程序文件結(jié)構(gòu)、頁面邏輯、數(shù)據(jù)綁定和頁面 渲染、小程序發(fā)布流程、小程序云開發(fā)基礎(chǔ)，項(xiàng)目 8 介紹小程序常用組件和 API。部分項(xiàng)目又細(xì) 化為若個(gè)任務(wù)，每個(gè)任務(wù)配有“實(shí)操視頻”和“知識點(diǎn)微課”，實(shí)現(xiàn)理實(shí)一體化。
騰訊云計(jì)算(北京)有限責(zé)任公司是一家長期從事豐富互聯(lián)網(wǎng)用戶的生活、助力企業(yè)數(shù)字化升級的互聯(lián)網(wǎng)公司，公司在基礎(chǔ)軟件服務(wù)、應(yīng)用軟件服務(wù)、網(wǎng)絡(luò)通信等領(lǐng)域積累雄厚的優(yōu)勢。近年來，公司積極拓展和培育教育領(lǐng)域，依托自身的技術(shù)優(yōu)勢，聯(lián)合全國院校積極開發(fā)教育類產(chǎn)品，提升院校相關(guān)專業(yè)的人才培養(yǎng)質(zhì)量，夯實(shí)學(xué)生的技術(shù)和技能基礎(chǔ)，拓展就業(yè)面向，形成良好的口碑。
項(xiàng)目1 制作新聞網(wǎng)站
項(xiàng)目情景………………………………………………………………… 002
項(xiàng)目分析………………………………………………………………… 002
學(xué)習(xí)目標(biāo)………………………………………………………………… 002
知識準(zhǔn)備………………………………………………………………… 003
1. HTML簡介 ……………………………………………… 003
2. HTML元素 ……………………………………………… 004
項(xiàng)目實(shí)施………………………………………………………… 014
1. 創(chuàng)建新聞首頁和二級頁面 ……………………………… 014
2. 添加新聞頁面內(nèi)容 ……………………………………… 014
3. 添加二級頁面內(nèi)容 ……………………………………… 016
4. 實(shí)現(xiàn)頁面跳轉(zhuǎn)功能 ……………………………………… 018
項(xiàng)目拓展………………………………………………………………… 018
項(xiàng)目2 制作購物網(wǎng)站
項(xiàng)目情景………………………………………………………………… 020
項(xiàng)目分析………………………………………………………………… 020
學(xué)習(xí)目標(biāo)………………………………………………………………… 021
知識準(zhǔn)備………………………………………………………………… 021
1. CSS 簡介 ………………………………………………… 021
2. CSS 語法 ………………………………………………… 023
3. CSS 選擇器 ……………………………………………… 023
4. CSS 常用樣式 ………………………………………… 034
項(xiàng)目實(shí)施……………………………………………………………… 044
1. 創(chuàng)建文件 ………………………………………………… 044
2. 鏈接到外部樣式文件 …………………………………… 045
3. 導(dǎo)航欄樣式 ……………………………………………… 045
4. 左邊欄 …………………………………………………… 047
5. 右邊欄 …………………………………………………… 050
6. 底邊欄 …………………………………………………… 052
項(xiàng)目拓展………………………………………………………………… 053
項(xiàng)目3 制作項(xiàng)目提成計(jì)算器
項(xiàng)目情景………………………………………………………………… 056
項(xiàng)目分析………………………………………………………………… 056
學(xué)習(xí)目標(biāo)………………………………………………………………… 057
知識準(zhǔn)備………………………………………………………………… 057
1. JavaScript 簡介 …………………………………………… 057
2. JavaScript 基礎(chǔ)知識 ……………………………………… 058
3. HTML DOM …………………………………………… 069
項(xiàng)目實(shí)施……………………………………………………………… 074
1. 創(chuàng)建項(xiàng)目主體 …………………………………………… 074
2. CSS美化頁面 …………………………………………… 075
3. 業(yè)務(wù)邏輯功能實(shí)現(xiàn) ……………………………………… 077
項(xiàng)目拓展………………………………………………………………… 080
項(xiàng)目4 制作房屋裝飾網(wǎng)站
項(xiàng)目情景………………………………………………………………… 082
項(xiàng)目分析………………………………………………………………… 082
學(xué)習(xí)目標(biāo)………………………………………………………………… 083
知識準(zhǔn)備………………………………………………………………… 083
1. HTML5簡介 ……………………………………………… 083
2. HTML5語義化標(biāo)簽 ……………………………………… 083
3. HTML5表單 …………………………………………… 086
項(xiàng)目實(shí)施……………………………………………………………… 097
1. 創(chuàng)建項(xiàng)目主體 …………………………………………… 097
2. 頂部搜索欄 ……………………………………………… 098
3. 導(dǎo)航欄 …………………………………………………… 099
4. 創(chuàng)建房屋信息/音樂播放區(qū)塊…………………………… 100
項(xiàng)目拓展………………………………………………………………… 101
項(xiàng)目5 體驗(yàn)小程序項(xiàng)目模板
項(xiàng)目情景……………………………………………………………… 104
項(xiàng)目分析……………………………………………………………… 104
學(xué)習(xí)目標(biāo)………………………………………………………………… 104
知識準(zhǔn)備………………………………………………………………… 104
1. 小程序簡介 ……………………………………………… 104
2. 小程序與普通頁面的開發(fā)區(qū)別 ………………………… 105
3. 小程序運(yùn)行環(huán)境 ………………………………………… 105
4. 開發(fā)者工具 ……………………………………………… 105
5.工具類文件 …………………………………………… 113
項(xiàng)目實(shí)施……………………………………………………………… 113
1. 注冊微信公眾平臺賬號 ………………………………… 113
2. 安裝開發(fā)者工具 ………………………………………… 117
3. 創(chuàng)建小程序 ……………………………………………… 117
項(xiàng)目拓展………………………………………………………………… 118
項(xiàng)目6 制作ToDoList小程序
項(xiàng)目情景………………………………………………………………… 120
項(xiàng)目分析………………………………………………………………… 120
學(xué)習(xí)目標(biāo)………………………………………………………………… 121
任務(wù)1 開發(fā)ToDoList小程序 ………………………………………… 122
任務(wù)描述………………………………………………………………… 122
知識準(zhǔn)備………………………………………………………………… 122
1. 小程序視圖組件（view） ……………………………… 122
2. scroll-view組件 ………………………………………… 123
3. 小程序表單組件——輸入框input ……………………… 124
4. 小程序表單組件——按鈕button ……………………… 126
5. 小程序WXML——頁面?zhèn)鲄x:for …………………… 130
6. 小程序WXSS …………………………………………… 132
7. JavaScript中的 Page ()函數(shù) ……………………………… 132
8. JavaScript交互 …………………………………………… 134
9. 小程序API——setData函數(shù) …………………………… 135
任務(wù)實(shí)施……………………………………………………………… 135
1.初始化 …………………………………………………… 135
2.添加輸入框 ……………………………………………… 136
3.添加保存按鈕 …………………………………………… 138
4.把list存儲(chǔ)的數(shù)據(jù)展示在頁面 …………………………… 139
5.完整代碼展示 ………………………………………… 141
任務(wù)2 發(fā)布ToDoList小程序 ………………………………… 143
任務(wù)描述…………………………………………………………… 143
知識準(zhǔn)備…………………………………………………… 143
微信公眾平臺小程序發(fā)布流程 ………………… 143
任務(wù)實(shí)施………………………………………………………… 146
1.開發(fā)者工具使用 ………………………………………… 146
2.微信公眾平臺 …………………………………………… 147
項(xiàng)目拓展………………………………………………………………… 148
項(xiàng)目7 制作擴(kuò)展版ToDoList小程序
項(xiàng)目情景………………………………………………………………… 150
項(xiàng)目分析………………………………………………………………… 150
1.列表的實(shí)現(xiàn) ……………………………………………… 150
2.數(shù)據(jù)的添加 ………………………………………… 151
學(xué)習(xí)目標(biāo)………………………………………………………… 152
3. 任務(wù)1 擴(kuò)展ToDoList小程序功能 …………………… 152
任務(wù)描述………………………………………………………… 152
1. 列表頁面 ………………………………………………… 153
2. 添加內(nèi)容頁面 …………………………………………… 153
3. 詳情頁面 ……………………………………………… 154
知識準(zhǔn)備…………………………………………………………… 154
1. WXML語法 ……………………………………………… 154
2. WXML內(nèi)容組件—— text（文本）標(biāo)簽 ……………… 156
7.WXML內(nèi)容組件——image（圖片）標(biāo)簽 ……………156
8.WXML表單組件——多行輸入框textarea …………… 158
5. wx.navigateTo …………………………………………… 161
6. wx.navigateBack ………………………………………… 163
3.wx.setNavigationBarTitle ………………………………… 163
8. wx.setStorageSync ……………………………………… 164
9. wx.getStorageSync ……………………………………… 165 10. wx.showToast …………………………………………… 166
任務(wù)實(shí)施………………………………………………………………… 167
1. 初始化項(xiàng)目 ……………………………………………… 167
2.列表頁面列表展示 ……………………………………… 168
3.在列表頁面添加頁面入口 ……………………………… 171
4.從列表頁面data.list獲取存儲(chǔ)數(shù)據(jù) ……………………… 172
5.列表頁面整體代碼 ……………………………………… 173
6.添加頁面實(shí)現(xiàn)添加數(shù)據(jù)功能和存儲(chǔ) …………………… 175
7.添加頁面整體代碼展示 ………………………………… 180
8.詳情頁面 ………………………………………………… 183
9. details.js文件 ……………………………………………… 186
任務(wù)2 基于云開發(fā)制作ToDoList小程序 …………………… 187
任務(wù)描述…………………………………………………………… 187
知識準(zhǔn)備………………………………………………………… 187
1.云開發(fā) …………………………………………………… 187
2.數(shù)據(jù)庫 …………………………………………………… 190
3.項(xiàng)目創(chuàng)建和目錄 ………………………………………… 191
4.開發(fā)者工具——云開發(fā)使用 ………………………… 193
任務(wù)實(shí)施……………………………………………………………… 193
1.數(shù)據(jù)庫使用 ……………………………………………… 193
2.數(shù)據(jù)庫在頁面中的使用 ………………………………… 195
3.添加到數(shù)據(jù)庫 …………………………………………… 195
4.整體代碼展示 …………………………………………… 196
項(xiàng)目拓展………………………………………………………………… 197
項(xiàng)目8 指南針小程序
項(xiàng)目情景………………………………………………………………… 200
項(xiàng)目分析………………………………………………………………… 200
學(xué)習(xí)目標(biāo)………………………………………………………………… 201
知識準(zhǔn)備………………………………………………………………… 201
1. 羅盤API——stopCompass ……………………………… 201
2. 羅盤API——startCompass ……………………………… 201
?羅盤API——onCompassChange ………………………… 202
?羅盤API——offCompassChange ………………………… 203
5. CSS的 transition屬性 …………………………………… 203
6. CSS的 animation屬性 ……………………………… 204
項(xiàng)目實(shí)施………………………………………………………… 205
1.創(chuàng)建項(xiàng)目 ………………………………………………… 205
2.方位頁面布局 …………………………………………… 207
3.指南針布局 ……………………………………………… 209
4.指南針效果實(shí)現(xiàn) ………………………………………… 211
5.羅盤銷毀 ………………………………………………… 212
項(xiàng)目拓展………………………………… …… 213
參考文獻(xiàn)………………………………………………………………… 215
書單推薦
