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

基礎(chǔ)篇
第1章 輕輕松松網(wǎng)頁(yè)文本2
1.1 個(gè)人簡(jiǎn)歷——網(wǎng)頁(yè)文本排版 2
1.1.1 文本行 2
1.1.2 文本段落4
1.1.3 項(xiàng)目列表5
1.1.4 個(gè)人簡(jiǎn)歷示例 6
1.2 有色有彩——網(wǎng)頁(yè)文本顏色 11
1.2.1 為文本挑選顏色 11
1.2.2 為文本應(yīng)用顏色樣式 12
1.2.3 自定義（顏色）樣式 13
1.3 唐詩(shī)三首——網(wǎng)頁(yè)文本字體 16
1.3.1 編輯字體列表 16
1.3.2 定義文本字體樣式 18
1.3.3 應(yīng)用文本字體樣式 19
1.4 花色文本——網(wǎng)頁(yè)特色文本 20
1.4.1 解決網(wǎng)頁(yè)空格問(wèn)題 21
1.4.2 Dreamweaver 軟件自帶的特殊字符22
1.4.3 輸入法自帶特殊字符 22
1.4.4 特殊字體——特殊字符24
1.5 多彩文案稿——網(wǎng)頁(yè)背景 26
1.5.1 文本的背景顏色 26
1.5.2 文本的背景圖像28
1.6 網(wǎng)頁(yè)字體樣式正常設(shè)置步驟 30
1.6.1 網(wǎng)頁(yè)主體文本的定義 30
1.6.2 網(wǎng)頁(yè)段落文本的定義 32
1.6.3 自定義文本樣式33
第2章 耳目一新的網(wǎng)頁(yè)圖像35
2.1 一張照片——插入圖像35
2.1.1 有關(guān)圖像插入的反面案例35
2.1.2 規(guī)范的圖像插入到網(wǎng)頁(yè)39
2.1.3 縮略圖效果43
2.2 網(wǎng)絡(luò)相冊(cè)——真正的網(wǎng)站相冊(cè)45
2.2.1 創(chuàng)建網(wǎng)站相冊(cè)45
2.2.2 相冊(cè)邊框48
2.3 老母雞變鴨——鼠標(biāo)經(jīng)過(guò)圖像50
2.3.1 鼠標(biāo)經(jīng)過(guò)圖像效果前的準(zhǔn)備工作50
2.3.2 鼠標(biāo)經(jīng)過(guò)圖像的制作52
2.3.3 鼠標(biāo)經(jīng)過(guò)圖像的網(wǎng)頁(yè)應(yīng)用53
2.3.4 網(wǎng)頁(yè)導(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)頁(yè)——背景圖像62
2.5.1 書(shū)本活頁(yè)——縱向重復(fù)的背景圖像63
2.5.2 玻璃瓦屋檐——橫向重復(fù)的背景圖像65
2.5.3 書(shū)頁(yè)卷角——定位的背景圖像68
第3章 表格布局網(wǎng)頁(yè) 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ì)線(xiàn). 陰影表格88
3.4.1 圓角表格88
3.4.2 細(xì)線(xiàn)表格92
3.4.3 陰影漸變表格95
3.5 個(gè)人網(wǎng)頁(yè)——表格布局100
3.5.1 個(gè)人網(wǎng)頁(yè)制作前準(zhǔn)備 100
3.5.2 表格布局網(wǎng)頁(yè) 101
3.5.3 嵌套表格 103
3.5.4 CSS 樣式定義 105
第4章 炫酷的網(wǎng)頁(yè)多媒體109
4.1 我要聽(tīng)歌——插入音頻到網(wǎng)頁(yè) 109
4.1.1 音樂(lè)在線(xiàn)視聽(tīng) 109
4.1.2 網(wǎng)頁(yè)背景音樂(lè)111
4.2 家庭影院——插入視頻到網(wǎng)頁(yè) 112
4.2.1 常見(jiàn)插入視頻方案112
4.2.2 插入視頻代碼方案114
4.2.3 在線(xiàn)影院116
4.3 動(dòng)感網(wǎng)頁(yè)——插入Flash 動(dòng)畫(huà)119
4.3.1 純Flash 網(wǎng)頁(yè)119
4.3.2 插入Flash 按鈕到頁(yè)面 121
4.4 透明Flash——Flash 應(yīng)用 122
4.4.1 透明Flash 的應(yīng)用說(shuō)明 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 頁(yè)內(nèi)鏈接——錨記鏈接 135
5.3.1 命名錨記 135
5.3.2 添加錨記鏈接 136
5.3.3 錨記鏈接的網(wǎng)頁(yè)應(yīng)用 137
5.4 中國(guó)地圖——圖像熱點(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 單個(gè)頁(yè)面的不同鏈接樣式148

提高篇
第6章 “耀眼”的DIV 標(biāo)簽152
6.1 超酷相冊(cè)——顯示/隱藏層152
6.1.1 繪制層. 隱藏層153
6.1.2 顯示/隱藏層154
6.1.3 顯示/隱藏層的應(yīng)用——超酷相冊(cè)157
6.2 在線(xiàn)試衣——拖動(dòng)AP 元素162
6.2.1 拖動(dòng)AP 元素163
6.2.2 在線(xiàn)試衣165
6.3 漂浮廣告——時(shí)間軸動(dòng)畫(huà)168
6.3.1 時(shí)間軸動(dòng)畫(huà)168
6.3.2 動(dòng)感的下拉菜單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)頁(yè)制作——XHTML+CSS185
6.5.1 認(rèn)識(shí)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)頁(yè)模板189
7.1 網(wǎng)頁(yè)模板及可編輯區(qū)域189
7.1.1 新建網(wǎng)頁(yè)模板189
7.1.2 新建可編輯區(qū)域190
7.1.3 應(yīng)用模板到網(wǎng)頁(yè)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 頁(yè)面特效 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è)中應(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章 個(gè)人博客網(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)頁(yè)建立 232
9.2.1 模板文件和CSS 文件的建立 232
9.2.2 設(shè)計(jì)模板布局 235
9.2.3 豐富模板內(nèi)容 237
9.3 CSS 定義模板網(wǎng)頁(yè)布局 245
9.3.1 定義網(wǎng)頁(yè)的主體CSS 樣式 245
9.3.2 定義網(wǎng)頁(yè)的標(biāo)識(shí)區(qū)CSS 樣式 246
9.3.3 定義網(wǎng)頁(yè)的導(dǎo)航區(qū)CSS 樣式 249
9.3.4 定義網(wǎng)頁(yè)的內(nèi)容區(qū)CSS 樣式 253
9.3.5 定義網(wǎng)頁(yè)的底部信息區(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 制作博客首頁(yè)269
9.5.2 制作博客內(nèi)容頁(yè)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)頁(yè)的結(jié)構(gòu)277
10.2.3 在模板頁(yè)插入網(wǎng)頁(yè)內(nèi)容281
10.3 CSS 布局網(wǎng)頁(yè)283
10.3.1 定義網(wǎng)頁(yè)主體CSS 283
10.3.2 定義網(wǎng)頁(yè)標(biāo)識(shí)區(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 清除浮動(dòng)292
10.3.7 定義底部信息的CSS293
10.4 設(shè)置模板可編輯區(qū)域并應(yīng)用模板294
10.4.1 為模板新建可編輯區(qū)域294
10.4.2 應(yīng)用模板制作網(wǎng)頁(yè)295
10.5 完善網(wǎng)站首頁(yè)和內(nèi)容頁(yè)從而完成網(wǎng)站制作296
10.5.1 完善“作品展示”頁(yè)296
10.5.2 完善“關(guān)于我們”頁(yè)300
第11章 房地產(chǎn)類(lèi)網(wǎng)站304
11.1 房地產(chǎn)類(lèi)網(wǎng)站之思考304
11.1.1 了解房地產(chǎn)類(lèi)網(wǎng)站304
11.1.2 建立Dreamweaver 站點(diǎn)305
11.2 建立房地產(chǎn)類(lèi)網(wǎng)站模板306
11.2.1 建立網(wǎng)站模板和CSS 文件306
11.2.2 設(shè)計(jì)網(wǎng)站模板文件的頁(yè)面結(jié)構(gòu)308
11.2.3 繼續(xù)豐富網(wǎng)站模板結(jié)構(gòu)312
11.3 CSS 定義網(wǎng)頁(yè)布局 314
11.3.1 定義網(wǎng)頁(yè)主體的CSS 314
11.3.2 定義頂部信息的CSS 315
11.3.3 定義頁(yè)面內(nèi)容區(qū)的CSS 316
11.3.4 定義側(cè)欄區(qū)的CSS 317
11.3.5 定義主要內(nèi)容區(qū)的CSS 319
11.3.6 清除浮動(dòng) 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)頁(yè) 325
第12章 游戲類(lèi)網(wǎng)站330
12.1 游戲類(lèi)網(wǎng)站之思考 330
12.1.1 游戲類(lèi)網(wǎng)站準(zhǔn)備 330
12.1.2 建立Dreamweaver 站點(diǎn) 331
12.2 設(shè)計(jì)網(wǎng)站模板頁(yè)面 332
12.2.1 新建模板文件和CSS 文件 332
12.2.2 設(shè)計(jì)模板頁(yè)面結(jié)構(gòu) 334
12.2.3 豐富模板頁(yè)面內(nèi)容 337
12.3 定義CSS 布局 339
12.3.1 定義網(wǎng)頁(yè)主體的CSS 339
12.3.2 定義網(wǎng)頁(yè)頭部的CSS 布局 340
12.3.3 定義網(wǎng)頁(yè)主要內(nèi)容區(qū)的CSS 布局342
12.3.4 定義網(wǎng)頁(yè)底部信息區(qū)的CSS 布局345
12.3.5 定義廣告條區(qū)的CSS 布局 346
12.3.6 定義主要內(nèi)容區(qū)的CSS 布局 348
12.3.7 清除浮動(dòng) 349
12.4 定義模板可編輯區(qū)域和應(yīng)用模板 350
12.4.1 定義模板的可編輯區(qū)域 350
12.4.2 應(yīng)用模板到頁(yè) 351
12.4.3 設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容 352
12.4.4 定義網(wǎng)頁(yè)內(nèi)容CSS 布局 353
第13章 企業(yè)類(lèi)網(wǎng)站360
13.1 企業(yè)類(lèi)網(wǎng)站之思考 360
13.1.1 了解企業(yè)類(lèi)網(wǎng)站 360
13.1.2 建立Dreamweaver 站點(diǎn) 360
13.2 網(wǎng)站模板建設(shè) 361
13.2.1 建立模板網(wǎng)頁(yè)和CSS 文件 361
13.3.2 定義網(wǎng)頁(yè)“頂部信息區(qū)”的CSS 373
13.2.3 豐富網(wǎng)頁(yè)模板結(jié)構(gòu)368
13.3 CSS 定義網(wǎng)頁(yè)布局371
13.3.1 定義網(wǎng)頁(yè)主體CSS 371
13.3.2 定義網(wǎng)頁(yè)“頂部信息區(qū)”的CSS 373
13.3.3 定義網(wǎng)頁(yè)“導(dǎo)航區(qū)”的CSS 378
13.3.4 定義網(wǎng)頁(yè)“內(nèi)容區(qū)”的CSS 382
13.3.5 定義網(wǎng)頁(yè)“側(cè)欄區(qū)”的CSS 386
13.3.6 定義網(wǎng)頁(yè)“底部信息區(qū)”的CSS 394
13.4 應(yīng)用模板制作網(wǎng)站內(nèi)頁(yè)395
13.4.1 定義模板的可編輯區(qū)域395
13.4.2 應(yīng)用網(wǎng)頁(yè)模板396
13.5 應(yīng)用模板制作網(wǎng)站首頁(yè)403
13.5.1 應(yīng)用模板. 分離模板403
13.5.2 設(shè)計(jì)首頁(yè)內(nèi)容結(jié)構(gòu)404
13.5.3 CSS 定義樣式409
第14章 門(mén)戶(hù)類(lèi)網(wǎng)站416
14.1 門(mén)戶(hù)類(lèi)網(wǎng)站之準(zhǔn)備416
14.1.1 了解門(mén)戶(hù)類(lèi)網(wǎng)站416
14.1.2 建立Dreamweaver 站點(diǎn)417
14.2 網(wǎng)站模板建設(shè)418
14.2.1 建立模板網(wǎng)頁(yè)和CSS 文件418
14.2.2 設(shè)計(jì)網(wǎng)頁(yè)模板結(jié)構(gòu)420
14.2.3 豐富網(wǎng)頁(yè)模板結(jié)構(gòu)422
14.3 CSS 定義網(wǎng)頁(yè)布局425
14.3.1 定義網(wǎng)頁(yè)主體CSS425
14.3.2 定義網(wǎng)頁(yè)頭部區(qū)CSS 427
14.3.3 定義網(wǎng)頁(yè)搜索區(qū)CSS 434
14.3.4 定義網(wǎng)頁(yè)底部信息區(qū)CSS 437
14.4 定義和應(yīng)用網(wǎng)頁(yè)模板440
14.4.1 新建網(wǎng)頁(yè)可編輯區(qū)域440
14.4.2 應(yīng)用網(wǎng)頁(yè)模板440
14.5 建設(shè)網(wǎng)站首頁(yè)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)頁(yè)廣告欄區(qū)域467