網(wǎng)站設(shè)計(jì)指南：通過(guò)Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS

Part01  網(wǎng)站網(wǎng)頁(yè)概述

第1章  網(wǎng)頁(yè)設(shè)計(jì)初體驗(yàn) 3
1.1  什么是網(wǎng)頁(yè) 3
1.1.1  互聯(lián)網(wǎng) 3
1.1.2  WWW（萬(wàn)維網(wǎng)） 3
1.1.3  什么是網(wǎng)頁(yè) 3
1.2  HTML驚鴻一瞥 4
1.2.1  創(chuàng)建HTML網(wǎng)頁(yè) 4
1.2.2  HTML結(jié)構(gòu) 5
1.3  認(rèn)識(shí)Dreamweaver 6
1.3.1  常用功能 6
1.3.2  操作界面 8
1.4  創(chuàng)建站點(diǎn)與頁(yè)面 12
1.4.1  創(chuàng)建站點(diǎn) 12
1.4.2  創(chuàng)建頁(yè)面 14
1.5  專家總結(jié) 16

Part02  網(wǎng)頁(yè)基礎(chǔ)HTML

第2章  網(wǎng)頁(yè)頭部Head 19
2.1  頭部包括的內(nèi)容 19
2.1.1  網(wǎng)頁(yè)標(biāo)題 19
2.1.2  標(biāo)簽 19
2.1.3  樣式表和腳本 19
2.2  查看頭部 20
視頻路徑：視頻教學(xué)\2-2.exe
教學(xué)時(shí)長(zhǎng)：40秒
2.3  設(shè)置標(biāo)題 20
視頻路徑：視頻教學(xué)\2-3.exe
教學(xué)時(shí)長(zhǎng)：1分02秒
2.4  認(rèn)識(shí)標(biāo)簽 22
視頻路徑：視頻教學(xué)\2-4.exe
教學(xué)時(shí)長(zhǎng)：54秒
2.5  HTTP標(biāo)題信息http-equiv 24
2.5.1  設(shè)置文檔類型與語(yǔ)言屬性
Content-Type 24
2.5.2  設(shè)置自動(dòng)刷新屬性Refresh 25
2.5.3  設(shè)置緩存時(shí)間屬性Expires 25
2.5.4  設(shè)置禁用緩存屬性Pragma 25
2.5.5  設(shè)置網(wǎng)頁(yè)Cookie屬性
Set-Cookie 25
2.5.6  設(shè)置打開(kāi)窗口屬性
Window-target 25
2.5.7  設(shè)置過(guò)渡效果屬性Page-Enter、
Page-Exit 26
2.5.8  設(shè)置主題與腳本類型屬性
MSThemeCompatible、
Content-Script-Type 27
2.6  頁(yè)面描述信息name 27
2.6.1  設(shè)置描述與關(guān)鍵詞屬性
Description 27
2.6.2  設(shè)置搜索機(jī)器人引向?qū)傩?br />Robots 27
2.6.3  設(shè)置作者信息屬性Author 28
2.7  設(shè)置基鏈接屬性base 28
2.8  設(shè)置鏈接文件屬性link 28
2.9  專家總結(jié) 28
第3章  網(wǎng)頁(yè)主體Body 29
3.1  網(wǎng)頁(yè)背景 29
3.1.1  修改背景顏色 29
視頻路徑：視頻教學(xué)\3-1-1.exe
教學(xué)時(shí)長(zhǎng)：34秒
3.1.2  設(shè)置背景圖像 32
視頻路徑：視頻教學(xué)\3-1-2.exe
教學(xué)時(shí)長(zhǎng)：32秒
3.1.3  設(shè)置背景圖片的重復(fù)方式 34
3.2  文字顏色 35
3.2.1  設(shè)置文字默認(rèn)顏色 35
視頻路徑：視頻教學(xué)\3-2-1.exe
教學(xué)時(shí)長(zhǎng)：34秒
3.2.2  更改超鏈接文字顏色 37
3.3  設(shè)置頁(yè)面邊距 39
3.4  專家總結(jié) 40
第4章  網(wǎng)頁(yè)文字Font 41
4.1  文字外觀 41
4.1.1  調(diào)整文字大小 41
視頻路徑：視頻教學(xué)\4-1-1.exe
教學(xué)時(shí)長(zhǎng)：1分02秒
4.1.2  修改文字顏色 43
視頻路徑：視頻教學(xué)\4-1-2.exe
教學(xué)時(shí)長(zhǎng)：1分12秒
4.1.3  設(shè)置文字字體 43
4.1.4  格式化文字 45
4.2  文字排放 46
4.2.1  設(shè)置段落文字 46
視頻路徑：視頻教學(xué)\4-2-1.exe
教學(xué)時(shí)長(zhǎng)：28秒
4.2.2  設(shè)置已編排格式 46
4.2.3  使用塊引用格式 47
4.2.4  設(shè)置標(biāo)題文字 48
4.2.5  設(shè)置文字對(duì)齊 49
4.2.6  使用項(xiàng)目列表 50
4.2.7  使用編號(hào)列表 50
4.2.8  定義列表 51
4.3  字符實(shí)體 52
4.3.1  認(rèn)識(shí)字符實(shí)體 52
4.3.2  換行字符 53
4.4  專家總結(jié) 54
第5章  網(wǎng)頁(yè)圖片Img 55
5.1  圖片格式 55
5.1.1  GIF格式 55
5.1.2  JPG格式 55
5.1.3  PNG格式 55
5.2  插入圖片 56
5.2.1  直接插入圖片 56
視頻路徑：視頻教學(xué)\5-2-1.exe
教學(xué)時(shí)長(zhǎng)：52秒
5.2.2  拖動(dòng)插入圖片 57
5.2.3  揭示圖片源碼 58
5.3  圖片路徑 59
5.3.1  使用絕對(duì)路徑 59
5.3.2  使用相對(duì)路徑 59
5.4  圖片修改 60
5.4.1  修改尺寸 60
視頻路徑：視頻教學(xué)\5-4-1.exe
教學(xué)時(shí)長(zhǎng)：56秒
5.4.2  修改對(duì)齊方式 62
5.4.3  設(shè)置圖片邊框 64
視頻路徑：視頻教學(xué)\5-4-3.exe
教學(xué)時(shí)長(zhǎng)：1分06秒
5.5  客戶端圖像映射圖 66
5.5.1  創(chuàng)建熱圖 66
5.5.2  熱圖源碼 67
5.6  圖片邊距 68
5.6.1  設(shè)置圖片邊距 68
5.6.2  圖片邊距源碼 69
5.7  專家總結(jié) 70
第6章  網(wǎng)頁(yè)超鏈接 71
6.1  頁(yè)面超鏈接 71
6.1.1  設(shè)置頁(yè)面間鏈接 71
視頻路徑：視頻教學(xué)\6-1-1.exe
教學(xué)時(shí)長(zhǎng)：1分15秒
6.1.2  設(shè)置頁(yè)面內(nèi)鏈接 72
視頻路徑：視頻教學(xué)\6-1-2.exe
教學(xué)時(shí)長(zhǎng)：3分32秒
6.2  使用郵件鏈接 74
6.3  使用水平線 76
視頻路徑：視頻教學(xué)\6-3.exe
教學(xué)時(shí)長(zhǎng)：46秒
6.4  專家總結(jié) 77
第7章  表格與層 78
7.1  基本操作 78
7.1.1  插入表格 78
視頻路徑：視頻教學(xué)\7-1-1.exe
教學(xué)時(shí)長(zhǎng)：25秒
7.1.2  輸入數(shù)據(jù) 80
7.1.3  調(diào)整表格尺寸 80
視頻路徑：視頻教學(xué)\7-1-3.exe
教學(xué)時(shí)長(zhǎng)：1分13秒
7.1.4  表格對(duì)齊 81
7.2  編輯表格 81
7.2.1  表格標(biāo)題 81
7.2.2  表格列寬與行高 82
7.2.3  添加行或列 83
7.2.4  刪除行或列 85
7.2.5  合并單元格 85
視頻路徑：視頻教學(xué)\7-2-5.exe
教學(xué)時(shí)長(zhǎng)：55秒
7.2.6  拆分單元格 86
7.3  表格外觀 87
7.3.1  設(shè)置邊框粗細(xì) 87
7.3.2  設(shè)置邊框顏色 88
7.3.3  設(shè)置表格間距 89
7.3.4  表格填充 89
7.3.5  設(shè)置單元格對(duì)齊方式 90
7.3.6  設(shè)置表格背景顏色與圖像 91
7.3.7  設(shè)置單元格背景顏色與背景
圖像 92
7.4  div層 93
7.4.1  層基本操作 93
7.4.2  層屬性操作 94
7.4.3  【層】面板 95
7.4.4  層與表格轉(zhuǎn)換 96
7.5  專家總結(jié) 96
第8章  表單Form 97
8.1  插入表單 97
視頻路徑：視頻教學(xué)\8-1.exe
教學(xué)時(shí)長(zhǎng)：25秒
8.2  文字對(duì)象 98
8.2.1  使用單行文本域 98
視頻路徑：視頻教學(xué)\8-2-1.exe
教學(xué)時(shí)長(zhǎng)：43秒
8.2.2  使用多行文本域 100
8.2.3  使用密碼文本域 101
視頻路徑：視頻教學(xué)\8-2-3.exe
教學(xué)時(shí)長(zhǎng)：45秒
8.2.4  使用隱藏域 102
8.3  選擇標(biāo)簽 103
8.3.1  使用單選按鈕 103
8.3.2  使用單選按鈕組 104
8.3.3  使用復(fù)選框 105
8.4  列表與菜單 107
8.4.1  使用菜單 107
8.4.2  使用列表 109
8.4.3  使用跳轉(zhuǎn)菜單 109
8.5  表單按鈕 111
8.5.1  表單按鈕 111
8.5.2  圖像域 112
8.6  文件域和字段集 113
8.6.1  使用文件域 113
8.6.2  使用字段集 114
8.7  專家總結(jié) 115
第9章  多媒體Embed 116
9.1  聲音 116
9.1.1  播放背景音樂(lè) 116
視頻路徑：視頻教學(xué)\9-1-1.exe
教學(xué)時(shí)長(zhǎng)：1分56秒
9.1.2  設(shè)置播放歌曲 117
9.2  Flash對(duì)象 121
9.2.1  插入Flash動(dòng)畫 121
視頻路徑：視頻教學(xué)\9-2-1.exe
教學(xué)時(shí)長(zhǎng)：1分08秒
9.2.2  使用圖像查看器 124
視頻路徑：視頻教學(xué)\9-2-2.exe
教學(xué)時(shí)長(zhǎng)：2分01秒
9.2.3  設(shè)置Flash按鈕 125
9.3  播放視頻 127
9.4  專家總結(jié) 128
第10章  網(wǎng)頁(yè)框架Frame 129
10.1  創(chuàng)建框架 129
10.1.1  自定義框架 129
視頻路徑：視頻教學(xué)\10-1-1.exe
教學(xué)時(shí)長(zhǎng)：22秒
10.1.2  預(yù)定義框架 130
視頻路徑：視頻教學(xué)\10-1-2.exe
教學(xué)時(shí)長(zhǎng)：23秒
10.1.3  自定義嵌套框架 131
10.2  框架源碼 132
10.3  調(diào)整框架 133
10.3.1  選擇框架 133
10.3.2  保存框架 135
10.3.3  設(shè)置框架集 136
10.3.4  設(shè)置框架 137
10.3.5  命名框架集頁(yè)面 138
10.3.6  修改框架尺寸 138
視頻路徑：視頻教學(xué)\10-3-6.exe
教學(xué)時(shí)長(zhǎng)：25秒
10.3.7  使用無(wú)框架內(nèi)容 138
10.4  設(shè)置框架鏈接 139
10.5  使用浮動(dòng)框架iframe 140
10.6  專家總結(jié) 141
第11章  網(wǎng)頁(yè)樣式表CSS 142
11.1  CSS基礎(chǔ) 142
11.1.1  CSS基本概念 142
11.1.2  CSS功能介紹 142
11.2  引用CSS 145
11.2.1  外聯(lián)樣式表 145
11.2.2  內(nèi)嵌樣式表 146
11.2.3  導(dǎo)入樣式表 147
11.2.4  內(nèi)聯(lián)樣式表 148
11.3  CSS基本語(yǔ)法 148
11.3.1  構(gòu)成 148
11.3.2  選擇符 149
11.3.3  繼承性 151
11.3.4  特殊選擇符——偽類 152
11.3.5  其他偽類 153
11.4  使用Dreamweaver編輯CSS 153
11.4.1  認(rèn)識(shí)CSS面板 153
11.4.2  使用外部樣式表 154
視頻路徑：視頻教學(xué)\11-4-2.exe
教學(xué)時(shí)長(zhǎng)：53秒
11.4.3  創(chuàng)建新樣式表 156
11.5  設(shè)置CSS屬性 158
11.5.1  設(shè)置CSS樣式類型 158
視頻路徑：視頻教學(xué)\11-5-1.exe
教學(xué)時(shí)長(zhǎng)：1分16秒
11.5.2  設(shè)置CSS樣式背景 160
11.5.3  設(shè)置CSS樣式區(qū)塊 162
視頻路徑：視頻教學(xué)\11-5-3.exe
教學(xué)時(shí)長(zhǎng)：1分17秒
11.5.4  設(shè)置CSS樣式方框格式 163
11.5.5  設(shè)置CSS樣式邊框 165
11.5.6  設(shè)置CSS樣式列表 167
11.5.7  設(shè)置CSS樣式定位 168
11.5.8  設(shè)置CSS樣式擴(kuò)展 170
11.6  專家總結(jié) 172

