結(jié)合國(guó)內(nèi)流行的Web前端開(kāi)發(fā)工程師崗位需求，將崗位技能培養(yǎng)和專業(yè)知識(shí)學(xué)習(xí)融入到實(shí)驗(yàn)項(xiàng)目中去，實(shí)現(xiàn)在實(shí)踐項(xiàng)目掌握與靈活運(yùn)用。全書根據(jù)Web前端開(kāi)發(fā)工程師所必備知識(shí)與能力要求統(tǒng)籌規(guī)劃了12次實(shí)驗(yàn)，精心設(shè)計(jì)了33個(gè)實(shí)驗(yàn)項(xiàng)目。實(shí)驗(yàn)與實(shí)踐教材在改版中始終堅(jiān)持“項(xiàng)目化設(shè)計(jì)、案例式驅(qū)動(dòng)、過(guò)程式指導(dǎo)、探究式實(shí)踐”的原則，合理編排實(shí)驗(yàn)內(nèi)容，循序漸進(jìn)，并將CSS技術(shù)貫穿所有實(shí)驗(yàn)項(xiàng)目中，實(shí)現(xiàn)HTML、CSS、DIV、JavaScript、DOM完好地融合。通過(guò)真實(shí)案例深入剖析網(wǎng)頁(yè)布局的思路和方法，啟發(fā)式引導(dǎo)學(xué)生自主地去完成實(shí)驗(yàn)項(xiàng)目。

　　本書第2版是作者在從事多年Web前端開(kāi)發(fā)技術(shù)教學(xué)研究的基礎(chǔ)上，結(jié)合多年來(lái)幾十所高等院校使用反饋的意見(jiàn)與建議改編而成的，同時(shí)本書作為“第四屆中國(guó)大學(xué)出版社圖書獎(jiǎng)（優(yōu)秀教材二等獎(jiǎng)）”獲獎(jiǎng)教材《Web前端開(kāi)發(fā)技術(shù)——HTML、CSS、JavaScript》第2版的配套實(shí)驗(yàn)與實(shí)踐教材。

　　本書分為上、下兩篇。上篇為實(shí)驗(yàn)（課內(nèi)練習(xí)），包括HTML基礎(chǔ)（Web前端開(kāi)發(fā)環(huán)境配置與HTML基礎(chǔ)、格式化文本、段落與列表、超鏈接與多媒體文件應(yīng)用）、頁(yè)面布局技術(shù)（DIV+CSS綜合應(yīng)用、DIV+CSS布局規(guī)劃、表格布局、框架布局、表單頁(yè)面設(shè)計(jì)）、JavaScript應(yīng)用（JavaScript基礎(chǔ)應(yīng)用、高級(jí)應(yīng)用、事件分析、DOM與BOM應(yīng)用案例），內(nèi)含12次實(shí)訓(xùn)33個(gè)實(shí)訓(xùn)項(xiàng)目。下篇為實(shí)踐（課程設(shè)計(jì)），包括高校網(wǎng)站、IT企業(yè)網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)兩個(gè)典型案例。

　　本書內(nèi)容分布結(jié)構(gòu)合理，實(shí)訓(xùn)項(xiàng)目設(shè)計(jì)由淺入深、循序漸進(jìn)，實(shí)驗(yàn)過(guò)程詳細(xì)、指導(dǎo)深入，實(shí)訓(xùn)項(xiàng)目切合實(shí)際，真實(shí)性強(qiáng)。本書可作為高等學(xué)校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、網(wǎng)絡(luò)工程、物聯(lián)網(wǎng)工程、信息科學(xué)技術(shù)、數(shù)字媒體技術(shù)及其他文理科相關(guān)專業(yè)或計(jì)算機(jī)公共基礎(chǔ)的“網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)”“網(wǎng)頁(yè)制作”“Web客戶端編程”“Web前端開(kāi)發(fā)技術(shù)”等課程實(shí)驗(yàn)與實(shí)踐教材，同時(shí)也可作為從事Web開(kāi)發(fā)相關(guān)工作的工程技術(shù)人員的參考書。

上篇  實(shí)驗(yàn)（課內(nèi)練習(xí)）

第一部分  HTML基礎(chǔ)

實(shí)訓(xùn)1  Web前端開(kāi)發(fā)環(huán)境配置與HTML基礎(chǔ) 5

項(xiàng)目1  Web前端開(kāi)發(fā)環(huán)境配置 5

項(xiàng)目2  學(xué)生簡(jiǎn)易主頁(yè)設(shè)計(jì) 6

項(xiàng)目3  用EditPlus自定義HTML模板 8

項(xiàng)目4  meta標(biāo)記、body標(biāo)記屬性使用 11

項(xiàng)目5  HTML、CSS、JavaScript綜合編程 13

課外拓展訓(xùn)練1 15

實(shí)訓(xùn)2  格式化文本、段落與列表 16

項(xiàng)目1  文本與段落標(biāo)記的應(yīng)用 16

項(xiàng)目2  高校資訊新聞條目設(shè)計(jì) 20

