邊做邊學——Dreamweaver CS6網頁設計案例教程（第3版）（微課版）

孟宪宁，青岛职业技术学院副教授，作为《Web编程基础》省级精品课程负责人、《Java Web程序设计》省级精品资源共享课程主讲教师，主持编写《HTML+CSS+JavaScript网页设计》、《Java程序设计》、《Java Web程序设计》、《创新与编程思维》等多门校本讲义。具有丰富的教材和讲义编写经验。

第 1章

初識Dreamweaver　CS6　1

1.1　操作界面　2

1.1.1　【操作目的】　2

1.1.2　【操作步驟】　2

1.1.3　【相關工具】　2

1．開始頁面　2

2．不同風格的界面　3

3．伸縮自如的功能面板　3

4．多文檔的編輯界面　4

5．“插入”面板　4

6．更完整的CSS功能　4

1.2　創建網站框架　5

1.2.1　【操作目的】　5

1.2.2　【操作步驟】　5

1.2.3　【相關工具】　6

1.3　管理站點　8

1.3.1　【操作目的】　8

1.3.2　【操作步驟】　8

1.3.3　【相關工具】　10

1．站點管理器　10

2．創建文件夾　12

3．定義新站點　12

1.4　網頁文件頭設置　13

1.4.1　【操作目的】　13

1.4.2　【操作步驟】　13

1.4.3　【相關工具】　13

1．插入搜索關鍵字　13

2．插入作者和版權信息　14

3．設置刷新時間　14

4．設置描述信息　15

5．設置頁面中所有鏈接的

　基準鏈接　15

6．設置當前文檔與其他

　文件的關系　16

第　2章

文本和文檔　17

2.1　軒宇門窗網頁　18

2.1.1　【案例分析】　18

2.1.2　【設計理念】　18

2.1.3　【操作步驟】　18

1．設置頁面屬性　18

2．輸入空格和文字　19

2.1.4　【相關工具】　22

1．輸入文本　22

2．設置文本屬性　23

3．輸入連續的空格　23

4．設置是否顯示不可見元素　24

5．設置頁邊距　24

6．設置網頁的標題　25

7．設置網頁的默認格式　25

2.1.5　【實戰演練】——

青山別墅網頁　26

2.2　休閑旅游網頁　26

2.2.1　【案例分析】　26

2.2.2　【設計理念】　26

2.2.3　【操作步驟】　27

1．添加字體　27

2．改變文字外觀　28

2.2.4　【相關工具】　29

1．改變文本的大小　29

2．改變文本的顏色　30

3．改變文本的字體　31

4．改變文本的對齊方式　32

5．設置文本樣式　33

6．段落文本　33

7．插入換行符　35

8．設置項目符號或編號　35

9．修改項目符號或編號　35

10．設置文本縮進格式　36

11．插入日期　36

12．特殊字符　36

2.2.5　【實戰演練】——電器城網頁　37

2.3　休閑度假村網頁　37

2.3.1　【案例分析】　37

2.3.2　【設計理念】　38

2.3.3　【操作步驟】　38

2.3.4　【相關工具】　40

1．水平線　40

2．顯示和隱藏網格　41

3．標尺　41

2.3.5　【實戰演練】——

攝影藝術網頁　42

2.4　綜合演練——電商網頁　43

2.4.1　【案例分析】　43

2.4.2　【設計理念】　43

2.4.3　【知識要點】　43

2.5　綜合演練——有機果蔬網頁　44

2.5.1　【案例分析】　44

2.5.2　【設計理念】　44

2.5.3　【知識要點】　44

第3章

圖像和多媒體　45

3.1　紙杯蛋糕網頁　46

3.1.1　【案例分析】　46

3.1.2　【設計理念】　46

3.1.3　【操作步驟】　46

3.1.4　【相關工具】　48

1．網頁中的圖像格式　48

2．插入圖像　48

3．設置圖像屬性　49

4．插入圖像占位符　50

5．跟蹤圖像　50

3.1.5　【實戰演練】——

環球旅游網頁　51

3.2　物流運輸網頁　51

3.2.1　【案例分析】　51

3.2.2　【設計理念】　51

3.2.3　【操作步驟】　52

3.2.4　【相關工具】　53

1．插入Flash動畫　53

2．插入FLV　54

3．插入Shockwave影片　56

4．影片插入Applet程序　56

5．插入ActiveX控件　57

3.2.5　【實戰演練】——

準媽媽課堂網頁　57

3.3　綜合演練——

咖啡館網頁　57

