隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)絡(luò)已遍及人們生活的每個(gè)角落，逐漸改變著人們的生活、

學(xué)習(xí)和工作方式，并進(jìn)一步影響產(chǎn)業(yè)結(jié)構(gòu)的調(diào)整。越來越多的企事業(yè)單位、行政機(jī)關(guān)或個(gè)人定

制個(gè)性化網(wǎng)站，并利用網(wǎng)站平臺(tái)開展各項(xiàng)業(yè)務(wù)。產(chǎn)業(yè)結(jié)構(gòu)的變化、時(shí)代的發(fā)展，呼喚越來越多

的 Web 前端開發(fā)人員加入這個(gè)前景廣闊的行業(yè)中來，而網(wǎng)頁設(shè)計(jì)與制作是 Web 前端開發(fā)

崗位非常重要的專業(yè)基礎(chǔ)課。通過學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作，學(xué)生能夠熟練掌握網(wǎng)頁制作的基本語

法和應(yīng)用場合，熟練運(yùn)用 CSS 樣式、元素定位、頁面布局等技能，進(jìn)而培養(yǎng)學(xué)生能夠根據(jù)客

戶需求，設(shè)計(jì)制作個(gè)性化網(wǎng)站。

本書共有五個(gè)項(xiàng)目。項(xiàng)目 1 是簡單靜態(tài)頁面制作，主要介紹 HTML 基本標(biāo)簽的用法，

通過對(duì)社區(qū)主頁面的制作，讓讀者掌握運(yùn)用基本 HTML 標(biāo)簽制作網(wǎng)頁的技能；項(xiàng)目 2 是使用

CSS 設(shè)計(jì)頁面樣式，主要介紹了 CSS 樣式理論、CSS 樣式選擇器、CSS 樣式美化網(wǎng)頁，通過

對(duì)歡樂購網(wǎng)站的設(shè)計(jì)與分步驟制作，讓讀者深刻理解和掌握如何使用 CSS 樣式選擇器美

化頁面；項(xiàng)目 3 是盒子模型和元素定位，主要介紹盒子模型理論、元素相對(duì)定位、絕對(duì)定位、

固定定位、浮動(dòng)定位等，通過設(shè)計(jì)與制作一起去旅行登錄頁面，讓讀者理解盒子模型理論

和定位問題，并能靈活應(yīng)用技能實(shí)現(xiàn)特效；項(xiàng)目 4 是網(wǎng)頁布局，主要介紹頁面布局理論以及幾

種常見頁面布局的用法，通過設(shè)計(jì)與制作一起去旅行首頁和旅行詳情頁面，讓讀者熟練掌

握和應(yīng)用頁面布局技能；項(xiàng)目 5 是 CSS3 新特性靈動(dòng)頁面，主要簡單介紹了 CSS3 的特效，通

過設(shè)計(jì)與制作音悅 tai網(wǎng)站，讓讀者體驗(yàn)到 CSS3 的靈動(dòng)特性的用法。

本書按照工作系統(tǒng)化理念，根據(jù)典型工作任務(wù)并結(jié)合1 X相應(yīng)證書要求，梳理職業(yè)能

力，并將職業(yè)能力模塊化，構(gòu)建五個(gè)項(xiàng)目。教學(xué)內(nèi)容以常見的網(wǎng)頁類型項(xiàng)目為主線，通過挖掘

完成項(xiàng)目所需技能，按照項(xiàng)目目標(biāo)項(xiàng)目描述相關(guān)知識(shí)實(shí)施項(xiàng)目的形式編寫，同時(shí)使用微

課輔助學(xué)習(xí)。

本書由曹雁任主編，吳小燕、肖智兵、袁瑛、付金靈任副主編，胡昌杰任主審。

雖然我們對(duì)本書的內(nèi)容都盡量核實(shí)，并進(jìn)行多次校正，但因時(shí)間限制，可能還存在疏漏

和不足之處，懇請(qǐng)讀者批評(píng)指正。如果讀者在學(xué)習(xí)和使用本書的過程中遇到困難或疑惑，請(qǐng)發(fā)

郵件至 35498731@qq.com，我們會(huì)盡力解答。

編 者

2022 年 2 月