Web前端開發項目化教程（第2版）

項目1 簡單網頁設計 1
教學導航 1
項目描述 1
1.1 前端開發語言 2
1.1.1 認識前端開發語言 2
1.1.2 開發環境 3
任務1-1 創建Web項目 6
1.2 HTML和CSS基礎 11
1.2.1 HTML常用標簽 11
1.2.2 CSS基礎選擇器 12
1.2.3 常用CSS樣式 14
1.2.4 盒模型 16
任務1-2 製作“五環之歌”頁面 16
1.3 CSS3常用的新增選擇器 22
任務1-3 給導航條添加CSS樣式 23
職業技能知識點考核1 27
1.4 浮動和定位 30
1.4.1 浮動 30
1.4.2 定位 33
任務1-4 製作網頁焦點圖 33
職業技能知識點考核2 37
1.5 HTML5常用的新增標簽 38
任務1-5 製作一個常見問題答疑頁面 40
職業技能知識點考核3 42

項目2 文本類網頁設計 43
教學導航 43
項目描述 43
2.1 文本處理 44
2.1.1 文本陰影 44
2.1.2 溢出文本處理 45
任務2-1 製作網站新聞列表區 46
職業技能知識點考核4 49
2.2 特殊字體 49
任務2-2 製作白居易的《池上》頁面 50
2.3 表單 54
2.3.1 表單輸入類型 54
2.3.2 新的表單元素 56
2.3.3 新的表單屬性 56
任務2-3 製作學員信息頁 57
職業技能知識點考核5 63

項目3 圖像類網頁設計 65
教學導航 65
項目描述 65
3.1 背景 66
3.1.1 背景的定義 66
3.1.2 背景的原點位置 67
3.1.3 背景的顯示區域 69
3.1.4 背景圖像的大小 70
3.1.5 背景圖像的定位 71
任務3-1 製作信紙頁面 72
職業技能知識點考核6 77
3.2 邊框 78
3.2.1 圓角邊框 78
3.2.2 圖片邊框 80
3.2.3 漸變 82
任務3-2 製作風景頁面 85
職業技能知識點考核7 91
3.3 盒陰影 91
3.3.1 盒子陰影 91
3.3.2 溢出處理 93
任務3-3 製作文明公約頁面 93
職業技能知識點考核8 96

項目4 媒體雜誌類網頁設計 98
教學導航 98
項目描述 98
4.1 多列佈局 99
任務4-1 製作電子雜誌頁面 100
4.2 簡單動畫 106
4.2.1 元素的變形 106
4.2.2 元素的旋轉 106
4.2.3 元素的縮放和翻轉 107
4.2.4 元素的移動 108
4.2.5 同時使用多個變形函數 109
4.2.6 定義變形原點 110
4.2.7 過渡效果 110
任務4-2 製作滑動的導航條 112
任務4-3 製作照片牆頁面 115
職業技能知識點考核9 121
4.3 音頻和視頻 122
4.3.1 插入音頻 122
4.3.2 插入視頻 123
任務4-4 製作音頻頁面 123
職業技能知識點考核10 125

項目5　響應式佈局網站設計 126
教學導航 126
項目描述 126
5.1 響應式網站首頁的製作 127
任務5-1 製作位置固定的導航條 127
任務5-2 製作響應式網頁主體部分 132
任務5-3 製作兩欄式網頁尾部 138
5.2 項目整合 144
職業技能知識點考核11 145

項目6　企業官網設計 146
教學導航 146
項目描述 146
任務6-1 創建項目 147
任務6-2 觀察效果圖 148
任務6-3 編寫初始化CSS樣式 149
任務6-4 編寫可復用的header 149
任務6-5 編寫可復用的footer 151
任務6-6 首頁引入已編寫好的header 155
任務6-7 首頁引入已編寫好的footer 156
任務6-8 編寫首頁banner部分 157
任務6-9 編寫首頁兒童精品課模塊 160
任務6-10 編寫首頁父母充電站模塊 163
任務6-11 編寫首頁剩餘部分 165
任務6-12 “關於我們”頁面引入公用部分 167
任務6-13 正式編寫“關於我們”頁面 167
任務6-14 “聯系我們”頁面前期準備 168
任務6-15 正式編寫“聯系我們”頁面 169
任務6-16 收尾工作 172

項目7　移動端推廣項目製作 174
教學導航 174
項目描述 174
7.1 大圖輪播雛形——Swiper的使用方法 176
7.2 大圖輪播的修飾 180
7.3 大圖輪播的個性化設計——API文檔的使用 181
7.4 真正的大“圖”輪播——用圖片替換文字 183
7.5 設置動畫——Swiper Animate的使用方法 184
任務7-1　移動端推廣項目準備工作 187
任務7-2　製作簡歷首頁 190
任務7-3　製作基本資料頁 193
任務7-4　製作榮譽頁 195
任務7-5　製作“我的技能”頁 197
任務7-6　製作“我的作品”頁 199
任務7-7　製作尾頁 199
7.6　代碼匯總 200
項目擴展 204

項目8　使用canvas製作飛機大戰遊戲 205
教學導航 205
項目描述 205
8.1 canvas簡介 206
8.2 canvas元素知識 207
8.3 canvas繪圖基礎 208
8.4 canvas動畫基礎 213
8.5 動畫中的碰撞檢測 215
任務8-1 遊戲功能分析 219
任務8-2 圖片預加載 220
任務8-3 繪制滾動背景圖 222
任務8-4 創建英雄機對象 224
任務8-5 繪制子彈 226
任務8-6 監聽鍵盤事件控制英雄機方向 232
任務8-7 繪制敵機 237
參考文獻 251