Dreamweaver CS3網(wǎng)站制作炫例精講

基礎(chǔ)篇
第1章 輕輕松松網(wǎng)頁文本2
1.1 個人簡歷——網(wǎng)頁文本排版 2
1.1.1 文本行 2
1.1.2 文本段落4
1.1.3 項(xiàng)目列表5
1.1.4 個人簡歷示例 6
1.2 有色有彩——網(wǎng)頁文本顏色 11
1.2.1 為文本挑選顏色 11
1.2.2 為文本應(yīng)用顏色樣式 12
1.2.3 自定義（顏色）樣式 13
1.3 唐詩三首——網(wǎng)頁文本字體 16
1.3.1 編輯字體列表 16
1.3.2 定義文本字體樣式 18
1.3.3 應(yīng)用文本字體樣式 19
1.4 花色文本——網(wǎng)頁特色文本 20
1.4.1 解決網(wǎng)頁空格問題 21
1.4.2 Dreamweaver 軟件自帶的特殊字符22
1.4.3 輸入法自帶特殊字符 22
1.4.4 特殊字體——特殊字符24
1.5 多彩文案稿——網(wǎng)頁背景 26
1.5.1 文本的背景顏色 26
1.5.2 文本的背景圖像28
1.6 網(wǎng)頁字體樣式正常設(shè)置步驟 30
1.6.1 網(wǎng)頁主體文本的定義 30
1.6.2 網(wǎng)頁段落文本的定義 32
1.6.3 自定義文本樣式33
第2章 耳目一新的網(wǎng)頁圖像35
2.1 一張照片——插入圖像35
2.1.1 有關(guān)圖像插入的反面案例35
2.1.2 規(guī)范的圖像插入到網(wǎng)頁39
2.1.3 縮略圖效果43
2.2 網(wǎng)絡(luò)相冊——真正的網(wǎng)站相冊45
2.2.1 創(chuàng)建網(wǎng)站相冊45
2.2.2 相冊邊框48
2.3 老母雞變鴨——鼠標(biāo)經(jīng)過圖像50
2.3.1 鼠標(biāo)經(jīng)過圖像效果前的準(zhǔn)備工作50
2.3.2 鼠標(biāo)經(jīng)過圖像的制作52
2.3.3 鼠標(biāo)經(jīng)過圖像的網(wǎng)頁應(yīng)用53
2.3.4 網(wǎng)頁導(dǎo)航條55
2.4 領(lǐng)導(dǎo)致辭——圖文混排57
2.4.1 常規(guī)的圖文混排57
2.4.2 CSS 設(shè)置的圖文混排60
2.5 立體感的網(wǎng)頁——背景圖像62
2.5.1 書本活頁——縱向重復(fù)的背景圖像63
2.5.2 玻璃瓦屋檐——橫向重復(fù)的背景圖像65
2.5.3 書頁卷角——定位的背景圖像68
第3章 表格布局網(wǎng)頁 71
3.1 課程表——表格基礎(chǔ)71
3.1.1 建立Dreamweaver 站點(diǎn)71
3.1.2 插入表格73
3.1.3 合并單元格74
3.1.4 表格屬性76
3.2 色卡填充——表格背景80
3.2.1 設(shè)置背景顏色80
3.2.2 CSS 定義背景顏色82
3.3 六神合體——插入切片圖像84
3.3.1 獲得切片圖像85
3.3.2 插入表格86
3.3.3 插入切片圖像87
3.4 表格大演習(xí)——圓角. 細(xì)線. 陰影表格88
3.4.1 圓角表格88
3.4.2 細(xì)線表格92
3.4.3 陰影漸變表格95
3.5 個人網(wǎng)頁——表格布局100
3.5.1 個人網(wǎng)頁制作前準(zhǔn)備 100
3.5.2 表格布局網(wǎng)頁 101
3.5.3 嵌套表格 103
3.5.4 CSS 樣式定義 105
第4章 炫酷的網(wǎng)頁多媒體109
4.1 我要聽歌——插入音頻到網(wǎng)頁 109
4.1.1 音樂在線視聽 109
4.1.2 網(wǎng)頁背景音樂111
4.2 家庭影院——插入視頻到網(wǎng)頁 112
4.2.1 常見插入視頻方案112
4.2.2 插入視頻代碼方案114
4.2.3 在線影院116
4.3 動感網(wǎng)頁——插入Flash 動畫119
4.3.1 純Flash 網(wǎng)頁119
4.3.2 插入Flash 按鈕到頁面 121
4.4 透明Flash——Flash 應(yīng)用 122
4.4.1 透明Flash 的應(yīng)用說明 122
4.5 FLV 視頻站——Flash 視頻 126
4.5.1 Flash 視頻基礎(chǔ) 126
4.5.2 插入Flash 視頻 127
第5章 超能的超鏈接129
5.1 網(wǎng)址大全——外部鏈接 129
5.1.1 文本鏈接 129
5.1.2 圖像鏈接 130
5.1.3 其他形式的鏈接 132
5.2 我的網(wǎng)站——內(nèi)部鏈接 133
5.2.1 站內(nèi)鏈接方法一 133
5.2.2 站內(nèi)鏈接方法二 134
5.2.3 站內(nèi)鏈接更新 134
5.3 頁內(nèi)鏈接——錨記鏈接 135
5.3.1 命名錨記 135
5.3.2 添加錨記鏈接 136
5.3.3 錨記鏈接的網(wǎng)頁應(yīng)用 137
5.4 中國地圖——圖像熱點(diǎn)鏈接 140
5.4.1 圖像熱點(diǎn)鏈接的制作 140
5.4.2 圖像熱點(diǎn)鏈接的應(yīng)用 142
5.5 鏈接也精彩——鏈接的CSS 樣式 144
5.5.1 文本鏈接的樣式145
5.5.2 單個頁面的不同鏈接樣式148

