輕松學(xué)HTML+CSS網(wǎng)站開(kāi)發(fā)

概述篇
第1章 網(wǎng)頁(yè)開(kāi)發(fā)概述 2
1.1 互聯(lián)網(wǎng) 2
1.2 網(wǎng)站 2
1.2.1 網(wǎng)站是如何工作的 3
1.2.2 網(wǎng)站域名 3
1.2.3 網(wǎng)站源程序 4
1.2.4 網(wǎng)站空間 5
1.3 網(wǎng)頁(yè)構(gòu)成技術(shù)——HTML+CSS 5
1.3.1 什么是HTML+CSS 5
1.3.2 認(rèn)識(shí)XHTML 7
1.3.3 JavaScript 7
1.4 網(wǎng)頁(yè)開(kāi)發(fā)工具——Dreamweaver 8
1.4.1 Dreamweaver CS6的安裝 8
1.4.2 認(rèn)識(shí)Dreamweaver CS6 10
1.5 制作第一個(gè)網(wǎng)頁(yè) 11
1.6 小結(jié) 13
1.7 習(xí)題 13

結(jié)構(gòu)語(yǔ)言篇
第2章 網(wǎng)頁(yè)基礎(chǔ)必備知識(shí) 16
2.1 HTML標(biāo)簽 16
2.2 HTML屬性 16
2.3 HTML元素 17
2.4 HTML文件 17
2.5 HTML注釋 18
2.6 HTML顏色 18
2.6.1 顏色值 18
2.6.2 顏色名 19
2.6.3 Web安全色 19
2.7 HTML長(zhǎng)度單位 19
2.8 CSS樣式表 20
2.8.1 鏈接樣式表 20
2.8.2 外部樣式表的鏈接 20
2.8.3 內(nèi)部樣式表的鏈接 22
2.8.4 鏈接行內(nèi)樣式表 22
2.9 選擇器 23
2.9.1 派生選擇器 23
2.9.2 id選擇器 23
2.9.3 類(lèi)選擇器 24
2.9.4 標(biāo)簽選擇器 26
2.9.5 復(fù)合選擇器 27
2.9.6 標(biāo)簽 28
2.10 CSS框架模型 28
2.11 小結(jié) 29
2.12 習(xí)題 29
第3章 文字 34
3.1 網(wǎng)頁(yè)中的文字 34
3.1.1 文字編碼——字符集 34
3.1.2 文字的字體 36
3.1.3 文字的表示 38
3.2 字體屬性設(shè)置 39
3.2.1 文字大小 39
3.2.2 文字顏色 41
3.2.3 文字對(duì)齊方式 42
3.3 文本格式化 43
3.3.1 定義粗體文本 43
3.3.2 定義著重文字 44
3.3.3 定義計(jì)算機(jī)代碼 46
3.3.4 預(yù)格式文本 46
3.3.5 定義地址 46
3.3.6 定義文字方向 47
3.3.7 塊引用 48
3.3.8 標(biāo)簽總結(jié) 48
3.4 段落 49
3.4.1 HTML段落 49
3.4.2 段落的行間距 50
3.4.3 標(biāo)題的定義 51
3.4.4 HTML水平線(xiàn) 52
3.4.5 HTML折行 52
3.5 列表 54
3.5.1 無(wú)序列表 54
3.5.2 有序列表 55
3.5.3 定義列表 56
3.5.4 CSS列表 57
3.5.5 示例概括 59
3.6 小結(jié) 61
3.7 習(xí)題 61
第4章 圖片 68
4.1 網(wǎng)頁(yè)圖片格式 68
4.2 圖片的構(gòu)建 70
4.2.1 選擇路徑（src） 70
4.2.2 設(shè)定低分辨率（lowsrc） 71
4.2.3 設(shè)定替換文本（alt） 71
4.3 調(diào)整圖片 72
4.3.1 選擇寬度（width）和高度（height） 72
4.3.2 設(shè)定排列（align） 73
4.3.3 設(shè)定邊框（border） 74
4.3.4 設(shè)定水平間距（hspace）和垂直間距（vspace） 75
4.4 網(wǎng)頁(yè)背景圖片 75
4.4.1 為網(wǎng)頁(yè)背景添加圖片 75
4.4.2 指定背景圖片的應(yīng)用范圍 76
4.4.3 指定圖片平鋪方式 77
4.4.4 為背景圖片定位 78
4.4.5 設(shè)置背景圖片跟隨方式 81
4.5 小結(jié) 82
4.6 習(xí)題 82
第5章 鏈接 88
5.1 認(rèn)識(shí)鏈接 88
5.1.1 鏈接的作用 88
5.1.2 表現(xiàn)形式 89
5.1.3 HTML鏈接語(yǔ)法 89
5.2 鏈接路徑 90
5.2.1 絕對(duì)路徑 90
5.2.2 相對(duì)路徑 91
5.3 創(chuàng)建超鏈接 92
5.3.1 內(nèi)部鏈接 93
5.3.2 外部鏈接 94
5.3.3 制作目錄鏈接 95
5.3.4 文字超鏈接 95
5.3.5 圖像超鏈接 95
5.3.6 熱點(diǎn)區(qū)域的鏈接 96
5.3.7 E-mail鏈接 98
5.3.8 空鏈接 100
5.4 設(shè)置鏈接樣式 101
5.5 HTML鏈接的target屬性 103
5.5.1 打開(kāi)空白頁(yè) 103
5.5.2 打開(kāi)上一級(jí)窗口 104
5.5.3 在當(dāng)前窗口中打開(kāi) 105
5.5.4 打開(kāi)整個(gè)窗口 107
5.6 HTML鏈接的name屬性 109
5.7 錨 110
5.7.1 創(chuàng)建圖片錨鏈接 110
5.7.2 創(chuàng)建文字錨鏈接 112
5.8 小結(jié) 113
5.9 習(xí)題 114
第6章 表單 122
6.1 表單概述 122
6.1.1 表單的定義 122
6.1.2 表單名稱(chēng)的定義 123
6.1.3 設(shè)置字符集列表 124
6.1.4 在CSS中設(shè)置表單 124
6.2 輸入框概述 125
6.2.1 定義文字輸入 125
6.2.2 使用多行文本域 126
6.2.3 定義密碼輸入 126
6.2.4 在CSS中設(shè)置文本域 127
6.3 選擇框概述 128
6.3.1 定義單選框 128
6.3.2 定義復(fù)選框 129
6.3.3 定義列表框 130
6.3.4 在CSS中設(shè)置選擇框 130
6.4 文件域和字符集 132
6.4.1 設(shè)置文件域 132
6.4.2 設(shè)置字段集 132
6.4.3 隱藏域的引用 133
6.5 表單的動(dòng)作屬性 134
6.5.1 設(shè)置鏈接跳轉(zhuǎn) 134
6.5.2 指向鏈接跳轉(zhuǎn)方式 134
6.5.3 設(shè)置鏈接跳轉(zhuǎn)方式 134
6.6 按鈕的定義 135
6.6.1 設(shè)置提交按鈕 135
6.6.2 設(shè)置清空按鈕 135
6.6.3 圖像域的引用 136
6.6.4 在CSS中設(shè)置按鈕 137
6.7 小結(jié) 137
6.8 習(xí)題 138
第7章 多媒體 145
7.1 音頻的使用 145
7.1.1 音樂(lè)格式 145
7.1.2 插入音樂(lè) 146
7.1.3 音樂(lè)路徑（src） 147
7.1.4 音樂(lè)的播放次數(shù)（loop） 147
7.1.5 音樂(lè)的自動(dòng)播放（autostart） 148
7.1.6 隱藏播放面板（hidden） 148
7.2 嵌入背景音樂(lè) 149
7.2.1 背景音樂(lè)路徑 149
7.2.2 循環(huán)播放（loop） 149
7.2.3 自動(dòng)播放（autostart） 150
7.2.4 音量控制 150
7.2.5 延遲播放 151
7.2.6 音量平衡 151
7.3 視頻的使用 151
7.3.1 視頻格式 151
7.3.2 插入視頻 152
7.4 插入Flash 153
7.4.1 插入Flash視頻 154
7.4.2 透明效果 155
7.5 小結(jié) 156
7.6 習(xí)題 156
第8章 表格 160
8.1 表格的構(gòu)建 160
8.1.1 表頭單元格 161
8.1.2 單元格數(shù)據(jù)標(biāo)簽 161
8.1.3 表格的標(biāo)題 162
8.2 表格的外觀(guān) 163
8.2.1 寬度（width）和高度（height） 163
8.2.2 背景顏色和圖像 164
8.2.3 表格間距和表格填充 165
8.2.4 表格行的對(duì)齊方式 167
8.3 邊框 169
8.3.1 邊框?qū)挾龋╞order） 169
8.3.2 邊框顏色（bordercolor） 169
8.3.3 邊框顯示 171
8.4 跨多行和多列的表元 171
8.4.1 跨多列（colspan） 172
8.4.2 跨多行（rowspan） 172
8.5 表格行分組 173
8.5.1 表頭標(biāo)簽 173
8.5.2 主體標(biāo)簽 173
8.5.3 尾注標(biāo)簽 173
8.6 表格的嵌套 174
8.7 小結(jié) 175
8.8 習(xí)題 175

