本書(shū)按照Web前端工程師崗位技能要求，以真實(shí)項(xiàng)目組織內(nèi)容，由淺入深地講解了如何利用HTML5和CSS3等網(wǎng)頁(yè)制作技術(shù)制作網(wǎng)站。本書(shū)共分為7個(gè)項(xiàng)目，項(xiàng)目1為Web前端基礎(chǔ)的相關(guān)介紹；項(xiàng)目2和項(xiàng)目3包含HTML和CSS的基礎(chǔ)知識(shí)、常用標(biāo)簽、CSS基礎(chǔ)語(yǔ)法及選擇器等內(nèi)容；項(xiàng)目4和項(xiàng)目5介紹了HTML5語(yǔ)義化標(biāo)簽、CSS3的新特性等；項(xiàng)目6主要介紹JavaScript編程基礎(chǔ)等；項(xiàng)目7為綜合實(shí)踐。全書(shū)以任務(wù)為導(dǎo)向，通過(guò)多個(gè)項(xiàng)目將知識(shí)點(diǎn)貫穿起來(lái)，并輔以實(shí)例，以此激發(fā)讀者的學(xué)習(xí)興趣。
本書(shū)可作為高等職業(yè)院校計(jì)算機(jī)相關(guān)專業(yè)的教材，也可作為計(jì)算機(jī)行業(yè)相關(guān)從業(yè)人員的自學(xué)參考書(shū)。
1.內(nèi)容豐富、組織合理
本書(shū)按照由淺入深的順序，結(jié)合職業(yè)教育背景下的軟件技術(shù)專業(yè)學(xué)生的特點(diǎn)，以碎片化“知識(shí)點(diǎn)”為單元，采用案例驅(qū)動(dòng)、項(xiàng)目導(dǎo)向，通過(guò)理論與實(shí)踐相結(jié)合的方式，便于讀者在學(xué)習(xí)知識(shí)的同時(shí)進(jìn)行項(xiàng)目實(shí)踐。
2.結(jié)合實(shí)際、突出實(shí)踐
本書(shū)由企業(yè)工程師精心設(shè)計(jì)了大量示例和項(xiàng)目實(shí)訓(xùn)，體現(xiàn)了“教、學(xué)、做一體化”的思想，方便讀者快速上手，培養(yǎng)讀者實(shí)際操作的動(dòng)手能力。示例和項(xiàng)目實(shí)踐有詳細(xì)的代碼說(shuō)明和實(shí)踐步驟解釋。
3.資源豐富、立體教學(xué)
本書(shū)配備了豐富的立體化教學(xué)資源，包括教學(xué)課件、案例代碼、習(xí)題及答案等。
4.校企合作“雙元”模式教材
本書(shū)由成都中慧科技有限公司組織，邀請(qǐng)實(shí)戰(zhàn)經(jīng)驗(yàn)豐富的IT專家參與教材建設(shè)，將最前沿的技術(shù)引入到教材中，保證內(nèi)容新穎實(shí)用。教材主編積累了豐富的教學(xué)經(jīng)驗(yàn)，他們依據(jù)先進(jìn)的教育理念，結(jié)合全國(guó)職業(yè)院校實(shí)際教學(xué)情況以及學(xué)生專業(yè)水平，與IT專家共同探討培養(yǎng)目標(biāo)、內(nèi)容、框架，基于不同的教學(xué)情境，開(kāi)發(fā)出新一代信息技術(shù)優(yōu)質(zhì)教材。
李洪建
副教授，山東省高等學(xué)校教師，國(guó)家技能鑒定高級(jí)考評(píng)員、全國(guó)高職計(jì)算機(jī)基礎(chǔ)學(xué)會(huì)電子信息委員、山東省計(jì)算機(jī)職業(yè)教育教學(xué)指導(dǎo)委員會(huì)委員、山東省物聯(lián)網(wǎng)職業(yè)教育集團(tuán)副秘書(shū)長(zhǎng)。近五年，獲國(guó)家教學(xué)成果獎(jiǎng)二等獎(jiǎng)1項(xiàng)，省教學(xué)成果獎(jiǎng)特等獎(jiǎng)1項(xiàng)、一等獎(jiǎng)2項(xiàng)，山東省教育科學(xué)研究?jī)?yōu)秀成果二等獎(jiǎng)1項(xiàng)，指導(dǎo)學(xué)生獲國(guó)賽一等獎(jiǎng)2項(xiàng)，主持省教改、省軟科學(xué)、省高�？萍迹ㄈ宋模┑日n題7項(xiàng)，授權(quán)實(shí)用新型專利2項(xiàng)，軟件著作權(quán)2個(gè)。
游學(xué)軍
碩士，畢業(yè)于南京郵電大學(xué)，現(xiàn)任職于江蘇海事職業(yè)技術(shù)學(xué)院信息工程學(xué)院，主要研究方向?yàn)檐浖_(kāi)發(fā)，一直承擔(dān)Java開(kāi)發(fā)、前端開(kāi)發(fā)相關(guān)核心課程的教學(xué)工作。擔(dān)任過(guò)移動(dòng)互聯(lián)網(wǎng)應(yīng)用軟件開(kāi)發(fā)、Web應(yīng)用開(kāi)發(fā)等全國(guó)職業(yè)院校技能大賽賽項(xiàng)裁判員，指導(dǎo)學(xué)生參加江蘇省職業(yè)院校技能大賽獲得一等獎(jiǎng)、指導(dǎo)學(xué)生參加全國(guó)藍(lán)橋杯軟件大賽獲得二等獎(jiǎng)，指導(dǎo)學(xué)生參加中國(guó)軟件杯大賽獲得三等獎(jiǎng)等。主持完成江蘇省教育技術(shù)研究重點(diǎn)課題2項(xiàng)，參與多項(xiàng)省級(jí)課題的研究。
李真
碩士研究生，山東科技職業(yè)學(xué)院信息工程系中級(jí)講師，從教8年，所建課程入選2017年度、2019年度、2020年度“山東終身學(xué)習(xí)在線”資源庫(kù)課程，其中2019年度課程被評(píng)選為“山東省優(yōu)秀課程資源”.曾獲山東省第六屆“超星杯”青年教師教學(xué)能力大賽二等獎(jiǎng)，第八屆“超星杯”青年教師教學(xué)能力大賽三等獎(jiǎng)等等。
劉輝
計(jì)算機(jī)軟件技術(shù)專業(yè)副教授。2017年獲遼寧省信息技術(shù)優(yōu)秀科研成果二等獎(jiǎng)、遼寧省職業(yè)院校技能大賽（高職組）軟件測(cè)試賽項(xiàng)一等獎(jiǎng)。參編計(jì)算機(jī)專業(yè)教材3本。
朱曉彥
安徽工業(yè)經(jīng)濟(jì)職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與藝術(shù)學(xué)院副院長(zhǎng)，具有美國(guó)紅帽認(rèn)證工程師、虛擬化工程師、微軟認(rèn)證專家、中國(guó)開(kāi)源推進(jìn)聯(lián)盟Linux認(rèn)證講師、南京五十五所云計(jì)算金牌講師、工信部云計(jì)算工程師等認(rèn)證資格。2020年榮獲省級(jí)技術(shù)技能大師稱號(hào)，并設(shè)立技術(shù)技能大師工作室；2014年榮獲安徽省教育廳省級(jí)教壇新秀稱號(hào)，并于2013年獲得美國(guó)紅帽軟件公司頒發(fā)的中國(guó)區(qū)優(yōu)秀教育貢獻(xiàn)獎(jiǎng)；獲得教科研獎(jiǎng)勵(lì)多項(xiàng)。長(zhǎng)期擔(dān)任安徽省職業(yè)技能大賽中職組企業(yè)網(wǎng)搭建與應(yīng)用項(xiàng)目裁判長(zhǎng)，并擔(dān)任安徽省中小學(xué)現(xiàn)代教育技術(shù)裝備技能大賽專家裁判。
目錄
項(xiàng)目1 Web前端基礎(chǔ) 1
任務(wù)1 認(rèn)識(shí)Web前端 1
1.1.1 Web前端發(fā)展歷史和前端主要技術(shù)簡(jiǎn)介 1
1.1.2 Web前端學(xué)習(xí)路線 2
任務(wù)2 開(kāi)發(fā)準(zhǔn)備 3
1.2.1 主流瀏覽器 3
1.2.2 開(kāi)發(fā)工具 3
小 結(jié) 6
習(xí) 題 6
項(xiàng)目2 HTML快速入門(mén) 8
任務(wù)1 我的第 一個(gè)頁(yè)面 8
2.1.1 案例描述 8
2.1.2 知識(shí)儲(chǔ)備 9
2.1.3 需求分析 13
2.1.4 案例實(shí)施 14
任務(wù)2 每日新聞列表 15
2.2.1 案例描述 15
2.2.2 知識(shí)儲(chǔ)備 15
2.2.3 需求分析 22
2.2.4 案例實(shí)施 22
任務(wù)3 課程信息表 24
2.3.1 案例描述 24
2.3.2 知識(shí)儲(chǔ)備 25
2.3.3 需求分析 27
2.3.4 案例實(shí)施 28
任務(wù)4 校園調(diào)查表 29
2.4.1 案例描述 29
2.4.2 知識(shí)儲(chǔ)備 30
2.4.3 需求分析 35
2.4.4 案例實(shí)施 35
任務(wù)5 項(xiàng)目實(shí)戰(zhàn)——網(wǎng)站登錄頁(yè) 37
2.5.1 案例描述 37
2.5.2 效果展示 37
2.5.3 需求分析 37
2.5.4 案例實(shí)施 38
小 結(jié) 39
習(xí) 題 39
項(xiàng)目3 CSS（層迭樣式表） 41
任務(wù)1 新聞詳情頁(yè)制作 41
3.1.1 案例描述 41
3.1.2 知識(shí)儲(chǔ)備 41
3.1.3 需求分析 65
3.1.4 案例實(shí)施 66
任務(wù)2 個(gè)人相冊(cè)制作 70
3.2.1 案例描述 70
3.2.2 知識(shí)儲(chǔ)備 71
3.2.3 需求分析 77
3.2.4 案例實(shí)施 77
任務(wù)3 商城列表布局 79
3.3.1 案例描述 79
3.3.2 知識(shí)儲(chǔ)備 80
3.3.3 需求分析 83
3.3.4 案例實(shí)施 83
任務(wù)4 常見(jiàn)網(wǎng)站側(cè)邊導(dǎo)航欄的制作 88
3.4.1 案例描述 88
3.4.2 知識(shí)儲(chǔ)備 89
3.4.3 需求分析 91
3.4.4 案例實(shí)施 91
任務(wù)5 項(xiàng)目實(shí)戰(zhàn)——商城首頁(yè)制作 95
3.5.1 案例描述 95
3.5.2 需求分析 96
3.5.3 案例實(shí)施 97
小 結(jié) 104
習(xí) 題 104
項(xiàng)目4 HTML5構(gòu)建網(wǎng)站 106
任務(wù)1 視頻/音頻展示網(wǎng) 106
4.1.1 案例描述 106
4.1.2 知識(shí)儲(chǔ)備 107
4.1.3 需求分析 110
4.1.4 案例實(shí)施 110
任務(wù)2 員工入職信息錄入 113
4.2.1 案例描述 113
4.2.2 知識(shí)儲(chǔ)備 114
4.2.3 需求分析 116
4.2.4 案例實(shí)施 117
任務(wù)3 項(xiàng)目實(shí)戰(zhàn)——學(xué)校網(wǎng)站 123
4.3.1 案例描述 123
4.3.2 需求分析 124
4.3.3 案例實(shí)施 125
小 結(jié) 133
習(xí) 題 133
項(xiàng)目5 CSS3新特性 135
任務(wù)1 照片墻 135
5.1.1 案例描述 135
5.1.2 知識(shí)儲(chǔ)備 136
5.1.3 需求分析 139
5.1.4 案例實(shí)施 140
任務(wù)2 旅游網(wǎng)首頁(yè)（響應(yīng)式） 142
5.2.1 案例描述 142
5.2.2 知識(shí)儲(chǔ)備 144
5.2.3 需求分析 146
5.2.4 案例實(shí)施 147
任務(wù)3 個(gè)人相冊(cè) 157
5.3.1 案例描述 157
5.3.2 知識(shí)儲(chǔ)備 157
5.3.3 需求分析 159
5.3.4 案例實(shí)施 160
任務(wù)4 暴怒的小豬 162
5.4.1 案例描述 162
5.4.2 知識(shí)儲(chǔ)備 162
5.4.3 需求分析 164
5.4.4 案例實(shí)施 164
任務(wù)5 3D相冊(cè)環(huán) 168
5.5.1 案例描述 168
5.5.2 知識(shí)儲(chǔ)備 168
5.5.3 需求分析 169
5.5.4 案例實(shí)施 169
任務(wù)6 項(xiàng)目實(shí)戰(zhàn)——藝展網(wǎng)站 172
5.6.1 案例描述 172
5.6.2 效果展示 172
5.6.3 需求分析 172
5.6.4 案例實(shí)施 173
小 結(jié) 181
習(xí) 題 181
項(xiàng)目6 JavaScript編程基礎(chǔ) 183
任務(wù)1 抽獎(jiǎng)活動(dòng) 183
6.1.1 案例描述 183
6.1.2 知識(shí)儲(chǔ)備 184
6.1.3 需求分析 189
6.1.4 案例實(shí)施 189
任務(wù)2 公司數(shù)據(jù)加密 192
6.2.1 案例描述 192
6.2.2 知識(shí)儲(chǔ)備 192
6.2.3 需求分析 195
6.2.4 案例實(shí)施 195
任務(wù)3 找色塊游戲 196
6.3.1 案例描述 196
6.3.2 知識(shí)儲(chǔ)備 196
6.3.3 需求分析 198
6.3.4 案例實(shí)施 198
任務(wù)4 用戶信息錄入 200
6.4.1 案例描述 200
6.4.2 知識(shí)儲(chǔ)備 201
6.4.3 需求分析 204
6.4.4 案例實(shí)施 204
任務(wù)5 項(xiàng)目實(shí)戰(zhàn)——寵物世界網(wǎng)站 209
6.5.1 案例描述 209
6.5.2 需求分析 209
6.5.3 案例實(shí)施 209
小 結(jié) 220
習(xí) 題 220
項(xiàng)目7 綜合項(xiàng)目——環(huán)保網(wǎng)站 222
7.1 項(xiàng)目介紹 222
7.2 需求分析 222
7.3 頁(yè)面設(shè)計(jì) 224
7.4 項(xiàng)目實(shí)施 224
書(shū)單推薦