Part03  網(wǎng)站構(gòu)建

第12章  網(wǎng)站的整體規(guī)劃 175
12.1  網(wǎng)站規(guī)劃概述 175
12.1.1  市場(chǎng)分析 175
12.1.2  網(wǎng)站的目的、主題 176
12.1.3  確定網(wǎng)站的內(nèi)容和服務(wù) 176
12.1.4  網(wǎng)頁(yè)設(shè)計(jì) 177
12.1.5  網(wǎng)站的測(cè)試和發(fā)布 177
12.1.6  網(wǎng)站的維護(hù)和推廣 178
12.2  網(wǎng)站規(guī)劃要素 179
12.2.1  網(wǎng)站的主題 180
12.2.2  網(wǎng)站的命名 180
12.2.3  網(wǎng)站的標(biāo)志 180
12.2.4  網(wǎng)頁(yè)的布局 181
12.2.5  網(wǎng)頁(yè)的色彩搭配 181
12.2.6  網(wǎng)頁(yè)的字體 183
12.3  頁(yè)面綜合布局 183
12.3.1  網(wǎng)頁(yè)布局的相關(guān)概念 183
12.3.2  常見(jiàn)的網(wǎng)頁(yè)布局結(jié)構(gòu) 185
12.3.3  網(wǎng)頁(yè)布局的技術(shù) 189
12.4  專家總結(jié) 191
第13章  頁(yè)面頭部設(shè)計(jì) 192
13.1  頁(yè)面頭部風(fēng)格確定 192
13.1.1  頁(yè)面頭部的構(gòu)成 193
13.1.2  頁(yè)面頭部的幾種設(shè)計(jì)形式 196
13.2  添加頁(yè)面頭部元素 197
視頻路徑：視頻教學(xué)\13a.exe
教學(xué)時(shí)長(zhǎng)：7分56秒
13.3  樣式調(diào)整與修改 203
視頻路徑：視頻教學(xué)\13b.exe
教學(xué)時(shí)長(zhǎng)：5分40秒
13.4  專家總結(jié) 208
第14章  導(dǎo)航條的設(shè)計(jì) 209
14.1  導(dǎo)航條的風(fēng)格選擇 209
14.1.1  導(dǎo)航條的目的 209
14.1.2  導(dǎo)航條的設(shè)計(jì)原則和技巧 210
14.1.3  設(shè)計(jì)導(dǎo)航的技術(shù) 211
14.1.4  導(dǎo)航條的布局方式 211
14.1.5  各式各樣的導(dǎo)航 213
14.2  導(dǎo)航條制作 214
視頻路徑：視頻教學(xué)\14a.exe
教學(xué)時(shí)長(zhǎng)：3分54秒
14.2.1  水平導(dǎo)航條的制作 214
14.2.2  垂直導(dǎo)航條的制作 218
14.3  樣式調(diào)整及修改 220
視頻路徑：視頻教學(xué)\14b.exe
教學(xué)時(shí)長(zhǎng)：4分26秒
14.3.1  水平導(dǎo)航條的樣式調(diào)整及
修改 220
14.3.2  垂直導(dǎo)航條的樣式調(diào)整及
修改 223
14.4  專家總結(jié) 225
第15章  主體版面設(shè)計(jì) 226
15.1  主體版面風(fēng)格的確定 227
15.1.1  主體版面顏色搭配 227
15.1.2  主體版面字體選擇 229
15.1.3  主題版面的大小控制 230
15.1.4  主體版面的布局 231
15.1.5  主體版面設(shè)計(jì)遵循的原理 233
15.2  主體元素的確定 233
15.2.1  兩欄布局主體版面的左欄
制作 234
15.2.2  兩欄布局主體版面的右欄
制作 236
15.3  樣式調(diào)整及修改 240
15.3.1  兩欄布局主體版面的CSS調(diào)整
與修改 240
15.3.2  兩欄布局主體版面的CSS
優(yōu)化 242
15.4  專家總結(jié) 244
第16章  頁(yè)腳設(shè)計(jì) 245
16.1  頁(yè)腳風(fēng)格的確定 245
16.1.1  頁(yè)腳的構(gòu)成要素的添加 245
16.1.2  頁(yè)腳顏色搭配 247
16.1.3  主體版面字體選擇 248
16.1.4  頁(yè)腳的尺寸控制 248
16.2  頁(yè)腳條的要素添加 249
視頻路徑：視頻教學(xué)\16a.exe
教學(xué)時(shí)長(zhǎng)：7分28秒
16.3  樣式調(diào)整及修改 253
視頻路徑：視頻教學(xué)\16b.exe
教學(xué)時(shí)長(zhǎng)：3分55秒
16.4  專家總結(jié) 256
第17章  模板制作與應(yīng)用 257
17.1  模板簡(jiǎn)介 257
17.1.1  模板的作用 257
17.1.2  適合使用模板的網(wǎng)頁(yè) 257
17.2  模板元素的操作 259
17.2.1  創(chuàng)建模板 259
17.2.2  創(chuàng)建可編輯區(qū)域 260
17.2.3  創(chuàng)建基于模板的文檔 262
17.2.4  分離文檔中使用的模板 263
17.2.5  更新模板及基于模板的網(wǎng)頁(yè)
263
17.2.6  模板的嵌套 264
17.3  模板的應(yīng)用 264
17.3.1  分析布局 265
17.3.2  插入可編輯區(qū)域 266
17.3.3  應(yīng)用模板 267
17.4  專家總結(jié) 270
第18章  網(wǎng)站實(shí)例 271
18.1  首頁(yè)制作 271
18.1.1  制作首頁(yè)頭部 271
18.1.2  使用CSS修飾首頁(yè)頭部 273
18.1.3  首頁(yè)主體的制作 274
18.1.4  首頁(yè)頁(yè)腳制作 279
18.2  公司簡(jiǎn)介頁(yè)制作 280
18.2.1  網(wǎng)頁(yè)模板制作 280
18.2.2  公司簡(jiǎn)介主體部分制作 281
18.3  產(chǎn)品展示頁(yè)制作 283
18.4  公司文化頁(yè)制作 285
18.5  聯(lián)系我們頁(yè)制作 287
18.6  專家總結(jié) 288