結(jié)構(gòu)布局篇
第9章 框架 182
9.1 框架概述 182
9.1.1 框架的構(gòu)成 182
9.1.2 自定義框架 183
9.1.3 標(biāo)簽 184
9.2 框架集 185
9.2.1 分割左右窗口 185
9.2.2 分割上下窗口 186
9.2.3 CSS中的框架設(shè)置 186
9.3 子框架 187
9.3.1 調(diào)節(jié)框架 187
9.3.2 窗口嵌套 187
9.3.3 窗口的名稱(chēng)和鏈接 188
9.4 框架外觀(guān) 189
9.4.1 邊框粗細(xì)（border） 189
9.4.2 邊框顏色 190
9.4.3 邊框的顯示 190
9.4.4 空白距離 191
9.5 浮動(dòng)框架 191
9.5.1 浮動(dòng)窗口（iframe） 191
9.5.2 透明浮動(dòng)窗口 191
9.5.3 滾動(dòng)條的設(shè)置 192
9.5.4 浮動(dòng)窗口鏈接 192
9.6 小結(jié) 193
9.7 習(xí)題 193
第10章 DIV+CSS 200
10.1 標(biāo)簽 200
10.1.1 標(biāo)簽的應(yīng)用 200
10.1.2 嵌套 標(biāo)簽 201
10.2 盒模型 201
10.2.1 盒模型的概念 201
10.2.2 基本盒模型 205
10.3 定位 206
10.3.1 基本概念介紹 206
10.3.2 浮動(dòng)定位 206
10.3.3 清除浮動(dòng) 208
10.3.4 多個(gè)元素的浮動(dòng)應(yīng)用 209
10.3.5 兩個(gè)元素的浮動(dòng)應(yīng)用 211
10.4 絕對(duì)定位 212
10.4.1 絕對(duì)定位的概念 212
10.4.2 單個(gè)元素的絕對(duì)定位 213
10.4.3 兩個(gè)元素的絕對(duì)定位 214
10.5 相對(duì)定位 215
10.5.1 單個(gè)元素的相對(duì)定位 215
10.5.2 兩個(gè)元素的相對(duì)定位 217
10.6 普通流定位 218
10.7 小結(jié) 219
10.8 習(xí)題 219

