HTML+CSS網(wǎng)站設(shè)計(jì)與開發(fā)從新手到高手（從新手到高手）

目錄

第1 章　HTML 5 入門 001
1.1 認(rèn)識(shí)HTML 5 001
1.2 HTML 5 的新特性 003
1.3 HTML 5 與HTML 4 的區(qū)別 004
1.3.1 HTML 5 的語法變化 … 004
1.3.2 HTML 5 中的標(biāo)記方法 005
1.3.3 HTML 5 語法中的3 個(gè)要點(diǎn) 005
1.4 新增的主體結(jié)構(gòu)元素 … 006
1.4.1 article 元素 … 006
1.4.2 section 元素 008
1.4.3 nav 元素 009
1.4.4 aside 元素 … 011
1.5 新增的非主體結(jié)構(gòu)元素 012
1.5.1 header 元素 012
1.5.2 hgroup 元素 013
1.5.3 footer 元素 … 014
1.5.4 address 元素 015
1.6 本章小結(jié) 016

第2 章　用HTML 設(shè)置文字與段落格式 … 017
2.1 HTML 頁(yè)面主體常用設(shè)置 … 017
2.1.1 定義網(wǎng)頁(yè)背景色：bgcolor 017
2.1.2 設(shè)置背景圖片：background 018
2.1.3 設(shè)置文字顏色：text … 019
2.1.4 設(shè)置鏈接文字屬性 … 020
2.1.5 設(shè)置頁(yè)面邊距 … 022
2.2 頁(yè)面頭部元素 和 … 023 2.3 頁(yè)面標(biāo)題元素 … 024 2.4 插入其他標(biāo)記 024
2.4.1 輸入空格符號(hào) … 025
2.4.2 輸入特殊符號(hào) … 025
2.5 設(shè)置文字的格式 … 026
2.5.1 字體：face … 026
2.5.2 字號(hào)：size … 027
2.5.3 文字顏色：color 028
2.5.4 粗體、斜體、下畫線：b、strong、i、em、cite、u … 029
2.5.5 上標(biāo)與下標(biāo)：sup、sub 030
2.5.6 多種標(biāo)題樣式： ～ … 031 2.6 設(shè)置段落的排版與換行 032
2.6.1 為文字分段：p … 032
2.6.2 段落的對(duì)齊屬性：align … 033
2.6.3 不換行標(biāo)記：nobr 034
2.6.4 換行標(biāo)記：br 035
2.7 水平線標(biāo)記 … 035
2.7.1 插入水平線：hr … 036
2.7.2 水平線的寬度與高度：width、size 036
2.7.3 水平線的顏色：color 037
2.7.4 水平線的對(duì)齊方式：align 038
2.7.5 去掉水平線陰影：noshade 039
2.8 綜合實(shí)例—設(shè)置頁(yè)面文本及段落 040
2.9 本章小結(jié) 042

第3 章　用HTML 創(chuàng)建精彩的圖像和多媒體頁(yè)面 … 043
3.1 網(wǎng)頁(yè)中常見的圖像格式 043
3.2 插入圖像并設(shè)置圖像屬性 … 044
3.2.1 圖像標(biāo)記：img … 044
3.2.2 圖像高度：height 045
3.2.3 圖像寬度：width 046
3.2.4 圖像的邊框：border … 046
3.2.5 圖像水平間距：hspace 047
3.2.6 圖像垂直間距：vspace 048
3.2.7 圖像相對(duì)于文字的對(duì)齊方式：
align … 049
3.2.8 圖像的替代文字：alt 050
3.3 音頻和視頻 … 051
3.3.1 使用embed 051
3.3.2 使用video … 052
3.4 綜合實(shí)例—?jiǎng)?chuàng)建多媒體網(wǎng)頁(yè) … 054
3.5 本章小結(jié) 055

第4 章　用HTML 創(chuàng)建超鏈接 … 056
4.1 超鏈接和路徑 056
4.1.1 超鏈接的概念 … 056
4.1.2 路徑URL … 056
4.1.3 HTTP 路徑 … 057
4.1.4 FTP 路徑 … 058
4.1.5 郵件路徑 … 059
4.2 鏈接元素 060 4.2.1 指定路徑屬性href 060
4.2.2 顯示鏈接目標(biāo)屬性target … 061
4.2.3 鏈接的熱鍵屬性accesskey 062
4.3 創(chuàng)建圖像的超鏈接 064
4.3.1 創(chuàng)建鏈接區(qū)域元素 064 4.3.2 鏈接區(qū)域的名稱屬性name 064
4.3.3 定義鼠標(biāo)敏感區(qū)元素 065
4.3.4 鏈接的路徑屬性href、nohref … 066
4.3.5 鼠標(biāo)敏感區(qū)坐標(biāo)屬性coords 067
4.4 創(chuàng)建錨點(diǎn)鏈接 069
4.5 綜合實(shí)例—為網(wǎng)頁(yè)添加鏈接 … 070
4.6 本章小結(jié) 072

