網(wǎng)頁制作技術(shù)（第二版）

以具體任務(wù)為引導(dǎo)，做中學(xué)

以知識(shí)準(zhǔn)備為鋪墊，學(xué)中做

以實(shí)踐操作實(shí)施任務(wù)，突出學(xué)習(xí)重點(diǎn)

以深入解析拓展知識(shí)，突破學(xué)習(xí)難點(diǎn)

以實(shí)訓(xùn)習(xí)題加強(qiáng)練習(xí)，提升學(xué)習(xí)效果

隨著Internet的普及與應(yīng)用，網(wǎng)絡(luò)信息時(shí)代給人們的生活帶來種種便利，網(wǎng)頁也成為人們信息發(fā)布及獲取、思想交流、商務(wù)往來的重要途徑，制作網(wǎng)頁已不再是某些人或某些公司的專長，而是現(xiàn)代人應(yīng)掌握的一種技能。本書第一版自2006年8月出版發(fā)行以來，已重印3次，銷量1萬多冊(cè)，深受教師和學(xué)生好評(píng)。根據(jù)高職高專對(duì)學(xué)生網(wǎng)頁制作技術(shù)的能力要求，第二版在第一版的基礎(chǔ)上進(jìn)行了修訂，根據(jù)計(jì)算機(jī)相關(guān)專業(yè)人才培養(yǎng)的需要，重視技能培養(yǎng)和素質(zhì)養(yǎng)成，采用項(xiàng)目驅(qū)動(dòng)、任務(wù)引導(dǎo)，以案例教學(xué)、綜合實(shí)訓(xùn)為構(gòu)架，案例豐富、邏輯性強(qiáng)。以通俗易懂的語言，生動(dòng)活潑的形式展現(xiàn)現(xiàn)代計(jì)算機(jī)教材編寫的風(fēng)格，適應(yīng)廣大院校及不同專業(yè)選課的需要。

本教材全面系統(tǒng)地介紹了應(yīng)用網(wǎng)頁制作三劍客軟件進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的各種技術(shù)和技巧，設(shè)計(jì)了大量有針對(duì)性的任務(wù)，并將實(shí)例融入每個(gè)知識(shí)點(diǎn)中，結(jié)構(gòu)清晰、案例豐富、任務(wù)明確，操作性強(qiáng)。

全書共16個(gè)任務(wù)。

任務(wù)1設(shè)計(jì)網(wǎng)頁。主要介紹網(wǎng)頁設(shè)計(jì)的基本原則，網(wǎng)頁字體、色彩、Logo等設(shè)計(jì)方法；

任務(wù)2創(chuàng)建和管理站點(diǎn)。主要介紹Dreamweaver CS4的基本操作，創(chuàng)建和管理站點(diǎn)的方法；

任務(wù)3制作多媒體頁面。主要介紹HTML的語法和標(biāo)簽命令，網(wǎng)頁中插入Flash動(dòng)畫、聲音、視頻，制作多媒體頁面的方法；

任務(wù)4制作網(wǎng)站鏈接。介紹了網(wǎng)站的各種鏈接方法；

任務(wù)5上傳站點(diǎn)。介紹了站點(diǎn)檢查和上傳的技術(shù)；

任務(wù)6制作網(wǎng)頁動(dòng)畫。主要介紹Flash CS4制作動(dòng)畫的基本方法；

任務(wù)7制作高級(jí)動(dòng)畫。介紹了Flash CS4高級(jí)動(dòng)畫的制作技術(shù)；

任務(wù)8制作網(wǎng)頁圖形。學(xué)習(xí)Fireworks CS4繪制矢量圖型，設(shè)計(jì)網(wǎng)站標(biāo)志的方法；

任務(wù)9處理網(wǎng)頁圖像。進(jìn)一步學(xué)習(xí)Fireworks CS4處理圖像的高級(jí)技術(shù)；

任務(wù)10表格排版布局網(wǎng)頁。應(yīng)用表格布局網(wǎng)頁；

任務(wù)11制作網(wǎng)頁交互元素。介紹了表單的制作方法；

任務(wù)12 應(yīng)用CSS樣式表。介紹了應(yīng)用CSS樣式表的技術(shù)和技巧；

