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

時(shí)間：2023-02-24 09:33:02 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-02-24 09:33:02 來(lái)源：營(yíng)銷百科

網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第3版）圖書(shū)目錄：第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ì)的視覺(jué)流程 38

2．2．6 網(wǎng)頁(yè)版式設(shè)計(jì)的步驟 38

2．3 學(xué)習(xí)任務(wù)：色彩的基本理論及

其視覺(jué)效果 39

2．3．1 色彩的基本理論 39

2．3．2 色彩的視覺(jué)效果 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入門(mén) 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)過(guò)圖像 110

5．3 案例2：圖文混排――設(shè)計(jì)電影介紹

網(wǎng)站頁(yè)面 112

5．4 實(shí)訓(xùn)：設(shè)計(jì)暢銷書(shū)介紹網(wǎng)頁(yè) 113

5．5 習(xí)題 114

第6章 網(wǎng)頁(yè)超鏈接與導(dǎo)航 116

6．1 案例1：設(shè)計(jì)制作過(guò)節(jié)樂(lè)網(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：使用表格布局圖書(shū)

資源網(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：使用框架布局休閑

音樂(lè)網(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 通過(guò)鏈接框架制作導(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ì)花園式樓盤(pán)網(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)畫(huà) 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è)

添加背景音樂(lè) 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)畫(huà) 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)畫(huà)展示部分的DIV 309

16．2．2　搭建'產(chǎn)品系列'部分

的DIV 310^[1][2]