提高篇
第6章 “耀眼”的DIV 標(biāo)簽152
6.1 超酷相冊——顯示/隱藏層152
6.1.1 繪制層. 隱藏層153
6.1.2 顯示/隱藏層154
6.1.3 顯示/隱藏層的應(yīng)用——超酷相冊157
6.2 在線試衣——拖動AP 元素162
6.2.1 拖動AP 元素163
6.2.2 在線試衣165
6.3 漂浮廣告——時間軸動畫168
6.3.1 時間軸動畫168
6.3.2 動感的下拉菜單171
6.4 CSS 布局——DIV 標(biāo)簽的應(yīng)用175
6.4.1 一列固定居中顯示176
6.4.2 兩列固定并排顯示178
6.4.3 兩列并排居中顯示181
6.5 Web 標(biāo)準(zhǔn)網(wǎng)頁制作——XHTML+CSS185
6.5.1 認(rèn)識Web 標(biāo)準(zhǔn)185
6.5.2 Web 標(biāo)準(zhǔn)的實(shí)現(xiàn)185
6.5.3 Web 標(biāo)準(zhǔn)的布局標(biāo)簽186
6.5.4 文本列表布局示例187
第7章 網(wǎng)頁模板189
7.1 網(wǎng)頁模板及可編輯區(qū)域189
7.1.1 新建網(wǎng)頁模板189
7.1.2 新建可編輯區(qū)域190
7.1.3 應(yīng)用模板到網(wǎng)頁191
7.2 重復(fù)區(qū)域192
7.3 應(yīng)用模板后的操作196
7.3.1 更新模板文件196
7.3.2 從模板中分離197
第8章 Ajax 框架Spry198
8.1 Spry 頁面特效 198
8.1.1 Spry 菜單欄 198
8.1.2 Spry 選項(xiàng)卡式面板 201
8.1.3 Spry 折疊式 202
8.1.4 Spry 可折疊面板 204
8.2 Spry 驗(yàn)證表單 205
8.2.1 在網(wǎng)頁中應(yīng)用表單.. 205
8.2.2 Spry 驗(yàn)證文本域211
8.2.3 Spry 驗(yàn)證選擇 214
8.2.4 Spry 驗(yàn)證復(fù)選框 215
8.2.5 Spry 驗(yàn)證文本區(qū)域 216
8.3 Spry XML 數(shù)據(jù)操作 217
8.3.1 Spry XML 數(shù)據(jù)集 218
8.3.2 Spry 區(qū)域 219
8.3.3 Spry 重復(fù)項(xiàng) 220
8.3.4 Spry 重復(fù)列表 222
8.3.5 Spry 表 223
8.3.6 Spry 遠(yuǎn)程XML 數(shù)據(jù)應(yīng)用 226