第5 章　使用HTML 創(chuàng)建表格… 073
5.1 創(chuàng)建并設(shè)置表格屬性 … 073
5.1.1 表格的基本標(biāo)記：table、tr、td … 073
5.1.2 表格寬度和高度：width、height … 074
5.1.3 表格的標(biāo)題：caption 075
5.1.4 表格的表頭：th … 077
5.1.5 表格對(duì)齊方式：align 078
5.1.6 表格的邊框?qū)挾龋篵order … 080
5.1.7 表格的邊框顏色：bordercolor … 081
5.1.8 單元格間距：cellspacing … 082
5.1.9 單元格邊距：cellpadding … 083
5.1.10 表格的背景色：bgcolor … 084
5.1.11 表格的背景圖像：
background 085
5.2 表格的結(jié)構(gòu)標(biāo)記 … 086
5.2.1 設(shè)計(jì)表頭樣式：thead 086
5.2.2 設(shè)計(jì)表主體樣式：tbody … 088
5.2.3 設(shè)計(jì)表尾樣式：tfoot… 089
5.3 綜合實(shí)例—使用表格排版網(wǎng)頁(yè) 091
5.4 本章小結(jié) 095

第6 章　創(chuàng)建交互式表單 096
6.1 表單元素 … 096
6.1.1 動(dòng)作屬性action … 096
6.1.2 發(fā)送數(shù)據(jù)方式屬性method 097
6.1.3 名稱屬性name … 097
6.2 表單對(duì)象 … 098
6.2.1 文本域text … 099
6.2.2 密碼域password 100
6.2.3 提交按鈕submit 101
6.2.4 復(fù)位按鈕reset … 102
6.2.5 圖像域image 102
6.2.6 普通按鈕button … 103
6.2.7 復(fù)選框checkbox 104
6.2.8 單選按鈕radio … 105
6.2.9 隱藏域hidden … 106
6.3 綜合實(shí)例—用戶注冊(cè)表單頁(yè)面 … 107
6.4 本章小結(jié) 112

第7 章　HTML 5 繪圖Canvas 和SVG … 113
7.1 Canvas 繪制基本圖形 … 113
7.1.1 Canvas 元素 113
7.1.2 繪制直線 … 114
7.1.3 繪制矩形 … 115
7.1.4 繪制三角形 118
7.1.5 繪制圓弧 … 119
7.1.6 繪制貝塞爾曲線 120
7.2 顏色和樣式選項(xiàng) … 121
7.2.1 應(yīng)用不同的線型 121
7.2.2 繪制線性漸變 … 123
7.2.3 繪制徑向漸變 … 125
7.3　變換 126
7.3.1 平移變換 … 127
7.3.2 縮放變換 … 128
7.3.3 旋轉(zhuǎn)變換 … 129
7.4 SVG 129
7.4.1 圖形繪制 … 130
7.4.2 文本與圖像 133
7.4.3 筆畫與填充 134
7.5 綜合實(shí)例—繪制精美時(shí)鐘 134
7.6 本章小結(jié) 137

第8 章　CSS 基礎(chǔ)知識(shí) … 138
8.1 CSS 3 簡(jiǎn)介 … 138
8.1.1 CSS 基本概念 … 138
8.1.2 CSS 的優(yōu)點(diǎn) 139
8.1.3 CSS 功能 … 140
8.1.4 CSS 發(fā)展史 140
8.2 在HTML 5 中使用CSS 141
8.2.1 行內(nèi)樣式 … 141
8.2.2 內(nèi)嵌樣式 … 142
8.2.3 鏈接樣式 … 143
8.2.4 導(dǎo)入樣式 … 144
8.2.5 優(yōu)先級(jí)問題 144
8.3 選擇器類型 … 145
8.3.1　標(biāo)簽選擇器 145
8.3.2　類選擇器 … 145
8.3.3　ID 選擇器 … 147
8.4 編輯和瀏覽CSS … 148
8.4.1 手工編寫CSS … 148
8.4.2 利用Dreamweaver 編寫CSS 149
8.5 綜合實(shí)例—對(duì)網(wǎng)頁(yè)添加CSS 樣式 150
8.6 本章小結(jié) 152

