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

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

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

編 者
2021年4月