任務(wù)13框架結(jié)構(gòu)布局網(wǎng)頁。介紹了應(yīng)用框架結(jié)構(gòu)設(shè)計(jì)布局制作網(wǎng)頁的方法；

任務(wù)14提高網(wǎng)站開發(fā)效率。主要介紹了庫和模板的應(yīng)用技術(shù)；

任務(wù)15應(yīng)用層與行為。介紹了層與行為的應(yīng)用技術(shù)；

任務(wù)16項(xiàng)目實(shí)戰(zhàn)。通過門戶站點(diǎn)、個(gè)人網(wǎng)站、音樂網(wǎng)站、商業(yè)網(wǎng)站、教育網(wǎng)站的項(xiàng)目制作，進(jìn)一步深入理解、掌握網(wǎng)頁制作、網(wǎng)站發(fā)布的各項(xiàng)技術(shù)。

本書主要具有如下特點(diǎn)：

1．以具體任務(wù)為引導(dǎo)，做中學(xué)

全書采取項(xiàng)目驅(qū)動(dòng)、任務(wù)引導(dǎo)的模式進(jìn)行編寫，通過16個(gè)任務(wù)序列承上啟下，循序漸進(jìn)，每個(gè)任務(wù)包括學(xué)習(xí)目標(biāo)、任務(wù)分析、知識(shí)準(zhǔn)備、任務(wù)實(shí)施、深入解析、實(shí)訓(xùn)練習(xí)、習(xí)題等，全方位組織教學(xué)，多任務(wù)完成項(xiàng)目。

2．以知識(shí)準(zhǔn)備為鋪墊，學(xué)中做

本書在以能力培養(yǎng)的任務(wù)序列為主線的同時(shí)，也注重基礎(chǔ)知識(shí)的學(xué)習(xí)，在知識(shí)準(zhǔn)備環(huán)節(jié)中編寫強(qiáng)調(diào)知識(shí)點(diǎn)系統(tǒng)連貫，邏輯性強(qiáng)；重點(diǎn)突出，并利用豐富的案例教學(xué)，講清功能要點(diǎn)，加深理解，講練結(jié)合。

3．以實(shí)踐操作實(shí)施任務(wù)，突出學(xué)習(xí)重點(diǎn)

本書軟件版本新，內(nèi)容實(shí)用，任務(wù)實(shí)施步驟清晰，深入淺出，可操作性強(qiáng)，使學(xué)生易學(xué)會(huì)用。

4．以深入解析拓展知識(shí)，突破學(xué)習(xí)難點(diǎn)

在書中針對(duì)每個(gè)任務(wù)拓展知識(shí)，深入解析難點(diǎn)內(nèi)容，使學(xué)生能舉一反三、深入理解、活學(xué)活用，做出更好的作品。

5．以實(shí)訓(xùn)習(xí)題加強(qiáng)練習(xí)，提升學(xué)習(xí)效果

本書每個(gè)任務(wù)完成后都有相關(guān)的實(shí)訓(xùn)練習(xí)和習(xí)題，使學(xué)生加深對(duì)理論知識(shí)的理解，進(jìn)一步強(qiáng)化實(shí)踐能力的培養(yǎng)，既鞏固知識(shí)，又提高能力。

本書由許莉擔(dān)任主編，汪曉青、夏敏擔(dān)任副主編，王路群主審，參與本書編寫的還有魯娟、李漢橋、江駿、董寧、林利、李唯、肖靜、侯自力、馬力等。對(duì)于在本書編寫過程中提供了支持和幫助的所有人，在此表示衷心的感謝。

由于時(shí)間、水平有限，書中不足之處在所難免，敬請(qǐng)廣大讀者、專家批評(píng)指正。

編 者

2010年10月

前言

