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

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