Part04  動(dòng)態(tài)網(wǎng)站

第19章  腳本技術(shù) 291
19.1  JavaScript簡(jiǎn)介 291
19.1.1  JavaScript的特點(diǎn) 291
19.1.2  插入JavaScript 292
19.1.3  JavaScript 基本語(yǔ)法 293
19.1.4  變量 293
19.1.5  表達(dá)式與運(yùn)算符 295
19.1.6  程序構(gòu)成 296
19.1.7  對(duì)象編程 298
19.2  文檔對(duì)象 301
19.2.1  文檔模型樹(shù) 301
19.2.2  Cookies的使用 302
19.3  Dreamweaver腳本行為 302
19.3.1  認(rèn)識(shí)【行為】面板 303
19.3.2  行為應(yīng)用 304
19.4  專家總結(jié) 312
第20章  動(dòng)態(tài)網(wǎng)頁(yè) 313
20.1  動(dòng)態(tài)網(wǎng)頁(yè)簡(jiǎn)介 313
20.1.1  PHP 313
20.1.2  ASP 313
20.1.3  JSP 314
20.2  ASP簡(jiǎn)介 314
20.2.1  ASP的特點(diǎn) 314
20.2.2  ASP的工作原理 314
20.2.3  創(chuàng)建ASP 315
20.3  ASP內(nèi)建對(duì)象 316
20.4  連接使用數(shù)據(jù)庫(kù) 317
20.4.1  數(shù)據(jù)庫(kù)簡(jiǎn)介 317
20.4.2  連接數(shù)據(jù)庫(kù) 318
20.4.3  使用數(shù)據(jù)庫(kù) 318
20.4.4  Recordset對(duì)象 320
20.5  Dreamweaver動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) 320
20.5.1  環(huán)境準(zhǔn)備 320
20.5.2  創(chuàng)建和管理網(wǎng)站 322
20.5.3  連接數(shù)據(jù)庫(kù) 323
20.5.4  綁定記錄集 325
20.5.5  動(dòng)態(tài)文本 326
20.5.6  重復(fù)區(qū)域 327
20.5.7  記錄集分頁(yè) 328
20.5.8  顯示區(qū)域 328
20.5.9  插入記錄 329
20.5.10  轉(zhuǎn)到詳細(xì)頁(yè)面 331
20.5.11  動(dòng)態(tài)表單元素 332
20.5.12  更新記錄 334
20.5.13  刪除記錄 335
20.6  專家總結(jié) 336
第21章  ASP留言本 337
21.1  制作前期規(guī)劃 337
21.1.1  功能分析 337
21.1.2  環(huán)境搭建 338
21.2  數(shù)據(jù)庫(kù)準(zhǔn)備 340
21.3  頁(yè)面編寫 340
21.3.1  顯示留言頁(yè)面 340
21.3.2  提交新留言頁(yè)面 344
21.3.3  留言管理登錄頁(yè)面 346
21.3.4  管理頁(yè)面 347
21.3.5  刪除頁(yè)面 348
21.3.6  修改頁(yè)面 349
21.3.7  回復(fù)頁(yè)面 350
21.3.8  登錄失敗頁(yè)面 351
21.4  測(cè)試留言本 351
21.5  專家總結(jié) 354

