HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與布局實(shí)用教程（第2版）

目    錄
第1章  網(wǎng)頁(yè)標(biāo)記語(yǔ)言HTML入門(mén)基礎(chǔ)      1
1.1  HTML概述     1
1.2  HTML文件的構(gòu)成          2
1.2.1  HTML文件結(jié)構(gòu) 2
1.2.2  編寫(xiě)HTML文件的注意事項(xiàng)     3
1.3  怎樣編寫(xiě)HTML文件    4
1.3.1  使用記事本文件編寫(xiě)頁(yè)面         4
1.3.2  使用Dreamweaver編寫(xiě)HTML頁(yè)面         5
1.4　網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)的過(guò)程        6
1.4.1　明確網(wǎng)站定位    6
1.4.2　收集信息和素材         7
1.4.3　規(guī)劃?rùn)谀拷Y(jié)構(gòu)    7
1.4.4　設(shè)計(jì)頁(yè)面方案    8
1.4.5　制作頁(yè)面    9
1.4.6　實(shí)現(xiàn)后臺(tái)功能    10
1.4.7　網(wǎng)站的測(cè)試與發(fā)布    11
1.5  本章小結(jié)        11
1.6  練習(xí)題   12
第2章  HTML網(wǎng)頁(yè)文檔的結(jié)構(gòu)  13
2.1  HTML文檔主體標(biāo)記     13
2.1.1  bgcolor屬性        13
2.1.2  background屬性         14
2.1.3  text屬性     15
2.1.4  設(shè)置鏈接文字屬性    16
2.1.5  設(shè)置頁(yè)面邊距    19
2.2  head部分的標(biāo)記  20
2.2.1  title標(biāo)記     20
2.2.2  定義頁(yè)面關(guān)鍵字         20
2.2.3  定義頁(yè)面描述    21
2.2.4  定義編輯工具    22
2.2.5  定義作者信息    22
2.2.6  定義網(wǎng)頁(yè)文字及語(yǔ)言         23
2.2.7  定義網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn)         24
2.3  綜合實(shí)例——創(chuàng)建基本的HTML文件         24
2.4  本章小結(jié)        27
2.5  練習(xí)題   28
第3章　網(wǎng)頁(yè)文本與段落排版     29
3.1  插入其他標(biāo)記        29
3.1.1  空格符號(hào)  29
3.1.2  特殊符號(hào)    30
3.2  設(shè)置文字的格式   31
3.2.1  face屬性     31
3.2.2  size屬性     32
3.2.3  color屬性   33
3.2.4  b、strong、em、u標(biāo)記    34
3.2.5  sup與sub標(biāo)記  35
3.3  設(shè)置段落的格式   36
3.3.1  p標(biāo)記 36
3.3.2  段落對(duì)齊屬性align    37
3.3.3  nobr標(biāo)記    38
3.3.4  br標(biāo)記         39
3.4  水平線標(biāo)記   40
3.4.1  hr標(biāo)記         40
3.4.2  水平線寬度與高度屬性：width、size     41
3.4.3  水平線顏色屬性color        42
3.4.4  水平線的對(duì)齊方式屬性align    43
3.4.5  水平線去掉陰影屬性noshade 44
3.5  使用marquee設(shè)置滾動(dòng)效果        45
3.5.1  marquee標(biāo)記及其屬性     45
3.5.2  使用marquee插入滾動(dòng)公告    46
3.6  綜合實(shí)例——設(shè)置頁(yè)面文本及段落   48
3.7  本章小結(jié)        50
3.8  練習(xí)題   50
第4章　網(wǎng)頁(yè)圖像和多媒體          51
4.1  網(wǎng)頁(yè)中常見(jiàn)的圖像格式        51
4.2  圖像標(biāo)記及其屬性        52
4.2.1  img標(biāo)記      52
4.2.2  height屬性 53
4.2.3  width屬性  54
4.2.4  border屬性         55
4.2.5  hspace屬性         56
4.2.6  vspace屬性         57
4.2.7  align屬性    57
4.3  添加背景音樂(lè)        59
4.3.1  bgsound標(biāo)記      59
4.3.2  loop屬性     60
4.4  綜合實(shí)例        60
綜合實(shí)例1——多媒體網(wǎng)頁(yè) 61
綜合實(shí)例2——創(chuàng)建圖文混合排版網(wǎng)頁(yè)      63
4.5  本章小結(jié)        65
4.6  練習(xí)題   66
第5章　用HTML創(chuàng)建超鏈接和表單 67
5.1  超鏈接的基本概念        67
5.2  創(chuàng)建超鏈接   67
5.2.1  超鏈接標(biāo)記         68
5.2.2  設(shè)置的目標(biāo)窗口         69
5.3  創(chuàng)建圖像的超鏈接        70
5.3.1  設(shè)置圖像超鏈接         70
5.3.2  設(shè)置圖像熱區(qū)鏈接    71
5.4  創(chuàng)建錨點(diǎn)鏈接        73
5.4.1  創(chuàng)建錨點(diǎn)    73
5.4.2  鏈接到頁(yè)面不同位置的錨點(diǎn)鏈接    74
5.5  表單form       76
5.5.1  action  76
5.5.2  表單名稱name  76
5.5.3  傳送方法method       77
5.5.4  編碼方式enctype       78
5.5.5  目標(biāo)顯示方式target 78
5.6  綜合實(shí)例        79
綜合案例1——插入表單對(duì)象      79
綜合案例2——給網(wǎng)頁(yè)添加鏈接 85
5.7  本章小結(jié)        86
5.8  練習(xí)題   87
第6章　用表格排列網(wǎng)頁(yè)數(shù)據(jù)     88
6.1  表格屬性        88
6.1.1  表格的基本標(biāo)記table、tr、td          88
6.1.2  表格寬度和高度width、height         89
6.1.3  表格標(biāo)題caption        90
6.1.4  表格的表頭th    91
6.1.5  表格對(duì)齊方式align    93
6.1.6  邊框?qū)挾萣order         95
6.1.7  表格邊框顏色bordercolor         96
6.1.8  單元格間距cellspacing      97
6.1.9  單元格邊距cellpadding     98
6.1.10  表格的背景色bgcolor      99
6.1.11  表格的背景圖像 background 100
6.2  表格的結(jié)構(gòu)標(biāo)記   101
6.2.1  設(shè)計(jì)表頭樣式thead  101
6.2.2  設(shè)計(jì)表主體樣式tbody       103
6.2.3  設(shè)計(jì)表尾樣式tfoot   104
6.3  綜合實(shí)例——使用表格排版網(wǎng)頁(yè)        105
6.4  本章小結(jié)        111
6.5  練習(xí)題   111
第7章  HTML 5入門(mén)基礎(chǔ)   113
7.1  HTML 5簡(jiǎn)介  113
7.2  HTML 5與HTML 4的區(qū)別    114
7.2.1  HTML 5的語(yǔ)法變化   114
7.2.2  HTML 5中的標(biāo)記方法       114
7.2.3  HTML 5語(yǔ)法中的3個(gè)要點(diǎn)        115
7.3  HTML 5新增的元素和廢除的元素      116
7.3.1  新增的結(jié)構(gòu)元素         116
7.3.2  新增塊級(jí)元素    118
7.3.3  新增的行內(nèi)的語(yǔ)義元素    120
7.3.4  新增的嵌入多媒體元素與交互性元素    123
7.3.5  新增的input元素的類(lèi)型  124
7.3.6  廢除的元素         126
7.4  新增的屬性和廢除的屬性   126
7.4.1  新增的屬性         126
7.4.2  廢除的屬性         128
7.5  創(chuàng)建簡(jiǎn)單的HTML 5頁(yè)面     129
7.5.1  HTML 5文檔類(lèi)型       129
7.5.2  字符編碼    130
7.5.3  頁(yè)面語(yǔ)言    130
7.5.4  添加樣式表         130
7.5.5  添加JavaScript   131
7.5.6  測(cè)試結(jié)果    131
7.6  本章小結(jié)        131
7.7  練習(xí)題   132
第8章  HTML 5的結(jié)構(gòu)        133
8.1  新增主體結(jié)構(gòu)元素        133
8.1.1  article元素 133
8.1.2  section元素        134
8.1.3  nav元素      135
8.1.4  aside元素   137
8.2  新增的非主體結(jié)構(gòu)元素        138
8.2.1  header元素         138
8.2.2  hgroup元素         139
8.2.3  footer元素 140
8.2.4  address元素       141
8.3  本章小結(jié)        142
8.4  練習(xí)題   142
第9章  CSS入門(mén)基礎(chǔ)  143
9.1　為什么要在網(wǎng)頁(yè)中加入CSS          143
9.1.1　什么是CSS 143
9.1.2　使用CSS的好處          145
9.1.3　如何編寫(xiě)CSS      145
9.1.4　CSS基本語(yǔ)法      146
9.1.5　瀏覽器與CSS      147
9.2  在HTML中使用CSS      147
9.2.1  鏈接外部樣式表         147
9.2.2  行內(nèi)方式    148
9.2.3  嵌入外部樣式表         148
9.2.4  定義內(nèi)部樣式表         149
9.3  選擇器類(lèi)型   149
9.3.1　標(biāo)簽選擇器         149
9.3.2　類(lèi)選擇器    150
9.3.3　ID選擇器    151
9.4  本章小結(jié)        153
9.5  練習(xí)題   154
第10章　用CSS設(shè)置文本樣式   155
10.1　設(shè)計(jì)網(wǎng)頁(yè)中的文字樣式      155
10.1.1　font-family屬性         155
10.1.2　font-size屬性   157
10.1.3　font-weight屬性       158
10.1.4　font-style屬性  159
10.1.5　font-variant屬性       160
10.1.6　text-decoration屬性         161
10.2　設(shè)計(jì)文本的段落樣式 162
10.2.1  line-height屬性         162
10.2.2  text-align屬性  162
10.2.3　text-indent屬性        163
10.2.4　word-spacing屬性    164
10.2.5　first-letter首字下沉         165
10.2.6　text-transform  166
10.3  綜合實(shí)例——用CSS排版網(wǎng)頁(yè)文字  168
10.4  本章小結(jié)      170
10.5  練習(xí)題 170
第11章  用CSS設(shè)計(jì)圖像和背景        171
11.1　設(shè)置網(wǎng)頁(yè)的背景 171
11.1.1　background-color屬性      171
11.1.2　background-image屬性   172
11.2　設(shè)置背景圖像的屬性 173
11.2.1　background-repeat屬性  173
11.2.2　background-attachment屬性  174
11.2.3　background-position屬性         175
11.3　設(shè)置網(wǎng)頁(yè)圖像的樣式 175
11.3.1　border屬性       176
11.3.2　圖文混合排版  177
11.4  綜合實(shí)例——給圖片添加邊框 177
11.5  本章小結(jié)      179
11.6  練習(xí)題 179
第12章　用CSS設(shè)置表格 和表單樣式      181
12.1　網(wǎng)頁(yè)中的表格      181
12.1.1　表格對(duì)象標(biāo)記  181
12.1.2　在Dreamweaver中插入 表格        182
12.1.3　表格的bgcolor屬性         183
12.1.4　表格的border樣式 184
12.1.5　設(shè)置表格的陰影       185
12.2　網(wǎng)頁(yè)中的表單      186
12.2.1　表單對(duì)象  186
12.2.2　表單標(biāo)記  186
12.2.3　表單的布局設(shè)計(jì)       187
12.2.4　設(shè)置邊框樣式  190
12.2.5　設(shè)置背景樣式  190
12.2.6　設(shè)置輸入文本的樣式       191
12.3  綜合實(shí)例      192
綜合實(shí)例1——制作變換背景色的表格      192
綜合實(shí)例2——設(shè)計(jì)文本框的樣式      194
12.4  本章小結(jié)      196
12.5  練習(xí)題 196
第13章  用CSS制作鏈接與網(wǎng)站導(dǎo)航        198
13.1　超鏈接基礎(chǔ) 198
13.1.1　超鏈接的基本概念  198
13.1.2  使用頁(yè)面屬性設(shè)置超鏈接       199
13.2　鏈接標(biāo)記      200
13.2.1　a:link 200
13.2.2　a:visited     200
13.2.3　a:active      201
13.2.4　a:hover      201
13.3　各種形式的超鏈接      202
13.3.1  背景色變換鏈接       202
13.3.2  多姿多彩的下畫(huà)線鏈接  204
13.3.3　圖像翻轉(zhuǎn)鏈接  205
13.3.4　邊框變換鏈接  206
13.4  項(xiàng)目列表      208
13.4.1  有序列表  208
13.4.2  無(wú)序列表  212
13.5　橫排導(dǎo)航      217
13.5.1　文本導(dǎo)航  217
13.5.2　標(biāo)簽式導(dǎo)航       219
13.6　豎排導(dǎo)航      221
13.7  綜合實(shí)例      222
實(shí)例１——使用CSS實(shí)現(xiàn)鼠標(biāo)指針形狀改變     222
實(shí)例2——實(shí)現(xiàn)背景變換的導(dǎo)航菜單 224
13.8  本章小結(jié)      227
13.9  練習(xí)題 228
第14章　CSS DIV布局入門(mén)基礎(chǔ)         229
14.1  網(wǎng)站與Web標(biāo)準(zhǔn)         229
14.1.1　什么是Web標(biāo)準(zhǔn)      229
14.1.2　為什么要建立Web標(biāo)準(zhǔn) 230
14.1.3　怎樣改進(jìn)現(xiàn)有網(wǎng)站  231
14.2　Div標(biāo)記與Span 標(biāo)記          232
14.2.1　Div概述    232
14.2.2　Div與Span的區(qū)別   233
14.3　盒子模型      235
14.3.1　盒子模型的概念       235
14.3.2　border        235
14.3.3　padding      242
14.3.4　margin       244
14.4　盒子的浮動(dòng)與定位      246
14.4.1　盒子的浮動(dòng)float      246
14.4.2　position定位     249
14.4.3　z-index空間位置      254
14.5  本章小結(jié)      255
14.6  練習(xí)題 255
第15章  CSS DIV布局方法         257
15.1　CSS布局理念       257
15.1.1　將頁(yè)面用div分塊    257
15.1.2　用CSS定位       258
15.2  固定寬度布局      259
15.2.1  一列固定寬度  259
15.2.2  兩列固定寬度  260
15.2.3  圓角框       261
15.3  可變寬度布局      263
15.3.1  一列自適應(yīng)       263
15.3.2  兩列寬度自適應(yīng)       264
15.3.3  兩列右列寬度自適應(yīng)       265
15.3.4  三列浮動(dòng)中間寬度自適應(yīng)       266
15.3.5  三行二列居中高度自適應(yīng)布局       267
15.4  CSS布局與傳統(tǒng)的表格方式布局分析       269
15.5  本章小結(jié)      271
15.6  練習(xí)題 271
第16章  CSS 3網(wǎng)頁(yè)開(kāi)發(fā)      273
16.1  CSS 3概述    273
16.1.1　CSS 3的發(fā)展歷史     273
16.1.2　CSS 3的新增特性     274
16.1.3　主流瀏覽器對(duì)CSS 3的支持    278
16.2  邊框      279
16.2.1  圓角邊框 border-radius  279
16.2.2  邊框圖片border-image   280
16.2.3  邊框陰影box-shadow      281
16.3  背景      283
16.3.1  背景圖片尺寸 background-size      283
16.3.2  背景圖片定位區(qū)域 background-origin   284
16.3.3  背景繪制區(qū)域 background-clip       286
16.4  文本      287
16.4.1  文本陰影text-shadow     287
16.4.2  強(qiáng)制換行word-wrap        288
16.4.3  文本溢出text-overflow    289
16.5  多列      290
16.5.1  創(chuàng)建多列column-count   291
16.5.2  列的寬度column-width   292
16.6  轉(zhuǎn)換      293
16.6.1  移動(dòng)translate()         293
16.6.2  旋轉(zhuǎn)rotate()     294
16.6.3  縮放scale()       296
16.7  實(shí)例應(yīng)用——圖片      297
16.8  本章小結(jié)      299
16.9  練習(xí)題 299
第17章　JavaScript語(yǔ)法基礎(chǔ)      300
17.1　JavaScript簡(jiǎn)介    300
17.1.1　JavaScript的歷史     300
17.1.2　JavaScript的特點(diǎn)     301
17.2　JavaScript的放置位置         301
17.2.1