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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

課輔助學習。

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

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

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

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

編 者

2022 年 2 月