前言

網站開發技術更新非常快，特別是HTML5技術推出之后，網站開發技術從電腦端開始轉向移動端，“移動優先”的理念開始深入人心。在技術更新大潮下，很多學校開設的網站開發技術課程卻停滯不前。如何緊跟時代步伐，將新技術和企業標準快速引入課堂，并適用于職業教育，是我們急需解決的問題。

本人在畢業后一直從事網站開發技術的教學工作，2014年開始負責我校世界技能大賽網站設計項目的相關工作并持續至今，雖然沒有取得斐然的成績，但通過大賽的錘煉，卻讓我對網站設計的課程有了更多的想法。

在2015年，本人作為我校“HTML5+CSS3網頁布局”課程改革項目的負責人，承擔起這門課程的改革工作，并斗膽編撰成書，與大家分享，以期起到拋磚引玉之功效，讓更多的同行編寫出更加優秀的教材以服務于職教學子。

本書從前端工程師崗位出發，以項目引領全書，以任務驅動知識和技能，聚焦HTML5+CSS3網頁布局技術，Axure、PS和JavaScript技術不在本書中涉及。

本書具有以下特點：

1.立足基礎、企業標準、接軌世界

本書以“立足基礎、企業標準、接軌世界”為目標，采用學習領域課程開發方法，通過分析確定前端工程師崗位設計、布局和交互制作的工作能力轉化為學習領域，本教材將其中的“網頁布局能力”（學習領域）轉化為本書的“學習內容”，同時結合世界技能大賽題目所要求的知識、標準和技術等進行整合，完成代表性工作任務列表。

世界技能大賽的題目要求必須來自企業的實際工作任務，緊貼企業需求和最新技術標準。把世界技能大賽標準引入課堂，既符合我們工學結合一體化和工作過程系統化課程改革要求，又為我們的教材快速達到企業行業標準并接軌世界提供了捷徑。

2.“一往情深”的項目教材

教材通過一個項目工作情景統領全書，通過各項目需求將所有的工作任務進行串聯。

項目和情景設計為：隨著高考平行志愿的執行，華南工業大學信息工程系招生就業辦公室希望能夠制作一個網頁，通過掃碼的方式來宣傳其系專業學科及招生情況，以期能夠吸引更多優秀的畢業生報考。項目1和項目2要求為手機端而設計，項目3要求變更為響應式設計，項目4要求使用Bootstrap框架提高開發效率。

3.項目引領、任務驅動

在知識和技能編排上，項目1、2為HTML5和CSS3基礎性知識，包括開發環境的配置、HTML5和CSS3知識、CSS2和CSS3中瀏覽器普遍兼容的知識及常規的網頁布局知識；項目3是對基礎知識的提升，包括柵格系統、媒體查詢、網頁響應式布局和優化、瀏覽器兼容相關知識，要求能夠達到企業行業標準和世界技能大賽試題中的基礎要求；項目4是應用型知識，包含Bootstrap開源框架、Font Awesome開源圖標型字體等開源資源的應用知識，適用于企業快速迭代的高效率開發需求。在各項目中還加入了商用還不是很成熟的新知識新技術（書本中帶*的任務），包含CSS3中現階段應用較少、瀏覽器兼容不完善，但在技術長遠發展中將被應用的新技術、新知識，目的是對接世界技能大賽網站設計試題的高級技術要求，同時為學生的終身學習打下基礎。

本書為每個項目設置了項目簡介、項目情景、項目分析、能力目標作為項目的引入，在每個任務中設置學習目標、任務描述、知識學習（知識探究學習+學習工作頁）與課堂練習、任務實施、任務回顧、任務拓展6個環節。

4.授人以漁

在專業能力上，我們寄希望于立足技術基礎，同時按企業行業標準要求學生，在充分考慮學生實際情況的同時考慮學生的發展和技術的更新進程，將世界技能大賽網站設計項目對技術和能力要求與課程知識進行對接。

在社會和方法能力上，我們期望通過以“項目引領、任務驅動、工學結合、賽學互促”的方式讓學生在課堂中以“行動導向”方式解決實際的項目問題，同時在任務中通過設置“知識學習與課后練習”提高學生的知識自主學習能力，強化基礎，通過設置“任務拓展”提高知識的遷移應用能力等。

通過這樣的設計，我們期望大部分學生都能夠掌握網頁布局基礎技術，并運用開源框架開發出能達到企業標準的網頁，部分學習能力強的學生能夠在學習最新的技術后達到世界技能大賽網站設計項目對布局能力的要求，并為其后繼的終身技術學習打下基礎。

本書由謝冠懷、林曉儀任主編，武龍、林程華任副主編。具體分工如下：謝冠懷負責全書的框架制定、統稿和項目4全部、項目3任務3.5的編寫工作，林曉儀參與全書框架制定并負責項目1和項目3（任務3.1和3.4）的編寫工作，武龍負責項目2和項目3（任務3.2和任務3.3）的編寫工作，林程華與王令、但金燃參與各任務的教學實驗編寫工作。

由于編者水平有限，加之時間倉促，書中難免存在疏漏和不足之處，懇請各位讀者批評指正（編者郵箱：xieguanhuai@qq.com）。本書資源豐富，課件、素材、教案可在http://www.tdpress.com/51eds/下載。

謝冠懷

2017年于廣州