項(xiàng)目3  設(shè)計(jì)制度宣傳展板 23

項(xiàng)目4  制作飯店菜單價(jià)目表 26

課外拓展訓(xùn)練2 29

實(shí)訓(xùn)3  超鏈接與多媒體文件應(yīng)用 32

項(xiàng)目1  設(shè)計(jì)簡(jiǎn)易燈箱畫廊 32

項(xiàng)目2  設(shè)計(jì)支持音頻、視頻播放的網(wǎng)頁(yè) 35

項(xiàng)目3  設(shè)計(jì)簡(jiǎn)易網(wǎng)站導(dǎo)航 37

項(xiàng)目4  設(shè)計(jì)新生課程簡(jiǎn)介 40

課外拓展訓(xùn)練3 42

第二部分  頁(yè)面布局技術(shù)

實(shí)訓(xùn)4  DIV+CSS綜合運(yùn)用 47

項(xiàng)目1  設(shè)計(jì)《中國(guó)教育網(wǎng)絡(luò)》雜志簡(jiǎn)介 47

項(xiàng)目2  設(shè)計(jì)《京東商品導(dǎo)購(gòu)》頁(yè)面 52

課外拓展訓(xùn)練4 54

實(shí)訓(xùn)5  DIV+CSS布局規(guī)劃 57

項(xiàng)目1  DIV+CSS頁(yè)面布局設(shè)計(jì) 57

項(xiàng)目2  設(shè)計(jì)《2015年CERNET華東北地區(qū)年會(huì)》網(wǎng)站 61

課外拓展訓(xùn)練5 70

實(shí)訓(xùn)6  表格與表格頁(yè)面布局 73

項(xiàng)目1  設(shè)計(jì)《網(wǎng)絡(luò)主題研討會(huì)》日程表 73

項(xiàng)目2  設(shè)計(jì)簡(jiǎn)化版“江蘇教育電子政務(wù)網(wǎng)” 77

課外拓展訓(xùn)練6 80

實(shí)訓(xùn)7  框架結(jié)構(gòu)布局規(guī)劃 82

項(xiàng)目1  設(shè)計(jì)“中軟卓成”產(chǎn)品介紹頁(yè)面 82

項(xiàng)目2  設(shè)計(jì)改版的《大眾創(chuàng)業(yè) 萬(wàn)眾創(chuàng)新》網(wǎng) 88

課外拓展訓(xùn)練7 96

實(shí)訓(xùn)8  表單頁(yè)面設(shè)計(jì) 99

項(xiàng)目1  設(shè)計(jì)科技工作者建言頁(yè)面 99

項(xiàng)目2  設(shè)計(jì)《大學(xué)生暑期社會(huì)實(shí)踐調(diào)查問(wèn)卷》 102

課外拓展訓(xùn)練8 106

第三部分  JavaScript應(yīng)用

實(shí)訓(xùn)9  JavaScript基礎(chǔ)應(yīng)用 111

項(xiàng)目1  改變新聞網(wǎng)頁(yè)中的字號(hào) 111

項(xiàng)目2  計(jì)算任意區(qū)間內(nèi)連續(xù)自然數(shù)的累加和 115

項(xiàng)目3  消息對(duì)話框綜合應(yīng)用 119

課外拓展訓(xùn)練9 122

實(shí)訓(xùn)10  JavaScript高級(jí)應(yīng)用 123

項(xiàng)目1  成績(jī)百分制轉(zhuǎn)換為五級(jí)制 123

項(xiàng)目2  計(jì)算∑N！ 127

項(xiàng)目3  系統(tǒng)常用函數(shù)的使用 130

課外拓展訓(xùn)練10 132

實(shí)訓(xùn)11  JavaScript事件分析 134

項(xiàng)目1  設(shè)計(jì)校園辦公系統(tǒng)認(rèn)證頁(yè)面 134

項(xiàng)目2  鼠標(biāo)動(dòng)作捕獲與響應(yīng) 140

課外拓展訓(xùn)練11 143

實(shí)訓(xùn)12  DOM與BOM應(yīng)用案例 145

項(xiàng)目1  設(shè)計(jì)簡(jiǎn)易福彩投注程序 145

項(xiàng)目2  設(shè)計(jì)江蘇福彩投注站彩票投注助手 148

課外拓展訓(xùn)練12 155

下篇  實(shí)踐（課程設(shè)計(jì)）

第四部分  網(wǎng)站設(shè)計(jì)

“Web前端開(kāi)發(fā)技術(shù)”課程設(shè)計(jì) 163

一、設(shè)計(jì)目的 163

二、設(shè)計(jì)要求 163

三、設(shè)計(jì)案例 163

任務(wù)1  高校網(wǎng)站設(shè)計(jì)——北京理工大學(xué)網(wǎng)站 164

任務(wù)2  企業(yè)網(wǎng)站設(shè)計(jì)——同方股份有限公司網(wǎng)站 183

附錄  課外拓展訓(xùn)練程序清單 198

參考文獻(xiàn) 225