Web前端開(kāi)發(fā)項(xiàng)目化教程
定 價(jià):53 元
叢書(shū)名:浙江省普通高!笆濉毙滦螒B(tài)教材“1+X”證書(shū)(職業(yè)技能等級(jí)證書(shū))配套教材高等職業(yè)教育“互聯(lián)網(wǎng)+”系列精品教材
- 作者:胡平,林雪華,李知菲主編
- 出版時(shí)間:2020/1/1
- ISBN:9787121381256
- 出 版 社:電子工業(yè)出版社
- 中圖法分類(lèi):TP393.092.2
- 頁(yè)碼:251頁(yè)
- 紙張:膠版紙
- 版次:1
- 開(kāi)本:16K
本書(shū)分為8個(gè)項(xiàng)目。項(xiàng)目1-項(xiàng)目5是成長(zhǎng)項(xiàng)目,案例中既有HTML+CSS的基礎(chǔ)技能,更著重介紹HTML5的新標(biāo)簽、CSS3的新屬性。項(xiàng)目6-項(xiàng)目8是選修或拓展內(nèi)容,其中項(xiàng)目6是實(shí)戰(zhàn)項(xiàng)目,由真實(shí)項(xiàng)目的開(kāi)發(fā)者帶著讀者一起開(kāi)發(fā)一個(gè)企業(yè)官網(wǎng);項(xiàng)目7是提升項(xiàng)目,是一個(gè)移動(dòng)端推廣項(xiàng)目;項(xiàng)目8是拓展的游戲開(kāi)發(fā)項(xiàng)目,使用canvas技術(shù)制作飛機(jī)大戰(zhàn)游戲。
胡平 副教授,在金華職業(yè)技術(shù)學(xué)院信息工程學(xué)院從事計(jì)算機(jī)課程的教學(xué)研究工作,完成浙江省教科規(guī)課題等項(xiàng)目十余項(xiàng),主持完成網(wǎng)站建設(shè)等精品課程項(xiàng)目,有豐富的實(shí)踐與教學(xué)經(jīng)驗(yàn)
項(xiàng)目1 簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)t1
教學(xué)導(dǎo)航t1
項(xiàng)目描述t1
1.1 前端開(kāi)發(fā)語(yǔ)言t2
1.1.1 認(rèn)識(shí)前端開(kāi)發(fā)語(yǔ)言t2
1.1.2 開(kāi)發(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)之歌”頁(yè)面t16
1.3 CSS3常用的新增選擇器t22
任務(wù)1-3 給導(dǎo)航條添加CSS樣式t23
職業(yè)技能知識(shí)點(diǎn)考核1t27
1.4 浮動(dòng)和定位t30
1.4.1 浮動(dòng)t30
1.4.2 定位t33
任務(wù)1-4 制作網(wǎng)頁(yè)焦點(diǎn)圖t33
職業(yè)技能知識(shí)點(diǎn)考核2t37
1.5 HTML5常用的新增標(biāo)簽t38
任務(wù)1-5 制作一個(gè)常見(jiàn)問(wèn)題答疑頁(yè)面t40
職業(yè)技能知識(shí)點(diǎn)考核3t42
項(xiàng)目2 文本類(lèi)網(wǎng)頁(yè)設(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è)技能知識(shí)點(diǎn)考核4t49
2.2 特殊字體t49
任務(wù)2-2 制作白居易的《池上》頁(yè)面t50
2.3 表單t54
2.3.1 表單輸入類(lèi)型t54
2.3.2 新的表單元素t56
2.3.3 新的表單屬性t56
任務(wù)2-3 制作學(xué)員信息頁(yè)t57
職業(yè)技能知識(shí)點(diǎn)考核5t63
項(xiàng)目3 圖像類(lèi)網(wǎng)頁(yè)設(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 制作信紙頁(yè)面t72
職業(yè)技能知識(shí)點(diǎn)考核6t77
3.2 邊框t78
3.2.1 圓角邊框t78
3.2.2 圖片邊框t80
3.2.3 漸變t82
任務(wù)3-2 制作風(fēng)景頁(yè)面t85
職業(yè)技能知識(shí)點(diǎn)考核7t91
3.3 盒陰影t91
3.3.1 盒子陰影t91
3.3.2 溢出處理t93
任務(wù)3-3 制作文明公約頁(yè)面t93
職業(yè)技能知識(shí)點(diǎn)考核8t96
項(xiàng)目4 媒體雜志類(lèi)網(wǎng)頁(yè)設(shè)計(jì)t98
教學(xué)導(dǎo)航t98
項(xiàng)目描述t98
4.1 多列布局t99
任務(wù)4-1 制作電子雜志頁(yè)面t100
4.2 簡(jiǎn)單動(dòng)畫(huà)t106
4.2.1 元素的變形t106
4.2.2 元素的旋轉(zhuǎn)t106
4.2.3 元素的縮放和翻轉(zhuǎn)t107
4.2.4 元素的移動(dòng)t108
4.2.5 同時(shí)使用多個(gè)變形函數(shù)t109
4.2.6 定義變形原點(diǎn)t110
4.2.7 過(guò)渡效果t110
任務(wù)4-2 制作滑動(dòng)的導(dǎo)航條t112
任務(wù)4-3 制作照片墻頁(yè)面t115
職業(yè)技能知識(shí)點(diǎn)考核9t121
4.3 音頻和視頻t122
4.3.1 插入音頻t122
4.3.2 插入視頻t123
任務(wù)4-4 制作音頻頁(yè)面t123
職業(yè)技能知識(shí)點(diǎn)考核10t125
項(xiàng)目5 響應(yīng)式布局網(wǎng)站設(shè)計(jì)t126
教學(xué)導(dǎo)航t126
項(xiàng)目描述t126
5.1 響應(yīng)式網(wǎng)站首頁(yè)的制作t127
任務(wù)5-1 制作位置固定的導(dǎo)航條t127
任務(wù)5-2 制作響應(yīng)式網(wǎng)頁(yè)主體部分t132
任務(wù)5-3 制作兩欄式網(wǎng)頁(yè)尾部t138
5.2 項(xiàng)目整合t144
職業(yè)技能知識(shí)點(diǎn)考核11t145
項(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 編寫(xiě)初始化CSS樣式t149
任務(wù)6-4 編寫(xiě)可復(fù)用的headert149
任務(wù)6-5 編寫(xiě)可復(fù)用的footert151
任務(wù)6-6 首頁(yè)引入已編寫(xiě)好的headert155
任務(wù)6-7 首頁(yè)引入已編寫(xiě)好的footert156
任務(wù)6-8 編寫(xiě)首頁(yè)banner部分t157
任務(wù)6-9 編寫(xiě)首頁(yè)兒童精品課模塊t160
任務(wù)6-10 編寫(xiě)首頁(yè)父母充電站模塊t163
任務(wù)6-11 編寫(xiě)首頁(yè)剩余部分t165
任務(wù)6-12 “關(guān)于我們”頁(yè)面引入公用部分t167
任務(wù)6-13 正式編寫(xiě)“關(guān)于我們”頁(yè)面t167
任務(wù)6-14 “聯(lián)系我們”頁(yè)面前期準(zhǔn)備t168
任務(wù)6-15 正式編寫(xiě)“聯(lián)系我們”頁(yè)面t169
任務(wù)6-16 收尾工作t172
項(xiàng)目7 移動(dòng)端推廣項(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è)置動(dòng)畫(huà)――Swiper Animate的使用方法t184
任務(wù)7-1 移動(dòng)端推廣項(xiàng)目準(zhǔn)備工作t187
任務(wù)7-2 制作簡(jiǎn)歷首頁(yè)t190
任務(wù)7-3 制作基本資料頁(yè)t193
任務(wù)7-4 制作榮譽(yù)頁(yè)t195
任務(wù)7-5 制作“我的技能”頁(yè)t197
任務(wù)7-6 制作“我的作品”頁(yè)t199
任務(wù)7-7 制作尾頁(yè)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簡(jiǎn)介t206
8.2 canvas元素知識(shí)t207
8.3 canvas繪圖基礎(chǔ)t208
8.4 canvas動(dòng)畫(huà)基礎(chǔ)t213
8.5 動(dòng)畫(huà)中的碰撞檢測(cè)t215
任務(wù)8-1 游戲功能分析t219
任務(wù)8-2 圖片預(yù)加載t220
任務(wù)8-3 繪制滾動(dòng)背景圖t222
任務(wù)8-4 創(chuàng)建英雄機(jī)對(duì)象t224
任務(wù)8-5 繪制子彈t226
任務(wù)8-6 監(jiān)聽(tīng)鍵盤(pán)事件控制英雄機(jī)方向t232
任務(wù)8-7 繪制敵機(jī)t237
參考文獻(xiàn)t251