Web前端開發(fā)項(xiàng)目化教程（第2版）

項(xiàng)目1 簡單網(wǎng)頁設(shè)計(jì)\t1
教學(xué)導(dǎo)航\t1
項(xiàng)目描述\t1
1．1 前端開發(fā)語言\t2
1．1．1 認(rèn)識前端開發(fā)語言\t2
1．1．2 開發(fā)環(huán)境\t3
任務(wù)1-1 創(chuàng)建Web項(xiàng)目\t6
1．2 HTML和CSS基礎(chǔ)\t11
1．2．1 HTML常用標(biāo)簽\t11
1．2．2 CSS基礎(chǔ)選擇器\t12
1．2．3 常用CSS樣式\t14
1．2．4 盒模型\t16
任務(wù)1-2 制作“五環(huán)之歌”頁面\t16
1．3 CSS3常用的新增選擇器\t22
任務(wù)1-3 給導(dǎo)航條添加CSS樣式\t23
職業(yè)技能知識點(diǎn)考核1\t27
1．4 浮動和定位\t30
1．4．1 浮動\t30
1．4．2 定位\t33
任務(wù)1-4 制作網(wǎng)頁焦點(diǎn)圖\t33
職業(yè)技能知識點(diǎn)考核2\t37
1．5 HTML5常用的新增標(biāo)簽\t38
任務(wù)1-5 制作一個(gè)常見問題答疑頁面\t40
職業(yè)技能知識點(diǎn)考核3\t42
項(xiàng)目2 文本類網(wǎng)頁設(shè)計(jì)\t43
教學(xué)導(dǎo)航\t43
項(xiàng)目描述\t43
2．1 文本處理\t44
2．1．1 文本陰影\t44
2．1．2 溢出文本處理\t45
任務(wù)2-1 制作網(wǎng)站新聞列表區(qū)\t46
職業(yè)技能知識點(diǎn)考核4\t49
2．2 特殊字體\t49
任務(wù)2-2 制作白居易的《池上》頁面\t50
2．3 表單\t54
2．3．1 表單輸入類型\t54
2．3．2 新的表單元素\t56
2．3．3 新的表單屬性\t56
任務(wù)2-3 制作學(xué)員信息頁\t57
職業(yè)技能知識點(diǎn)考核5\t63
項(xiàng)目3 圖像類網(wǎng)頁設(shè)計(jì)\t65
教學(xué)導(dǎo)航\t65
項(xiàng)目描述\t65
3．1 背景\t66
3．1．1 背景的定義\t66
3．1．2 背景的原點(diǎn)位置\t67
3．1．3 背景的顯示區(qū)域\t69
3．1．4 背景圖像的大小\t70
3．1．5 背景圖像的定位\t71
任務(wù)3-1 制作信紙頁面\t72
職業(yè)技能知識點(diǎn)考核6\t77
3．2 邊框\t78
3．2．1 圓角邊框\t78
3．2．2 圖片邊框\t80
3．2．3 漸變\t82
任務(wù)3-2 制作風(fēng)景頁面\t85
職業(yè)技能知識點(diǎn)考核7\t91
3．3 盒陰影\t91
3．3．1 盒子陰影\t91
3．3．2 溢出處理\t93
任務(wù)3-3 制作文明公約頁面\t93
職業(yè)技能知識點(diǎn)考核8\t96
項(xiàng)目4 媒體雜志類網(wǎng)頁設(shè)計(jì)\t98
教學(xué)導(dǎo)航\t98
項(xiàng)目描述\t98
4．1 多列布局\t99
任務(wù)4-1 制作電子雜志頁面\t100
4．2 簡單動畫\t106
4．2．1 元素的變形\t106
4．2．2 元素的旋轉(zhuǎn)\t106
4．2．3 元素的縮放和翻轉(zhuǎn)\t107
4．2．4 元素的移動\t108
4．2．5 同時(shí)使用多個(gè)變形函數(shù)\t109
4．2．6 定義變形原點(diǎn)\t110
4．2．7 過渡效果\t110
任務(wù)4-2 制作滑動的導(dǎo)航條\t112
任務(wù)4-3 制作照片墻頁面\t115
職業(yè)技能知識點(diǎn)考核9\t121
4．3 音頻和視頻\t122
4．3．1 插入音頻\t122
4．3．2 插入視頻\t123
任務(wù)4-4 制作音頻頁面\t123
職業(yè)技能知識點(diǎn)考核10\t125
項(xiàng)目5　響應(yīng)式布局網(wǎng)站設(shè)計(jì)\t126
教學(xué)導(dǎo)航\t126
項(xiàng)目描述\t126
5．1 響應(yīng)式網(wǎng)站首頁的制作\t127
任務(wù)5-1 制作位置固定的導(dǎo)航條\t127
任務(wù)5-2 制作響應(yīng)式網(wǎng)頁主體部分\t132
任務(wù)5-3 制作兩欄式網(wǎng)頁尾部\t138
5．2 項(xiàng)目整合\t144
職業(yè)技能知識點(diǎn)考核11\t145
項(xiàng)目6　企業(yè)官網(wǎng)設(shè)計(jì)\t146
教學(xué)導(dǎo)航\t146
項(xiàng)目描述\t146
任務(wù)6-1 創(chuàng)建項(xiàng)目\t147
任務(wù)6-2 觀察效果圖\t148
任務(wù)6-3 編寫初始化CSS樣式\t149
任務(wù)6-4 編寫可復(fù)用的header\t149
任務(wù)6-5 編寫可復(fù)用的footer\t151
任務(wù)6-6 首頁引入已編寫好的header\t155
任務(wù)6-7 首頁引入已編寫好的footer\t156
任務(wù)6-8 編寫首頁banner部分\t157
任務(wù)6-9 編寫首頁兒童精品課模塊\t160
任務(wù)6-10 編寫首頁父母充電站模塊\t163
任務(wù)6-11 編寫首頁剩余部分\t165
任務(wù)6-12 “關(guān)于我們”頁面引入公用部分\t167
任務(wù)6-13 正式編寫“關(guān)于我們”頁面\t167
任務(wù)6-14 “聯(lián)系我們”頁面前期準(zhǔn)備\t168
任務(wù)6-15 正式編寫“聯(lián)系我們”頁面\t169
任務(wù)6-16 收尾工作\t172
項(xiàng)目7　移動端推廣項(xiàng)目制作\t174
教學(xué)導(dǎo)航\t174
項(xiàng)目描述\t174
7．1 大圖輪播雛形――Swiper的使用方法\t176
7．2 大圖輪播的修飾\t180
7．3 大圖輪播的個(gè)性化設(shè)計(jì)――API文檔的使用\t181
7．4 真正的大“圖”輪播――用圖片替換文字\t183
7．5 設(shè)置動畫――Swiper Animate的使用方法\t184
任務(wù)7-1　移動端推廣項(xiàng)目準(zhǔn)備工作\t187
任務(wù)7-2　制作簡歷首頁\t190
任務(wù)7-3　制作基本資料頁\t193
任務(wù)7-4　制作榮譽(yù)頁\t195
任務(wù)7-5　制作“我的技能”頁\t197
任務(wù)7-6　制作“我的作品”頁\t199
任務(wù)7-7　制作尾頁\t199
7．6　代碼匯總\t200
項(xiàng)目擴(kuò)展\t204
項(xiàng)目8　使用canvas制作飛機(jī)大戰(zhàn)游戲\t205
教學(xué)導(dǎo)航\t205
項(xiàng)目描述\t205
8．1 canvas簡介\t206
8．2 canvas元素知識\t207
8．3 canvas繪圖基礎(chǔ)\t208
8．4 canvas動畫基礎(chǔ)\t213
8．5 動畫中的碰撞檢測\t215
任務(wù)8-1 游戲功能分析\t219
任務(wù)8-2 圖片預(yù)加載\t220
任務(wù)8-3 繪制滾動背景圖\t222
任務(wù)8-4 創(chuàng)建英雄機(jī)對象\t224
任務(wù)8-5 繪制子彈\t226
任務(wù)8-6 監(jiān)聽鍵盤事件控制英雄機(jī)方向\t232
任務(wù)8-7 繪制敵機(jī)\t237
參考文獻(xiàn)\t251