《HTML+CSS3網頁設計與製作案例課堂》是2014年清華大學出版社出版的圖書。
基本介紹
- 中文名：HTML+CSS3網頁設計與製作案例課堂
- 作者：劉玉紅
- 出版時間：2014年12月19日
- 出版社：清華大學出版社
- ISBN：9787302386179
- 定價：58 元
- 裝幀：平裝
圖書簡介,目錄,
圖書簡介
本書根據作者在長期教學中積累的豐富的網頁設計教學經驗，完整、詳盡地介紹HTML + CSS 3網頁樣式與布局的技術。
目錄
第1章HTML與CSS3網頁設計概述 1
1.1網頁與網站 2
1.1.1什麼是網頁和網站 2
1.1.2網頁的基本構成元素 2
1.2HTML的基本概念 3
1.2.1什麼是HTML 4
1.2.2HTML的發展歷程 4
1.2.3HTML檔案的基本結構 4
1.3CSS的基本概念 5
1.3.1什麼是CSS 5
1.3.2HTML與CSS的優缺點 5
1.3.3瀏覽器對CSS3的支持 6
1.4HTML與CSS網頁的開發環境 6
1.4.1記事本開發環境 6
1.4.2DreamweaverCS6開發環境 7
1.5專家答疑 7
第2章網頁文檔的結構 9
2.1HTML文檔的基本結構 10
2.1.1HTML頁面的整體結構 10
2.1.2HTML5新增的結構標記 10
2.2HTML5的基本標記詳解 11
2.2.1文檔類型說明 11
2.2.2HTML標記 11
2.2.3頭標記head 11
2.2.4網頁的主體標記body 14
2.2.5頁面注釋標記<!----> 15
2.3HTML5語法的變化 15
2.3.1標籤不再區分大小寫 15
2.3.2允許屬性值不使用引號 16
2.3.3允許部分屬性值的屬性省略 17
2.4HTML5檔案的編寫方法 17
2.4.1示例1——使用記事本手工編寫HTML5 17
2.4.2示例2——使用DreamweaverCS6編寫HTML檔案 18
2.5使用瀏覽器查看HTML5檔案 20
2.5.1示例3——查看頁面效果 20
2.5.2示例4——查看源檔案 21
2.7上機練習——簡單的HTML5網頁 22
2.8專家答疑 23
第3章網頁文本的設計 25
3.1在網頁中添加文本 26
3.1.1普通文本的添加 26
3.1.2特殊字元文本的添加 26
3.2使用HTML5標記添加特殊文本 28
3.2.1添加重要文本 28
3.2.2添加傾斜文本 29
3.2.3添加上標和下標文本 29
3.2.4設定文本旁註的文字大小 30
3.2.5設定已刪除文本 30
3.2.6定義文本的方向 31
3.3使用HTML5標記排版網頁文本 31
3.3.1網頁段落文本換行 32
3.3.2分段顯示網頁段落文本 32
3.3.3設定網頁中的標題文本 33
3.3.4為網頁添加水平線 34
3.4文字列表 35
3.4.1建立無序列表<ul> 35
3.4.2建立有序列表<ol> 36
3.4.3建立不同類型的無序列表 37
3.4.4建立不同類型的有序列表 38
3.4.5建立嵌套列表 39
3.4.6自定義列表 39
3.5綜合示例——製作簡單的純文本網頁 40
3.6上機練習——製作旅遊網網頁 41
3.7專家答疑 42
第4章網頁色彩和圖像的設計 43
4.1網頁色彩的套用 44
4.1.1認識色彩 44
4.1.2網頁中色彩的搭配 45
4.1.3網頁元素的色彩搭配 46
4.1.4網頁顏色的使用風格 47
4.1.5精彩配色賞析 48
4.2網頁中的圖像<img> 49
4.2.1在網頁中插入圖像 49
4.2.2設定圖像的寬度和高度 51
4.2.3設定圖像的提示文字 51
4.2.4將圖片設定為網頁背景 52
4.2.5排列圖像 53
4.3綜合示例——圖文並茂的房屋裝飾裝修網頁 54
4.4上機練習——線上購物網站的產品展示 55
4.5專家答疑 56
第5章網頁超連結的設計 57
5.1連結和路徑 58
5.1.1超連結的概念 58
5.1.2連結路徑URL 58
5.1.3創建HTTP路徑 60
5.1.4創建FTP路徑 61
5.1.5創建電子郵件路徑 61
5.2創建網頁文本連結 62
5.2.1使用連結元素<a>創建文本超連結(1) 62
5.2.2使用連結元素<a>創建文本超連結(2) 63
5.2.3設定以新視窗顯示超連結頁面 64
5.2.4連結到同一頁面的不同位置 65
5.3創建網頁圖像連結 66
5.3.1創建圖像超連結 67
5.3.2創建圖像局部連結 67
5.4創建浮動框架 68
5.5綜合示例——用Dreamweaver
精確定位熱點區域 69
5.6上機練習——創建熱點區域 71
5.7專家答疑 72
第6章網頁表單的設計 75
6.1表單概述 76
6.2在網頁中添加基本的表單元素 76
6.2.1添加單行文本輸入框 77
6.2.2添加多行文本輸入框 77
6.2.3添加密碼輸入框 78
6.2.4添加單選按鈕 79
6.2.5添加複選框 80
6.2.6添加下拉選擇框 80
6.2.7添加普通按鈕 81
6.2.8添加提交按鈕 82
6.2.9添加重置按鈕 83
6.3在網頁中添加高級表單元素 84
6.3.1添加不能為空的網站網址輸入框 84
6.3.2添加信箱輸入框 85
6.3.3添加時間類型表單 86
6.3.4添加數值輸入框 87
6.3.5添加滾動控制項 87
6.3.6添加不能為空的表單元素 88
6.4綜合示例——創建用戶反饋表單 89
6.5上機練習——製作用戶註冊表單 90
6.6專家答疑 91
第7章網頁表格的設計 93
7.1表格的基本結構 94
7.2創建表格 95
7.2.1創建普通表格 95
7.2.2創建一個帶有標題的表格 96
7.3編輯表格 97
7.3.1定義表格的框線類型 97
7.3.2定義表格的表頭 98
7.3.3設定表格的背景 99
7.3.4設定單元格的背景 101
7.3.5合併單元格 102
7.3.6排列單元格中的內容 106
7.3.7設定單元格的行高與列寬 107
7.4完整的表格標記 108
7.5綜合示例——製作計算機報價表 109
7.6上機練習——製作學生成績表 111
7.7專家答疑 114
第8章網頁音頻和視頻的設計 117
8.1audio標籤 118
8.1.1audio標籤概述 118
8.1.2audio標籤的屬性 119
8.1.3audio標籤瀏覽器的支持情況 119
8.2在網頁中添加音頻檔案 120
8.2.1添加自動播放音頻檔案 120
8.2.2添加帶有控制項的音頻檔案 120
8.2.3添加循環播放的音頻檔案 121
8.2.4添加預播放的音頻檔案 121
8.3video標籤 122
8.3.1video標籤概述 122
8.3.2video標籤的屬性 123
8.3.3video標籤瀏覽器的支持情況 124
8.4在網頁中添加視頻檔案 124
8.4.1添加自動播放的視頻檔案 124
8.4.2添加帶有控制項的視頻檔案 125
8.4.3添加循環播放的視頻檔案 125
8.4.4添加預播放的視頻檔案 126
8.4.5設定視頻檔案的高度和寬度 127
8.5專家答疑 127
第9章網頁圖形的繪製 129
9.1添加canvas的步驟 130
9.2繪製基本形狀 130
9.2.1繪製矩形 131
9.2.2繪製圓形 132
9.2.3使用moveTo與lineTo繪製直線 133
9.2.4使用bezierCurveTo繪製貝塞爾曲線 134
9.3繪製漸變圖形 136
9.3.1繪製線性漸變 136
9.3.2繪製徑向漸變 137
9.4繪製變形圖形 138
9.4.1繪製平移效果的圖形 138
9.4.2繪製縮放效果的圖形 139
9.4.3繪製旋轉效果的圖形 140
9.4.4繪製組合效果的圖形 141
9.4.5繪製帶陰影的圖形 143
9.5使用圖像 144
9.5.1繪製圖像 145
9.5.2平鋪圖像 146
9.5.3裁剪圖像 147
9.5.4圖像的像素處理 149
9.6繪製文字 150
9.7圖形的保存與恢復 152
9.7.1保存與恢復狀態 152
9.7.2保存檔案 153
9.8綜合示例——繪製火柴棒人物 154
9.9上機練習——繪製商標 157
9.10專家答疑 158
第10章CSS3網頁樣式核心基礎 161
10.1CSS3基礎語法概述 162
10.1.1CSS3的構造規則 162
10.1.2CSS3的常用單位 162
10.1.3CSS3的注釋 166
10.2編輯CSS3檔案的方法 167
10.2.1手工編寫CSS3 167
10.2.2用Dreamweaver編寫CSS 168
10.3在HTML5中使用CSS3的方法 169
10.3.1行內樣式 169
10.3.2內嵌樣式 170
10.3.3連結樣式 171
10.3.4導入樣式 172
10.3.5優先權問題 173
10.4CSS3的基本選擇器 176
10.4.1標籤選擇器 176
10.4.2類選擇器 177
10.4.3ID選擇器 178
10.4.4全局選擇器 179
10.5綜合示例——製作炫彩網站Logo 179
10.6上機練習——製作學生信息統計表 182
10.7專家答疑 184
第11章使用CSS3控制網頁字型與段落樣式 185
11.1豐富網頁文字樣式 186
11.1.1設定文字的字型樣式 186
11.1.2設定文字的字號 187
11.1.3設定字型風格 188
11.1.4設定加粗字型 189
11.1.5將小寫字母轉為大寫字母 190
11.1.6設定字型的複合屬性 191
11.1.7設定字型顏色 192
11.2網頁文本的高級樣式 193
11.2.1設定文本陰影效果 193
11.2.2設定文本溢出效果 194
11.2.3設定文本的控制換行 195
11.2.4保持字型尺寸不變 196
11.3豐富網頁中的段落樣式 197
11.3.1設定單詞之間的間隔 197
11.3.2設定字元之間的間隔 198
11.3.3設定文字的修飾效果 199
11.3.4設定垂直對齊方式 200
11.3.5轉換文本的大小寫 202
11.3.6設定文本的水平對齊方式 203
11.3.7設定文本的縮進效果 204
11.3.8設定文本的行高 205
11.3.9文本的空白處理 206
11.3.10文本的反排 207
11.4綜合示例——設定網頁標題 208
11.5上機練習——製作新聞頁面 210
11.6專家答疑 211
第12章使用CSS3控制網頁圖片的顯示樣式 213
12.1縮放圖片 214
12.1.1使用描述標記width和height縮放圖片 214
12.1.2使用CSS3中的max-width和max-height縮放圖片 214
12.1.3使用CSS3中的width和height縮放圖片 215
12.2網頁圖片與文字的對齊方式 216
12.2.1橫向對齊方式 216
12.2.2縱向對齊方式 217
12.3圖文混排樣式 219
12.3.1設定文字環繞效果 219
12.3.2設定圖片與文字的間距 220
12.4綜合示例——製作學校宣傳單 222
12.5上機練習——製作簡單的圖文混排網頁 224
12.6專家答疑 225
第13章使用CSS3控制網頁背景與框線的樣式 227
13.1使用CSS3美化背景 228
13.1.1設定背景顏色 228
13.1.2設定背景圖片 229
13.1.3背景圖片重複 230
13.1.4背景圖片顯示 231
13.1.5背景圖片位置 233
13.1.6背景圖片大小 234
13.1.7背景顯示區域 236
13.1.8背景圖像裁剪區域 237
13.1.9背景複合屬性 238
13.2使用CSS3美化框線 239
13.2.1設定框線的樣式 240
13.2.2設定框線的顏色 241
13.2.3設定框線的線寬 242
13.2.4設定框線的複合屬性 244
13.3設定框線的圓角效果 245
13.3.1設定圓角框線 245
13.3.2指定兩個圓角半徑 246
13.3.3繪製四個不同圓角框線 247
13.3.4繪製不同種類的框線 249
13.4綜合示例——製作簡單的公司主頁 250
13.5上機練習——製作簡單的生活資訊主頁 253
13.6專家答疑 255
第14章使用CSS3控制表格和表單樣式 257
14.1美化表格的樣式 258
14.1.1設定表格框線的樣式 258
14.1.2設定表格框線的寬度 260
14.1.3設定表格框線的顏色 261
14.2美化表單樣式 262
14.2.1美化表單中的元素 262
14.2.2美化提交按鈕 264
14.2.3美化下拉選單 265
14.3綜合示例——製作用戶登錄頁面 267
14.4上機練習——製作用戶註冊頁面 268
14.5專家答疑 270
第15章使用CSS3控制網頁超連結和滑鼠的樣式 273
15.1使用CSS3豐富超連結樣式 274
15.1.1改變超連結的基本樣式 274
15.1.2設定帶有提示信息的超連結 275
15.1.3設定超連結的背景圖 276
15.1.4設定超連結的按鈕效果 277
15.2使用CSS3豐富滑鼠樣式 278
15.2.1使用CSS3控制滑鼠箭頭 278
15.2.2設定滑鼠變幻式超連結 280
15.2.3設定網頁的頁面滾動條 281
15.3綜合示例1——圖片版本的超連結 283
15.4綜合示例2——滑鼠特效 284
15.5上機練習——製作一個簡單的導航欄 287
15.6專家答疑 288
第16章使用CSS3控制網頁導航選單的樣式 291
16.1使用CSS3來豐富項目的列表樣式 292
16.1.1豐富無序列表樣式 292
16.1.2豐富有序列表樣式 293
16.1.3豐富自定義列表樣式 295
16.1.4製作圖片列表 296
16.1.5縮進圖片列表 298
16.1.6列表的複合屬性 299
16.2使用CSS3製作網頁選單 300
16.2.1製作無需表格的選單 300
16.2.2製作水平和垂直選單 302
16.3綜合示例——模擬搜搜導航欄 304
16.4上機練習——將段落轉變成列表 307
16.5專家答疑 309
第17章掌握CSS3的高級屬性 311
17.1複合選擇器 312
17.1.1“交集”選擇器 312
17.1.2“並集”選擇器 313
17.1.3後代選擇器 313
17.2CSS3新增的選擇器 314
17.2.1屬性選擇器 315
17.2.2結構偽類選擇器 316
17.2.3UI元素狀態偽類選擇器 318
17.3CSS的繼承特性 319
17.3.1繼承關係 319
17.3.2CSS繼承的運用 320
17.4CSS的層疊特性 321
17.4.1同一選擇器被多次定義的處理 321
17.4.2同一標籤運用不同類型選擇器的處理 322
17.5綜合示例——製作新聞選單 323
17.6專家答疑 326
第18章CSS3定位與DIV布局核心技術 327
18.1了解塊級元素和行內級元素 328
18.1.1塊級元素和行內級元素的套用 328
18.1.2div元素和span元素的區別 330
18.2盒子模型 331
18.2.1盒子模型的概念 331
18.2.2定義網頁的border區域 332
18.2.3定義網頁的padding區域 333
18.2.4定義網頁的margin區域 334
18.3CSS3新增的彈性盒模型 338
18.3.1定義盒子的布局取向(box-orient) 338
18.3.2定義盒子的布局順序(box-direction) 339
18.3.3定義盒子布局的位置(box-ordinal-group) 341
18.3.4定義盒子的彈性空間(box-flex) 342
18.3.5管理盒子空間(box-pack和box-align) 344
18.3.6盒子空間的溢出管理(box-lines) 346
18.4綜合示例——圖文排版效果 347
18.5上機練習——淘寶導購選單 349
18.6專家答疑 352
第19章CSS3+DIV盒子的浮動與定位 353
19.1定義DIV 354
19.1.1什麼是DIV 354
19.1.2創建DIV 354
19.2盒子的定位 355
19.2.1靜態定位 355
19.2.2相對定位 356
19.2.3絕對定位 357
19.2.4固定定位 358
19.2.5盒子的浮動 359
19.3其他CSS布局定位方式 361
19.3.1溢出(overflow)定位 361
19.3.2隱藏(visibility)定位 362
19.3.3z-index空間定位 364
19.4新增的CSS3多列布局 366
19.4.1設定列寬度 366
19.4.2設定列數 367
19.4.3設定列間距 369
19.4.4設定列框線樣式 370
19.5綜合示例——定位網頁布局樣式 372
19.6上機練習——製作陰影文字效果 374
19.7專家答疑 375
第20章網頁布局剖析與製作 377
20.1固定寬度網頁剖析與布局 378
20.1.1示例1——網頁單列布局模式 378
20.1.2示例2——網頁1-2-1型布局模式 381
20.1.3示例3——網頁1-3-1型布局模式 384
20.2自動縮放網頁1-2-1型布局模式 387
20.2.1示例4——“1-2-1”等比例變寬布局 387
20.2.2示例5——“1-2-1”單列變寬布局 388
20.3自動縮放網頁1-3-1型布局模式 389
20.3.1示例6——“1-3-1”三列寬度等比例布局 390
20.3.2示例7——“1-3-1”單側列寬度固定的變寬布局 390
20.3.3示例8——“1-3-1”中間列寬度固定的變寬布局 393
20.3.4示例9——“1-3-1”雙側列寬度固定的變寬布局396
20.3.5示例10——“1-3-1”中列和左側列寬度固定的變寬布局 399
20.4分列布局背景色的使用 402
20.4.1示例11——設定固定寬度布局的列背景色 402
20.4.2示例12——設定特殊寬度變化布局的列背景色 404
20.4.3示例13——設定單列寬度變化布局的列背景色 405
20.4.4示例14——設定多列等比例寬度變化布局的列背景 406
20.5專家答疑 408
第21章製作企業門戶類網頁 411
21.1構思布局 412
21.1.1設計分析 412
21.1.2排版架構 412
21.2模組分割 413
21.2.1Logo與導航選單 413
21.2.2左側的文本介紹 415
21.2.3右側的導航連結 417
21.2.4版權資訊 418
21.3整體調整 419
第22章製作線上購物類網頁 421
22.1整體布局 422
22.1.1設計分析 422
22.1.2排版架構 422
22.2模組分割 423
22.2.1Logo與導航區 423
22.2.2Banner與資訊區 425
22.2.3產品類別區域 427
22.2.4頁腳區域 429
22.3專家答疑 429
