本書(shū)共 8 個(gè)項(xiàng)目，項(xiàng)目 1 ～ 3 主要講解 HTML5、CSS3 和 JavaScript 的基礎(chǔ)知識(shí)和使用技巧， 項(xiàng)目 4 介紹移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)，項(xiàng)目 5 ～ 7 介紹微信小程序文件結(jié)構(gòu)、頁(yè)面邏輯、數(shù)據(jù)綁定和頁(yè)面 渲染、小程序發(fā)布流程、小程序云開(kāi)發(fā)基礎(chǔ)，項(xiàng)目 8 介紹小程序常用組件和 API。部分項(xiàng)目又細(xì) 化為若個(gè)任務(wù)，每個(gè)任務(wù)配有“實(shí)操視頻”和“知識(shí)點(diǎn)微課”，實(shí)現(xiàn)理實(shí)一體化。
騰訊云計(jì)算(北京)有限責(zé)任公司是一家長(zhǎng)期從事豐富互聯(lián)網(wǎng)用戶的生活、助力企業(yè)數(shù)字化升級(jí)的互聯(lián)網(wǎng)公司，公司在基礎(chǔ)軟件服務(wù)、應(yīng)用軟件服務(wù)、網(wǎng)絡(luò)通信等領(lǐng)域積累雄厚的優(yōu)勢(shì)。近年來(lái)，公司積極拓展和培育教育領(lǐng)域，依托自身的技術(shù)優(yōu)勢(shì)，聯(lián)合全國(guó)院校積極開(kāi)發(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
知識(shí)準(zhǔn)備………………………………………………………………… 003
1. HTML簡(jiǎn)介 ……………………………………………… 003
2. HTML元素 ……………………………………………… 004
項(xiàng)目實(shí)施………………………………………………………… 014
1. 創(chuàng)建新聞首頁(yè)和二級(jí)頁(yè)面 ……………………………… 014
2. 添加新聞頁(yè)面內(nèi)容 ……………………………………… 014
3. 添加二級(jí)頁(yè)面內(nèi)容 ……………………………………… 016
4. 實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能 ……………………………………… 018
項(xiàng)目拓展………………………………………………………………… 018
項(xiàng)目2 制作購(gòu)物網(wǎng)站
項(xiàng)目情景………………………………………………………………… 020
項(xiàng)目分析………………………………………………………………… 020
學(xué)習(xí)目標(biāo)………………………………………………………………… 021
知識(shí)準(zhǔn)備………………………………………………………………… 021
1. CSS 簡(jiǎn)介 ………………………………………………… 021
2. CSS 語(yǔ)法 ………………………………………………… 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
知識(shí)準(zhǔn)備………………………………………………………………… 057
1. JavaScript 簡(jiǎn)介 …………………………………………… 057
2. JavaScript 基礎(chǔ)知識(shí) ……………………………………… 058
3. HTML DOM …………………………………………… 069
項(xiàng)目實(shí)施……………………………………………………………… 074
1. 創(chuàng)建項(xiàng)目主體 …………………………………………… 074
2. CSS美化頁(yè)面 …………………………………………… 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
知識(shí)準(zhǔn)備………………………………………………………………… 083
1. HTML5簡(jiǎn)介 ……………………………………………… 083
2. HTML5語(yǔ)義化標(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)建房屋信息/音樂(lè)播放區(qū)塊…………………………… 100
項(xiàng)目拓展………………………………………………………………… 101
項(xiàng)目5 體驗(yàn)小程序項(xiàng)目模板
項(xiàng)目情景……………………………………………………………… 104
項(xiàng)目分析……………………………………………………………… 104
學(xué)習(xí)目標(biāo)………………………………………………………………… 104
知識(shí)準(zhǔn)備………………………………………………………………… 104
1. 小程序簡(jiǎn)介 ……………………………………………… 104
2. 小程序與普通頁(yè)面的開(kāi)發(fā)區(qū)別 ………………………… 105
3. 小程序運(yùn)行環(huán)境 ………………………………………… 105
4. 開(kāi)發(fā)者工具 ……………………………………………… 105
5.工具類文件 …………………………………………… 113
項(xiàng)目實(shí)施……………………………………………………………… 113
1. 注冊(cè)微信公眾平臺(tái)賬號(hào) ………………………………… 113
2. 安裝開(kāi)發(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 開(kāi)發(fā)ToDoList小程序 ………………………………………… 122
任務(wù)描述………………………………………………………………… 122
知識(shí)準(zhǔn)備………………………………………………………………… 122
1. 小程序視圖組件（view） ……………………………… 122
2. scroll-view組件 ………………………………………… 123
3. 小程序表單組件——輸入框input ……………………… 124
4. 小程序表單組件——按鈕button ……………………… 126
5. 小程序WXML——頁(yè)面?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ù)展示在頁(yè)面 …………………………… 139
5.完整代碼展示 ………………………………………… 141
任務(wù)2 發(fā)布ToDoList小程序 ………………………………… 143
任務(wù)描述…………………………………………………………… 143
知識(shí)準(zhǔn)備…………………………………………………… 143
微信公眾平臺(tái)小程序發(fā)布流程 ………………… 143
任務(wù)實(shí)施………………………………………………………… 146
1.開(kāi)發(fā)者工具使用 ………………………………………… 146
2.微信公眾平臺(tái) …………………………………………… 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. 列表頁(yè)面 ………………………………………………… 153
2. 添加內(nèi)容頁(yè)面 …………………………………………… 153
3. 詳情頁(yè)面 ……………………………………………… 154
知識(shí)準(zhǔn)備…………………………………………………………… 154
1. WXML語(yǔ)法 ……………………………………………… 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.列表頁(yè)面列表展示 ……………………………………… 168
3.在列表頁(yè)面添加頁(yè)面入口 ……………………………… 171
4.從列表頁(yè)面data.list獲取存儲(chǔ)數(shù)據(jù) ……………………… 172
5.列表頁(yè)面整體代碼 ……………………………………… 173
6.添加頁(yè)面實(shí)現(xiàn)添加數(shù)據(jù)功能和存儲(chǔ) …………………… 175
7.添加頁(yè)面整體代碼展示 ………………………………… 180
8.詳情頁(yè)面 ………………………………………………… 183
9. details.js文件 ……………………………………………… 186
任務(wù)2 基于云開(kāi)發(fā)制作ToDoList小程序 …………………… 187
任務(wù)描述…………………………………………………………… 187
知識(shí)準(zhǔn)備………………………………………………………… 187
1.云開(kāi)發(fā) …………………………………………………… 187
2.數(shù)據(jù)庫(kù) …………………………………………………… 190
3.項(xiàng)目創(chuàng)建和目錄 ………………………………………… 191
4.開(kāi)發(fā)者工具——云開(kāi)發(fā)使用 ………………………… 193
任務(wù)實(shí)施……………………………………………………………… 193
1.數(shù)據(jù)庫(kù)使用 ……………………………………………… 193
2.數(shù)據(jù)庫(kù)在頁(yè)面中的使用 ………………………………… 195
3.添加到數(shù)據(jù)庫(kù) …………………………………………… 195
4.整體代碼展示 …………………………………………… 196
項(xiàng)目拓展………………………………………………………………… 197
項(xiàng)目8 指南針小程序
項(xiàng)目情景………………………………………………………………… 200
項(xiàng)目分析………………………………………………………………… 200
學(xué)習(xí)目標(biāo)………………………………………………………………… 201
知識(shí)準(zhǔn)備………………………………………………………………… 201
1. 羅盤(pán)API——stopCompass ……………………………… 201
2. 羅盤(pán)API——startCompass ……………………………… 201
?羅盤(pán)API——onCompassChange ………………………… 202
?羅盤(pán)API——offCompassChange ………………………… 203
5. CSS的 transition屬性 …………………………………… 203
6. CSS的 animation屬性 ……………………………… 204
項(xiàng)目實(shí)施………………………………………………………… 205
1.創(chuàng)建項(xiàng)目 ………………………………………………… 205
2.方位頁(yè)面布局 …………………………………………… 207
3.指南針布局 ……………………………………………… 209
4.指南針效果實(shí)現(xiàn) ………………………………………… 211
5.羅盤(pán)銷(xiāo)毀 ………………………………………………… 212
項(xiàng)目拓展………………………………… …… 213
參考文獻(xiàn)………………………………………………………………… 215
新書(shū)資訊