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

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