第9 章　CSS 控制網(wǎng)頁(yè)文本和段落樣式 153
9.1 通過CSS 控制文本樣式 153
9.1.1　字體font-family … 153
9.1.2　字號(hào)font-size 154
9.1.3　加粗字體font-weight 156
9.1.4　字體風(fēng)格font-style … 157
9.1.5　小寫字母轉(zhuǎn)換為大寫字母font-variant … 159
9.2　通過CSS 控制段落樣式 160
9.2.1 單詞間隔word-spacing 160
9.2.2 字符間隔letter-spacing 161
9.2.3 文字修飾text-decoration … 161
9.2.4 垂直對(duì)齊方式vertical-align 162
9.2.5 文本轉(zhuǎn)換text-transform … 163
9.2.6 水平對(duì)齊方式text-align … 164
9.2.7 文本縮進(jìn)text-indent … 165
9.2.8 文本行高line-height … 166
9.3 綜合實(shí)例—CSS 字體樣式綜合演練 167
9.4 本章小結(jié) 170

第10 章　用CSS 設(shè)計(jì)圖片和背景 … 171
10.1 設(shè)置網(wǎng)頁(yè)的背景 … 171
10.1.1　背景顏色 … 171
10.1.2　背景圖片 … 173
10.2　設(shè)置背景圖片的樣式 … 174
10.2.1 背景圖片重復(fù) … 174
10.2.2 背景圖片附件 … 176
10.2.3 背景圖片定位 … 177
10.3　設(shè)置網(wǎng)頁(yè)圖片的樣式 … 180
10.3.1　設(shè)置圖片邊框 … 180
10.3.2　圖文混合排版 … 183
10.4 綜合實(shí)例 184
10.4.1 實(shí)例1—為圖片添加邊框 … 184
10.4.2 實(shí)例2—光標(biāo)移到圖片時(shí)產(chǎn)生漸變效果 … 185
10.5 本章小結(jié) 187

第11 章　用CSS 制作實(shí)用的菜單和網(wǎng)站導(dǎo)航 … 188
11.1 列表的使用 … 188
11.2 控制列表樣式 188
11.2.1 ul 無序列表 189
11.2.2 ol 有序列表 190
11.2.3 dl 定義列表 191
11.2.4 更改列表起始數(shù)值 … 192
11.3　橫排導(dǎo)航 193
11.3.1　文本導(dǎo)航 … 193
11.3.2　標(biāo)簽式導(dǎo)航 195
11.4　豎排導(dǎo)航 197
11.5 綜合實(shí)例 199
11.5.1 實(shí)例１—實(shí)現(xiàn)背景變換的導(dǎo)航菜單 … 199
11.5.2 實(shí)例2—利用CSS 制作橫向?qū)Ш?… 201
11.5.3 實(shí)例3—樹狀導(dǎo)航菜單 201
11.6 本章小結(jié) 204

第12 章　CSS 3 移動(dòng)網(wǎng)頁(yè)開發(fā)… 205
12.1 預(yù)覽激動(dòng)人心的CSS 3 205
12.2 邊框 209
12.2.1 圓角邊框 border-radius … 210
12.2.2 邊框圖片border-image … 211
12.2.3 邊框陰影box-shadow 212
12.3 背景 214
12.3.1 背景圖片尺寸background-size 214
12.3.2 背景圖片定位區(qū)域background-origin … 215
12.3.3 背景繪制區(qū)域background-clip 216
12.4 文本 217
12.4.1 文本陰影text-shadow 218
12.4.2 強(qiáng)制換行word-wrap 219
12.4.3 文本溢出text-overflow … 219
12.5 多列 221
12.5.1 創(chuàng)建多列column-count … 221
12.5.2 列的寬度column-width … 222
12.6 轉(zhuǎn)換 223
12.6.1 移動(dòng)translate() … 223
12.6.2 旋轉(zhuǎn)rotate() 224
12.6.3 縮放scale() 225
12.7 綜合實(shí)例—將鼠標(biāo)放上去移動(dòng)并旋轉(zhuǎn)圖片 … 227
12.8 本章小結(jié) 228

