隨著信息技術(shù)向縱深發(fā)展，作為依托互聯(lián)網(wǎng)發(fā)展起來(lái)的網(wǎng)站制作面臨新的挑戰(zhàn)。一方面，用戶更加注重站點(diǎn)信息豐富、功能齊備、頁(yè)面精美、操作流暢；另一方面，要滿足用戶不受系統(tǒng)平臺(tái)和軟件插件的限制，可以通過(guò)移動(dòng)設(shè)備訪問(wèn)網(wǎng)站。Web新技術(shù)HTML5和CSS3能夠?qū)崿F(xiàn)這些新要求，使其迅速成為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)。 
　　網(wǎng)頁(yè)設(shè)計(jì)與制作課程是B/S架構(gòu)軟件項(xiàng)目開(kāi)發(fā)的Web前端技術(shù)課程，而HTML與CSS是網(wǎng)頁(yè)制作技術(shù)的核心和基礎(chǔ)，也是每個(gè)網(wǎng)頁(yè)制作者必須掌握的基本知識(shí)，兩者在網(wǎng)頁(yè)設(shè)計(jì)中不可或缺。 
　　網(wǎng)頁(yè)設(shè)計(jì)本身是一個(gè)復(fù)雜的系統(tǒng)過(guò)程，需要了解問(wèn)題，對(duì)問(wèn)題進(jìn)行分析，用邏輯的方法確定最佳的優(yōu)化方案，最后通過(guò)相關(guān)技術(shù)來(lái)實(shí)現(xiàn)。初學(xué)者如何掌握網(wǎng)頁(yè)設(shè)計(jì)的方法尤為重要。本書(shū)以HTML5與CSS3技術(shù)為工具，以響應(yīng)式布局Web頁(yè)面設(shè)計(jì)為載體，強(qiáng)調(diào)問(wèn)題的分析、技術(shù)的掌握、能力的拓展，所有知識(shí)點(diǎn)都緊跟HTML5與CSS3的發(fā)展動(dòng)態(tài)，以創(chuàng)新的模式、結(jié)構(gòu)化的設(shè)計(jì)、實(shí)用的案例、簡(jiǎn)明的語(yǔ)言詳細(xì)介紹了使用HTML5與CSS3進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作的相關(guān)內(nèi)容和技巧。 
　　本書(shū)針對(duì)職業(yè)教育人才培養(yǎng)規(guī)格的需要，突出職業(yè)素質(zhì)教育和技術(shù)應(yīng)用能力，運(yùn)用創(chuàng)新思維模式理實(shí)一體系統(tǒng)化教學(xué)方法。各項(xiàng)目首先確定學(xué)習(xí)目標(biāo)，通過(guò)項(xiàng)目實(shí)施掌握相關(guān)的基本知識(shí)，然后通過(guò)拓展練習(xí)強(qiáng)調(diào)基本技能的訓(xùn)練，最后輔以習(xí)題。本書(shū)每個(gè)項(xiàng)目都提供英語(yǔ)角，形成專(zhuān)業(yè)詞匯提示，幫助讀者對(duì)國(guó)際化專(zhuān)業(yè)術(shù)語(yǔ)的認(rèn)識(shí)，提升學(xué)習(xí)效果。 
　　本書(shū)編寫(xiě)有以下特色： 
　　（1）全書(shū)結(jié)構(gòu)廣度層面體現(xiàn)了職業(yè)教育特點(diǎn)，以應(yīng)用為主，適度夠用為量，內(nèi)容以HTML5與CSS3技術(shù)的技能訓(xùn)練為主線，突出能力的培養(yǎng)，內(nèi)容完整、由淺入深、循序漸進(jìn)，層次清楚。 
　　（2）各項(xiàng)目結(jié)構(gòu)深度層面運(yùn)用了思維導(dǎo)圖形式，提供一個(gè)以職業(yè)技能發(fā)展為主軸的結(jié)構(gòu)化學(xué)習(xí)方案，直觀體現(xiàn)學(xué)習(xí)路徑，提升學(xué)習(xí)效率。 
　�。�3）內(nèi)容采用任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)入、教學(xué)做一體化模式編排而成，通過(guò)任務(wù)驅(qū)動(dòng)將項(xiàng)目載體融入教學(xué)，高強(qiáng)度培養(yǎng)學(xué)生工程實(shí)踐能力，要求在教學(xué)過(guò)程中達(dá)到項(xiàng)目實(shí)踐實(shí)訓(xùn)的目的，實(shí)現(xiàn)技術(shù)培養(yǎng)與行業(yè)企業(yè)人才需求接軌。 
　　（4）項(xiàng)目設(shè)計(jì)實(shí)用性強(qiáng)，選取當(dāng)今互聯(lián)網(wǎng)熱點(diǎn)網(wǎng)站設(shè)計(jì)作為素材，將8個(gè)仿真項(xiàng)目融入教材，提高了學(xué)習(xí)者的學(xué)習(xí)熱情；同時(shí)，添加了企業(yè)站點(diǎn)開(kāi)發(fā)的管理規(guī)范元素，突出項(xiàng)目管理理念。 
　　（5）突出“做中學(xué)、做中教、做中練”，與項(xiàng)目剖析相結(jié)合，在體系結(jié)構(gòu)安排上，盡可能將HTML5+CSS3的重要特性與項(xiàng)目相結(jié)合。通過(guò)項(xiàng)目的分析、設(shè)計(jì)、總結(jié)，將所學(xué)的知識(shí)與技能點(diǎn)融會(huì)貫通，易于理解，能夠幫助讀者提升實(shí)際應(yīng)用技能。 
　�。�6）注重“以能力培養(yǎng)為核心，強(qiáng)化實(shí)際操作的訓(xùn)練”，每個(gè)項(xiàng)目都精心設(shè)計(jì)了拓展練習(xí)，目的明確，突出實(shí)用性、操作性�？紤]到初學(xué)者經(jīng)常困惑于如何進(jìn)行頁(yè)面程序的設(shè)計(jì)，拓展項(xiàng)目給出了相關(guān)的提示步驟，使學(xué)生在學(xué)習(xí)的過(guò)程中不至于“毫無(wú)頭緒”而產(chǎn)生厭煩，從而提高學(xué)習(xí)的興趣和對(duì)編程的愛(ài)好程度。 
　�。�7）配有針對(duì)性的習(xí)題，強(qiáng)調(diào)每個(gè)項(xiàng)目的學(xué)習(xí)重點(diǎn)，鞏固對(duì)知識(shí)的掌握。同時(shí)，每個(gè)項(xiàng)目的英語(yǔ)角提供了相應(yīng)的專(zhuān)業(yè)詞匯，利于專(zhuān)業(yè)國(guó)際化標(biāo)準(zhǔn)的引入和職業(yè)素養(yǎng)的培養(yǎng)。 
　�。�8）豐富的新形態(tài)教學(xué)資源。本書(shū)除配套提供電子教學(xué)課件、案例庫(kù)、習(xí)題庫(kù)之外，還提供了大量的關(guān)于網(wǎng)頁(yè)設(shè)計(jì)、HTML5和CSS3技術(shù)的數(shù)字資源庫(kù)，讀者可以通過(guò)掃描二維碼獲取相關(guān)資料，實(shí)現(xiàn)課程全方位的資源共享。 
　　本書(shū)由長(zhǎng)期工作在職業(yè)教育教學(xué)一線，同時(shí)具有企業(yè)實(shí)踐開(kāi)發(fā)經(jīng)驗(yàn)的教師編寫(xiě)而成。其中，項(xiàng)目1～項(xiàng)目4主要由王慶樺老師編寫(xiě)，項(xiàng)目5～項(xiàng)目8和附錄主要由王新強(qiáng)老師編寫(xiě)，王玥老師編寫(xiě)了本書(shū)部分內(nèi)容。全書(shū)由王慶樺老師統(tǒng)稿。 
　　雖然編者力求準(zhǔn)確無(wú)誤、盡善盡美，但由于時(shí)間倉(cāng)促，書(shū)中的內(nèi)容仍難免出現(xiàn)錯(cuò)誤或不足之處，懇請(qǐng)專(zhuān)家、教師和讀者批評(píng)指正。 
　　編 者