網(wǎng)頁設計與制作基礎培訓教程

第1章 網(wǎng)頁制作基礎 1
1-1 教學目標與重點 1
1-2 課堂講解：網(wǎng)站和網(wǎng)頁 1
1-2-1 網(wǎng)站 1
1-2-2 網(wǎng)頁 1
1-3 課堂講解：超文本
標記語言HTML 2
1-3-1 一個簡單的HTML
文件 2
1-3-2 編寫HTML文件 3
1-3-3 用IE打開HTML
文件 3
1-4 課堂講解：制作網(wǎng)站的
方法和步驟 3
1-4-1 創(chuàng)建一個網(wǎng)頁 3
1-4-2 制作網(wǎng)站的步驟 4
1-5 課堂講解：網(wǎng)頁制作工具 5
1-6 上機指導 6
1-6-1 瀏覽網(wǎng)頁 6
1-6-2 網(wǎng)頁制作工具的安裝 6
1-7 課后練習 8
第2章 HTML基本語法 10
2-1 教學目標與重點 10
2-2 課堂講解：標簽與標題 10
2-2-1 使用標簽 10
2-2-2 使用標題 11
2-3 課堂講解：設置頁面格式 12
2-3-1 設置字體 12
2-3-2 設置段落標記 13
2-4 課堂講解：超鏈接與列表 14
2-4-1 添加超鏈接 14
2-4-2 使用有序列表 15
2-4-3 使用無序列表 16
2-4-4 定義列表 17
2-5 上機指導 18
2-5-1 編寫第一個HTML
頁面 18
2-5-2 為網(wǎng)頁添加
Copyright 19
2-6 課后練習 20
第3章 HTML高級應用 21
3-1 教學目標與重點 21
3-2 課堂講解：圖像與表格 21
3-2-1 插入圖像 21
3-2-2 創(chuàng)建表格 23
3-2-3 給表格添加標題 24
3-3 課堂講解：框架與多媒體 25
3-3-1 創(chuàng)建框架結構 25
3-3-2 播放音頻/視頻文件 26
3-4 課堂講解：表單處理 27
3-4-1 使用表單 27
3-4-2 表單實例 28
3-5 上機指導 29
3-5-1 為網(wǎng)頁添加視頻 29
3-5-2 提交表單 30
3-6 課后練習 32
第4章 Dreamweaver MX簡介 34
4-1 教學目標與重點 34
4-2 課堂講解：工作環(huán)境介紹 34
4-2-1 啟動Dreamweaver
MX 34
4-2-2 Dreamweaver MX的
新增功能 35
4-2-3 Dreamweaver MX
工作界面 36
4-3 課堂講解：參數(shù)設置 40
4-3-1 設置常規(guī)參數(shù) 40
4-3-2 設置字體參數(shù) 42
4-4 上機指導 43
4-4-1 創(chuàng)建本地站點 43
4-4-2 設置頁面屬性 45
4-5 課后練習 46
第5章 文本與圖像的編輯 47
5-1 教學目標與重點 47
5-2 課堂講解：文本的輸入 47
5-2-1 設置文本屬性 47
5-2-2 插入特殊字符 48
5-2-3 插入日期顯示 49
5-3 課堂講解：使用HTML
樣式格式化文本 49
5-3-1 創(chuàng)建HTML樣式 50
5-3-2 應用HTML樣式
格式化文本 51
5-4 課堂講解：編輯圖像 52
5-4-1 插入圖像 52
5-4-2 圖像屬性設置 53
5-4-3 創(chuàng)建翻轉圖像 54
5-4-4 建立圖像地圖 55
5-4-5 創(chuàng)建網(wǎng)站相冊 56
5-5 上機指導 57
5-5-1 創(chuàng)建簡單的
個人主頁 57
5-5-2 制作個人相冊 58
5-6 課后練習 58
第6章 使用表格與框架 59
6-1 教學目標與重點 59
6-2 課堂講解：運用表格 59
6-2-1 創(chuàng)建表格 59
6-2-2 設置表格屬性 60
6-2-3 導入表格數(shù)據(jù) 61
6-2-4 導出表格數(shù)據(jù) 61
6-3 課堂講解：分層和定位 62
6-3-1 層的概念 62
6-3-2 設置層的屬性 62
6-3-3 層的基本操作 64
6-3-4 層與表格的
相互轉換 65
6-4 課堂講解：使用框架 66
6-4-1 創(chuàng)建框架 67
6-4-2 設置框架頁面的
背景 67
6-4-3 刪除框架 68
6-4-4 設置框架和
框架集屬性 68
6-5 上機指導 69
6-5-1 表格頁面的創(chuàng)建 69
6-5-2 制作下拉菜單 70
6-5-3 制作框架網(wǎng)頁 72
6-6 課后練習 74
第7章 超鏈接與導航條 75
7-1 教學目標與重點 75
7-2 課堂講解：使用超鏈接 75
7-2-1 創(chuàng)建鏈接 75
7-2-2 創(chuàng)建郵件鏈接 76
7-2-3 鏈接到命名錨記 77
7-2-4 利用站點地圖
管理超鏈接 78
7-3 課堂講解：導航條的制作 80
7-3-1 創(chuàng)建導航條 80
7-3-2 編輯導航條 81
7-4 上機指導 82
7-4-1 為網(wǎng)頁添加超鏈接 82
7-4-2 創(chuàng)建指向E-mail地址
的鏈接 83
7-4-3 創(chuàng)建導航條 83
7-5 課后練習 84
第8章 Dreamweaver 高級技巧 85
8-1 教學目標與重點 85
8-2 課堂講解：使用CSS樣式 85
8-2-1 創(chuàng)建CSS樣式 85
8-2-2 鏈接外部CSS
樣式表 87
8-2-3 使用CSS選擇器 88
8-3 課堂講解：行為與表單 89
8-3-1 行為與時間軸 89
8-3-2 使用表單 90
8-4 課堂講解：模板的使用 91
8-4-1 創(chuàng)建模板 91
8-4-2 管理模板 92
8-4-3 應用模板 93
8-5 上機指導 93
8-5-1 用CSS樣式控制
頁面外觀 94
8-5-2 創(chuàng)建時間軸動畫 95
8-6 課后練習 96
第9章 使用Fireworks MX 97
9-1 教學目標與重點 97
9-2 課堂講解：工作環(huán)境介紹 97
9-2-1 新增功能 97
9-2-2 工作界面簡介 99
9-3 課堂講解：文檔基本操作 101
9-3-1 新建一個文檔 101
9-3-2 導入圖像 102
9-3-3 控制文檔的
顯示比例 102
9-4 課堂講解：圖像的
基本操作 103
9-4-1 打開文件 103
9-4-2 編輯圖像 104
9-4-3 圖像的合成 106
9-5 課堂講解：編輯文本 107
9-5-1 創(chuàng)建文本 107
9-5-2 編輯文本 107
9-6 上機指導 108
9-6-1 制作公司圖標 108
9-6-2 浮雕效果的文本 109
9-7 課后練習 109
第10章 顏色和透明度的應用 111
10-1 教學目標與重點 111
10-2 課堂講解：Web中的
顏色處理 111
10-2-1 十六進制顏色 111
10-2-2 顏色選擇板 112
10-2-3 選取顏色 112
10-2-4 創(chuàng)建新顏色 115
10-3 課堂講解：使用透明色 115
10-3-1 設置透明度 115
10-3-2 圖像的反鋸齒
顯示 115
10-3-3 去掉Web圖像的
光暈 116
10-3-4 填充紋理特效 117
10-4 上機指導 119
10-4-1 制作背景圖片 119
10-4-2 虛線線框效果 120
10-5 課后練習 121
第11章 動畫、熱區(qū)和切片 122
11-1 教學目標與重點 122
11-2 課堂講解：創(chuàng)建動畫 122
11-2-1 制作逐幀動畫 122
11-2-2 制作漸變動畫 123
11-2-3 設置動畫的
播放次數(shù) 123
11-2-4 設置幀的
延遲時間 124
11-2-5 導出GIF動畫 124
11-3 課堂講解：創(chuàng)建熱區(qū) 125
11-3-1 創(chuàng)建熱區(qū) 125
11-3-2 顯示/隱藏熱區(qū) 126
11-3-3 熱區(qū)操作 127
11-3-4 設置熱區(qū)的屬性 127
11-3-5 導出含有熱區(qū)的
圖像 128
11-4 課堂講解：切片 128
11-4-1 創(chuàng)建切片 128
11-4-2 顯示/隱藏切片 130
11-4-3 設置切片的屬性 130
11-4-4 導出切片 131
11-5 上機指導 133
11-5-1 利用元件制作
動畫 133
11-5-2 創(chuàng)建文本切片 134
11-6 課后練習 135
第12章 Fireworks高級技巧 136
12-1 教學目標與重點 136
12-2 課堂講解：創(chuàng)建按鈕和
導航條 136
12-2-1 創(chuàng)建和編輯按鈕 136
12-2-2 創(chuàng)建導航條 137
12-3 課堂講解：圖像的優(yōu)化 138
12-3-1 預覽優(yōu)化設置 138
12-3-2 使用濾鏡 140
12-3-3 使用蒙版 140
12-4 課堂講解：導出圖像 141
12-4-1 設置導出參數(shù) 141
12-4-2 導出圖像 142
12-5 上機指導 144
12-5-1 按鈕和導航條的
制作 144
12-5-2 圖像的優(yōu)化 144
12-5-3 導出圖像 145
12-6 課后練習 147
第13章 Flash MX入門 148
13-1 教學目標與重點 148
13-2 課堂講解：初識
Flash MX 148
13-2-1 Flash MX的
新增功能 148
13-2-2 Flash MX工作
界面 149
13-2-3 使用Flash MX
幫助 151
13-2-4 使用工具箱 152
13-3 課堂講解：文本操作 152
13-3-1 創(chuàng)建文本 153
13-3-2 設置文本屬性 153
13-3-3 轉換類型與
變換文字 155
13-4 上機指導 155
13-4-1 文字特效 155
13-4-2 文本轉換為圖形 157
13-5 課后練習 158
第14章 Flash MX基本操作 159
14-1 教學目標與重點 159
14-2 課堂講解：創(chuàng)建自己的
Flash 159
14-2-1 創(chuàng)建新文檔 159
14-2-2 設置場景 160
14-2-3 測試影片 160
14-2-4 保存文件 161
14-3 課堂講解：編輯圖形 161
14-3-1 繪制矢量圖 161
14-3-2 使用畫筆工具 163
14-3-3 調(diào)整圖形形狀 164
14-3-4 使用顏料桶工具 164
14-3-5 巧用套索工具 165
14-4 課堂講解：編輯對象 166
14-4-1 選取對象 166
14-4-2 移動對象 167
14-4-3 刪除和復制對象 167
14-4-4 圖像變形 167
14-5 上機指導 168
14-5-1 線性漸變填充
圖形 168
14-5-2 繪制圓角矩形 169
14-6 課后練習 170
第15章 使用元件和圖庫 171
15-1 教學目標與重點 171
15-2 課堂講解：編輯元件 171
15-2-1 認識元件 171
15-2-2 創(chuàng)建元件 172
15-2-3 編輯元件 174
15-3 課堂講解：使用圖庫 175
15-3-1 使用【庫】面板 175
15-3-2 使用公共庫 176
15-4 上機指導 177
15-4-1 創(chuàng)建按鈕元件 177
15-4-2 圖像轉化為元件 178
15-4-3 使用【庫】面板
管理元件 179
15-5 課后練習 180
第16章 創(chuàng)建動畫 181
16-1 教學目標與重點 181
16-2 課堂講解：Flash
動畫概述 181
16-2-1 時間軸和幀 181
16-2-2 使用關鍵幀 182
16-3 課堂講解：創(chuàng)建動畫 183
16-3-1 創(chuàng)建“補間”
動畫 183
16-3-2 創(chuàng)建“幀-幀”
動畫 184
16-4 課堂講解：編輯動畫 185
16-4-1 清除、移動與
復制幀 185
16-4-2 設置幀頻 185
16-5 課堂講解：使用圖層 185
16-5-1 層的概念 185
16-5-2 創(chuàng)建和編輯圖層 186
16-5-3 圖層的狀態(tài) 186
16-5-4 引導圖層 188
16-5-5 遮罩圖層 188
16-6 上機指導 189
16-6-1 彈跳的小球 189
16-6-2 滾動的小球 190
16-7 課后練習 192
第17章 聲音處理與視頻導入 193
17-1 教學目標與重點 193
17-2 課堂講解：創(chuàng)建有聲影片 193
17-2-1 Flash中使用的
音頻格式 193
17-2-2 導入聲音文件 194
17-2-3 為影片添加聲音 194
17-2-4 編輯聲音 195
17-2-5 利用【屬性】面板
設置音頻 197
17-3 課堂講解：導入視頻文件 198
17-4 上機指導 199
17-4-1 為按鈕元件添加
聲音 199
17-4-2 為影片添加聲音 200
17-5 課后練習 202
第18章 導出與發(fā)布動畫 203
18-1 教學目標與重點 203
18-2 課堂講解：動畫的導出 203
18-2-1 選擇導出類型 203
18-2-2 導出動畫 206
18-3 課堂講解：發(fā)布動畫 207
18-3-1 發(fā)布設置 207
18-3-2 發(fā)布預覽 213
18-4 上機指導 214
18-4-1 導出動畫 214
18-4-2 發(fā)布動畫 214
18-5 課后練習 215
第19章 用多媒體為網(wǎng)頁增添生氣 216
19-1 教學目標與重點 216
19-2 課堂講解：添加圖片 216
19-2-1 插入圖片 216
19-2-2 設置圖片屬性 217
19-3 課堂講解：添加聲音和
Flash對象 218
19-3-1 插入聲音 218
19-3-2 使用Flash對象 219
19-3-3 插入Shockwave
電影 221
19-4 上機指導 222
19-4-1 為網(wǎng)頁添加
公司圖標 222
19-4-2 使用Flash對象 223
19-5 課后練習 224
第20章 網(wǎng)頁制作綜合實例 225
20-1 教學目標與重點 225
20-2 課堂講解：用Dreamweaver規(guī)劃站點結構
和主頁布局 225
20-2-1 規(guī)劃站點結構 225
20-2-2 布局頁面 227
20-3 課堂講解：制作主頁 228
20-3-1 利用Fireworks
制作網(wǎng)站標志 228
20-3-2 利用Fireworks制作
導航條 229
20-3-3 利用Fireworks制作
網(wǎng)頁標題動畫 231
20-3-4 利用Flash制作
網(wǎng)頁動畫 233
20-3-5 制作主頁 234
20-4 上機指導 236
20-4-1 站點的規(guī)劃與
布局 236
20-4-2 制作網(wǎng)頁 237
20-5 課后練習 237
第21章 在線發(fā)布網(wǎng)頁 238
21-1 教學目標與重點 238
21-2 課堂講解：發(fā)布網(wǎng)頁 238
21-2-1 關于Web服務器 238
21-2-2 站點維護 239
21-2-3 測試站點性能 240
21-2-4 準備發(fā)布 242
21-2-5 通過因特網(wǎng)來
查看網(wǎng)頁 243
21-3 上機指導 243
21-3-1 發(fā)布網(wǎng)頁 243
21-3-2 通過Internet訪問
自己的網(wǎng)頁 244
21-4 課后練習 244
附錄A 部分課后練習參考答案 245
附錄B 培訓教程配套測試題 249
附錄C 培訓教程配套測試題
參考答案 253