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