結合國內流行的Web前端開(kāi)發(fā)工程師崗位需求,將崗位技能培養和專(zhuān)業(yè)知識學(xué)習融入到實(shí)驗項目中去,實(shí)現在實(shí)踐項目掌握與靈活運用。全書(shū)根據Web前端開(kāi)發(fā)工程師所必備知識與能力要求統籌規劃了12次實(shí)驗,精心設計了33個(gè)實(shí)驗項目。實(shí)驗與實(shí)踐教材在改版中始終堅持“項目化設計、案例式驅動(dòng)、過(guò)程式指導、探究式實(shí)踐”的原則,合理編排實(shí)驗內容,循序漸進(jìn),并將CSS技術(shù)貫穿所有實(shí)驗項目中,實(shí)現HTML、CSS、DIV、JavaScript、DOM完好地融合。通過(guò)真實(shí)案例深入剖析網(wǎng)頁(yè)布局的思路和方法,啟發(fā)式引導學(xué)生自主地去完成實(shí)驗項目。
本書(shū)第2版是作者在從事多年Web前端開(kāi)發(fā)技術(shù)教學(xué)研究的基礎上,結合多年來(lái)幾十所高等院校使用反饋的意見(jiàn)與建議改編而成的,同時(shí)本書(shū)作為“第四屆中國大學(xué)出版社圖書(shū)獎(優(yōu)秀教材二等獎)”獲獎教材《Web前端開(kāi)發(fā)技術(shù)——HTML、CSS、JavaScript》第2版的配套實(shí)驗與實(shí)踐教材。
本書(shū)分為上、下兩篇。上篇為實(shí)驗(課內練習),包括HTML基礎(Web前端開(kāi)發(fā)環(huán)境配置與HTML基礎、格式化文本、段落與列表、超鏈接與多媒體文件應用)、頁(yè)面布局技術(shù)(DIV+CSS綜合應用、DIV+CSS布局規劃、表格布局、框架布局、表單頁(yè)面設計)、JavaScript應用(JavaScript基礎應用、高級應用、事件分析、DOM與BOM應用案例),內含12次實(shí)訓33個(gè)實(shí)訓項目。下篇為實(shí)踐(課程設計),包括高校網(wǎng)站、IT企業(yè)網(wǎng)站設計與開(kāi)發(fā)兩個(gè)典型案例。
本書(shū)內容分布結構合理,實(shí)訓項目設計由淺入深、循序漸進(jìn),實(shí)驗過(guò)程詳細、指導深入,實(shí)訓項目切合實(shí)際,真實(shí)性強。本書(shū)可作為高等學(xué)校計算機科學(xué)與技術(shù)、軟件工程、信息管理與信息系統、網(wǎng)絡(luò )工程、物聯(lián)網(wǎng)工程、信息科學(xué)技術(shù)、數字媒體技術(shù)及其他文理科相關(guān)專(zhuān)業(yè)或計算機公共基礎的“網(wǎng)頁(yè)設計與開(kāi)發(fā)”“網(wǎng)頁(yè)制作”“Web客戶(hù)端編程”“Web前端開(kāi)發(fā)技術(shù)”等課程實(shí)驗與實(shí)踐教材,同時(shí)也可作為從事Web開(kāi)發(fā)相關(guān)工作的工程技術(shù)人員的參考書(shū)。
上篇 實(shí)驗(課內練習)
第一部分 HTML基礎
實(shí)訓1 Web前端開(kāi)發(fā)環(huán)境配置與HTML基礎 5
項目1 Web前端開(kāi)發(fā)環(huán)境配置 5
項目2 學(xué)生簡(jiǎn)易主頁(yè)設計 6
項目3 用EditPlus自定義HTML模板 8
項目4 meta標記、body標記屬性使用 11
項目5 HTML、CSS、JavaScript綜合編程 13
課外拓展訓練1 15
實(shí)訓2 格式化文本、段落與列表 16
項目1 文本與段落標記的應用 16
項目2 高校資訊新聞條目設計 20
項目3 設計制度宣傳展板 23
項目4 制作飯店菜單價(jià)目表 26
課外拓展訓練2 29
實(shí)訓3 超鏈接與多媒體文件應用 32
項目1 設計簡(jiǎn)易燈箱畫(huà)廊 32
項目2 設計支持音頻、視頻播放的網(wǎng)頁(yè) 35
項目3 設計簡(jiǎn)易網(wǎng)站導航 37
項目4 設計新生課程簡(jiǎn)介 40
課外拓展訓練3 42
第二部分 頁(yè)面布局技術(shù)
實(shí)訓4 DIV+CSS綜合運用 47
項目1 設計《中國教育網(wǎng)絡(luò )》雜志簡(jiǎn)介 47
項目2 設計《京東商品導購》頁(yè)面 52
課外拓展訓練4 54
實(shí)訓5 DIV+CSS布局規劃 57
項目1 DIV+CSS頁(yè)面布局設計 57
項目2 設計《2015年CERNET華東北地區年會(huì )》網(wǎng)站 61
課外拓展訓練5 70
實(shí)訓6 表格與表格頁(yè)面布局 73
項目1 設計《網(wǎng)絡(luò )主題研討會(huì )》日程表 73
項目2 設計簡(jiǎn)化版“江蘇教育電子政務(wù)網(wǎng)” 77
課外拓展訓練6 80
實(shí)訓7 框架結構布局規劃 82
項目1 設計“中軟卓成”產(chǎn)品介紹頁(yè)面 82
項目2 設計改版的《大眾創(chuàng )業(yè) 萬(wàn)眾創(chuàng )新》網(wǎng) 88
課外拓展訓練7 96
實(shí)訓8 表單頁(yè)面設計 99
項目1 設計科技工作者建言頁(yè)面 99
項目2 設計《大學(xué)生暑期社會(huì )實(shí)踐調查問(wèn)卷》 102
課外拓展訓練8 106
第三部分 JavaScript應用
實(shí)訓9 JavaScript基礎應用 111
項目1 改變新聞網(wǎng)頁(yè)中的字號 111
項目2 計算任意區間內連續自然數的累加和 115
項目3 消息對話(huà)框綜合應用 119
課外拓展訓練9 122
實(shí)訓10 JavaScript高級應用 123
項目1 成績(jì)百分制轉換為五級制 123
項目2 計算∑N! 127
項目3 系統常用函數的使用 130
課外拓展訓練10 132
實(shí)訓11 JavaScript事件分析 134
項目1 設計校園辦公系統認證頁(yè)面 134
項目2 鼠標動(dòng)作捕獲與響應 140
課外拓展訓練11 143
實(shí)訓12 DOM與BOM應用案例 145
項目1 設計簡(jiǎn)易福彩投注程序 145
項目2 設計江蘇福彩投注站彩票投注助手 148
課外拓展訓練12 155
下篇 實(shí)踐(課程設計)
第四部分 網(wǎng)站設計
“Web前端開(kāi)發(fā)技術(shù)”課程設計 163
一、設計目的 163
二、設計要求 163
三、設計案例 163
任務(wù)1 高校網(wǎng)站設計——北京理工大學(xué)網(wǎng)站 164
任務(wù)2 企業(yè)網(wǎng)站設計——同方股份有限公司網(wǎng)站 183
附錄 課外拓展訓練程序清單 198
參考文獻 225