前言

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

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

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

本書從前端工程師崗位出發(fā)，以項目引領(lǐng)全書，以任務(wù)驅(qū)動知識和技能，聚焦HTML5+CSS3網(wǎng)頁布局技術(shù)，Axure、PS和JavaScript技術(shù)不在本書中涉及。

本書具有以下特點：

1.立足基礎(chǔ)、企業(yè)標(biāo)準(zhǔn)、接軌世界

本書以“立足基礎(chǔ)、企業(yè)標(biāo)準(zhǔn)、接軌世界”為目標(biāo)，采用學(xué)習(xí)領(lǐng)域課程開發(fā)方法，通過分析確定前端工程師崗位設(shè)計、布局和交互制作的工作能力轉(zhuǎn)化為學(xué)習(xí)領(lǐng)域，本教材將其中的“網(wǎng)頁布局能力”（學(xué)習(xí)領(lǐng)域）轉(zhuǎn)化為本書的“學(xué)習(xí)內(nèi)容”，同時結(jié)合世界技能大賽題目所要求的知識、標(biāo)準(zhǔn)和技術(shù)等進(jìn)行整合，完成代表性工作任務(wù)列表。

世界技能大賽的題目要求必須來自企業(yè)的實際工作任務(wù)，緊貼企業(yè)需求和最新技術(shù)標(biāo)準(zhǔn)。把世界技能大賽標(biāo)準(zhǔn)引入課堂，既符合我們工學(xué)結(jié)合一體化和工作過程系統(tǒng)化課程改革要求，又為我們的教材快速達(dá)到企業(yè)行業(yè)標(biāo)準(zhǔn)并接軌世界提供了捷徑。

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

教材通過一個項目工作情景統(tǒng)領(lǐng)全書，通過各項目需求將所有的工作任務(wù)進(jìn)行串聯(lián)。

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

3.項目引領(lǐng)、任務(wù)驅(qū)動

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

本書為每個項目設(shè)置了項目簡介、項目情景、項目分析、能力目標(biāo)作為項目的引入，在每個任務(wù)中設(shè)置學(xué)習(xí)目標(biāo)、任務(wù)描述、知識學(xué)習(xí)（知識探究學(xué)習(xí)+學(xué)習(xí)工作頁）與課堂練習(xí)、任務(wù)實施、任務(wù)回顧、任務(wù)拓展6個環(huán)節(jié)。

4.授人以漁

在專業(yè)能力上，我們寄希望于立足技術(shù)基礎(chǔ)，同時按企業(yè)行業(yè)標(biāo)準(zhǔn)要求學(xué)生，在充分考慮學(xué)生實際情況的同時考慮學(xué)生的發(fā)展和技術(shù)的更新進(jìn)程，將世界技能大賽網(wǎng)站設(shè)計項目對技術(shù)和能力要求與課程知識進(jìn)行對接。

在社會和方法能力上，我們期望通過以“項目引領(lǐng)、任務(wù)驅(qū)動、工學(xué)結(jié)合、賽學(xué)互促”的方式讓學(xué)生在課堂中以“行動導(dǎo)向”方式解決實際的項目問題，同時在任務(wù)中通過設(shè)置“知識學(xué)習(xí)與課后練習(xí)”提高學(xué)生的知識自主學(xué)習(xí)能力，強(qiáng)化基礎(chǔ)，通過設(shè)置“任務(wù)拓展”提高知識的遷移應(yīng)用能力等。

通過這樣的設(shè)計，我們期望大部分學(xué)生都能夠掌握網(wǎng)頁布局基礎(chǔ)技術(shù)，并運(yùn)用開源框架開發(fā)出能達(dá)到企業(yè)標(biāo)準(zhǔn)的網(wǎng)頁，部分學(xué)習(xí)能力強(qiáng)的學(xué)生能夠在學(xué)習(xí)最新的技術(shù)后達(dá)到世界技能大賽網(wǎng)站設(shè)計項目對布局能力的要求，并為其后繼的終身技術(shù)學(xué)習(xí)打下基礎(chǔ)。

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

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

謝冠懷

2017年于廣州