網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第3版）

第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ) 1
1．1 學(xué)習(xí)任務(wù)：認(rèn)識(shí)網(wǎng)頁(yè) 1
1．1．1 什么是網(wǎng)頁(yè) 1
1．1．2 網(wǎng)頁(yè)類型 2
1．1．3 網(wǎng)頁(yè)基本元素 3
1．1．4 網(wǎng)頁(yè)制作常用軟件和技術(shù) 5
1．2 學(xué)習(xí)任務(wù)：認(rèn)識(shí)網(wǎng)站 7
1．2．1 什么是網(wǎng)站 7
1．2．2 網(wǎng)址與域名 7
1．2．3 網(wǎng)站建設(shè)的一般流程 8
1．3 學(xué)習(xí)任務(wù)：HTML基礎(chǔ)知識(shí) 11
1．3．1 HTML簡(jiǎn)介 11
1．3．2 HTML的基本語(yǔ)法與結(jié)構(gòu) 12
1．3．3 常用的HTML標(biāo)簽 14
1．3．4 HTML5．0標(biāo)簽及屬性 25
1．4 實(shí)訓(xùn) 28
1．4．1 實(shí)訓(xùn)一 使用記事本編輯
簡(jiǎn)單的網(wǎng)頁(yè) 28
1．4．2 實(shí)訓(xùn)二 制作滾動(dòng)圖片
鏈接 28
1．5 習(xí)題 29
第2章 網(wǎng)頁(yè)版式設(shè)計(jì)與色彩搭配 32
2．1 案例分析：不同風(fēng)格網(wǎng)頁(yè)作品
欣賞與解析 32
2．2 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)版式設(shè)計(jì) 34
2．2．1 版式設(shè)計(jì)概述 35
2．2．2 網(wǎng)頁(yè)版式的尺寸和構(gòu)成
要素 35
2．2．3 網(wǎng)頁(yè)的版式設(shè)計(jì)風(fēng)格 36
2．2．4 網(wǎng)頁(yè)版式設(shè)計(jì)原則 38
2．2．5 網(wǎng)頁(yè)版式設(shè)計(jì)的視覺流程 38
2．2．6 網(wǎng)頁(yè)版式設(shè)計(jì)的步驟 38
2．3 學(xué)習(xí)任務(wù)：色彩的基本理論及
其視覺效果 39
2．3．1 色彩的基本理論 39
2．3．2 色彩的視覺效果 40
2．4 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)中的色彩及配色 41
2．4．1 網(wǎng)頁(yè)色彩 42
2．4．2 網(wǎng)頁(yè)中色彩的作用 42
2．4．3 網(wǎng)頁(yè)配色原理 42
2．4．4 網(wǎng)頁(yè)配色技巧 43
2．5 實(shí)訓(xùn) 44
2．5．1 實(shí)訓(xùn)一 總結(jié)不同主題網(wǎng)站的版
式設(shè)計(jì)及配色 44
2．5．2 實(shí)訓(xùn)二 網(wǎng)頁(yè)配色練習(xí) 44
2．5．3 實(shí)訓(xùn)三 校友網(wǎng)首頁(yè)效果圖
設(shè)計(jì) 45
2．6 習(xí)題 46
第3章 Dreamweaver CS6入門 47
3．1 學(xué)習(xí)任務(wù)：認(rèn)識(shí)中文版
Dreamweaver CS6 47
3．1．1 Dreamweaver CS6的特點(diǎn) 47
3．1．2 Dreamweaver CS6的新增
功能 48
3．1．3 Dreamweaver CS6的安裝
與卸載 49
3．2 學(xué)習(xí)任務(wù)：Dreamweaver CS6
工作區(qū)介紹 51
3．2．1 啟動(dòng)Dreamweaver CS6 51
3．2．2 Dreamweaver CS6工作區(qū)布局
介紹 52
3．3 學(xué)習(xí)任務(wù)：規(guī)劃與創(chuàng)建站點(diǎn) 57
3．3．1 站點(diǎn)概述 57
3．3．2 規(guī)劃站點(diǎn) 56
3．3．3 創(chuàng)建本地站點(diǎn) 57
3．3．4 管理站點(diǎn) 59
3．4 案例：創(chuàng)建歡迎光臨網(wǎng)頁(yè) 60
3．4．1 創(chuàng)建網(wǎng)頁(yè)文檔 60
3．4．2 設(shè)置頁(yè)面屬性 62
3．4．3 保存網(wǎng)頁(yè)文檔 66
3．4．4 預(yù)覽網(wǎng)頁(yè)文檔 67
3．5 實(shí)訓(xùn)：制作網(wǎng)上家園歡迎頁(yè)面 68
3．6 習(xí)題 69
第4章 CSS樣式基礎(chǔ) 70
4．1 學(xué)習(xí)任務(wù)：CSS概述 70
4．1．1 CSS的基本概念 70
4．1．2 使用HTML和CSS格式
化網(wǎng)頁(yè) 71
4．1．3 CSS樣式面板 72
4．1．4 CSS基本語(yǔ)法 73
4．1．5 CSS樣式表的引用 74
4．2 學(xué)習(xí)任務(wù)：CSS樣式的創(chuàng)建與
屬性設(shè)置 77
4．2．1 創(chuàng)建CSS樣式 77
4．2．2 設(shè)置CSS屬性 78
4．2．3 使用CSS樣式面板設(shè)置
CSS屬性 85
4．3 學(xué)習(xí)任務(wù)：管理CSS樣式 85
4．3．1 鏈接或?qū)胪獠緾SS樣式 86
4．3．2 查看CSS樣式 87
4．3．3 編輯與刪除CSS樣式 87
4．4 案例：使用CSS樣式美化網(wǎng)頁(yè) 88
4．5 實(shí)訓(xùn) 91
4．5．1 實(shí)訓(xùn)一 為網(wǎng)頁(yè)元素應(yīng)用
CSS樣式 91
4．5．2 實(shí)訓(xùn)二 新浪新聞?lì)^條 91
4．6 習(xí)題 92
第5章 網(wǎng)頁(yè)的文本和圖像 94
5．1 案例1：設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè) 94
5．1．1 在網(wǎng)頁(yè)中添加文本 95
5．1．2 設(shè)置項(xiàng)目符號(hào)或編號(hào) 97
5．1．3 插入特殊字符、水平線
和日期 98
5．1．4 設(shè)置文本屬性 100
5．1．5 使用CSS設(shè)置段落樣式 103
5．2 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像 104
5．2．1 網(wǎng)頁(yè)中常用的圖像格式 105
5．2．2 在網(wǎng)頁(yè)中添加圖像 105
5．2．3 設(shè)置網(wǎng)頁(yè)圖像屬性 106
5．2．4 用CSS設(shè)置網(wǎng)頁(yè)圖像
樣式 107
5．2．5 用CSS設(shè)置網(wǎng)頁(yè)的背景
圖像 109
5．2．6 插入圖像占位符和鼠標(biāo)
經(jīng)過圖像 110
5．3 案例2：圖文混排――設(shè)計(jì)電影介紹
網(wǎng)站頁(yè)面 112
5．4 實(shí)訓(xùn)：設(shè)計(jì)暢銷書介紹網(wǎng)頁(yè) 113
5．5 習(xí)題 114
第6章 網(wǎng)頁(yè)超鏈接與導(dǎo)航 116
6．1 案例1：設(shè)計(jì)制作過節(jié)樂網(wǎng)頁(yè) 116
6．1．1 超鏈接概述 117
6．1．2 創(chuàng)建各類超鏈接 118
6．1．3 用CSS設(shè)置超鏈接樣式 122
6．2 案例2：圖像地圖――設(shè)計(jì)國(guó)家地理
網(wǎng)站頁(yè)面 123
6．3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì) 125
6．3．1 網(wǎng)頁(yè)導(dǎo)航概述 125
6．3．2 網(wǎng)頁(yè)導(dǎo)航分類 126
6．3．3 網(wǎng)頁(yè)導(dǎo)航方向 128
6．4 案例3：設(shè)計(jì)制作網(wǎng)頁(yè)導(dǎo)航 129
6．5 實(shí)訓(xùn)：設(shè)計(jì)制作點(diǎn)點(diǎn)星空
網(wǎng)站頁(yè)面 131
6．6 習(xí)題 132
第7章 使用表格布局網(wǎng)頁(yè) 134
7．1 案例1：設(shè)計(jì)學(xué)生成績(jī)單 134
7．1．1 創(chuàng)建表格 135
7．1．2 設(shè)置表格屬性 136
7．1．3 編輯表格 137
7．1．4 使用CSS美化表格 140
7．2 學(xué)習(xí)任務(wù)：表格標(biāo)簽 141
7．2．1 使用表格標(biāo)簽制作網(wǎng)頁(yè)
表格 141
7．2．2 在標(biāo)簽選擇器中設(shè)置表格
的屬性 142
7．3 案例2：使用表格布局圖書
資源網(wǎng) 143
7．3．1 使用表格布局網(wǎng)頁(yè) 144
7．3．2 導(dǎo)入Excel文檔 145
7．3．3 使用CSS美化頁(yè)面 147
7．4 案例3：設(shè)計(jì)旅游信息網(wǎng) 148
7．4．1 使用表格布局頁(yè)面 149
7．4．2 在表格中插入網(wǎng)頁(yè)元素 149
7．4．3 使用CSS美化頁(yè)面 151
7．5 實(shí)訓(xùn) 151
7．5．1 實(shí)訓(xùn)一 設(shè)計(jì)健康
美食網(wǎng) 151
7．5．2 實(shí)訓(xùn)二 設(shè)計(jì)時(shí)尚
禮品網(wǎng) 152
7．6 習(xí)題 155
第8章 使用框架布局網(wǎng)頁(yè) 156
8．1 案例1：使用框架布局休閑
音樂網(wǎng)頁(yè) 156
8．1．1 認(rèn)識(shí)框架與框架集 157
8．1．2 創(chuàng)建框架和框架集 157
8．1．3 保存框架和框架集 158
8．1．4 向框架中添加內(nèi)容 159
8．2 學(xué)習(xí)任務(wù)：框架標(biāo)簽 160
8．3 案例2：使用框架布局校園
論壇頁(yè)面 161
8．3．1 選擇框架 162
8．3．2 拆分框架 162
8．3．3 設(shè)置框架集和框架屬性 163
8．3．4 在框架中添加頁(yè)面內(nèi)容 164
8．3．5 通過鏈接框架制作導(dǎo)航 165
8．3．6 使用CSS美化頁(yè)面 166
8．4 案例3：使用浮動(dòng)框架布局寶貝
相冊(cè)網(wǎng)頁(yè) 167
8．5 實(shí)訓(xùn)：設(shè)計(jì)花園式樓盤網(wǎng)頁(yè) 169
8．6 習(xí)題 171
第9章 使用流體網(wǎng)格布局網(wǎng)頁(yè) 173
9．1 學(xué)習(xí)任務(wù)：流體網(wǎng)格布局概述 173
9．2 案例：使用流體網(wǎng)格布局購(gòu)物網(wǎng) 173
9．2．1 創(chuàng)建流體網(wǎng)格布局 174
9．2．2　創(chuàng)建模塊內(nèi)容 175
9．3 實(shí)訓(xùn)：使用流體網(wǎng)格布局
寵物網(wǎng) 180
9．4 習(xí)題 181
第10章 使用Div布局網(wǎng)頁(yè) 182
10．1 案例1：使用AP Div布局電影
資訊網(wǎng)頁(yè) 182
10．1．1 AP Div概述 183
10．1．2 AP Div屬性面板 183
10．1．3 “AP元素”面板 184
10．1．4 在AP Div中添加
網(wǎng)頁(yè)元素 185
10．1．5 使用CSS美化頁(yè)面 187
10．2 學(xué)習(xí)任務(wù)：使用CSS+Div布局
網(wǎng)頁(yè)基礎(chǔ) 187
10．2．1 AP Div標(biāo)簽與Div
標(biāo)簽 188
10．2．2 Div標(biāo)簽與span標(biāo)簽 189
10．2．3 盒子模型 190
10．2．4 元素的定位 192
10．2．5 常用CSS+Div布局
版式 193
10．3 案例2：定位在網(wǎng)頁(yè)布局中
的應(yīng)用 197
10．4 案例3：使用CSS+Div布局個(gè)人
Blog 199
10．5 實(shí)訓(xùn) 203
10．5．1 實(shí)訓(xùn)一 網(wǎng)頁(yè)定位與
布局 203
10．5．2 實(shí)訓(xùn)二 使用Div+CSS布局
頁(yè)面 204
10．6 習(xí)題 205
第11章 多媒體網(wǎng)頁(yè)與網(wǎng)頁(yè)
特效設(shè)計(jì) 207
11．1 學(xué)習(xí)任務(wù)：在網(wǎng)頁(yè)中插入多
媒體對(duì)象 207
11．1．1 插入Flash動(dòng)畫 207
11．1．2 添加聲音 210
11．1．3 插入FLV視頻 211
11．2 學(xué)習(xí)任務(wù)：認(rèn)識(shí)行為 212
11．2．1 行為概述 213
11．2．2 動(dòng)作與事件 214
11．2．3 添加行為 216
11．3 學(xué)習(xí)任務(wù)：使用行為創(chuàng)建
網(wǎng)頁(yè)特效 217
11．3．1 制作網(wǎng)頁(yè)加載時(shí)彈出
公告頁(yè) 217
11．3．2 使用行為設(shè)置圖像
特效 218
11．3．3 使用行為設(shè)置狀態(tài)欄
文本 220
11．3．4 使用行為設(shè)置跳轉(zhuǎn)菜單
效果 222
11．4 實(shí)訓(xùn) 224
11．4．1 實(shí)訓(xùn)一 為寶貝相冊(cè)網(wǎng)頁(yè)
添加背景音樂 224
11．4．2 實(shí)訓(xùn)二 設(shè)置變換圖像的
導(dǎo)航欄 224
11．5 習(xí)題 225
第12章 使用表單對(duì)象 227
12．1 學(xué)習(xí)任務(wù)：表單和表單對(duì)象 227
12．1．1 表單 227
12．1．2 表單對(duì)象 229
12．2 案例1：設(shè)計(jì)網(wǎng)頁(yè)中的留言簿 231
12．2．1 留言簿界面設(shè)計(jì) 231
12．2．2 創(chuàng)建文本域 233
12．2．3 創(chuàng)建按鈕 235
12．2．4 使用CSS樣式美化留言
簿網(wǎng)頁(yè) 236
12．3 案例2：設(shè)計(jì)會(huì)員注冊(cè)頁(yè)面 237
12．3．1 會(huì)員注冊(cè)界面設(shè)計(jì) 237
12．3．2 創(chuàng)建單選按鈕 239
12．3．3 創(chuàng)建復(fù)選框 241
12．3．4 創(chuàng)建列表菜單 241
12．4 案例3：在網(wǎng)頁(yè)中使用Spry
布局對(duì)象 243
12．4．1 插入Spry菜單欄 244
12．4．2 插入Spry選項(xiàng)卡式
面板 245
12．4．3 插入Spry折疊式控件 246
12．4．4 插入Spry可折疊面板
控件 247
12．5 實(shí)訓(xùn) 248
12．5．1 實(shí)訓(xùn)一 設(shè)計(jì)網(wǎng)上報(bào)名
頁(yè)面 248
12．5．2 實(shí)訓(xùn)二 設(shè)計(jì)客戶調(diào)查
頁(yè)面 249
12．6 習(xí)題 250
第13章 創(chuàng)建基于模板的網(wǎng)頁(yè) 252
13．1 案例1：創(chuàng)建基于模板的時(shí)尚
禮品網(wǎng) 252
13．1．1 模板概述 252
13．1．2 創(chuàng)建模板 253
13．1．3 定義模板的可編輯
區(qū)域 256
13．1．4 創(chuàng)建基于模板的網(wǎng)頁(yè) 257
13．1．5 管理模板 258
13．2 案例2：應(yīng)用庫(kù)項(xiàng)目 260
13．2．1 庫(kù)概述 260
13．2．2 創(chuàng)建庫(kù)項(xiàng)目 261
13．2．3 在網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目 262
13．2．4 更新庫(kù)項(xiàng)目 263
13．3 實(shí)訓(xùn)：設(shè)計(jì)制作巧克力網(wǎng) 264
第14章 測(cè)試、發(fā)布與維護(hù)網(wǎng)站 266
14．1 學(xué)習(xí)任務(wù)：測(cè)試站點(diǎn) 266
14．1．1 測(cè)試瀏覽器的兼容性 266
14．1．2 測(cè)試鏈接 268
14．1．3 使用報(bào)告測(cè)試站點(diǎn) 269
14．2 學(xué)習(xí)任務(wù)：注冊(cè)域名、申請(qǐng)空間
及發(fā)布網(wǎng)站 270
14．2．1 注冊(cè)域名 270
14．2．2 申請(qǐng)空間 271
14．2．3 發(fā)布站點(diǎn) 272
14．3 案例：為網(wǎng)站在Internet
上安個(gè)家 273
14．4 學(xué)習(xí)任務(wù)：網(wǎng)站的宣傳 277
14．4．1 提交搜索引擎 277
14．4．2 友情鏈接 278
14．4．3 網(wǎng)絡(luò)廣告 278
14．4．4 郵件廣告 279
14．4．5 使用留言板、博客 280
14．5 實(shí)訓(xùn)：注冊(cè)免費(fèi)空間并提交
搜索引擎 280
14．6 習(xí)題 280
第15章 綜合應(yīng)用案例1：設(shè)計(jì)制作
工作室網(wǎng)站 281
15．1 網(wǎng)站建設(shè)流程 281
15．2 網(wǎng)站需求分析 282
15．3 網(wǎng)站原型設(shè)計(jì) 283
15．3．1 首頁(yè)效果圖的作用 283
15．3．2 首頁(yè)效果圖的設(shè)計(jì) 284
15．4 創(chuàng)建站點(diǎn) 285
15．5 網(wǎng)站首頁(yè)設(shè)計(jì) 286
15．5．1 設(shè)置固定寬度且
居中版式 286
15．5．2 頂部Banner設(shè)計(jì) 287
15．5．3 導(dǎo)航欄設(shè)計(jì) 288
15．5．4 插入Flash動(dòng)畫 291
15．5．5 最新作品模塊設(shè)計(jì) 292
15．5．6 底部導(dǎo)航欄設(shè)計(jì) 293
15．5．7 版權(quán)信息模塊設(shè)計(jì) 294
15．6 欄目頁(yè)設(shè)計(jì) 294
15．7 type．css參考代碼 295
第16章 綜合應(yīng)用案例2：設(shè)計(jì)制作
企業(yè)類網(wǎng)站 301
16．1 規(guī)劃網(wǎng)站首頁(yè)的布局 301
16．1．1　網(wǎng)站首頁(yè)的布局 302
16．1．2 搭建首頁(yè)頁(yè)頭的DIV 303
16．1．3　搭建“公司簡(jiǎn)介”部分的DIV 304
16．1．4　首頁(yè)主體部分的DIV 305
16．2 欄目頁(yè)設(shè)計(jì) 307
16．2．1　Flash動(dòng)畫展示部分的DIV 309
16．2．2　搭建“產(chǎn)品系列”部分
的DIV 310