Web前端開發(fā)實例教程：HTML、CSS、JavaScript

目　錄
準備篇
第1章　Web技術綜述　2
1．1　Internet基礎　2
1．1．1　TCP/IP　2
1．1．2　主機和IP地址　2
1．1．3　DNS和域名　3
1．2　Web概述　4
1．2．1　Web起源　4
1．2．2　Web的工作原理　4
1．2．3　Web基本技術　4
1．2．4　Web服務器　5
1．3　超文本與標簽語言　6
1．3．1　超文本　6
1．3．2　標簽語言　6
1．4　Web標準綜述　7
1．4．1　Web標準體系　8
1．4．2　Web標準的意義　8
1．5　瀏覽器　9
1．5．1　主流瀏覽器　9
1．5．2　瀏覽器內核　9
1．6　知識點提煉　10
1．7　思考與練習　10
1．8　上機實例練習——瀏覽器安裝及內核檢測　11
第2章　開發(fā)工具介紹　12
2．1　Web開發(fā)工具　12
2．1．1　Photoshop圖像制作　12
2．1．2　Fireworks網(wǎng)頁作圖　13
2．1．3　Flash網(wǎng)頁動畫　13
2．1．4　記事本　13
2．1．5　Notepad代碼編輯器　14
2．1．6　EditPlus代碼編輯器　15
2．1．7　TextPad代碼編輯器　15
2．1．8　Dreamweaver網(wǎng)頁編輯器　16
2．1．9　CSS3 Menu——CSS菜單
設計工具　16
2．1．10　ColorImpact顏色方案設計工具　17
2．2　Dreamweaver軟件的使用　17
2．2．1　基本操作　17
2．2．2　界面介紹　21
2．2．3　站點管理配置　22
2．3　知識點提煉　23
2．4　思考與練習　23
2．5　上機實例練習——新建站點、新建網(wǎng)頁　24
第3章　Web運行環(huán)境搭建　25
3．1　Web常見運行環(huán)境　25
3．2　Windows7環(huán)境下IIS安裝　26
3．3　IIS中站點配置　28
3．4　知識點提煉　30
3．5　思考與練習　30
3．6　上機實例練習——安裝IIS并配置站點　30
入門篇
第4章　HTML/CSS/JavaScript綜述　32
4．1　HTML綜述　32
4．1．1　HTML所扮演的角色　32
4．1．2　HTML代碼片段　33
4．2　CSS綜述　33
4．2．1　CSS所扮演的角色　33
4．2．2　CSS代碼片段　34
4．3　JavaScript綜述　34
4．3．1　JavaScript所扮演的角色　35
4．3．2　JavaScript代碼片段　35
4．4　小實例——HTML、CSS、
JavaScript的綜合應用　36
4．5　知識點提煉　37
4．6　思考與練習　37
4．7　上機實例練習——仿照4-3-2．html練習　38
第5章　HTML基礎介紹　39
5．1　HTML文檔結構　39
5．2　HTML基本語法　39
5．2．1　標簽語法　39
5．2．2　屬性語法　40
5．3　HTML文件命名規(guī)則　42
5．4　編寫HTML文檔注意事項　42
5．5　小實例——簡單圖文混排網(wǎng)頁制作　43
5．6　知識點提煉　44
5．7　思考與練習　44
5．8　上機實例練習——用記事本仿5-5．html編寫一個HTML文件　45
第6章　HTML文件的標準結構　46
6．1　文件頭部內容　46
6．1．1　設置網(wǎng)頁標題　46
6．1．2　定義元素信息　47
6．1．3　設置網(wǎng)頁關鍵詞——keywords　48
6．1．4　設置網(wǎng)頁描述——description　48
6．2　文件主體內容　49
6．2．1　設置頁面背景——bgcolor　49
6．2．2　設置背景圖片——background　50
6．2．3　設置頁面邊距　51
6．2．4　設計正文顏色——text　52
6．3　小實例——Web課程介紹網(wǎng)頁　53
6．4　知識點提煉　53
6．5　思考與練習　54
6．6　上機實例練習——個人文字簡歷網(wǎng)頁　54
第7章　文本與段落　55
7．1　內容編輯　55
7．1．1　添加文本　55
7．1．2　添加注釋　56
7．1．3　添加空格 　57
7．1．4　添加刪除線　57
7．1．5　插入特殊符號　58
7．2　文本修飾　59
7．2．1　簡單文本修飾 　59
7．2．2　設置文本效果　60
7．2．3　文字上下標 　61
7．2．4　設置地址文本　61
7．3　段落排版　62
7．3．1　段落　62
7．3．2　換行
　63
7．3．3　預格式化　64
7．3．4　段落縮進　65
7．3．5　設置水平線　65
7．4　小實例——唐詩宋詞網(wǎng)頁設計　66
7．5　知識點提煉　67
7．6　思考與練習　67
7．7　上機實例練習——重寫唐詩宋詞網(wǎng)頁，并設置網(wǎng)頁背景和文本顏色等　68
第8章　列表　69
8．1　列表類　69
8．1．1　無序列表　69
8．1．2　有序列表　70
8．1．3　定義列表　71
8．2　嵌套列表　72
8．2．1　無序與有序嵌套列表　72
8．2．2　定義嵌套列表　73
8．3　小實例——列表在網(wǎng)頁中的應用　74
8．4　知識點提煉　75
8．5　思考與練習　75
8．6　上機實例練習——制作一個多類別的新聞列表網(wǎng)頁　76
第9章　超鏈接　77
9．1　超鏈接概述　77
9．2　超鏈接路徑　78
9．2．1　絕對路徑　78
9．2．2　相對路徑　78
9．2．3　根路徑　79
9．3　超鏈接的使用　79
9．3．1　創(chuàng)建內部鏈接　79
9．3．2　創(chuàng)建外部鏈接　80
9．4　小實例——超鏈接的應用　81
9．5　知識點提煉　82
9．6　思考與練習　82
9．7　上機實例練習——小型電子書　82
第10章　圖片與多媒體的使用　83
10．1　圖片　83
10．1．1　網(wǎng)頁圖片格式　83
10．1．2　插入圖片方法　84
10．1．3　設置圖片替代文本——alt　85
10．1．4　設置圖片屬性——width、height　86
10．1．5　添加圖片鏈接　88
10．1．6　創(chuàng)建圖片熱區(qū)鏈接　90
10．2　多媒體　91
10．2．1　插入音頻　92
10．2．2　插入視頻　92
10．2．3　插入Flash動畫　93
10．3　知識點提煉　93
10．4　思考與練習　94
10．5　上機實例練習——多媒體網(wǎng)頁制作　94
第11章　表格的應用　95
11．1　表格概述　95
11．1．1　表格結構　96
11．1．2　設置表格標題　97
11．1．3　設置表格表頭　98
11．2　表格屬性　99
11．2．1　設置表格寬度和高度——width和height　99
11．2．2　設置表格邊框——border　100
11．2．3　設置表格邊距cellpadding和
間距cellspacing　101
11．2．4　內容水平對齊——align　102
11．2．5　內容垂直對齊——valign　103
11．2．6　設置跨行——rowspan　104
11．2．7　設置跨列——colspan　105
11．3　表格嵌套　106
11．4　小實例——表格在網(wǎng)頁布局中的應用　107
11．5　用DW工具快速創(chuàng)建表格方法　108
11．6　知識點提煉　110
11．7　思考與練習　110
11．8　上機實例練習——利用表格布局制作一個網(wǎng)頁　111
第12章　框架的應用　112
12．1　框架概述　112
12．2　框架的基本結構　113
12．3　設置框架集　113
12．3．1　左右分割——cols　114
12．3．2　上下分割——rows　115
12．4　嵌套框架　115
12．5　設置框架　116
12．5．1　設置框架源文件屬性——src　117
12．5．2　設置框架名稱——name　117
12．5．3　設置框架邊框——frameborder　117
12．5．4　設置框架滾動條——scrolling　117
12．5．5　調整框架尺寸——noresize　118
12．6　浮動框架　118
12．6．1　設置浮動框架　118
12．6．2　浮動框架屬性——width和height　119
12．7　小實例——利用框架制作電子簡歷　120
12．8　知識點提煉　121
12．9　思考與練習　121
12．10　上機實例練習——利用框架制作電子相冊　121
第13章　表單的設計　122
13．1　表單標簽　122
13．2　表單標簽　122
13．3　表單域　123
13．3．1　文本框——text　123
13．3．2　密碼框——password　124
13．3．3　文件域——file　125
13．3．4　復選框——checkbox　125
13．3．5　單選按鈕——radio　126
13．3．6　標準按鈕——button　127
13．3．7　提交按鈕——submit　128
13．3．8　重置按鈕——reset　129
13．3．9　圖像域——image　130
13．3．10　隱藏域——hidden　131
13．4　文本區(qū)域　131
13．5　下拉菜單和列表項　132
13．6　小實例——在線報名表單設計　133
13．7　知識點提煉　136
13．8　思考與練習　136
13．9　上機實例練習——應聘簡歷表單設計　136
進階篇
第14章　CSS樣式表基礎　138
14．1　CSS概述　138
14．2　CSS語法　138
14．3　CSS常用選擇器　139
14．3．1　類選擇符　139
14．3．2　id選擇符　140
14．3．3　包含選擇符　140
14．3．4　偽類　140
14．4　CSS使用方法　140
14．4．1　鏈入外部樣式表　141
14．4．2　內部樣式表　142
14．4．3　嵌入樣式表　143
14．4．4　導入外部樣式表　144
14．5　CSS特性和優(yōu)先級問題　145
14．6　小實例——CSS樣式的應用　146
14．7　知識點提煉　146
14．8　思考與練習　147
14．9　上機實例練習——利用外部樣式設計一個網(wǎng)頁　147
第15章　字體樣式表　148
15．1　字體顏色——color　148
15．2　字體設置——font-family　149
15．3　字號設置——font-size　150
15．4　字體樣式——font-style　152
15．5　字體加粗——font-weight　153
15．6　字體變體——font-variant　154
15．7　組合設置字體屬性——font　155
15．8　小實例——利用CSS進行字體綜合設置　156
15．9　知識點提煉　157
15．10　思考與練習　157
15．11　上機實例練習——制作利用CSS進行字體設置網(wǎng)頁　158
第16章　段落樣式表　159
16．1　調整字符間距——letter-spacing　159
16．2　調整單詞間距——word-spacing　160
16．3　添加文本修飾——text-decoration　161
16．4　文本對齊方式——text-align　162
16．5　設置段落縮進——text-indent　163
16．6　設置行高——line-height　164
16．7　英文大小寫轉換——text-transform　165
16．8　小實例——利用CSS進行段落精確編排　166
16．9　知識點提煉　167
16．10　思考與練習　167
16．11　上機實例練習——制作一個利用 CSS進行精美編排的網(wǎng)頁　168
第17章　列表和背景　169
17．1　列表樣式——list-style-type　169
17．2　列表圖像——list-style-image　171
17．3　列表位置——list-style-position　172
17．4　設置背景顏色——background-color　173
17．5　設置背景圖片——background-image　174
17．6　設置背景附件——background-attachment　175
17．7　設置背景圖片重復——background-repeat　177
17．8　設置背景圖片位置——background-position　178
17．9　綜合設置背景——background　180
17．10　小實例——字體和背景的綜合應用　181
17．11　知識點提煉　182
17．12　思考與練習　182
17．13　上機實例練習——利用背景和列表樣式制作新聞列表　183
第18章　CSS盒子模型　184
18．1　CSS盒子模型概述　184
18．2　CSS內邊距——padding　184
18．3　CSS邊框——border　186
18．3．1　邊框樣式——border-style　187
18．3．2　邊框顏色——border-color　189
18．3．3　邊框寬度——border-width　190
18．4　CSS外邊距——margin　192
18．5　盒子模型顯示——display　193
18．6　小實例——盒子模型的綜合應用　195
18．7　知識點提煉　196
18．8　思考與練習　196
18．9　上機實例練習——利用盒子模型制作照片邊框效果　197
第19章　DIV+CSS頁面布局　198
19．1　層的創(chuàng)建　198
19．2　創(chuàng)建嵌套層　199
19．3　層的常見屬性　200
19．4　CSS定位　201
19．4．1　定位方式——position　201
19．4．2　堆疊順序——z-index　203
19．4．3　CSS浮動——float　203
19．4．4　浮動清除——clear　204
19．4．5　溢出設置——overflow　205
19．4．6　可見設置——visibility　206
19．5　頁面內容樣式設計　207
19．5．1　垂直導航菜單　207
19．5．2　水平導航菜單　208
19．5．3　新聞列表　208
19．5．4　圖文混排　209
19．6　小實驗——DIV+CSS頁面布局　210
19．7　知識點提煉　212
19．8　思考與練習　212
19．9　上機實例練習——利用DIV+CSS布局一個網(wǎng)頁　213
高級篇
第20章　JavaScript概述　216
20．1　JavaScript語言概況　216
20．2　JavaScript的特點　216
20．3　JavaScript使用方法　217
20．4　知識點提煉　218
20．5　思考與練習　218
20．6　上機實例練習——寫一個帶JS的網(wǎng)頁　219
第21章　JavaScript基本語法　220
21．1　基本數(shù)據(jù)類型　220
21．2　運算符　220
21．2．1　算術運算符　221
21．2．2　邏輯運算符　222
21．2．3　比較運算符　224
21．3　程序結構　225
21．3．1　If語句　225
21．3．2　Switch語句　226
21．3．3　For語句　228
21．3．4　While與Do…While　228
21．4　函數(shù)　230
21．4．1　有參函數(shù)　230
21．4．2　無參函數(shù)　231
21．5　小實例——用戶登錄　232
21．6　知識點提煉　233
21．7　思考與練習　233
21．8　上機實例練習——編寫一個求長方體體積的程序網(wǎng)頁　234
第22章　JavaScript事件分析　235
22．1　事件概述　235
22．2　主要事件　235
22．2．1　鼠標單擊事件onClick　236
22．2．2　內容改變事件onChange　237
22．2．3　內容選擇事件onSelect　238
22．2．4　聚焦事件onFocus　238
22．2．5　失焦事件onBlur　239
22．2．6　裝載事件onLoad　240
22．2．7　卸載事件onUnload　240
22．2．8　鼠標事件onMouseOver　241
22．2．9　鼠標移開事件onMouseOut　242
22．3　小實例——主要事件綜合應用　242
22．4　知識點提煉　243
22．5　思考與練習　243
22．6　上機實例練習——制作鼠標經過圖片放大效果　244
第23章　JavaScript對象　245
23．1　對象概述　245
23．2　瀏覽器對象　246
23．2．1　Navigator對象　246
23．2．2　Location對象　247
23．2．3　Window對象　248
23．2．4　Document對象　250
23．2．5　History對象　250
23．3　內置對象和方法　251
23．4　小實例——對象的綜合應用　252
23．5　知識點提煉　253
23．6　思考與練習　253
23．7　上機實例練習——編寫顯示客戶端系統(tǒng)及當前時間的網(wǎng)頁　254
實戰(zhàn)篇
第24章　綜合案例　256
24．1　網(wǎng)站開發(fā)與發(fā)布流程　256
24．1．1　網(wǎng)站開發(fā)流程　256
24．1．2　網(wǎng)站發(fā)布流程　257
24．2　花店系統(tǒng)前端開發(fā)過程　257
24．3　知識點提煉　265
24．4　思考與練習　265
擴展篇
第25章　全新的HTML—HTML5　268
25．1　初識HTML 5　268
25．2　HTML5語法結構　269
25．3　HTML5頁面架構元素　269
25．4　元素的改變　270
25．4．1　新增元素　271
25．4．2　停止使用的元素　277
25．5　屬性的改變　277
25．5．1　新增的屬性　278
25．5．2　停止使用的屬性　278
25．5．3　全局屬性　279
25．6　知識點提煉　282
25．7　思考與練習　282
第26章　HTML5的表單　283
26．1　新的input輸入類型及屬性　283
26．1．1　新的input輸入類型　283
26．1．2　新的input公用屬性　288
26．2　表單的驗證方式　293
26．2．1　調用checkValidity()方法實現(xiàn)驗證　293
26．2．2　調用setCustomValidity()方法實現(xiàn)驗證　294
26．2．3　設置不驗證　295
26．3　知識點提煉　296
26．4　思考與練習　296
參考文獻　297 TOP書摘 TOP 其它信息 開　　本：16開正文語種：中文