3.3.1　【案例分析】　57

3.3.2　【設計理念】　58

3.3.3　【知識要點】　58

3.4　綜合演練——

綠色農場網頁　58

3.4.1　【案例分析】　58

3.4.2　【設計理念】　58

3.4.3　【知識要點】　58

第4章

超鏈接　60

4.1　建築模型網頁　61

4.1.1　【案例分析】　61

4.1.2　【設計理念】　61

4.1.3　【操作步驟】　61

1．製作電子郵件鏈接　61

2．製作下載文件鏈接　62

4.1.4　【相關工具】　63

1．超鏈接的概念與路徑知識　63

2．創建文本鏈接　63

3．文本鏈接的狀態　65

4．下載文件鏈接　65

5．電子郵件鏈接　66

4.1.5　【實戰演練】——

創意設計網頁　66

4.2　溫泉度假網頁　67

4.2.1　【案例分析】　67

4.2.2　【設計理念】　67

4.2.3　【操作步驟】　67

1．製作鼠標經過　67

2．創建熱點鏈接　68

4.2.4　【相關工具】　69

1．圖像超鏈接　69

2．鼠標經過圖像鏈接　69

3．命名錨記鏈接　70

4．創建熱區鏈接　71

4.2.5　【實戰演練】——

金融投資網頁　72

4.3　綜合演練——世界景觀網頁　73

4.3.1　【案例分析】　73

4.3.2　【設計理念】　73

4.3.3　【知識要點】　73

4.4　綜合演練——獅立地板網頁　74

4.4.1　【案例分析】　74

4.4.2　【設計理念】　74

4.4.3　【知識要點】　74

第5章

使用表格　75

5.1　營養美食網頁　76

5.1.1　【案例分析】　76

5.1.2　【設計理念】　76

5.1.3　【操作步驟】　76

5.1.4　【相關工具】　80

1．表格的組成　80

2．插入表格　81

3．表格各元素的屬性　82

4．在表格中插入內容　83

5．選擇表格元素　83

6．復制、粘貼表格　85

7．縮放表格　86

8．刪除表格和表格內容　86

9．合並和拆分單元格　87

10．增加、刪除表格的行或列　88

5.1.5　【實戰演練】——

火鍋餐廳網頁　88

5.2　綠色糧倉網頁　89

5.2.1　【案例分析】　89

5.2.2　【設計理念】　89

5.2.3　【操作步驟】　89

1．導入表格式數據　89

2．排序表格　92

5.2.4　【相關工具】　93

1．導入和導出表格的數據　93

2．排序表格　95

3．復雜表格的排版　95

5.2.5　【實戰演練】——

典藏博物館網頁　96

5.3　綜合演練——茶文化網頁　96

5.3.1　【案例分析】　96

5.3.2　【設計理念】　96

5.3.3　【知識要點】　96

5.4　綜合演練——信用卡網頁　97

5.4.1　【案例分析】　97

5.4.2　【設計理念】　97

5.4.3　【知識要點】　97

第6章

使用框架　98

6.1　牛奶飲料網頁　99

6.1.1　【案例分析】　99

6.1.2　【設計理念】　99

6.1.3　【操作步驟】　99

1．新建框架並編輯　99

2．插入圖像　101

6.1.4　【相關工具】　102

1．建立框架集　102

2．為框架添加內容　103

3．保存框架　104

4．框架的選擇　104

5．修改框架的大小　105

6．拆分框架　106

7．刪除框架　106

6.1.5　【實戰演練】——

獻愛心活動中心網頁　107

6.2　建築規劃網頁　107

6.2.1　【案例分析】　107

6.2.2　【設計理念】　107

6.2.3　【操作步驟】　108

1．設置保存的文檔　108

2．插入表格、圖像和

　鼠標經過圖像　109

3．修改頁面屬性並插入圖像　111

4．創建圖像超鏈接　111

6.2.4　【相關工具】　112

1．框架屬性　112

2．框架集的屬性　113

3．框架中的鏈接　113

6.2.5　【實戰演練】——

陽光外語小學網頁　114

6.3　綜合演練——

健康定製網頁1　115

6.3.1　【案例分析】　115

6.3.2　【設計理念】　115

6.3.3　【知識要點】　115

6.4　綜合演練——

健康定製網頁2　116

6.4.1　【案例分析】　116

6.4.2　【設計理念】　116

6.4.3　【知識要點】　116

第7章

使用層　117

7.1　聯創網絡技術網頁　118

7.1.1　【案例分析】　118

7.1.2　【設計理念】　118