任務(wù)一 設(shè)計(jì)網(wǎng)頁 1
學(xué)習(xí)目標(biāo) 1
任務(wù)分析 1
知識(shí)準(zhǔn)備 1
知識(shí)1 網(wǎng)頁的有關(guān)術(shù)語 1
知識(shí)2 網(wǎng)頁的基本構(gòu)成元素 3
知識(shí)3 網(wǎng)頁設(shè)計(jì)的基本原則 6
知識(shí)4 網(wǎng)頁設(shè)計(jì)的美學(xué)法則 7
知識(shí)5 網(wǎng)頁的布局原則 8
知識(shí)6 網(wǎng)頁的布局結(jié)構(gòu) 10
任務(wù)實(shí)施 12
任務(wù)1 設(shè)計(jì)網(wǎng)站的標(biāo)志（Logo） 12
任務(wù)2 設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語 12
任務(wù)3 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩 13
任務(wù)4 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體 13
任務(wù)5 設(shè)計(jì)網(wǎng)頁 14
深入解析 14
實(shí)訓(xùn)練習(xí) 14
習(xí)題一 14
任務(wù)二 創(chuàng)建和編輯站點(diǎn) 16
學(xué)習(xí)目標(biāo) 16
任務(wù)分析 16
知識(shí)準(zhǔn)備 16
知識(shí)1 Dreamweaver CS4的功能和特點(diǎn) 16
知識(shí)2 Dreamweaver CS4的工作界面 18
知識(shí)3 站點(diǎn) 22
任務(wù)實(shí)施 23
任務(wù)1 創(chuàng)建本地站點(diǎn) 23
任務(wù)2 管理站點(diǎn) 26
任務(wù)3 創(chuàng)建站點(diǎn)內(nèi)容 27
深入解析 28
實(shí)訓(xùn)練習(xí) 28
習(xí)題二 28
任務(wù)三 制作多媒體頁面 29
學(xué)習(xí)目標(biāo) 29
任務(wù)分析 29
知識(shí)準(zhǔn)備 29
知識(shí)1 HTML的基本結(jié)構(gòu) 29
知識(shí)2 常用的HTML標(biāo)簽命令 31
知識(shí)3 常用網(wǎng)頁元素的插入 44
任務(wù)實(shí)施 46
任務(wù)1 完成頁面的準(zhǔn)備工作 46
任務(wù)2 插入Flash動(dòng)畫 49
任務(wù)3 插入聲音或音樂 50
任務(wù)4 插入視頻 51
任務(wù)5 制作多媒體頁面 51
深入解析 55
實(shí)訓(xùn)練習(xí) 55
習(xí)題三 55
任務(wù)四 制作網(wǎng)站鏈接 57
學(xué)習(xí)目標(biāo) 57
任務(wù)分析 57
知識(shí)準(zhǔn)備 57
知識(shí)1 絕對(duì)路經(jīng)與相對(duì)路徑 57
知識(shí)2 內(nèi)部鏈接與外部鏈接 58
知識(shí)3 其他特殊鏈接 59
任務(wù)實(shí)施 60
任務(wù)1 制作網(wǎng)站鏈接 60
任務(wù)2 制作錨點(diǎn)鏈接 62
任務(wù)3 制作圖像鏈接 63
任務(wù)4 制作熱點(diǎn)鏈接 64
深入解析 65
習(xí)題四 65
任務(wù)五 上傳站點(diǎn) 67
學(xué)習(xí)目標(biāo) 67
任務(wù)分析 67
知識(shí)準(zhǔn)備 67
知識(shí)1 站點(diǎn)的檢查 67
知識(shí)2 站點(diǎn)的報(bào)告 68
任務(wù)實(shí)施 68
任務(wù)1 檢查鏈接 68
任務(wù)2 生成站點(diǎn)報(bào)告 70
任務(wù)3 檢查目標(biāo)瀏覽器 71
任務(wù)4 上傳站點(diǎn) 71
深入解析 72
實(shí)訓(xùn)練習(xí) 73
習(xí)題五 73
任務(wù)六 制作網(wǎng)頁動(dòng)畫 75
學(xué)習(xí)目標(biāo) 75
任務(wù)分析 75
知識(shí)準(zhǔn)備 75
知識(shí)1 Flash CS4的功能和特點(diǎn) 75
知識(shí)2 Flash CS4的工作界面 75
知識(shí)3 Flash CS4的基本操作 77
知識(shí)4 幀與時(shí)間軸 84
知識(shí)5 元件與實(shí)例 86
知識(shí)6 逐幀動(dòng)畫 89
知識(shí)7 補(bǔ)間形狀動(dòng)畫 90
知識(shí)8 傳統(tǒng)補(bǔ)間動(dòng)畫 91
知識(shí)9 補(bǔ)間動(dòng)畫 92
任務(wù)實(shí)施 93
任務(wù)1 創(chuàng)建逐幀動(dòng)畫 93
任務(wù)2 創(chuàng)建補(bǔ)間形狀動(dòng)畫 94
任務(wù)3 創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫 95
任務(wù)4 創(chuàng)建補(bǔ)間動(dòng)畫 97
深入解析 98
實(shí)訓(xùn)練習(xí) 98
習(xí)題六 103
任務(wù)七 制作高級(jí)動(dòng)畫 104
學(xué)習(xí)目標(biāo) 104
任務(wù)分析 104
知識(shí)準(zhǔn)備 104
知識(shí)1 引導(dǎo)層 104
知識(shí)2 遮罩層 106
知識(shí)3 反向運(yùn)動(dòng) 107
知識(shí)4 聲音文件的導(dǎo)入 107
知識(shí)5 動(dòng)畫的發(fā)布 109
任務(wù)實(shí)施 116
任務(wù)1 創(chuàng)建引導(dǎo)層動(dòng)畫 116
任務(wù)2 創(chuàng)建遮罩層動(dòng)畫 118
任務(wù)3 創(chuàng)建反向運(yùn)動(dòng)效果 120
任務(wù)4 為按鈕添加聲音 122
深入解析 123
實(shí)訓(xùn)練習(xí) 123
習(xí)題七 125
任務(wù)八 制作網(wǎng)頁圖形 127
學(xué)習(xí)目標(biāo) 127
任務(wù)分析 127
知識(shí)準(zhǔn)備 127
知識(shí)1 Fireworks CS4的功能和特點(diǎn) 127
知識(shí)2 Fireworks CS4的工作界面 128
知識(shí)3 Fireworks CS4文檔的基本操作 129
知識(shí)4 矢量圖形的繪制 131
知識(shí)5 對(duì)象的處理 135
知識(shí)6 文本的創(chuàng)建 137
任務(wù)實(shí)施 139
任務(wù)1 繪制幾何圖形 139
任務(wù)2 繪制公司標(biāo)志 140
任務(wù)3 制作新浪網(wǎng)標(biāo)志 141
深入解析 142
實(shí)施練習(xí) 142
習(xí)題八 144
任務(wù)九 處理網(wǎng)頁圖像 146
學(xué)習(xí)目標(biāo) 146
任務(wù)分析 146
知識(shí)準(zhǔn)備 146
知識(shí)1 位圖圖像處理 146
知識(shí)2 元件與實(shí)例 151
知識(shí)3 交互式網(wǎng)頁圖像 151
知識(shí)4 圖像的優(yōu)化與導(dǎo)出 152
任務(wù)實(shí)施 155
任務(wù)1 打開多個(gè)圖像文件制作動(dòng)畫 155
任務(wù)2 手工制作動(dòng)畫 156
任務(wù)3 分散到狀態(tài)生成動(dòng)畫 157
任務(wù)4 利用元件和實(shí)例制作動(dòng)畫 159
任務(wù)5 導(dǎo)出動(dòng)畫 160
任務(wù)6 創(chuàng)建圖像的切片與熱點(diǎn) 161
任務(wù)7 制作按鈕和導(dǎo)航欄 163
任務(wù)8 制作彈出菜單 165
深入解析 167
實(shí)訓(xùn)練習(xí) 167
習(xí)題九 172
任務(wù)十 表格排版布局網(wǎng)頁 174
學(xué)習(xí)目標(biāo) 174
任務(wù)分析 174
知識(shí)準(zhǔn)備 174
知識(shí)1 表格的使用 174
知識(shí)2 設(shè)置表格屬性 176
知識(shí)3 編輯表格和單元格 177
知識(shí)4 排序表格 179
知識(shí)5 導(dǎo)入表格化數(shù)據(jù) 180
知識(shí)6 表格的擴(kuò)展視圖 180
任務(wù)實(shí)施 181
任務(wù)1 制作照片集 181
任務(wù)2 制作網(wǎng)站首頁 182
深入解析 184
實(shí)訓(xùn)練習(xí) 184
習(xí)題十 186
任務(wù)十一 制作網(wǎng)頁交互元素 187
學(xué)習(xí)目標(biāo) 187
任務(wù)分析 187
知識(shí)準(zhǔn)備 187
知識(shí)1 表單 187
知識(shí)2 文本域 188
知識(shí)3 選框與列表 190
知識(shí)4 文件上傳域 191
知識(shí)5 按鈕 192
知識(shí)6 跳轉(zhuǎn)菜單 192
任務(wù)實(shí)施 193
任務(wù)1 制作百度頁面 193
任務(wù)2 制作用戶注冊(cè)表 195
深入解析 196
實(shí)訓(xùn)練習(xí) 196
習(xí)題十一 197
任務(wù)十二 應(yīng)用CSS樣式表 199
學(xué)習(xí)目標(biāo) 199
任務(wù)分析 199
知識(shí)準(zhǔn)備 199
知識(shí)1 CSS樣式表 199
知識(shí)2 CSS樣式表的添加方法 200
知識(shí)3 內(nèi)部CSS與外部CSS 201
知識(shí)4 樣式的創(chuàng)建與編輯 201
任務(wù)實(shí)施 202
任務(wù)1 制作類樣式 202
任務(wù)2 制作HTML標(biāo)簽樣式 203
任務(wù)3 制作鏈接樣式 204
任務(wù)4 CSS樣式化網(wǎng)頁 205
深入解析 207
實(shí)訓(xùn)練習(xí) 207
習(xí)題十二 209
任務(wù)十三 框架結(jié)構(gòu)布局網(wǎng)頁 211
學(xué)習(xí)目標(biāo) 211
任務(wù)分析 211
知識(shí)準(zhǔn)備 211
知識(shí)1 框架和框架集 211
知識(shí)2 預(yù)定義的框架集 211
知識(shí)3 自定義框架集 213
知識(shí)4 嵌套框架集 213
知識(shí)5 保存框架 214
任務(wù)實(shí)施 215
任務(wù)1 利用框架制作網(wǎng)頁 215
任務(wù)2 制作內(nèi)聯(lián)式框架網(wǎng)頁 219
深入解析 220
實(shí)訓(xùn)練習(xí) 221
習(xí)題十三 222
任務(wù)十四 提高網(wǎng)站開發(fā)效率 223
學(xué)習(xí)目標(biāo) 223
任務(wù)分析 223
知識(shí)準(zhǔn)備 223
知識(shí)1 庫文件 223
知識(shí)2 模板 225
任務(wù)實(shí)施 228
任務(wù)1 應(yīng)用網(wǎng)頁庫文件 228
任務(wù)2 利用模板制作網(wǎng)頁 230
深入解析 231
實(shí)訓(xùn)練習(xí) 231
習(xí)題十四 233
任務(wù)十五 應(yīng)用層與行為 234
學(xué)習(xí)目標(biāo) 234
任務(wù)分析 234
知識(shí)準(zhǔn)備 234
知識(shí)1 層的特點(diǎn) 234
知識(shí)2 插入層 235
知識(shí)3 設(shè)置層的屬性 235
知識(shí)4 改變層的次序 236
知識(shí)5 刪除層 236
知識(shí)6 層與表格的轉(zhuǎn)換 236
知識(shí)7 行為 237
任務(wù)實(shí)施 237
任務(wù)1 應(yīng)用層制作網(wǎng)頁 237
任務(wù)2 制作彈出信息 239
任務(wù)3 設(shè)置狀態(tài)欄文本 240
任務(wù)4 打開瀏覽器窗口 241
任務(wù)5 交換圖像 242
任務(wù)6 控制Shockwave或Flash 242
任務(wù)7 播放聲音 243
任務(wù)8 檢查表單 244
深入解析 245
實(shí)訓(xùn)練習(xí) 245
習(xí)題十五 247
任務(wù)十六 項(xiàng)目實(shí)戰(zhàn) 248
學(xué)習(xí)目標(biāo) 248
任務(wù)分析 248
知識(shí)準(zhǔn)備 248
知識(shí)1 網(wǎng)站規(guī)劃 248
知識(shí)2 素材收集與處理 250
知識(shí)3 網(wǎng)站結(jié)構(gòu)設(shè)計(jì) 251
知識(shí)4 網(wǎng)站發(fā)布 254
知識(shí)5 網(wǎng)站管理 255
任務(wù)實(shí)施 256
任務(wù)1 門戶站點(diǎn)主頁制作 256
任務(wù)2 個(gè)人網(wǎng)站制作 261
任務(wù)3 音樂網(wǎng)站制作 265
任務(wù)4 商業(yè)網(wǎng)站制作 268
任務(wù)5 教育網(wǎng)站制作 272
附錄 習(xí)題答案 276
參考文獻(xiàn) 280

1. HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目化教程 [范佳　胡卓舒　馮迎]
2. 網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)指導(dǎo) [主編　鄧文鋒 利珊]
3. 網(wǎng)頁設(shè)計(jì)與制作 [主編　溫凱峰 葉仕通]
4. 基于.NET Core框架的分布式系統(tǒng)架構(gòu)設(shè)計(jì) [湯佳 著]
5. 網(wǎng)頁設(shè)計(jì)與制作 [主編 王瀟 章明珠]
6. Web用戶界面設(shè)計(jì)與制作 [主編 趙娟]
7. 網(wǎng)頁設(shè)計(jì)與制作 [主編 李佼輝 聶樹成]
8. ASP.NET（C#）網(wǎng)站開發(fā)（第二版） [主編 張志明 王輝]
9. Web開發(fā)實(shí)戰(zhàn) [主編　肖睿　陳永]
10. Bootstrap與jQuery UI框架設(shè)計(jì) [主編 肖睿 吳振宇]
11. 網(wǎng)頁設(shè)計(jì)與制作 [主編 楊毅]
12. 網(wǎng)頁制作實(shí)戰(zhàn) [主編 肖睿 羅保山]
13. 網(wǎng)頁設(shè)計(jì)與制作 [主編 陳建國 項(xiàng)煒]
14. 16課學(xué)會(huì)網(wǎng)頁程序設(shè)計(jì)—— HTML5+CSS3+JavaScript+jQuery+ [施威銘研究室 著]
15. HTML5+CSS3前端技術(shù)——UI設(shè)計(jì)師與開發(fā)人員合作秘籍 [北京課工場(chǎng)教育科技有限公司Q]
16. Web程序設(shè)計(jì)實(shí)踐教程 [主編 侯萍 郭俊榮]
17. 網(wǎng)頁設(shè)計(jì)與制作 [孫娜 蒲秋梅 南洋 編著]
18. 玩轉(zhuǎn)Axure RP——Axure RP 7.0高保真網(wǎng)頁、APP原型設(shè)計(jì) [謝星星 編著]
19. ASP.NET Web程序設(shè)計(jì) [吳琴霞 栗青生 康晶 編著]
20. CSS+DIV頁面布局技術(shù) [主編 朱翠苗]
21. 網(wǎng)頁設(shè)計(jì)與制作 [王鐵樁 聶衛(wèi)獻(xiàn)]
22. Web開發(fā)與安全防范 [主編 武春嶺]
23. 網(wǎng)頁設(shè)計(jì)實(shí)訓(xùn)教程 [主編 張春英 李英文 鐘大偉]
24. 網(wǎng)頁設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)教程 [李云程]
25. 網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目化教程 [周觀民 梁雪梅]
26. 網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目案例教程（Dreamweaver CS6） [楊麗芳 劉琳]
27. 腳本語言與動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)（第二版） [主 編 張景峰 王培軍]
28. ASP.NET（C#）網(wǎng)站開發(fā) [主編 張志明 王輝]
29. 網(wǎng)頁設(shè)計(jì)實(shí)用技術(shù) [主 編 陳建國 李勤]
30. 網(wǎng)頁設(shè)計(jì)與制作（第二版） [馬占欣]