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

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