Web前端開發案例教程(HTML5+CSS3+JavaScript)（簡體書）

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

本書適合作為應用型高校和普通高校計算機類專業的教材，也可供Web前端開發職業培訓使用，具體教學建議如下：
總 學 時 理 論 學 時 實 驗 學 時 教 學 方 式
32 0 32 線下+在線
32 16 16 線下+在線
48 16 32 線下、線下+在線
48 24 24 線下、線下+在線
64 32 32 線下

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

編 者
2021年4月