HTML5+CSS3網站設計基礎教程(第3版)
黑馬程序員
相關主題
商品描述
本書是針對零基礎網頁設計人員而編寫的入門教程。HTML5與CSS3是網頁製作技術的核心,也是每個網頁製作人員必須掌握的基礎知識。本書從初學者的角度,以實用的案例、通俗易懂的語言詳細介紹如何使用HTML5與CSS3進行網頁製作的方法和技巧。
本書共10章。第1~4章主要講解HTML5與CSS3的基礎知識,包括HTML5入門、HTML5標簽和屬性、CSS3入門、CSS3選擇器等;第5~9章分別講解盒子模型、網頁佈局、表格和表單、多媒體嵌入,以及過渡、變形和動畫等,這些內容是網頁製作技術的核心;第10章是一個實戰開發項目,帶領讀者綜合運用本書所學知識製作油紙傘網站首頁。
本書提供教學PPT、教學大綱、教學視頻、源代碼等豐富的配套資源。
本書可作為高等教育本、專科院校網頁設計與製作課程的教材,也可作為相關從業人員的自學參考書。
作者簡介
黑马程序员,传智教育旗下高端IT教育品牌,它是由中国Java培训先行者张孝祥老师发起,联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今,我们一直坚守着“为千万人少走弯路而著书,为中华软件之崛起而讲课”的办学理念,坚持培养优秀软件应用工程师的宏伟目标,在累计培养的十万余名学员中,其中90%的学员均已在北、上、广等一线城市高薪就业,特别是“黑马程序员”的平均就业薪资已达到8K以上。为了迎合软件市场的需求,我们陆续开设了Java、网页平面、PHP、.Net、iOS、C/C++、Android等9个专业方向的课程,并且未来将逐渐开设其他专业方向的课程。随着传智播客的日益壮大,除了北京总部,我们在上海、广州、武汉、成都、深圳等地也创立了直营分支机构,传智播客俨然已成为了国内具有专业口碑的IT教育机构。
目錄大綱
第 1章 HTML5入門 1
1.1 網頁相關知識 1
1.1.1 網頁構成 1
1.1.2 網頁相關名詞 3
1.1.3 Web標準 4
1.1.4 瀏覽器 5
1.2 HTML5概述 8
1.2.1 HTML的演變歷程 8
1.2.2 HTML5的優勢 9
1.2.3 瀏覽器對HTML5的兼容情況 10
1.3 HTML5的基礎知識 10
1.3.1 HTML5的基本結構 10
1.3.2 HTML5的語法格式 11
1.3.3 HTML5標簽的類型 12
1.3.4 HTML5標簽的屬性 13
1.3.5 HTML5文檔頭部相關標簽 14
1.4 HTML5的代碼編輯工具 15
1.4.1 VS Code的安裝、設置 15
1.4.2 VS Code的使用 18
1.5 階段案例——第 一個HTML5頁面 20
1.5.1 案例分析 20
1.5.2 製作HTML5頁面 20
本章小結 21
動手實踐 21
第 2章 HTML5標簽和屬性 22
2.1 文本控制標簽 22
2.1.1 頁面格式化標簽 22
2.1.2 文本格式化標簽 25
2.1.3 文本樣式標簽 27
2.1.4 特殊字符 28
2.2 圖像標簽 29
2.2.1 常用圖像格式 29
2.2.2 圖像標簽及其屬性 29
2.2.3 絕對路徑和相對路徑 33
2.3 列表標簽 34
2.3.1 無序列表 34
2.3.2 有序列表 35
2.3.3 定義列表 37
2.3.4 列表的嵌套 38
2.4 超鏈接標簽 39
2.4.1 創建超鏈接 39
2.4.2 錨點鏈接 40
2.5 結構標簽 42
2.5.1
2.5.2
2.5.3
2.5.4
2.5.5
2.5.6
2.5.7
2.5.8 標簽 46
2.6 頁面交互標簽 47
2.6.1 標簽 47
2.6.2
2.6.3
2.7 全局屬性 49
2.7.1 draggable屬性 50
2.7.2 hidden屬性 51
2.7.3 contenteditable屬性 51
2.8 階段案例——影片介紹網頁 52
2.8.1 分析效果圖 53
2.8.2 搭建頁面結構 54
本章小結 57
動手實踐 58
第3章 CSS3入門 59
3.1 CSS概述 59
3.1.1 認識CSS 59
3.1.2 CSS的發展歷史 60
3.2 CSS基礎 61
3.2.1 CSS樣式規則 61
3.2.2 引入CSS樣式表 62
3.2.3 CSS基礎選擇器 65
3.3 字體樣式屬性 70
3.3.1 font-size:字號 70
3.3.2 font-family:字體 70
3.3.3 font-weight:文字粗細 71
3.3.4 font-variant:變體 71
3.3.5 font-style:字體風格 71
3.3.6 font:綜合設置字體樣式 71
3.3.7 @font-face規則 72
3.4 文本外觀屬性 73
3.4.1 color:文本顏色 73
3.4.2 letter-spacing:字間距 74
3.4.3 word-spacing:單詞間距 74
3.4.4 line-height:行間距 75
3.4.5 text-transform:文本轉換 75
3.4.6 text-decoration:文本裝飾 76
3.4.7 text-align:水平對齊方式 76
3.4.8 text-indent:首行縮進 77
3.4.9 white-space:空格處理 77
3.4.10 text-shadow:陰影效果 78
3.4.11 text-overflow:處理溢出的文本 79
3.4.12 word-wrap屬性 80
3.5 列表樣式屬性 81
3.5.1 list-style-type屬性 82
3.5.2 list-style-image屬性 83
3.5.3 list-style-position屬性 84
3.5.4 list-style屬性 85
3.6 CSS的層疊性和繼承性 86
3.6.1 層疊性 86
3.6.2 繼承性 87
3.7 CSS優先級 88
3.8 階段案例——宣傳軟文 90
3.8.1 分析效果圖 90
3.8.2 搭建頁面結構 90
3.8.3 定義CSS樣式 91
本章小結 92
動手實踐 92
第4章 CSS3選擇器 93
4.1 屬性選擇器 93
4.1.1 E[attribute]選擇器 93
4.1.2 E[attribute=value]選擇器 94
4.1.3 E[attribute~=value]選擇器 95
4.1.4 E[attribute|=value]選擇器 96
4.1.5 E[attribute^=value]選擇器 96
4.1.6 E[attribute$=value]選擇器 97
4.1.7 E[attribute*=value]選擇器 98
4.2 關系選擇器 98
4.2.1 子元素選擇器 99
4.2.2 兄弟選擇器 99
4.3 結構化偽類選擇器 101
4.3.1 :root選擇器 101
4.3.2 :not選擇器 102
4.3.3 :only-child選擇器 103
4.3.4 :first-child選擇器和:last-child選擇器 104
4.3.5 :nth-child(n)選擇器和:nth-last-child(n)選擇器 105
4.3.6 :first-of-type選擇器和 :last-of-type選擇器 106
4.3.7 :nth-of-type(n)選擇器
和:nth-last-of-type(n)選擇器 107
4.3.8 :empty選擇器 108
4.3.9 :target選擇器 108
4.4 狀態化偽類選擇器 109
4.5 偽元素選擇器 111
4.5.1 :before選擇器 111
4.5.2 :after選擇器 112
4.6 階段案例——風雲人物列表頁面 113
4.6.1 分析效果圖 114
4.6.2 搭建頁面結構 115
4.6.3 定義CSS樣式 117
本章小結 118
動手實踐 119
第5章 盒子模型 120
5.1 認識盒子模型 120
5.2
5.3 邊框屬性 123
5.3.1 border-style:邊框樣式 123
5.3.2 border-width:邊框寬度 124
5.3.3 border-color:邊框顏色 125
5.3.4 border:綜合設置邊框 125
5.3.5 border-radius:圓角邊框 126
5.3.6 border-image:圖像邊框 128
5.4 邊距屬性 131
5.4.1 內邊距屬性 131
5.4.2 外邊距屬性 133
5.5 寬度屬性和高度屬性 134
5.6 box-shadow屬性 135
5.7 box-sizing屬性 136
5.8 背景屬性 138
5.8.1 設置背景顏色 138
5.8.2 設置背景圖像 139
5.8.3 設置背景圖像平鋪 139
5.8.4 設置背景圖像的位置 140
5.8.5 設置背景圖像固定 142
5.8.6 設置背景顏色與背景圖像的不透明度 142
5.8.7 設置背景圖像的大小 143
5.8.8 設置背景的顯示區域 144
5.8.9 設置背景的裁剪區域 146
5.8.10 設置多重背景圖像 147
5.8.11 背景復合屬性 148
5.9 CSS3漸變屬性 149
5.9.1 線性漸變 149
5.9.2 徑向漸變 150
5.9.3 重復漸變 151
5.10 階段案例——感動中國人物榜 153
5.10.1 分析效果圖 153
5.10.2 搭建頁面結構 154
5.10.3 定義CSS樣式 154
本章小結 155
動手實踐 156
第6章 網頁佈局 157
6.1 網頁佈局概述 157
6.2 元素的浮動 159
6.2.1 元素的浮動屬性 159
6.2.2 清除浮動 162
6.3 overflow屬性 167
6.4 元素的定位 170
6.4.1 元素的定位屬性 170
6.4.2 靜態定位 170
6.4.3 相對定位 171
6.4.4 絕對定位 172
6.4.5 固定定位 174
6.4.6 z-index層疊等級屬性 174
6.5 元素的類型與轉換 174
6.5.1 元素的類型 174
6.5.2 標簽 176
6.5.3 元素的轉換 177
6.6 佈局類型 179
6.6.1 單列佈局 179
6.6.2 兩列佈局 180
6.6.3 三列佈局 181
6.7 網頁模塊的命名規範 185
6.8 階段案例——網頁焦點圖 186
6.8.1 分析效果圖 186
6.8.2 搭建頁面結構 186
6.8.3 定義CSS樣式 187
本章小結 190
動手實踐 190
第7章 表格和表單 191
7.1 表格 191
7.1.1 創建表格 191
7.1.2
標簽的屬性 198 7.1.5 | 標簽 200 7.1.6 表格的結構 200 7.2 使用CSS控製表格樣式 201 7.2.1 使用CSS控製表格邊框 201 7.2.2 使用CSS控制單元格邊距 204 7.2.3 使用CSS控制單元格的 寬度和高度 205 7.3 表單 206 7.3.1 表單的構成 206 7.3.2 創建表單 207 7.3.3 表單控件 207 7.4 HTML5表單的新增控件類型、標簽和屬性 215 7.4.1 新的input控件類型 215 7.4.2 新的表單標簽 219 7.4.3 新的input控件屬性 221 7.4.4 新的表單屬性 227 7.5 使用CSS控製表單樣式 227 7.6 階段案例——信息登記表 229 7.6.1 分析效果圖 230 7.6.2 搭建頁面結構 230 7.6.3 定義CSS樣式 231 本章小結 233 動手實踐 234 第8章 多媒體嵌入 235 8.1 視頻、音頻嵌入技術概述 235 8.2 HTML5支持的視頻格式和音頻格式 237 8.2.1 視頻格式 237 8.2.2 音頻格式 237 8.3 嵌入視頻和音頻 238 8.3.1 在HTML5中嵌入視頻 238 8.3.2 在HTML5中嵌入音頻 240 8.3.3 視頻、音頻文件的兼容性問題 240 8.3.4 調用網絡音頻、視頻文件 242 8.4 使用CSS控制視頻的寬度和高度 243 8.5 階段案例—音樂播放頁面 244 8.5.1 分析效果圖 245 8.5.2 搭建頁面結構 245 8.5.3 定義CSS樣式 246 本章小結 248 動手實踐 248 第9章 過渡、變形和動畫 250 9.1 過渡 250 9.1.1 transition-property屬性 250 9.1.2 transition-duration屬性 251 9.1.3 transition-timing-function屬性 252 9.1.4 transition-delay屬性 253 9.1.5 transition屬性 253 9.2 變形 254 9.2.1 認識transform 254 9.2.2 2D變形 254 9.2.3 3D變形 259 9.3 動畫 263 9.3.1 @keyframes規則 264 9.3.2 animation-name屬性 264 9.3.3 animation-duration屬性 265 9.3.4 animation-timing-function屬性 266 9.3.5 animation-delay屬性 266 9.3.6 animation-iteration-count屬性 266 9.3.7 animation-direction屬性 266 9.3.8 animation屬性 267 9.4 階段案例——表情圖片 268 9.4.1 分析效果圖 268 9.4.2 搭建頁面結構 269 9.4.3 定義CSS樣式 269 本章小結 272 動手實踐 272 第 10章 實戰開發——製作油紙傘網站首頁 273 10.1 項目背景 274 10.2 準備工作 274 10.3 製作網站首頁 277 本章小結 295 動手實踐 295 類似商品
|
---|