第13 章　CSS 盒子模型與定位… 229
13.1 “盒子”與“模型”的概念探究 … 229
13.2　border … 230
13.2.1　邊框樣式：border-style … 231
13.2.2　屬性值的簡(jiǎn)寫形式 … 233
13.2.3　邊框與背景 234
13.3　設(shè)置內(nèi)邊距(padding) … 235
13.4　設(shè)置外邊距(margin)　 237
13.5　盒子的定位 … 240
13.5.1　靜態(tài)定位(static) 240
13.5.2　相對(duì)定位(relative) … 241
13.5.3　絕對(duì)定位(absolute) … 242
13.5.4　固定定位(fixed) 245
13.6 盒子的浮動(dòng) … 246
13.7　綜合案例—設(shè)置第1 個(gè)浮動(dòng)的Div … 246
13.8 本章小結(jié) 248

第14 章　CSS+Div 布局方法… 249
14.1 CSS 布局模型 … 249
14.1.1 關(guān)于CSS 布局 … 249
14.1.2 流動(dòng)布局模型 … 250
14.1.3 浮動(dòng)布局模型 … 252
14.1.4 層布局模型 256
14.1.5 高度自適應(yīng) 258
14.2　CSS 布局理念 260
14.2.1　將頁(yè)面用Div 分塊 … 260
14.2.2　設(shè)計(jì)各塊的位置 260
14.2.3　用CSS 定位 261
14.3 常見的布局類型 … 262
14.3.1 列固定寬度 262
14.3.2 列自適應(yīng) … 264
14.3.3 兩列固定寬度 … 266
14.3.4 兩列寬度自適應(yīng) 267
14.3.5 兩列右列寬度自適應(yīng) 268
14.3.6 三列浮動(dòng)中間寬度自適應(yīng) 269
14.3.7 三行二列居中高度自適應(yīng)布局 … 270
14.4 本章小結(jié) 272

第15 章　JavaScript 基礎(chǔ)知識(shí) … 273
15.1 JavaScript 的添加方法 273
15.1.1 內(nèi)部引用 … 273
15.1.2 外部調(diào)用js 文件 274
15.1.3 添加到事件中 … 275
15.2 基本數(shù)據(jù)類型 275
15.2.1 使用字符串型數(shù)據(jù) … 275
15.2.2 使用數(shù)值型數(shù)據(jù) 276
15.2.3 使用布爾型數(shù)據(jù) 277
15.2.4 使用Undefined 和Null類型 … 277
15.3 常量和變量 … 278
15.3.1 常量 … 278
15.3.2 常量的使用方法 279
15.3.3 變量的定義 280
15.4 使用選擇語句 281
15.4.1 if 選擇語句 281
15.4.2 if…else 選擇語句 … 282
15.4.3 if…else if…else 選擇語句 283
15.4.4 switch 多條件選擇語句 … 285
15.5 使用循環(huán)語句 286
15.5.1 for 循環(huán)語句 … 286
15.5.2 while 循環(huán)語句 288
15.5.3 do-while 循環(huán)語句 … 289
15.5.4 break 和continue 跳轉(zhuǎn)語句 … 290
15.6 事件 291
15.6.1 事件詳解 … 292
15.6.2 事件與事件驅(qū)動(dòng) 292
15.7　JavaScript 對(duì)象 … 294
15.7.1　聲明和實(shí)例化 … 295
15.7.2　對(duì)象的引用 296
15.7.3　navigator 對(duì)象 … 297
15.7.4　window 對(duì)象 … 298
15.7.5　location 對(duì)象 … 299
15.7.6　history 對(duì)象 301
15.7.7　document 對(duì)象 … 302
15.8　綜合實(shí)例—改變網(wǎng)頁(yè)背景顏色 303
15.9 本章小結(jié) 304

第16 章　設(shè)計(jì)制作企業(yè)網(wǎng)站 … 305
16.1 企業(yè)網(wǎng)站設(shè)計(jì)概述 305
16.1.1 企業(yè)網(wǎng)站主要功能 … 305
16.1.2 頁(yè)面配色 … 307
16.1.3 排版構(gòu)架 … 308
16.2 各部分設(shè)計(jì) … 309
16.2.1　頁(yè)面的通用規(guī)則 309
16.2.2 制作網(wǎng)站導(dǎo)航部分 … 310
16.2.3 制作header 右側(cè)部分 313
16.2.4 制作歡迎部分 … 322
16.3 本章小結(jié) 326