Part05  Web 2.0網(wǎng)站

第22章  DIV+CSS 357
22.1  Web標(biāo)準(zhǔn) 357
22.1.1  結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言 357
22.1.2  表現(xiàn)標(biāo)準(zhǔn)CSS 358
22.1.3  行為標(biāo)準(zhǔn) 358
22.1.4  Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 358
22.2  理解表現(xiàn)和結(jié)構(gòu)相分離 358
22.2.1  內(nèi)容 359
22.2.2  結(jié)構(gòu)（Structure） 359
22.2.3  表現(xiàn)（Presentation） 359
22.2.4  行為（Behavior） 360
22.2.5  傳統(tǒng)的HTML方法 360
22.2.6  Web標(biāo)準(zhǔn)推薦的方法 361
22.3  DIV+CSS頁(yè)面規(guī)劃 362
22.3.1  盒模型 362
22.3.2  定位 364
22.3.3  清除 366
22.3.4  實(shí)現(xiàn)布局規(guī)劃 367
22.3.5  美化布局 370
22.4  DIV+CSS在Dreamweaver中實(shí)現(xiàn)
373
22.4.1  使用模板布局 373
22.4.2  自定義布局 374
22.5  專家總結(jié) 375
第23章  基于DIV+CSS的個(gè)人網(wǎng)站
376
23.1  網(wǎng)站前期規(guī)劃 376
23.2  制作準(zhǔn)備 377
23.2.1  布局草圖 377
23.2.2  素材準(zhǔn)備 378
23.2.3  繪制效果圖 378
23.2.4  建立站點(diǎn) 379
23.3  頁(yè)面編寫 381
23.3.1  整體布局 381
23.3.2  添加首頁(yè)內(nèi)容 384
23.3.3  制作相冊(cè)詳細(xì)頁(yè)面 389
23.4  網(wǎng)站發(fā)布與上傳 390
23.5  專家總結(jié) 392