首尾結(jié)構(gòu)篇
第11章 網(wǎng)頁(yè)頭部 226
11.1 使用頭部 226
11.2 頁(yè)面描述信息 226
11.2.1 定義關(guān)鍵詞 227
11.2.2 鏈接文件屬性 228
11.2.3 基鏈接屬性 228
11.3 HTTP標(biāo)題信息 228
11.3.1 http-equiv屬性 228
11.3.2 過(guò)渡效果屬性 229
11.3.3 文檔類(lèi)型與語(yǔ)言屬性 230
11.3.4 主題與腳本類(lèi)型屬性 231
11.3.5 打開(kāi)窗口屬性 231
11.3.6 自動(dòng)刷新屬性 231
11.3.7 禁用緩存屬性 232
11.3.8 緩存時(shí)間屬性 232
11.3.9 網(wǎng)頁(yè)cookie屬性 233
11.4 網(wǎng)頁(yè)標(biāo)題 233
11.5 小結(jié) 234
11.6 習(xí)題 234
第12章 頁(yè)腳 237
12.1 頁(yè)腳的構(gòu)成 237
12.1.1 版權(quán)聲明 240
12.1.2 網(wǎng)站相關(guān)信息說(shuō)明 240
12.1.3 網(wǎng)站Logo 240
12.1.4 友情鏈接 241
12.1.5 整體導(dǎo)航 241
12.1.6 網(wǎng)站備案信息 241
12.2 樣式調(diào)整及修改 242
12.3 小結(jié) 243
12.4 習(xí)題 243
第13章 腳本和事件 247
13.1 腳本 247
13.1.1 定義腳本 247
13.1.2 替換文本 249
13.1.3 嵌入對(duì)象 250
13.2 事件 251
13.2.1 觸發(fā)載入事件 251
13.2.2 觸發(fā)雙擊事件 252
13.3 觸發(fā)鼠標(biāo)按鈕事件 253
13.3.1 觸發(fā)鼠標(biāo)按下事件 253
13.3.2 觸發(fā)鼠標(biāo)釋放事件 254
13.3.3 觸發(fā)鼠標(biāo)移動(dòng)事件 255
13.3.4 觸發(fā)鼠標(biāo)經(jīng)過(guò)事件 256
13.3.5 觸發(fā)鼠標(biāo)離開(kāi)事件 257
13.4 觸發(fā)鍵盤(pán)事件 258
13.4.1 觸發(fā)按下鍵盤(pán)按鍵事件 258
13.4.2 觸發(fā)鍵盤(pán)按鍵被按下并松開(kāi)事件 259
13.4.3 觸發(fā)鍵盤(pán)按鍵被松開(kāi)事件 260
13.5 觸發(fā)頁(yè)面相關(guān)事件 260
13.5.1 觸發(fā)圖片在下載時(shí)被用戶(hù)中斷事件 261
13.5.2 觸發(fā)當(dāng)前頁(yè)面的內(nèi)容將被修改事件 261
13.5.3 觸發(fā)捕捉當(dāng)前頁(yè)面錯(cuò)誤事件 262
13.5.4 觸發(fā)頁(yè)面內(nèi)容完成傳送到瀏覽器事件 263
13.5.5 觸發(fā)瀏覽器窗口大小被改變事件 264
13.5.6 觸發(fā)瀏覽器滾動(dòng)條位置變化事件 264
13.5.7 觸發(fā)當(dāng)前頁(yè)面被改變事件 265
13.6 表單相關(guān)事件 266
13.6.1 觸發(fā)元素失去焦點(diǎn)事件 266
13.6.2 觸發(fā)元素改變事件 267
13.6.3 觸發(fā)元素獲得焦點(diǎn)事件 268
13.6.4 觸發(fā)表單重置事件 269
13.6.5 觸發(fā)表單提交事件 270
13.7 滾動(dòng)字幕事件 271
13.7.1 觸發(fā)內(nèi)容移動(dòng)至顯示范圍之外事件 271
13.7.2 觸發(fā)完成需要顯示內(nèi)容后的事件 272
13.7.3 觸發(fā)開(kāi)始顯示內(nèi)容事件 273
13.8 編輯事件 274
13.8.1 觸發(fā)按下鼠標(biāo)右鍵出現(xiàn)菜單事件 274
13.8.2 觸發(fā)所選擇內(nèi)容被復(fù)制后的事件 275
13.8.3 觸發(fā)所選擇內(nèi)容被剪切時(shí)的事件 276
13.8.4 觸發(fā)鼠標(biāo)拖動(dòng)事件 277
13.8.5 觸發(fā)失去鼠標(biāo)移動(dòng)所形成的選擇焦點(diǎn)事件 277
13.8.6 觸發(fā)內(nèi)容粘貼事件 278
13.8.7 觸發(fā)內(nèi)容被選擇事件 279
13.8.8 觸發(fā)內(nèi)容選擇準(zhǔn)備開(kāi)始事件 280
13.9 外部事件 280
13.9.1 觸發(fā)文檔被打印后的事件 280
13.9.2 觸發(fā)文檔將要打印時(shí)的事件 281
13.9.3 觸發(fā)濾鏡效果發(fā)生變化時(shí)的事件 282
13.9.4 觸發(fā)按下【F1】鍵（或者選擇“幫助”菜單）時(shí)的事件 283
13.9.5 觸發(fā)對(duì)象的屬性之一發(fā)生變化時(shí)的事件 284
13.10 數(shù)據(jù)綁定 285
13.11 小結(jié) 285
13.12 習(xí)題 285