7.1.3　【操作步驟】　118

7.1.4　【相關工具】　119

1．創建並編輯層　119

2．選擇層　121

3．設置層的默認屬性　121

4．AP元素麵板　122

5．更改層的堆疊順序　122

6．更改層的可見性　123

7．調整層的大小　123

8．嵌套層　124

9．移動層　124

10．對齊層　125

11．層靠齊到網格　125

7.1.5　【實戰演練】——

時尚前沿網頁　126

7.2　海貸金融網頁　127

7.2.1　【案例分析】　127

7.2.2　【設計理念】　127

7.2.3　【操作步驟】　127

7.2.4　【相關工具】　128

1．將AP　Div轉換為表格　128

2．將表格轉換為AP　Div　129

7.2.5　【實戰演練】——

信業融資網頁　129

7.3　綜合演練——投資理財網頁　130

7.3.1　【案例分析】　130

7.3.2　【設計理念】　130

7.3.3　【知識要點】　130

7.4　綜合演練——

購物狂歡節網頁　131

7.4.1　【案例分析】　131

7.4.2　【設計理念】　131

7.4.3　【知識要點】　131

第8章

CSS樣式　132

8.1　國畫展覽館網頁　133

8.1.1　【案例分析】　133

8.1.2　【設計理念】　133

8.1.3　【操作步驟】　133

8.1.4　【相關工具】　135

1．CSS樣式的概念　135

2．“CSS樣式”面板　135

3．CSS樣式的類型　136

4．重定義HTML標簽樣式　137

5．創建CSS選擇器　138

6．創建和應用自定義樣式　140

7．創建和引用外部樣式　140

8．編輯樣式　141

8.1.5　【實戰演練】——跑酷網頁　142

8.2　打印機網頁　143

8.2.1　【案例分析】　143

8.2.2　【設計理念】　143

8.2.3　【操作步驟】　143

1．插入表格並輸入文字　143

2．設置CSS屬性　144

8.2.4　【相關工具】　147

1．類型　147

2．背景　148

3．區塊　149

4．方框　150

5．邊框　150

6．列表　151

7．定位　151

8．擴展　152

9．過渡　152

8.2.5　【實戰演練】——山地車網頁　153

8.3　愛晚工程網頁　153

8.3.1　【案例分析】　153

8.3.2　【設計理念】　153

8.3.3　【操作步驟】　154

8.3.4　【相關工具】　155

1．可應用過濾的HTML標簽　155

2．CSS的靜態過濾器　155

3．CSS的動態過濾器　157

8.3.5　【實戰演練】——

傲多特攝影網頁　157

8.4　綜合演練——愛插畫網頁　157

8.4.1　【案例分析】　157

8.4.2　【設計理念】　157

8.4.3　【知識要點】　157

8.5　綜合演練——

優選購物網頁　158

8.5.1　【案例分析】　158

8.5.2　【設計理念】　158

8.5.3　【知識要點】　158

第9章

模板和庫　159

9.1　電子吉他網頁　160

9.1.1　【案例分析】　160

9.1.2　【設計理念】　160

9.1.3　【操作步驟】　160

1．創建模板　160

2．創建可編輯區域　161

9.1.4　【相關工具】　162

1．“資源”面板　162

2．創建模板　162

3．定義和取消可編輯區域　163

4．創建基於模板的網頁　166

5．管理模板　167

9.1.5　【實戰演練】——

水果慕斯網頁　168

9.2　水果批發網頁　169

9.2.1　【案例分析】　169

9.2.2　【設計理念】　169

9.2.3　【操作步驟】　169

1．把經常用的圖標

　註冊到庫中　169

2．利用庫中註冊的項目

　製作網頁文檔　170

3．修改庫中註冊的項目　171

9.2.4　【相關工具】　173

1．創建庫文件　173

2．頁面添加庫項目　174

3．更新庫文件　174

9.2.5　【實戰演練】——

精品沙發網頁　176

9.3　綜合演練——游天下網頁　176

9.3.1　【案例分析】　176

9.3.2　【設計理念】　176

9.3.3　【知識要點】　176

9.4　綜合演練——

律師事務所網頁　177

9.4.1　【案例分析】　177

9.4.2　【設計理念】　177

9.4.3　【知識要點】　177

第　10章

表單和行為　178

10.1　廢品回收網頁　179

10.1.1　【案例分析】　179

10.1.2　【設計理念】　179

10.1.3　【操作步驟】　179

1．插入文本字段和

　文本區域　179

2．插入圖像域　180

