本書以HTML5與CSS3知識點為主線，響應式布局項目為任務載體，采用迭代遞增的網頁設計方法，根據項目需求來逐步完成任務，實現學習相關知識與動手實操并重的目的。全書按照網頁設計的步驟，圍繞HTML5與CSS3重要特性進行編寫，通過詳細講解各個任務的制作來對知識點進行總結，使讀者更詳細地了解網頁設計制作技術。本書以學習者為中心，不僅強調基本技能的訓練、基礎知識的夯實，還注重拓展能力的培養。所以內容編排方式為“學習目標、學習路徑、任務描述、任務實施、任務拓展、任務總結、英語角、任務習題”，內容翔實、難度漸進、結構清晰、語言準確，使讀者學以致用。
隨著信息技術向縱深發展，作為依托互聯網發展起來的網站制作面臨新的挑戰。一方面，用戶更加注重站點信息豐富、功能齊備、頁面精美、操作流暢；另一方面，要滿足用戶不受系統平臺和軟件插件的限制，可以通過移動設備訪問網站。Web新技術HTML5和CSS3能夠實現這些新要求，使其迅速成為網頁設計的熱點。
網頁設計與制作課程是B/S架構軟件項目開發的Web前端技術課程，而HTML與CSS是網頁制作技術的核心和基礎，也是每個網頁制作者必須掌握的基本知識，兩者在網頁設計中不可或缺。
網頁設計本身是一個復雜的系統過程，需要了解問題，對問題進行分析，用邏輯的方法確定最佳的優化方案，最后通過相關技術來實現。初學者如何掌握網頁設計的方法尤為重要。本書以HTML5與CSS3技術為工具，以響應式布局Web頁面設計為載體，強調問題的分析、技術的掌握、能力的拓展，所有知識點都緊跟HTML5與CSS3的發展動態，以創新的模式、結構化的設計、實用的案例、簡明的語言詳細介紹了使用HTML5與CSS3進行網頁設計與制作的相關內容和技巧。
本書針對職業教育人才培養規格的需要，突出職業素質教育和技術應用能力，運用創新思維模式理實一體系統化教學方法。各項目首先確定學習目標，通過項目實施掌握相關的基本知識，然后通過拓展練習強調基本技能的訓練，最后輔以習題。本書每個項目都提供英語角，形成專業詞匯提示，幫助讀者對國際化專業術語的認識，提升學習效果。
本書編寫有以下特色：
（1）全書結構廣度層面體現了職業教育特點，以應用為主，適度夠用為量，內容以HTML5與CSS3技術的技能訓練為主線，突出能力的培養，內容完整、由淺入深、循序漸進，層次清楚。
（2）各項目結構深度層面運用了思維導圖形式，提供一個以職業技能發展為主軸的結構化學習方案，直觀體現學習路徑，提升學習效率。
（3）內容采用任務驅動、項目導入、教學做一體化模式編排而成，通過任務驅動將項目載體融入教學，高強度培養學生工程實踐能力，要求在教學過程中達到項目實踐實訓的目的，實現技術培養與行業企業人才需求接軌。
（4）項目設計實用性強，選取當今互聯網熱點網站設計作為素材，將8個仿真項目融入教材，提高了學習者的學習熱情；同時，添加了企業站點開發的管理規范元素，突出項目管理理念。
（5）突出“做中學、做中教、做中練”，與項目剖析相結合，在體系結構安排上，盡可能將HTML5+CSS3的重要特性與項目相結合。通過項目的分析、設計、總結，將所學的知識與技能點融會貫通，易于理解，能夠幫助讀者提升實際應用技能。
（6）注重“以能力培養為核心，強化實際操作的訓練”，每個項目都精心設計了拓展練習，目的明確，突出實用性、操作性。考慮到初學者經常困惑于如何進行頁面程序的設計，拓展項目給出了相關的提示步驟，使學生在學習的過程中不至于“毫無頭緒”而產生厭煩，從而提高學習的興趣和對編程的愛好程度。
（7）配有針對性的習題，強調每個項目的學習重點，鞏固對知識的掌握。同時，每個項目的英語角提供了相應的專業詞匯，利于專業國際化標準的引入和職業素養的培養。
（8）豐富的新形態教學資源。本書除配套提供電子教學課件、案例庫、習題庫之外，還提供了大量的關于網頁設計、HTML5和CSS3技術的數字資源庫，讀者可以通過掃描二維碼獲取相關資料，實現課程全方位的資源共享。
本書由長期工作在職業教育教學一線，同時具有企業實踐開發經驗的教師編寫而成。其中，項目1～項目4主要由王慶樺老師編寫，項目5～項目8和附錄主要由王新強老師編寫，王玥老師編寫了本書部分內容。全書由王慶樺老師統稿。
雖然編者力求準確無誤、盡善盡美，但由于時間倉促，書中的內容仍難免出現錯誤或不足之處，懇請專家、教師和讀者批評指正。
編 者
王慶樺，天津中德應用技術大學 教務處副處長，中國職業技術教育學會(CSTVE) 教學工作委員會 自動化技術類專業教學研究會 副秘書長，天津市"五一”勞動獎章獲得者，從事相關專業和課程教學14年。先后在加拿大BC省理工學院參加計算機技術、教育教學技能培訓、清華大學Web應用開發技術高級研修班、訪問過澳大利亞和新西蘭等國家，學校職業教育體系。主編或參與編寫教材9冊；參加***教改課題3項，市級教改課題3項；作為主要承擔者參與***、市級精品課或資源共享課3門；指導學生參加天津市高職計算機技能大賽獲一等獎1項，二等獎2項、三等獎2項。
項目1 服裝品牌墻界面設計 1
學習目標 1
學習路徑 1
項目描述 1
項目技能 3
1．1 HTML5概述 3
1．2 HTML5基礎 3
1．3 網頁編輯器及環境 5
1．4 CSS3初體驗 7
1．5 CSS樣式表 8
1．6 CSS選擇器 11
項目實施 16
項目拓展 20
項目總結 22
英語角 22
項目習題 22
項目2 新浪微博導航界面設計 24
學習目標 24
學習路徑 24
項目描述 24
項目技能 25
2．1 HTML5文本標簽 26
2．2 CSS文本屬性 30
2．3 CSS字體屬性 38
2．4 CSS顏色 42
2．5 CSS導航欄 43
2．6 固定布局和流動布局 45
項目實施 46
項目拓展 53
項目總結 54
英語角 55
項目習題 55
項目3 同城旅游主界面設計 56
學習目標 56
學習路徑 56
項目描述 56
項目技能 57
3．1 網頁中支持的圖片格式 57
3．2 HTML5圖像標簽 58
3．3 設置背景屬性 60
3．4 盒子模型 67
3．5 CSS3新增邊框屬性 72
3．6 HTML5圖像過渡和變形屬性 76
任務實施 80
任務拓展 88
任務總結 90
英語角 90
任務習題 91
項目4 小快魚旗艦店主界面設計 92
學習目標 92
學習路徑 92
項目描述 92
項目技能 94
4．1 列表的作用 94
4．2 HTML5文本列表標簽 94
4．3 CSS列表標簽屬性 97
4．4 HTML5創建表格 101
4．5 CSS定位 105
項目實施 110
項目拓展 119
項目總結 120
英語角 121
任務習題 121
項目5 同城旅游用戶注冊界面設計 122
學習目標 122
學習路徑 122
項目描述 122
項目技能 123
5．1 表單的概述 123
5．2 表單基本元素的使用 125
5．3 HTML5新增的input屬性 135
項目實施 142
項目拓展 146
項目總結 149
英語角 149
任務習題 149
項目6 天天動聽播放器界面設計 150
學習目標 150
學習路徑 150
項目描述 150
項目技能 151
6．1 audio標簽概述 151
6．2 audio標簽的屬性 153
6．3 video標簽概述 153
6．4 video標簽的屬性 154
項目實施 155
項目拓展 157
項目總結 158
英語角 158
任務習題 158
項目7 使用HTML5繪制火柴棒人物 160
學習目標 160
學習路徑 160
項目描述 160
項目技能 161
7．1 Canvas概述 161
7．2 Canvas繪制基本圖形 162
7．3 繪制漸變圖形 166
7．4 繪制變形圖形 169
7．5 圖形組合 175
7．6 使用圖像 176
7．7 繪制文字 177
7．8 SVG 179
項目實施 179
項目拓展 182
項目總結 184
英語角 184
項目習題 184
項目8 HTML5+CSS3開發購物網首頁 186
學習目標 186
學習路徑 186
項目描述 186
項目規劃 187
8．1 網站定位 187
8．2 需求分析 188
8．3 網站的風格設計 188
項目實施 188
項目拓展 202
項目總結 204
附錄 參考答案 205
參考文獻 206
新書資訊