《HTML+CSS網頁設計與布局課堂實錄》是2015年8月清華大學出版社出版的圖書，作者是張忠瓊。
基本介紹
- 書名：HTML+CSS網頁設計與布局課堂實錄
- 作者：張忠瓊
- 出版社：清華大學出版社
- 出版時間：2015年8月
- 定價：59 元
- ISBN：9787302395546
內容簡介,圖書目錄,
內容簡介
本書緊密圍繞網頁設計師在網頁製作過程中的實際需要和應該掌握的技術，全面地介紹了使用HTML、CSS進行網頁設計和製作的各方面內容和技巧。本書不只注重語法講解，還通過一個個鮮活、典型的實戰案例來幫助讀者達到學以致用的目的。每個語法都有相應的實例，每章後面又配有綜合小實例，各章均配有習題，力求達到理論知識與實踐操作完美結合的效果。
本書可作為普通高校、高職高專計算機及相關專業教材，並可供從事網頁設計與製作、網站開發、網頁編程等行業人員參考。
圖書目錄
第1篇?HTML篇
第1課?HTML入門
1.1?什麼是HTML 2
1.2?HTML檔案的基本結構 2
1.2.1?HTML檔案結構 2
1.2.2?編寫HTML檔案注意事項 3
1.3?HTML檔案編寫方法 4
1.3.1?課堂小實例——使用記事本編寫
HTML頁面 4
1.3.2?課堂小實例——使用Dreamweaver
編寫HTML頁面 5
1.4?HTML頁面主體常用設定 5
1.4.1?課堂小實例——定義網頁背
景色（bgcolor） 5
1.4.2?課堂小實例——設定背
景圖片（background） 6
1.4.3?課堂小實例——設定文字顏色（text） 7
1.4.4?課堂小實例——設定連結文字屬性 8
1.4.5?課堂小實例——設定頁面邊距 10
1.5?頁面頭部元素<head>和<!DOCTYPE> 10
1.6 ?頁面標題元素<title> 11
1.7?元信息元素<meta> 11
1.7.1?課堂小實例——設定頁面描述 12
1.7.2?課堂小實例——定義頁面的搜尋方式 12
1.7.3?課堂小實例——定義頁面的跳轉 13
1.7.4?課堂小實例——設定頁面關鍵字 14
1.8?綜合實戰——創建基本的HTML檔案 14
1.9?課後練習 15
1.10?本課小結 16
第2課?用HTML設定文字與段落格式
2.1?插入其他標記 18
2.1.1?課堂小實例——輸入空格符號 18
2.1.2?輸入特殊符號 19
2.2?設定文字的格式 19
2.2.1?課堂小實例——設定字型（face） 19
2.2.2?課堂小實例——設定字號（size） 20
2.2.3?設定文字顏色（color） 21
2.2.4?設定粗體、斜體、下劃線
（b、strong、em、u） 22
2.2.5?設定上標與下標（sup、sub） 23
2.2.6?多種標題樣式的使用
（<h1>～<h6>） 24
2.3?設定段落的排版與換行 24
2.3.1?給文字進行分段（p） 25
2.3.2?段落的對齊屬性（align） 25
2.3.3?不換行標記（nobr） 26
2.3.4?換行標記（br） 27
2.4?水平線標記 28
2.4.1?插入水平線（hr） 28
2.4.2?設定水平線寬度與高度屬性
（width、size） 29
2.4.3?設定水平線的顏色（color） 30
2.4.4?設定水平線的對齊方式（align） 31
2.4.5?水平線去掉陰影（noshade） 31
2.5?設定滾動文字 32
2.5.1?滾動文字標籤——marquee 32
2.5.2?滾動方向屬性——direction 33
2.5.3?滾動方式屬性——behavior 34
2.5.4?滾動速度屬性——scrollamount 35
2.5.5?滾動延遲屬性——scrolldelay 36
2.5.6?滾動循環屬性——loop 37
2.5.7?滾動範圍屬性——width、height 37
2.5.8?滾動背景顏色屬性——bgcolor 38
2.5.9?滾動空間屬性——hspace、vspace 39
2.6?綜合實例——設定頁面文本及段落 40
2.7?課後練習 42
2.8?本課小結 42
第3課?用HTML創建精彩的圖像和多媒體頁面
3.1?網頁中常見的圖像格式 44
3.2?插入圖像並設定圖像屬性 44
3.2.1?圖像標記：img 44
3.2.2?課堂小實例——設定圖像高度
（height） 45
3.2.3?課堂小實例——設定圖像寬度
（width） 46
3.2.4?課堂小實例——設定圖像的框線
（border） 46
3.2.5?課堂小實例——設定圖像水平間距
（hspace） 47
3.2.6?課堂小實例——設定圖像垂直間距
（vspace） 48
3.2.7?課堂小實例——設定圖像的對齊方式
（align） 49
3.2.8?課堂小實例——設定圖像的替代文字
（alt） 50
3.3?添加多媒體檔案 51
3.3.1?課堂小實例——添加多媒體檔案標記
（embed） 52
3.3.2?課堂小實例——設定自動運行
（autostart） 52
3.4?添加背景音樂 53
3.4.1?課堂小實例——設定背景音樂
（bgsound） 53
3.4.2?課堂小實例——設定循環播放次數
（loop） 54
3.5?綜合實例 55
3.5.1?實例1——創建多媒體網頁 55
3.5.2?實例2——創建圖文混合排版網頁 56
3.6?課後練習 57
3.7?本課小結 58
第4課?用HTML創建超連結
4.1?連結和路徑 60
4.1.1?超連結的基本概念 60
4.1.2?課堂小實例——路徑url 60
4.1.3?課堂小實例——HTTP路徑 61
4.1.4?課堂小實例——FTP路徑 62
4.1.5?課堂小實例——郵件路徑 62
4.2?連結元素<a> 63
4.2.1?課堂小實例——指定路徑href 63
4.2.2?顯示連結目標屬性target 64
4.2.3?連結的熱鍵屬性accesskey 65
4.3?創建圖像的超連結 67
4.3.1?課堂小實例——創建連結區域元素
<map> 67
4.3.2?連結區域的名稱屬性name 67
4.3.3?定義滑鼠敏感區元素<area> 68
4.3.4?連結的路徑屬性href、nohref 69
4.3.5?滑鼠敏感區坐標屬性coords 70
4.4?下載檔案 71
4.5?實戰套用——給網頁添加連結 72
4.6?課後練習 74
4.7?本課小結 75
第5課?使用HTML創建強大的表格
5.1?創建並設定表格屬性 77
5.1.1?課堂小實例——表格的基本標記
（table、tr、td） 77
5.1.2?課堂小實例——表格寬度和高度
（width、height） 78
5.1.3?課堂小實例——表格的標題
（caption） 78
5.1.4?課堂小實例——表格的表頭（th） 79
5.1.5?課堂小實例——表格對齊方式
（align） 80
5.1.6?表格的框線寬度（border） 81
5.1.7?表格框線顏色（bordercolor） 82
5.1.8?單元格間距（cellspacing） 83
5.1.9?單元格邊距（cellpadding） 83
5.1.10?表格的背景色（bgcolor） 85
5.1.11?表格的背景圖像（background） 86
5.2?表格的結構標記 87
5.2.1?課堂小實例——設計表頭樣式
（thead） 87
5.2.2?課堂小實例——設計表主體樣式
（tbody） 88
5.2.3?課堂小實例——設計表尾樣式
（tfoot） 88
5.3?綜合實例——使用表格排版網頁 90
5.4?課後練習 94
5.5?本課小結 94
第6課?創建交換式表單
6.1?表單元素<form> 96
6.1.1?課堂小實例——動作屬性（action） 96
6.1.2?課堂小實例——傳送數據方式屬性
（method） 96
6.1.3?課堂小實例——名稱屬性（name） 97
6.2?表單的控制項<input> 97
6.2.1?課堂小實例——文本域text 98
6.2.2?課堂小實例——密碼區域password 99
6.2.3?課堂小實例——提交按鈕submit 100
6.2.4?課堂小實例——復位按鈕reset 100
6.2.5?課堂小實例——圖像按鈕image 101
6.2.6?課堂小實例——單擊按鈕button 102
6.2.7?課堂小實例——複選框checkbox 102
6.2.8?課堂小實例——單選按鈕radio 103
6.2.9?課堂小實例——隱藏區域hidden 104
6.3?綜合實戰——用戶註冊表單頁
面實例 105
6.4?課後練習 109
6.5?本課小結 110
第7課?HTML 5的新特性
7.1?認識HTM?5 112
7.2?HTML?5的新特性 114
7.3?HTML?5與HTML?4的區別 115
7.3.1?HTML?5的語法變化 115
7.3.2?HTML?5中的標記方法 115
7.3.3?HTML?5語法中的3個要點 116
7.3.4?HTML?5與HTML?4在搜尋引擎
最佳化的對比 116
7.4?HTML?5新增的元素和廢除的元素 117
7.4.1?課堂小實例——新增的結構元素 117
7.4.2?課堂小實例——新增的塊級的
語義元素 118
7.4.3?課堂小實例——新增的行內的
語義元素 120
7.4.4?課堂小實例——新增的嵌入多媒體
元素與互動性元素 123
7.4.5?課堂小實例——新增的input
元素的類型 124
7.4.6?廢除的元素 125
7.5?新增的屬性和廢除的屬性 126
7.5.1?新增的屬性 126
7.5.2?廢除的屬性 127
7.6?課後練習 129
7.7?本課小結 129
第8課?HTML 5的結構
8.1?新增的主體結構元素 131
8.1.1?課堂小實例——article元素 131
8.1.2?課堂小實例——section元素 132
8.1.3?課堂小實例——nav元素 133
8.1.4?課堂小實例——aside元素 136
8.2?新增的非主體結構元素 136
8.2.1?課堂小實例—— header元素 136
8.2.2?課堂小實例——hgroup元素 137
8.2.3?課堂小實例——footer元素 138
8.2.4?課堂小實例——address元素 139
8.3?課後練習 140
8.4?本課小結 141
第2篇?CSS篇
第9課?CSS基礎知識
9.1?CSS 3介紹 143
9.1.1?CSS基本概念 143
9.1.2?CSS的優點 143
9.1.3?CSS 3功能 144
9.1.4?CSS 3發展歷史 145
9.2?在HTML?5中使用CSS的方法 145
9.2.1?行內樣式 145
9.2.2?內嵌樣式 146
9.2.3?連結樣式 146
9.2.4?導入樣式 147
9.2.5?優先權問題 147
9.3?選擇器類型 148
9.3.1 課堂小實例——標籤選擇器 148
9.3.2 課堂小實例——類選擇器 148
9.3.3 課堂小實例——ID選擇器 149
9.4?編輯和瀏覽CSS 151
9.4.1?手工編寫CSS 151
9.4.2?Dreamweaver編寫CSS 151
9.5?使用Dreamweaver設定CSS樣式 152
9.5.1?設定文本樣式 152
9.5.2?設定背景樣式 153
9.5.3?設定區塊樣式 155
9.5.4?設定方框樣式 156
9.5.5?設定框線樣式 157
9.5.6?設定列表樣式 158
9.5.7?設定定位樣式 159
9.5.8?設定擴展樣式 161
9.5.9?過渡樣式的定義 161
9.6?實戰套用——對網頁添加CSS樣式 161
9.7?課後練習 164
9.8?本課小結 164
第10課?CSS控制網頁文本和段落樣式
10.1 通過CSS控制文本樣式 166
10.1.1 課堂小實例——字型font-family 166
10.1.2 課堂小實例——字號font-size 167
10.1.3 課堂小實例——加粗字型
font-weight 168
10.1.4 課堂小實例——字型風格
font-style 169
10.1.5 課堂小實例——小寫字母轉為
大寫字母font-variant 170
10.2 通過CSS控制段落格式 171
10.2.1?課堂小實例——單詞間隔
word-spacing 171
10.2.2?課堂小實例——字元間隔
letter-spacing 171
10.2.3?課堂小實例——文字修飾
text-decoration 172
10.2.4?課堂小實例——垂直對齊方式
vertial-align 173
10.2.5?課堂小實例——文本轉換
text-transform 173
10.2.6?課堂小實例——水平對齊方式
text-align 174
10.2.7?課堂小實例——文本縮進
text-indent 175
10.2.8?課堂小實例——文本行高
line-height 175
10.2.9?課堂小實例——處理空白
white-space 176
10.3?濾鏡 177
10.3.1?課堂小實例——不透明度alpha 178
10.3.2?課堂小實例——動感模糊blur 179
10.3.3?課堂小實例——對顏色進行
透明處理chroma 180
10.3.4?課堂小實例——設定陰影
DropShadow 181
10.3.5?課堂小實例——對象的翻轉
flipH、flipV 182
10.3.6?課堂小實例——發光效果glow 182
10.3.7?課堂小實例——灰度處理gray 183
10.3.8?課堂小實例——反相invert 184
10.3.9?課堂小實例——X光片效果xray 184
10.3.10?課堂小實例——波形濾鏡wave 184
10.4?實戰套用——CSS字型樣式
綜合演練 185
10.5?課後練習 187
10.6?本課小結 188
第11課?用CSS設計圖片和背景
11.1 設定網頁的背景 190
11.1.1 課堂小實例——背景顏色 190
11.1.2 課堂小實例——背景圖片 190
11.2 設定背景圖片的樣式 191
11.2.1?課堂小實例——背景圖片重複 191
11.2.2?課堂小實例——背景圖片附屬檔案 192
11.2.3?課堂小實例——背景圖片定位 193
11.3 設定網頁圖片的樣式 195
11.3.1 課堂小實例——設定圖片框線 195
11.3.2 課堂小實例——圖文混合排版 197
11.4?實戰套用 198
11.4.1?實戰1——給圖片添加框線 198
11.4.2?實戰2——圖文繞排效果 199
11.5?課後練習 201
11.6?本課小結 202
第12課?用CSS製作實用的選單和網站導航
12.1?列表的使用 204
12.2?列表樣式控制 204
12.2.1?課堂小實例——ul無序列表 204
12.2.2?課堂小實例——ol有序列表 205
12.2.3?課堂小實例——dl定義列表 207
12.2.4?更改列表項目樣式 208
12.3 橫排導航 209
12.3.1 課堂小實例——文本導航 209
12.3.2 課堂小實例——標籤式導航 211
12.4 課堂小實例——豎排導航 213
12.5?實戰套用 214
12.5.1?實戰1——實現背景變換的
導航選單 214
12.5.2?實戰2——利用CSS製作橫嚮導航 215
12.5.3?實戰3——用背景圖片實現
CSS柱狀圖表 216
12.5.4?實戰4——樹形導航選單 217
12.6?課後練習 220
12.7?本課小結 220
第13課?CSS盒子模型與定位
13.1 “盒子”與“模型”的概念 222
13.2 border 222
13.2.1?課堂小實例——框線樣式
（border-style） 223
13.2.2?屬性值的簡寫形式 224
13.2.3 課堂小實例——框線與背景 225
13.3 課堂小實例——設定內邊距
（Padding） 226
13.4 課堂小實例——設定外邊距
（margin） 227
13.5 盒子的定位 228
13.5.1 靜態定位（static） 229
13.5.2 課堂小實例——相對定位
（relative） 229
13.5.3 課堂小實例——絕對定位
（absolute） 230
13.5.4 課堂小實例——固定定位
（fixed） 232
13.6 盒子的浮動 233
13.6.1 準備代碼 233
13.6.2 案例——設定第1個浮動的div 234
13.7 課後練習 236
13.8 本課小結 236
第14課?CSS+DIV布局方法
14.1 CSS布局模型 238
14.1.1?關於CSS布局 238
14.1.2?流動布局模型 238
14.1.3?浮動布局模型 240
14.1.4?層布局模型 242
14.1.5?高度自適應 244
14.2?CSS布局理念 245
14.2.1?將頁面用div分塊 245
14.2.2?設計各塊的位置 246
14.2.3?用CSS定位 246
14.3 常見的布局類 247
14.3.1?課堂小實例——一列固定寬度 247
14.3.2?課堂小實例——一列自適應 248
14.3.3?課堂小實例——兩列固定寬度 249
14.3.4?課堂小實例——兩列寬度自適應 250
14.3.5?課堂小實例——兩列右列寬度
自適應 251
14.3.6?課堂小實例——三列浮動中間
寬度自適應 252
14.3.7?課堂小實例——三行二列居中
高度自適應布局 253
14.4?課後練習 255
14.5?本課小結 255
第3篇?綜合案例篇
第15課?設計製作企業網站
15.1?企業網站設計概述 257
15.1.1?企業網站分類 257
15.1.2?企業網站主要功能 258
15.1.3?頁面配色與風格設計 259
15.1.4?排版構架 260
15.2?各部分設計 261
15.2.1 頁面的通用規則 261
15.2.2?製作網站導航部分 262
15.2.3?製作header右側部分 265
15.2.4?製作歡迎部分 272
15.2.5?製作景點新聞部分 275
15.2.6?製作景點介紹部分 279
15.2.7?製作景點展示部分 282
15.2.8?製作底部著作權部分 288
附錄A?CSS屬性一覽表
附錄B?HTML常用標籤
