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

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