10.1.4　【相關工具】　181

1．創建表單　181

2．表單的屬性　181

3．單行文本域　182

4．隱藏域　184

5．單選按鈕　184

6．單選按鈕組　185

7．復選框　185

8．創建列表和菜單　186

9．創建跳轉菜單　188

10．創建文件域　189

11．創建圖像域　190

12．“提交”按鈕、“重置”

按鈕和普通按鈕　191

10.1.5　【實戰演練】——

愛尚家裝網頁　192

10.2　愛在七夕網頁　192

10.2.1　【案例分析】　192

10.2.2　【設計理念】　192

10.2.3　【操作步驟】　193

1．顯示指定大小的彈出窗口　193

2．添加導航條和菜單欄　194

10.2.4　【相關工具】　195

1．“行為”面板　195

2．應用行為　195

3．調用JavaScript　196

4．打開瀏覽器窗口　196

5．轉到URL　198

6．檢查插件　199

7．檢查表單　199

8．交換圖像　200

9．顯示-隱藏層　201

10．設置容器的文本　203

11．設置狀態欄文本　204

12．設置文本域文字　204

13．設置框架文本　205

14．跳轉菜單　206

15．跳轉菜單開始　206

10.2.5　【實戰演練】——

風景攝影網頁　207

10.3　綜合演練——房屋

　評估網頁　207

10.3.1　【案例分析】　207

10.3.2　【設計理念】　207

10.3.3　【知識要點】　207

10.4　綜合演練——品牌

　商城網頁　208

10.4.1　【案例分析】　208

10.4.2　【設計理念】　208

10.4.3　【知識要點】　208

第　11章

網頁代碼　209

11.1　品質狂歡節網頁　210

11.1.1　【案例分析】　210

11.1.2　【設計理念】　210

11.1.3　【操作步驟】　210

11.1.4　【相關工具】　212

1．使用“參考”面板　212

2．代碼提示功能　212

3．使用標簽庫插入標簽　213

4．使用標簽選擇器插入標簽　214

5．使用標簽檢查器編輯代碼　215

6．使用標簽編輯器編輯代碼　216

11.1.5　【實戰演練】——

商業公司網頁　216

11.2　油畫藝術館網頁　216

11.2.1　【案例分析】　216

11.2.2　【設計理念】　217

11.2.3　【操作步驟】　217

1．製作瀏覽器窗口

　（永遠都不出現滾動條）　217

2．製作禁止使用單擊右鍵　218

11.2.4　【相關工具】　219

1．常用的HTML標簽　219

2．腳本語言　220

3．響應HTML事件　220

11.2.5　【實戰演練】——

人壽保險網頁　222

11.3　綜合演練——

　活動詳情網頁　222

11.3.1　【案例分析】　222

11.3.2　【設計理念】　222

11.3.3　【知識要點】　222

11.4　綜合演練——消防

　在線網頁　223

11.4.1　【案例分析】　223

11.4.2　【設計理念】　223

11.4.3　【知識要點】　223

第　12章

綜合設計實訓　224

12.1　個人網頁——張美麗的

　個人網頁　225

12.1.1　【項目背景及要求】　225

1．客戶名稱　225

2．客戶需求　225

3．設計要求　225

12.1.2　【項目創意及製作】　225

1．設計素材　225

2．設計作品　225

3．步驟提示　225

12.2　游戲娛樂網頁——

　娛樂星聞網頁　228

12.2.1　【項目背景及要求】　228

1．客戶名稱　228

2．客戶需求　228

3．設計要求　228

12.2.2　【項目創意及製作】　228

1．設計素材　228

2．設計作品　228

3．步驟提示　228

12.3　旅游休閑網頁——

　籃球運動網頁　231

12.3.1　【項目背景及要求】　231

1．客戶名稱　231

2．客戶需求　231

3．設計要求　231

12.3.2　【項目創意及製作】　232

1．設計素材　232

2．設計作品　232

3．步驟提示　232

12.4　房產網頁——

　焦點房產網頁　235

12.4.1　【項目背景及要求】　235

1．客戶名稱　235

2．客戶需求　235

3．設計要求　235

12.4.2　【項目創意及製作】　235

1．設計素材　235

2．設計作品　235

3．步驟提示　236

12.5　文化藝術網頁——

　書法藝術網頁　237

12.5.1　【項目背景及要求】　237

1．客戶名稱　237

2．客戶需求　237

3．設計要求　237

12.5.2　【項目創意及製作】　238

1．設計素材　238

2．設計作品　238

3．步驟提示　238