Web前端開發(fā)技術(shù)實(shí)驗(yàn)與實(shí)踐：HTML5、CSS3、JavaScript（第3版）

目錄


上篇實(shí)訓(xùn)（課內(nèi)同步實(shí)驗(yàn)）

第一部分HTML基礎(chǔ)

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

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

項(xiàng)目2新生簡易主頁設(shè)計(jì)

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

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

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

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

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

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

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

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

項(xiàng)目9設(shè)計(jì)飯店菜單價(jià)目表

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

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

項(xiàng)目10設(shè)計(jì)簡易燈箱畫廊

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

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

項(xiàng)目13設(shè)計(jì)專業(yè)課程導(dǎo)航

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

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

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

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

項(xiàng)目15設(shè)計(jì)京東商品導(dǎo)購頁面

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

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

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

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

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

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

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

項(xiàng)目19設(shè)計(jì)簡化版江蘇教育電子政務(wù)網(wǎng)站

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

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

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

項(xiàng)目21設(shè)計(jì)大學(xué)生暑期社會(huì)實(shí)踐調(diào)查問卷頁面

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

第三部分HTML5基礎(chǔ)與CSS3應(yīng)用

實(shí)訓(xùn)8HTML5基礎(chǔ)與CSS3應(yīng)用

項(xiàng)目22當(dāng)當(dāng)網(wǎng)企業(yè)用戶注冊頁面設(shè)計(jì)

項(xiàng)目23HTML5結(jié)構(gòu)元素頁面布局設(shè)計(jì)

項(xiàng)目24H3C新華三集團(tuán)行業(yè)案例CSS3特效頁面設(shè)計(jì)

項(xiàng)目25純CSS3偏光圖像畫廊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項(xiàng)目34設(shè)計(jì)簡易福彩投注程序

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

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

實(shí)訓(xùn)13HTML5高級(jí)應(yīng)用案例

項(xiàng)目36用Web Storage開發(fā)當(dāng)當(dāng)網(wǎng)圖書評(píng)論頁面

項(xiàng)目37用HTML5 Canvas開發(fā)一個(gè)小游戲

項(xiàng)目38用HTML5拖曳開發(fā)購物車

項(xiàng)目39使用Web Worker做后臺(tái)數(shù)值(算法)計(jì)算

課外拓展訓(xùn)練13

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

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

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

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

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

任務(wù)3社會(huì)團(tuán)體網(wǎng)站設(shè)計(jì)——成都市互聯(lián)網(wǎng)協(xié)會(huì)網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

課外拓展訓(xùn)練13

參考文獻(xiàn)