網(wǎng)頁制作案例教程（第2版）

第1章 網(wǎng)站與網(wǎng)頁概述\t1
1．1　網(wǎng)站與網(wǎng)頁基礎(chǔ)知識(shí)　1
1．1．1　Internet與Web　1
1．1．2　Web的工作原理　2
1．1．3　網(wǎng)站、網(wǎng)頁與主頁　2
1．1．4　靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁　3
1．2　網(wǎng)站建立及管理　3
1．2．1　注冊(cè)、購買域名　3
1．2．2　申請(qǐng)網(wǎng)站空間　5
1．2．3　上傳網(wǎng)站內(nèi)容　6
1．2．4　網(wǎng)站維護(hù)管理方法　6
1．3　網(wǎng)站的開發(fā)設(shè)計(jì)　7
1．3．1　網(wǎng)站類型的確定　7
1．3．2　網(wǎng)站整體風(fēng)格的定位　10
1．3．3　網(wǎng)站標(biāo)識(shí)與色彩設(shè)計(jì)　10
1．3．4　網(wǎng)站導(dǎo)航與布局設(shè)計(jì)　11
1．4　網(wǎng)頁制作的主要工具軟件　11
1．4．1　網(wǎng)頁設(shè)計(jì)軟件——Dreamweaver　11
1．4．2　圖像處理軟件——Photoshop　11
1．4．3　動(dòng)畫設(shè)計(jì)軟件——Flash　11
1．5　課后實(shí)驗(yàn)　12
1．6　小結(jié)　14
1．7　練習(xí)與作業(yè)　15
第2章　HTML 5入門　16
2．1　HTML 5基本概念　16
2．1．1　HTML 5簡介　16
2．1．2　標(biāo)記及其屬性　17
2．1．3　瀏覽和修改網(wǎng)頁　18
2．2　創(chuàng)建第一個(gè)HTML 5文件　18
2．3　HTML 5編碼基礎(chǔ)　19
2．3．1　HTML 5文檔的基本架構(gòu)　19
2．3．2　HTML 5基本結(jié)構(gòu)標(biāo)記　19
2．4　HTML 5常用標(biāo)記　20
2．4．1　特殊字符與文字修飾標(biāo)記　20
2．4．2　段落格式　21
2．4．3　圖像插入　25
2．4．4　表格處理　26
2．4．5　超級(jí)鏈接　27
2．4．6　音頻及視頻插入　28
2．5　HTML 5新增的頁面結(jié)構(gòu)標(biāo)記　31
2．6　HTML 5要點(diǎn)補(bǔ)充　32
2．7　課后實(shí)驗(yàn)　32
2．8　小結(jié)　33
2．9　練習(xí)與作業(yè)　33
第3章　網(wǎng)頁基本編輯　35
3．1　Dreamweaver CC簡介　35
3．1．1　Dreamweaver CC的啟動(dòng)　35
3．1．2　Dreamweaver CC的工作界面　36
3．1．3　創(chuàng)建本地站點(diǎn)　39
3．1．4　創(chuàng)建、打開和保存文檔　40
3．1．5　Dreamweaver CC的退出　42
3．2　文本　42
3．2．1　插入文本　43
3．2．2　設(shè)置文本格式　46
3．2．3　插入水平線　50
3．2．4　檢查拼寫　51
3．2．5　查找和替換文本　51
3．2．6　調(diào)色板操作　52
3．3　課后實(shí)驗(yàn)　53
3．4　小結(jié)　54
3．5　練習(xí)與作業(yè)　54
第4章　多媒體與超鏈接　56
4．1　圖像　56
4．1．1　常用的Web圖像格式　56
4．1．2　插入圖像　57
4．1．3　圖像常用屬性設(shè)置　58
4．1．4　圖像對(duì)齊方式設(shè)置　60
4．1．5　創(chuàng)建鼠標(biāo)經(jīng)過圖像效果　61
4．2　設(shè)置頁面屬性　62
4．3　多媒體　65
4．3．1　插入音頻　65
4．3．2　插入視頻　66
4．3．3　插入Flash動(dòng)畫　68
4．4　超鏈接　68
4．4．1　超文本鏈接　69
4．4．2　命名錨記及錨鏈接　71
4．4．3　電子郵件鏈接　72
4．4．4　圖像及圖像熱區(qū)鏈接　72
4．5　導(dǎo)航條　73
4．6　課后實(shí)驗(yàn)　74
4．7　小結(jié)　75
4．8　練習(xí)與作業(yè)　75
第5章　表格與嵌入式框架　77
5．1　表格的基本操作　77
5．1．1　表格的組成　77
5．1．2　插入表格　78
5．1．3　選擇表格　78
5．1．4　添加或刪除表格的行和列　79
5．1．5　調(diào)整表格大小　79
5．1．6　單元格的合并與拆分　80
5．2　表格的實(shí)例應(yīng)用　80
5．2．1　實(shí)例應(yīng)用1——制作課程表　81
5．2．2　實(shí)例應(yīng)用2——用表格實(shí)現(xiàn)網(wǎng)頁
布局　83
5．3　表格數(shù)據(jù)的導(dǎo)入與導(dǎo)出　87
5．3．1　表格數(shù)據(jù)的導(dǎo)入　87
5．3．2　表格數(shù)據(jù)排序　88
5．3．3　從網(wǎng)頁中導(dǎo)出表格數(shù)據(jù)　89
5．4　嵌入式框架　90
5．4．1　嵌入式框架介紹　90
5．4．2　嵌入式框架應(yīng)用　91
5．5　課后實(shí)驗(yàn)　93
5．6　小結(jié)　97
5．7　練習(xí)與作業(yè)　98
第6章　CSS概述　99
6．1　CSS簡介　99
6．1．1　認(rèn)識(shí)CSS　99
6．1．2　CSS的功能　101
6．1．3　CSS3　101
6．2　CSS的基本語法　101
6．2．1　選擇器　102
6．2．2　聲明　104
6．3　CSS在HTML 5中的應(yīng)用方式　104
6．3．1　CSS的應(yīng)用方式　104
6．3．2　優(yōu)先級(jí)問題　105
6．4　CSS樣式面板及CSS規(guī)則定義　105
6．4．1　CSS樣式面板功能介紹　106
6．4．2　CSS規(guī)則的定義　108
6．5　使用CSS設(shè)計(jì)器　113
6．5．1　CSS設(shè)計(jì)器面板介紹　113
6．5．2　CSS設(shè)計(jì)器的CSS3實(shí)例應(yīng)用　115
6．6　課后實(shí)驗(yàn)　118
6．7　小結(jié)　120
6．8　作業(yè)與實(shí)驗(yàn)　120
第7章　DIV+CSS網(wǎng)頁布局　122
7．1　DIV+CSS的概述　122
7．1．1　DIV+CSS布局的優(yōu)缺點(diǎn)　122
7．1．2　網(wǎng)頁結(jié)構(gòu)的設(shè)計(jì)　122
7．2　Dreamweaver CC中DIV+CSS創(chuàng)建
網(wǎng)頁布局的方法　123
7．3　DOM面板的使用　127
7．4　DIV+CSS網(wǎng)頁案例設(shè)計(jì)　128
7．4．1　網(wǎng)站主容器及l(fā)ogo區(qū)　129
7．4．2　主導(dǎo)航區(qū)　130
7．4．3　網(wǎng)頁banner區(qū)　133
7．4．4　網(wǎng)頁中心內(nèi)容區(qū)　133
7．4．5　頁腳內(nèi)容區(qū)及頁面背景顏色　137
7．5　DIV的相對(duì)定位與絕對(duì)定位　137
7．5．1　相對(duì)定位　138
7．5．2　絕對(duì)定位　138
7．5．3　Dreamweaver絕對(duì)/相對(duì)定位案例
學(xué)習(xí)　139
7．5．4　絕對(duì)定位元素的排列順序　142
7．6　課后實(shí)驗(yàn)　143
7．7　小結(jié)　145
7．8　練習(xí)與作業(yè)　146
第8章　模板和庫　147
8．1　“資源”面板　147
8．2　模板概述　147
8．2．1　什么是模板　147
8．2．2　模板的優(yōu)點(diǎn)　149
8．3　創(chuàng)建模板　149
8．3．1　創(chuàng)建空模板　149
8．3．2　將現(xiàn)有文檔存為模板　150
8．3．3　創(chuàng)建可編輯區(qū)域　150
8．4　模板的應(yīng)用　151
8．4．1　應(yīng)用模板創(chuàng)建新文檔　151
8．4．2　更新應(yīng)用模板的文檔　152
8．4．3　將文檔從模板中分離　152
8．5　模板網(wǎng)頁案例應(yīng)用　152
8．6　庫　155
8．6．1　庫項(xiàng)目介紹　155
8．6．2　庫項(xiàng)目創(chuàng)建及引用　155
8．6．3　庫項(xiàng)目的刪除與編輯　156
8．6．4　網(wǎng)頁庫項(xiàng)目與源文件分離　157
8．7　課后實(shí)驗(yàn)　157
8．8　小結(jié)　159
8．9　練習(xí)與作業(yè)　159
第9章　行為　160
9．1　行為概述　160
9．1．1　動(dòng)作　160
9．1．2　事件　160
9．1．3　“行為”面板　160
9．2　彈出信息　161
9．3　轉(zhuǎn)到URL　162
9．4　調(diào)用JavaScript　162
9．5　顯示-隱藏元素　163
9．6　課后實(shí)驗(yàn)　166
9．7　小結(jié)　167
9．8　練習(xí)與作業(yè)　167
第10章　表單　168
10．1　關(guān)于表單　168
10．2　表單元素　169
10．2．1　插入表單　169
10．2．2　插入文本域　170
10．2．3　插入單選按鈕和復(fù)選框　174
10．2．4　插入下拉列表　175
10．2．5　插入表單按鈕　176
10．2．6　插入其他表單控件　177
10．3　用戶注冊(cè)表單實(shí)例　178
10．4　課后實(shí)驗(yàn)　182
10．5　小結(jié)　183
10．6　練習(xí)與作業(yè)　183
第11章　圖像處理工具Photoshop
CC　184
11．1　圖形、圖像基本概念　184
11．1．1　位圖與矢量圖　184
11．1．2　常用圖形、圖像格式　185
11．2　Photoshop CC基礎(chǔ)知識(shí)　186
11．2．1　圖像基本概念　186
11．2．2　Photoshop CC概述　186
11．2．3　Photoshop CC工作界面介紹　187
11．2．4　Photoshop CC 操作特點(diǎn)　189
11．3　Photoshop CC基本操作　189
11．3．1　圖像羽化　189
11．3．2　圖層組合　190
11．3．3　圖像融合　193
11．4　Photoshop CC人物處理　195
11．4．1　相片常規(guī)處理　195
11．4．2　人物面部美化　200
11．4．3　更換人物服飾　202
11．4．4　更換人物背景　203
11．5　Photoshop CC按鈕、特效字制作　205
11．6　Photoshop CC綜合處理　211
11．6．1　圖像變形處理　211
11．6．2　圖像藝術(shù)效果　213
11．6．3　電影海報(bào)設(shè)計(jì)　214
11．6．4　圖像切片及網(wǎng)頁導(dǎo)出　217
11．7　課后實(shí)驗(yàn)　220
11．8　小結(jié)　220
11．9　練習(xí)與作業(yè)　221
第12章　動(dòng)畫制作工具
Flash　CC　222
12．1　中文Flash CC的工作界面　222
12．1．1　動(dòng)畫與Flash CC　222
12．1．2　運(yùn)行Flash CC　222
12．1．3　菜單欄　225
12．1．4　工具箱　226
12．1．5　場景和舞臺(tái)　227
12．1．6　時(shí)間軸　227
12．1．7　面板　228
12．2　中文Flash CC的基本操作　229
12．2．1　文件操作　229
12．2．2　對(duì)象操作　230
12．2．3　聲音處理　235
12．3　Flash動(dòng)畫制作基礎(chǔ)　240
12．3．1　Flash動(dòng)畫的種類　240
12．3．2　Flash影片的制作過程概述　241
12．4　導(dǎo)入、導(dǎo)出和素材處理　245
12．4．1　導(dǎo)入外部素材　245
12．4．2　作品的導(dǎo)出與發(fā)布　246







12．5　應(yīng)用實(shí)例　250
12．5．1　逐幀動(dòng)畫實(shí)例　251
12．5．2　補(bǔ)間動(dòng)畫實(shí)例　253
12．5．3　路徑跟隨動(dòng)畫實(shí)例　255
12．6　課后實(shí)驗(yàn)　257
12．7　小結(jié)　261
12．8　作業(yè)與實(shí)驗(yàn)　261
第13章　網(wǎng)站制作綜合應(yīng)用　263
13．1　網(wǎng)站建設(shè)流程　263
13．1．1　網(wǎng)站策劃　263
13．1．2　設(shè)計(jì)網(wǎng)頁　266
13．1．3　測(cè)試站點(diǎn)　266
13．1．4　發(fā)布站點(diǎn)　267
13．2　綜合應(yīng)用實(shí)例　268
13．2．1　利用Photoshop設(shè)計(jì)網(wǎng)頁　268
13．2．2　利用Flash設(shè)計(jì)動(dòng)畫　274
13．2．3　利用DreamWeaver制作網(wǎng)站　276
13．3　課后實(shí)驗(yàn)　278
13．4　小結(jié)　278
13．5　作業(yè)與實(shí)驗(yàn)　278
參考文獻(xiàn)　279