網頁設計項目教程

本書從初學者的角度出發，以一個完整的旅游網站前端頁面的開發項目為載體，按照項目開發流程和學生的認知規律，由淺入深、循序漸進地將HTML5和CSS3的理論知識和關鍵技術融入各個工作任務中。通過具體任務的實施及項目的完整實現，使學生能夠快速掌握網站前端頁面開發相關的理論知識和職業技能，從而獨立設計開發各種類型的商業網站。本書包含12個項目，項目涉及的主要知識點和技能點包括：網站開發環境的選取和配置、DIV+CSS頁面佈局技術、HTML5標記與CSS3樣式屬性的使用、浮動與定位的設置、HTML5音視頻技術、表單的應用、CSS3的動畫製作、響應式頁面開發、彈性盒佈局技術等，並配有微課視頻、課件、源代碼、任務拓展、閱讀拓展、習題等數字教學資源。

項目1 製作第一個網頁 1
任務1.1 認識網頁、瀏覽器與WWW 1
1.1.1 Web的發展歷程和相關概念 2
1.1.2 常用瀏覽器 5
1.1.3 HTML5的發展歷程和相關概念 5
任務1.2 創建第一個HTML5網頁 6
1.2.1 建立網站的目錄結構 7
1.2.2 常用的集成開發環境 7
1.2.3 HTML5網頁的基本結構 8
1.2.4 代碼註釋 11
項目小結 14
課後習題 14
項目2 搭建網頁基礎佈局 15
任務2.1　創建CSS3樣式表 15
2.1.1 CSS概述 16
2.1.2 CSS樣式規則及引入方式 18
2.1.3 CSS基礎選擇器 23
2.1.4 CSS的特徵 28
任務2.2 使用盒模型對網頁進行基礎佈局 36
2.2.1 盒模型基礎 37
2.2.2 盒模型的相關屬性 41
2.2.3 盒模型的內減模式 55
2.2.4 背景樣式基礎 58
項目小結 72
課後習題 72
項目3 製作公司簡介模塊 74
任務3.1　文字內容的製作 74
3.1.1 文本相關的標記 75
3.1.2 CSS字體及文本樣式 80
任務3.2 圖像內容的製作 92
3.2.1 圖像標記 93
3.2.2 元素顯示模式轉換 96
項目小結 102
課後習題 102
項目4 製作旅行故事模塊 104
任務4.1　元素的浮動 104
4.1.1 浮動屬性 105
4.1.2 清除浮動的不良影響（盒子高度塌陷及其解決辦法） 110
任務4.2 元素的定位 117
4.2.1 定位的作用及分類 118
4.2.2 絕對定位與相對定位 120
4.2.3 固定定位的特點及應用案例 122
4.2.4 元素的層疊等級 123
項目小結 130
課後習題 130
項目5 製作新聞中心模塊 132
任務5.1　列表的製作 132
5.1.1 列表標記 133
5.1.2 列表樣式 136
項目小結 145
課後習題 146
項目6 製作導航模塊 147
任務6.1　超鏈接的製作 147
6.1.1 超鏈接標記 148
6.1.2 CSS鏈接偽類選擇器 151
6.1.3 CSS屬性選擇器 152
任務6.2　列表嵌套 160
6.2.1 列表的嵌套 160
6.2.2 CSS關系選擇器 161
6.2.3 CSS偽類選擇器 164
項目小結 172
課後習題 172
項目7 製作宣傳視頻模塊 174
任務7.1　播放音頻和視頻 174
7.1.1 HTML5的音頻標記 175
7.1.2 HTML5的視頻標記 178
項目小結 185
課後習題 185
項目8 製作熱門推薦模塊 187
任務8.1　表格的製作 187
8.1.1 表格的相關標記 188
8.1.2 表格的樣式設置 193
8.1.3 合並單元格 196
項目小結 200
課後習題 200
項目9 製作會員登錄頁面 202
任務9.1　表單的製作 202
9.1.1 表單的作用及構成 203
9.1.2 input表單控件 206
項目小結 222
課後習題 222
項目10 製作新聞詳情頁面 223
任務10.1　HTML5新增標記與屬性 223
10.1.1 新增文檔結構化標記 224
10.1.2 新增語義信息標記 229
10.1.3 新增全局屬性 230
任務10.2　CSS3高級應用 235
10.2.1 線性漸變 235
10.2.2 徑向漸變 236
10.2.3 文字漸變 239
項目小結 241
課後習題 242
項目11 製作頁面動畫效果 243
任務11.1　過渡效果的實現 243
任務11.2　變形與動畫效果的實現 252
11.2.1 CSS3的變形屬性 253
11.2.2 CSS3的動畫屬性 262
項目小結 269
課後習題 270
?
項目12 製作響應式頁面 271
任務12.1　頁面佈局的新技術 271
12.1.1 響應式網頁設計 273
12.1.2 媒體查詢 274
12.1.3 彈性盒佈局 283
項目小結 300
課後習題 300