本書主要介紹HTML5和CSS3網(wǎng)頁制作技術(shù)。全書共12章。第1～3章介紹網(wǎng)頁制作技術(shù)基礎(chǔ)知識；第4章介紹盒子模型的概念和應(yīng)用，該模型是網(wǎng)頁制作技術(shù)的核心和基礎(chǔ)；第5章介紹鏈接與列表的應(yīng)用；第6章介紹如何利用浮動與定位實現(xiàn)網(wǎng)頁布局；第7章介紹表格與表單的應(yīng)用；第8章介紹CSS3的選擇器；第9章介紹CSS3的過渡、變形及動畫技術(shù)；第10章介紹CSS3的彈性布局；第11章介紹多媒體與開放平臺實用工具的應(yīng)用；第12章介紹如何制作一個完整的網(wǎng)站首頁，以達(dá)到整合HTML5和CSS3各方面內(nèi)容與技巧的目的。各章均包含若干實驗，每個實驗都有詳細(xì)的分析過程和清晰的制作過程，便于讀者在實踐中逐步掌握網(wǎng)頁制作技術(shù)。
本書可作為大中專院校、培訓(xùn)學(xué)校的計算機(jī)及相關(guān)專業(yè)的實驗實訓(xùn)教材，也可作為網(wǎng)頁設(shè)計與制作、網(wǎng)站開發(fā)等相關(guān)人員的參考書。
“網(wǎng)頁設(shè)計與制作”是計算機(jī)相關(guān)專業(yè)的專業(yè)基礎(chǔ)課程之一。HTML與CSS是網(wǎng)頁制作技術(shù)的核心基礎(chǔ)，也是網(wǎng)頁制作者必須掌握的基礎(chǔ)知識，二者在網(wǎng)頁制作中不可或缺。HTML5是最新的HTML標(biāo)準(zhǔn)，CSS3是CSS最新的版本，本書主要介紹HTML5和CSS3網(wǎng)頁制作技術(shù)。只有通過實踐才能扎實掌握網(wǎng)頁制作技術(shù)，因此本書著重于實踐指導(dǎo)。
本書特色
· 以理論為基礎(chǔ)，以實踐為目標(biāo)
本書每章內(nèi)容均由知識點梳理、基礎(chǔ)練習(xí)和動手實踐三部分組成，前兩個部分是理論，最后一個部分是基于理論的實踐。這種安排能讓讀者在學(xué)習(xí)過程中，透徹理解知識點，而后通過基礎(chǔ)練習(xí)鞏固理論知識，最后再通過動手實踐達(dá)到學(xué)以致用。
· 實驗內(nèi)容豐富、實用
書中每個實驗都是作者精心挑選和設(shè)計的，是作者在實際開發(fā)中的經(jīng)驗?zāi)Y(jié)。實驗給出了深入淺出的分析以及簡明清晰的制作步驟。實驗案例經(jīng)典，能使學(xué)生舉一反三，直接在實際項目中使用。每個實驗具體內(nèi)容大體包括如下五個要點：
(1) 考核知識點(知識點復(fù)習(xí)綱要)；
(2) 練習(xí)目標(biāo)(實驗?zāi)康?；
(3) 實驗內(nèi)容及要求(實驗要求)；
(4) 實驗分析(實現(xiàn)思路)；
(5) 實現(xiàn)步驟(制作步驟)。
· 圖文并茂
實驗分析不僅有文字描述，還有分析圖示意，實現(xiàn)步驟中的每個階段都有階段性的效果圖。
· 與時俱進(jìn)
HTML5是最新的HTML標(biāo)準(zhǔn)，CSS3是CSS的最新版本，本書以HTML5和CSS3為平臺介紹網(wǎng)頁制作技術(shù)，書中案例都是以最新規(guī)范實現(xiàn)的。
讀者對象
本書可作為大中專院校、培訓(xùn)學(xué)校的計算機(jī)及相關(guān)專業(yè)的實驗實訓(xùn)教材，也可供網(wǎng)頁設(shè)計與制作、網(wǎng)站開發(fā)等從業(yè)人員參考。
本書由桂林電子科技大學(xué)李新榮主編，陳小海、鄧杰、謝紹敏任副主編。由于信息技術(shù)的發(fā)展非常迅速，加之作者水平有限，書中不足之處在所難免，歡迎讀者不吝指正。在閱讀本書時，如發(fā)現(xiàn)問題可以通過電子郵件(123990509@qq.com)與編者聯(lián)系。
編 者?
2022年2月
第1章 網(wǎng)頁制作基礎(chǔ) 1
1.1 知識點梳理 1
1.2 基礎(chǔ)練習(xí) 1
1.3 動手實踐 2
1.3.1 實驗1 ?Dreamweaver初始化設(shè)置 2
1.3.2 實驗2 用Dreamweaver制作第一個網(wǎng)頁 4
1.3.3 實驗3 下載及安裝VSCode 7
1.3.4 實驗4 ?VSCode插件的獲取及安裝 9
1.3.5 實驗5 用VSCode制作第一個網(wǎng)頁 11
第2章 HTML入門 14
2.1 知識點梳理 14
2.2 基礎(chǔ)練習(xí) 19
2.3 動手實踐 19
2.3.1 實驗1 ?HTML元素和屬性 19
2.3.2 實驗2 圖文混排 21
2.3.3 實驗3 淘寶寶貝展示 25
2.3.4 實驗4 標(biāo)簽綜合練習(xí)(月記文案) 26
第3章 CSS入門 29
3.1 知識點梳理 29
3.2 基礎(chǔ)練習(xí) 33
3.3 動手實踐 34
3.3.1 實驗1 文章排版一 34
3.3.2 實驗2 文章排版二 36
3.3.3 實驗3 文章排版三 38
3.3.4 實驗4 新品上市 41
第4章 盒子模型 44
4.1 知識點梳理 44
4.2 基礎(chǔ)練習(xí) 50
4.3 動手實踐 51
4.3.1 實驗1 潮流新品寶貝展示 51
4.3.2 實驗2 酷車e族寶貝展示 56
4.3.3 實驗3 盒子屬性綜合實戰(zhàn) 60
第5章 鏈接與列表 63
5.1 知識點梳理 63
5.2 基礎(chǔ)練習(xí) 65
5.3 動手實踐 66
5.3.1 實驗1 頁碼導(dǎo)航條 66
5.3.2 實驗2 圖片熱點超鏈接 68
5.3.3 實驗3 無序列表制作魅力彩妝歲末盛惠廣告 71
5.3.4 實驗4 自定義列表展示商品 73
5.3.5 實驗5 服裝鞋包菜單制作 76
第6章 浮動與定位 80
6.1 知識點梳理 80
6.2 基礎(chǔ)練習(xí) 82
6.3 動手實踐 82
6.3.1 實驗1 食品農(nóng)業(yè)市場商品展示 82
6.3.2 實驗2 商品分類二級菜單 88
6.3.3 實驗3 天貓商城右側(cè)通道工具欄 94
第7章 表格與表單 100
7.1 知識點梳理 100
7.2 基礎(chǔ)練習(xí) 104
7.3 動手實踐 105
7.3.1 實驗1 信用評價表格 105
7.3.2 實驗2 寶貝發(fā)布表單 110
7.3.3 實驗3 服裝上線申請登記表 114
第8章 CSS3選擇器 122
8.1 知識點梳理 122
8.2 基礎(chǔ)練習(xí) 124
8.3 動手實踐 125
8.3.1 實驗1 慕課課程列表 125
8.3.2 實驗2 模擬小米元素動態(tài)鬧鈴 129
8.3.3 實驗3 模擬新浪網(wǎng)站導(dǎo)航欄 133
8.3.4 實驗4 模擬新浪體育網(wǎng)站導(dǎo)航欄 137
8.3.5 實驗5 漢堡菜單 139
8.3.6 實驗6 海洋生物 141
第9章 過渡、變形及動畫 146
9.1 知識點梳理 146
9.2 基礎(chǔ)練習(xí) 150
9.3 動手實踐 151
9.3.1 實驗1 模仿瑞麗STAR展示效果 151
9.3.2 實驗2 能位移的標(biāo)題列表 157
9.3.3 實驗3 帶延伸線動畫的導(dǎo)航欄 159
9.3.4 實驗4 蒲公英的夢想 161
第10章 彈性布局 166
10.1 知識點梳理 166
10.2 基礎(chǔ)練習(xí) 168
10.3 動手實踐 169
10.3.1 實驗1 用彈性盒子模型布局制作中秋節(jié)快樂卡 169
10.3.2 實驗2 用彈性布局實現(xiàn)京東導(dǎo)航 172
第11章 多媒體與開放平臺實用工具的應(yīng)用 175
11.1 知識點梳理 175
11.2 基礎(chǔ)練習(xí) 176
11.3 動手實踐 177
11.3.1 實驗1 制作學(xué)校的地圖名片 177
11.3.2 實驗2 在網(wǎng)站上設(shè)置QQ在線客服 179
11.3.3 實驗3 社會化分享按鈕 182
11.3.4 實驗4 網(wǎng)頁中應(yīng)用視頻分享 185
第12章 網(wǎng)頁布局綜合實踐 187
12.1 知識點梳理 187
12.2 基礎(chǔ)練習(xí) 187
12.3 動手實踐 189
實驗 模仿制作“時尚芭莎”網(wǎng)站首頁 189
附錄 各章基礎(chǔ)練習(xí)參考答案 202
參考文獻(xiàn) 208
書單推薦