實(shí)例篇
第14章 個(gè)人網(wǎng)站制作 294
14.1 網(wǎng)站整體規(guī)劃 294
14.1.1 層次分析 294
14.1.2 模塊劃分 294
14.1.3 首頁(yè)分析 295
14.2 首頁(yè)制作 295
14.2.1 首頁(yè)設(shè)計(jì) 295
14.2.2 XHTML結(jié)構(gòu)的構(gòu)建和CSS布局 296
14.2.3 頂部欄的制作 296
14.2.4 Banner的制作 297
14.2.5 最新留言的制作 298
14.2.6 最新日志的制作 299
14.2.7 最新照片的制作 299
14.2.8 設(shè)置背景圖片 301
14.2.9 設(shè)置導(dǎo)航條及標(biāo)題欄漸變背景 301
14.2.10 設(shè)置頁(yè)面垂直滾動(dòng)條樣式 302
14.3 日志頁(yè)面制作 302
14.3.1 思路分析 303
14.3.2 瀏覽日志功能的實(shí)現(xiàn) 304
14.4 照片頁(yè)面制作 305
14.4.1 思路分析 305
14.4.2 瀏覽照片功能的實(shí)現(xiàn) 307
14.5 小結(jié) 308
第15章 門(mén)戶(hù)網(wǎng)站制作 309
15.1 網(wǎng)站整體規(guī)劃 309
15.1.1 層次分析 309
15.1.2 模塊分析 310
15.1.3 首頁(yè)分析 310
15.2 首頁(yè)制作 311
15.2.1 首頁(yè)設(shè)計(jì) 311
15.2.2 XHTML結(jié)構(gòu)的構(gòu)建和CSS布局 311
15.2.3 頂部欄的制作 312
15.2.4 Banner的制作 312
15.2.5 導(dǎo)航條的制作 313
15.2.6 熱點(diǎn)消息欄的制作 313
15.2.7 便民信息欄和熱點(diǎn)人物欄的制作 314
15.2.8 設(shè)置頁(yè)面主體背景 315
15.2.9 設(shè)置有規(guī)律的背景圖片 315
15.2.10 插入無(wú)虛框的Flash動(dòng)畫(huà) 316
15.2.11 輪換照片的制作 316
15.3 欄目頁(yè)面制作 318
15.4 文章頁(yè)面制作 319
15.5 小結(jié) 320