綜合篇
第9章 個人博客網(wǎng)站230
9.1 博客網(wǎng)站的策劃準(zhǔn)備 230
9.1.1 了解博客網(wǎng)站的概況 230
9.1.2 建立Dreamweaver 站點(diǎn) 231
9.2 博客網(wǎng)站模板網(wǎng)頁建立 232
9.2.1 模板文件和CSS 文件的建立 232
9.2.2 設(shè)計(jì)模板布局 235
9.2.3 豐富模板內(nèi)容 237
9.3 CSS 定義模板網(wǎng)頁布局 245
9.3.1 定義網(wǎng)頁的主體CSS 樣式 245
9.3.2 定義網(wǎng)頁的標(biāo)識區(qū)CSS 樣式 246
9.3.3 定義網(wǎng)頁的導(dǎo)航區(qū)CSS 樣式 249
9.3.4 定義網(wǎng)頁的內(nèi)容區(qū)CSS 樣式 253
9.3.5 定義網(wǎng)頁的底部信息區(qū)CSS 樣式263
9.3.6 增加廣告條并定義CSS264
9.4 定義模板的可編輯區(qū)域和重復(fù)區(qū)域266
9.4.1 定義可編輯區(qū)域266
9.4.2 定義重復(fù)區(qū)域267
9.5 應(yīng)用模板完成博客網(wǎng)站269
9.5.1 制作博客首頁269
9.5.2 制作博客內(nèi)容頁270
9.5.3 添加鏈接完成博客網(wǎng)站270
第10章 婚紗攝影網(wǎng)站272
10.1 婚紗攝影網(wǎng)站之思考272
10.1.1 如何設(shè)計(jì)婚紗攝影網(wǎng)站272
10.1.2 建立Dreamweaver 站點(diǎn)273
10.2 建立網(wǎng)站模板274
10.2.1 建立模板文件和CSS 文件275
10.2.2 設(shè)計(jì)模板網(wǎng)頁的結(jié)構(gòu)277
10.2.3 在模板頁插入網(wǎng)頁內(nèi)容281
10.3 CSS 布局網(wǎng)頁283
10.3.1 定義網(wǎng)頁主體CSS 283
10.3.2 定義網(wǎng)頁標(biāo)識區(qū)CSS 284
10.3.3 定義廣告條區(qū)CSS 285
10.3.4 定義側(cè)欄CSS 287
10.3.5 定義主要內(nèi)容區(qū)域的CSS 288
10.3.6 清除浮動292
10.3.7 定義底部信息的CSS293
10.4 設(shè)置模板可編輯區(qū)域并應(yīng)用模板294
10.4.1 為模板新建可編輯區(qū)域294
10.4.2 應(yīng)用模板制作網(wǎng)頁295
10.5 完善網(wǎng)站首頁和內(nèi)容頁從而完成網(wǎng)站制作296
10.5.1 完善“作品展示”頁296
10.5.2 完善“關(guān)于我們”頁300
第11章 房地產(chǎn)類網(wǎng)站304
11.1 房地產(chǎn)類網(wǎng)站之思考304
11.1.1 了解房地產(chǎn)類網(wǎng)站304
11.1.2 建立Dreamweaver 站點(diǎn)305
11.2 建立房地產(chǎn)類網(wǎng)站模板306
11.2.1 建立網(wǎng)站模板和CSS 文件306
11.2.2 設(shè)計(jì)網(wǎng)站模板文件的頁面結(jié)構(gòu)308
11.2.3 繼續(xù)豐富網(wǎng)站模板結(jié)構(gòu)312
11.3 CSS 定義網(wǎng)頁布局 314
11.3.1 定義網(wǎng)頁主體的CSS 314
11.3.2 定義頂部信息的CSS 315
11.3.3 定義頁面內(nèi)容區(qū)的CSS 316
11.3.4 定義側(cè)欄區(qū)的CSS 317
11.3.5 定義主要內(nèi)容區(qū)的CSS 319
11.3.6 清除浮動 322
11.3.7 定義底部信息區(qū)的CSS 323
11.4 定義模板可編輯區(qū)域并應(yīng)用模板 324
11.4.1 定義模板的可編輯區(qū)域 324
11.4.2 應(yīng)用模板完成站點(diǎn)內(nèi)頁 325
第12章 游戲類網(wǎng)站330
12.1 游戲類網(wǎng)站之思考 330
12.1.1 游戲類網(wǎng)站準(zhǔn)備 330
12.1.2 建立Dreamweaver 站點(diǎn) 331
12.2 設(shè)計(jì)網(wǎng)站模板頁面 332
12.2.1 新建模板文件和CSS 文件 332
12.2.2 設(shè)計(jì)模板頁面結(jié)構(gòu) 334
12.2.3 豐富模板頁面內(nèi)容 337
12.3 定義CSS 布局 339
12.3.1 定義網(wǎng)頁主體的CSS 339
12.3.2 定義網(wǎng)頁頭部的CSS 布局 340
12.3.3 定義網(wǎng)頁主要內(nèi)容區(qū)的CSS 布局342
12.3.4 定義網(wǎng)頁底部信息區(qū)的CSS 布局345
12.3.5 定義廣告條區(qū)的CSS 布局 346
12.3.6 定義主要內(nèi)容區(qū)的CSS 布局 348
12.3.7 清除浮動 349
12.4 定義模板可編輯區(qū)域和應(yīng)用模板 350
12.4.1 定義模板的可編輯區(qū)域 350
12.4.2 應(yīng)用模板到頁 351
12.4.3 設(shè)計(jì)網(wǎng)頁內(nèi)容 352
12.4.4 定義網(wǎng)頁內(nèi)容CSS 布局 353
第13章 企業(yè)類網(wǎng)站360
13.1 企業(yè)類網(wǎng)站之思考 360
13.1.1 了解企業(yè)類網(wǎng)站 360
13.1.2 建立Dreamweaver 站點(diǎn) 360
13.2 網(wǎng)站模板建設(shè) 361
13.2.1 建立模板網(wǎng)頁和CSS 文件 361
13.3.2 定義網(wǎng)頁“頂部信息區(qū)”的CSS 373
13.2.3 豐富網(wǎng)頁模板結(jié)構(gòu)368
13.3 CSS 定義網(wǎng)頁布局371
13.3.1 定義網(wǎng)頁主體CSS 371
13.3.2 定義網(wǎng)頁“頂部信息區(qū)”的CSS 373
13.3.3 定義網(wǎng)頁“導(dǎo)航區(qū)”的CSS 378
13.3.4 定義網(wǎng)頁“內(nèi)容區(qū)”的CSS 382
13.3.5 定義網(wǎng)頁“側(cè)欄區(qū)”的CSS 386
13.3.6 定義網(wǎng)頁“底部信息區(qū)”的CSS 394
13.4 應(yīng)用模板制作網(wǎng)站內(nèi)頁395
13.4.1 定義模板的可編輯區(qū)域395
13.4.2 應(yīng)用網(wǎng)頁模板396
13.5 應(yīng)用模板制作網(wǎng)站首頁403
13.5.1 應(yīng)用模板. 分離模板403
13.5.2 設(shè)計(jì)首頁內(nèi)容結(jié)構(gòu)404
13.5.3 CSS 定義樣式409
第14章 門戶類網(wǎng)站416
14.1 門戶類網(wǎng)站之準(zhǔn)備416
14.1.1 了解門戶類網(wǎng)站416
14.1.2 建立Dreamweaver 站點(diǎn)417
14.2 網(wǎng)站模板建設(shè)418
14.2.1 建立模板網(wǎng)頁和CSS 文件418
14.2.2 設(shè)計(jì)網(wǎng)頁模板結(jié)構(gòu)420
14.2.3 豐富網(wǎng)頁模板結(jié)構(gòu)422
14.3 CSS 定義網(wǎng)頁布局425
14.3.1 定義網(wǎng)頁主體CSS425
14.3.2 定義網(wǎng)頁頭部區(qū)CSS 427
14.3.3 定義網(wǎng)頁搜索區(qū)CSS 434
14.3.4 定義網(wǎng)頁底部信息區(qū)CSS 437
14.4 定義和應(yīng)用網(wǎng)頁模板440
14.4.1 新建網(wǎng)頁可編輯區(qū)域440
14.4.2 應(yīng)用網(wǎng)頁模板440
14.5 建設(shè)網(wǎng)站首頁441
14.5.1 創(chuàng)建網(wǎng)站內(nèi)容區(qū)域441
14.5.2 建設(shè)網(wǎng)站側(cè)欄結(jié)構(gòu)446
14.5.3 建設(shè)網(wǎng)站主要內(nèi)容欄457
14.5.4 建設(shè)網(wǎng)頁廣告欄區(qū)域467