近年來，隨著物聯(lián)網(wǎng)、云計算、大數(shù)據(jù)和人工智能等新技術(shù)的崛起，互聯(lián)網(wǎng)發(fā)生了深刻的變化，各行各業(yè)對互聯(lián)網(wǎng)的依賴程度越來越高，Web應(yīng)用與Web服務(wù)越來越廣泛，Web前端開發(fā)的需求日益增多，用戶體驗的要求不斷提高。Web前端技術(shù)經(jīng)歷了從HTML 4到HTML 5、從CSS 2到CSS 3的重大變化，CSS 3和HTML 5增加了許多新特性，新的框架技術(shù)不斷涌現(xiàn)出來，Web前端開發(fā)這門課程承載的內(nèi)容越來越豐富，承擔(dān)的任務(wù)越來越重。因此，如何高效地教好、學(xué)好這門課程成為一個十分緊迫的重要問題。其次，近些年來我國為提高本科教育的人才培養(yǎng)質(zhì)量，教育部推出了一系列舉措，例如國家精品課程建設(shè)、具有高階性創(chuàng)新性和挑戰(zhàn)度的金課建設(shè)、一流專業(yè)建設(shè)、一流課程建設(shè)等，極大地推動了教材的質(zhì)量建設(shè)。后，Web前端開發(fā)是計算機(jī)類各專業(yè)都要開設(shè)的課程，是一些專業(yè)課程的重要基礎(chǔ)。因此，鑒于上述原因，編寫一本具有先進(jìn)教學(xué)理念、切合應(yīng)用型高校本科教學(xué)和Web前端開發(fā)實際的高質(zhì)量教材，具有十分重要的意義。
本書主要涉及HTML、CSS和JavaScript三個基本、核心的內(nèi)容，為進(jìn)一步學(xué)習(xí)Web前端開發(fā)技術(shù)的高級內(nèi)容打下基礎(chǔ)。
本書編寫的思路和特色如下：
（1）新穎的教材內(nèi)容組織結(jié)構(gòu)
在傳統(tǒng)教材中，HTML和CSS是按先后順序分開講述的，其結(jié)果是在講HTML內(nèi)容時，沒有CSS的支撐，所列舉的案例平淡無奇，僅僅是為舉例而舉例，吸引不了學(xué)生，學(xué)生印象不深刻，學(xué)習(xí)效果不好；在講CSS內(nèi)容時，沒有復(fù)雜的HTML結(jié)構(gòu)，所列舉的案例反映不出CSS的復(fù)雜規(guī)律，學(xué)習(xí)效果亦不好。終HTML和CSS的內(nèi)容需要花費(fèi)很多時間才能真正掌握。在Web標(biāo)準(zhǔn)中，HTML和CSS代碼是分離的，但并不意味著兩者在渲染表現(xiàn)時也是分離的。因此，在本書的第1章中，詩歌網(wǎng)頁設(shè)計案例一步到位，應(yīng)用小結(jié)構(gòu)原理直接表達(dá)出具有緊密耦合關(guān)系的HTML和CSS整體結(jié)構(gòu)，提高了學(xué)生的認(rèn)知水平（難度）和認(rèn)知完整性。在隨后的章節(jié)內(nèi)容中，化整為零、變奏式地重復(fù)，不斷擴(kuò)展HTML和CSS的內(nèi)容，當(dāng)正式講解CSS章節(jié)時，學(xué)生已對CSS內(nèi)容很熟悉了，水到渠成，因而對CSS復(fù)雜規(guī)律的理解問題自然迎刃而解了。
本書面向Web前端開發(fā)的實際情況，將Web網(wǎng)頁劃分為單列布局網(wǎng)頁（簡單）、多列布局網(wǎng)頁（比較復(fù)雜）和平面布局網(wǎng)頁（復(fù)雜）三種類型，同時又將單列布局網(wǎng)頁劃分為文本網(wǎng)頁、圖冊網(wǎng)頁、圖文網(wǎng)頁和表單網(wǎng)頁四類，從案例設(shè)計需求來選用HTML標(biāo)簽，這樣，四類單列布局的網(wǎng)頁案例基本上覆蓋了常用的標(biāo)簽，實現(xiàn)案例和HTML標(biāo)簽巧妙的藝術(shù)性結(jié)合。有了單列布局網(wǎng)頁的基礎(chǔ)，后兩種類型網(wǎng)頁學(xué)起來就更快了。
此外，本書對內(nèi)容進(jìn)行重新組織，并沒有將HTML 5、CSS 3和舊的HTML、CSS分開講述，而是按照Web前端開發(fā)的實際需求進(jìn)行取舍，體現(xiàn)了面向應(yīng)用、面向?qū)嵺`的設(shè)計思想。
（2）作品級教學(xué)案例
本書在大多數(shù)章節(jié)開始都布置有一個作品級的完整教學(xué)案例，增強(qiáng)了教材的實用性和趣味性。完整的、實用的教學(xué)案例具有強(qiáng)烈的驅(qū)動力，使得學(xué)生躍躍欲試，在學(xué)習(xí)完隨后的相關(guān)知識后，通過實驗完成類似教學(xué)案例的網(wǎng)頁設(shè)計，成就感會躍然面上，課程學(xué)習(xí)興趣會越發(fā)濃厚。作品級教學(xué)案例達(dá)到了以優(yōu)秀的作品鼓舞人的目的。
（3）模式化布局方法
本書在網(wǎng)頁布局設(shè)計這一章節(jié)中，為突出整體布局的清晰性和正確性，對網(wǎng)頁效果圖中的各個板塊，按照合適大小粒度進(jìn)行切圖處理，將每一個切圖圖片作為一個div框進(jìn)行整體布局設(shè)計，測試正確后再進(jìn)行div框的詳細(xì)代碼設(shè)計。這種模式化設(shè)計方法保證了作品級案例的完美渲染效果，同時也避免了引入大量代碼后看不清div框相互之間結(jié)構(gòu)的困境。
（4）嚴(yán)謹(jǐn)?shù)木帉戵w例
本書為保證正文內(nèi)容的完整性和邏輯性，配有延伸閱讀、討論和小提示幾個部分。延伸閱讀從多視角對正文內(nèi)容進(jìn)行補(bǔ)充描述，加深學(xué)生的理解，同時解決了內(nèi)容之間的緊密銜接問題。在正文描述過程中，以問題為導(dǎo)向，自然地提出一些開放性的討論題，培養(yǎng)學(xué)生獨立的創(chuàng)新思維能力。小提示的編程經(jīng)驗、注意事項，更能提高學(xué)習(xí)效果。此外，采用精美排版，將案例代碼與其行號分隔，不會被誤解。
（5）鮮明的思政特色
本書選用中國古代詩詞等素材作為案例，弘揚(yáng)中國優(yōu)秀的傳統(tǒng)文化和愛國主義情懷，弘揚(yáng)優(yōu)秀的社會、企業(yè)和校園文化精神。此外，通過網(wǎng)站設(shè)計訓(xùn)練，培養(yǎng)學(xué)生善于溝通、合作共事的團(tuán)隊精神。
本書由武昌理工學(xué)院數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)、計算機(jī)科學(xué)與技術(shù)、軟件工程和智能科學(xué)與技術(shù)的專業(yè)教師，以及上海睿亞訓(xùn)軟件技術(shù)服務(wù)有限公司的資深教師共同編寫，這些教師教學(xué)理論水平好、教學(xué)經(jīng)驗和項目開發(fā)經(jīng)驗豐富，指導(dǎo)過學(xué)生獲得多項全國性競賽的特等獎和一等獎。本書由楊蓓、李林老師統(tǒng)編全稿。具體的章節(jié)編寫情況如下：
章??節(jié) 章?節(jié)?名?稱 編?寫?者
第1章 Web前端設(shè)計概述 李林、曾輝
第2章 單列圖文網(wǎng)頁設(shè)計 楊蓓
第3章 層疊樣式表CSS 李林、楊蓓
第4章 網(wǎng)頁的布局設(shè)計 楊蓓
第5章 JavaScript語言基礎(chǔ) 錢程
第6章 BOM與DOM 孫鳴雷
第7章 HTML 5進(jìn)階 陽小蘭
第8章 應(yīng)用CSS 3渲染效果 陽小蘭、李林

本書適合作為應(yīng)用型高校和普通高校計算機(jī)類專業(yè)的教材，也可供Web前端開發(fā)職業(yè)培訓(xùn)使用，具體教學(xué)建議如下：
總 學(xué) 時 理 論 學(xué) 時 實 驗 學(xué) 時 教 學(xué) 方 式
32 0 32 線下 線上
32 16 16 線下 線上
48 16 32 線下、線下 線上
48 24 24 線下、線下 線上
64 32 32 線下

本書是全國高等院校計算機(jī)基礎(chǔ)教育研究會2020年度基于HTML 5 CSS 3 JavaScript的Web前端開發(fā)技術(shù)的教學(xué)研究項目（項目批準(zhǔn)號：2020-AFCEC-472）的成果，同時還得到了教育部高等教育司2020年產(chǎn)學(xué)合作協(xié)同育人項目（基于工程教育認(rèn)證的Web前端設(shè)計課程建設(shè)，項目編號：202002240012，上海睿亞訓(xùn)軟件技術(shù)服務(wù)有限公司）的大力資助。
本書提供全部的案例和例題代碼、課程大綱、教學(xué)課件PPT等資源。
由于編者水平和能力有限，書中難免有疏漏和不足之處。懇請各位同仁和廣大讀者，給予批評指正。

編 者
2021年4月