網頁設計與製作（附微課視頻 第2版）

本書採取理論與實踐一體化教學模式即，既知“其一”還要知“其二”，也就說既要考慮軟件工具命令屬性講解，也要融合實例運用操作，達到兩者有機融合。但現在有些網頁設計製作方面的教材，定位過泛，在廣度和深度上把握不是太好，有的書全部以“實例”方式進行編寫，對有一定網頁設計基礎的人來說，易學或許會有提高，但對於一個初學者來說，如果只學習這個例子的操作，換一個例子恐怕就不會幫相關的命令操作了。

本書定位為針對文科類以及非電腦類理工科專業的使用教材，因此考慮這些專業學生的電腦技能水平。本書的定位非常明確，就是適應與這些專業學生，即初學者，同時也適應於高職類學生。

本教材以網站設計與製作為主線，採用由淺入深、循序漸進的方式，從基本概念、網站規劃與設計入手，逐步展示網頁製作與網站開發的全過程，邏輯性強，層次分明，加強對各章節中重點難點的講解；圖文並茂，展現網頁

雷伟军，陕西西安人，毕业于西安电子科技大学，软件工程硕士，工程师、副教授（双职称，学校双师型教师），西安市教育信息化专家委员会专家，美国“英特尔·未来教育”主讲教师。

目 錄

第 1章　網頁製作與HTML　5

　基礎知識　1

1.1　網頁製作基礎知識　1

1.1.1　網頁的定義和分類　1

1.1.2　網頁設計的相關概念　2

1.1.3　網頁的基本組成元素　4

1.1.4　網頁製作開發工具　6

1.1.5　如何學好網頁製作　7

1.2　Dreamweaver CS6概述　8

1.2.1　啟動與退出Dreamweaver CS6　8

1.2.2　Dreamweaver CS6的主界面　8

1.3　網頁標準技術與HTML 5　10

1.3.1　網頁結構語言　11

1.3.2　在Dreamweaver CS6中創建

HTML　5文檔　13

1.3.3　HTML 5常用標簽　15

1.3.4　HTML 5新增標簽　21

1.4　綜合案例　22

1.4.1　用記事本編寫一個網頁文檔　22

1.4.2　用Dreamweaver CS6製作

網頁文檔　23

1.4.3　編寫代碼實現簡單網頁　23

習題　24

第 2章　網頁整體規劃設計　26

2.1　網頁設計基礎　26

2.1.1　網頁佈局類型　26

2.1.2　網頁整體造型　31

2.1.3　網頁設計要素　31

2.2　確定網站主題　32

2.2.1　網站的設計流程　32

2.2.2　網站主題的確定　33

2.3　前期規劃與內容組織　34

2.3.1　網站的需求分析　34

2.3.2　網站的內容組織　34

2.4　色彩基礎知識　35

2.4.1　色彩理論　35

2.4.2　216網頁安全顏色　37

2.5　網站中的色彩應用　38

2.5.1　網頁色彩規則　38

2.5.2　網頁元素之間色彩搭配　39

2.6　綜合案例：飾品銷售網站主頁整體

　 設計　40

習題　41

第3章　建立本地站點　42

3.1　創建本地站點　42

3.1.1　什麽是站點　42

3.1.2　創建本地站點的步驟　43

3.2　管理本地站點　44

3.2.1　切換站點　44

3.2.2　站點的其他操作　44

3.3　綜合案例：創建“我的第 一個網站”　47

習題　48

第4章　製作文本　50

4.1　創建文檔　50

4.1.1　新建文檔　50

4.1.2　保存文檔　51

4.1.3　打開文檔　52

4.2　文本編輯　52

4.2.1　輸入文本　52

4.2.2　設置文本格式　54

4.2.3　設置文本樣式　54

4.2.4　段落編輯　58

4.2.5　在頁面中添加其他元素　59

4.3　在文本中添加項目符號和編號　61

4.3.1　添加項目符號和編號　61

4.3.2　修改項目符號和編號　63

4.4　水平線、網格與標尺　63

4.4.1　水平線　63

4.4.2　網格　66

4.4.3　標尺　67

4.5　綜合案例：製作文本　67

習題　68

第5章　圖像與多媒體　70

5.1　網頁中常用的圖像格式　70

5.1.1　GIF格式圖像　70

5.1.2　JPEG格式圖像　70

5.1.3　PNG格式圖像　71

5.2　插入與設置圖像　71

5.2.1　在網頁中插入圖像　71

5.2.2　設置圖像屬性　72

5.3　插入其他圖像元素　73

5.3.1　插入圖像占位符　73

5.3.2　插入鼠標光標經過圖像　74

5.4　多媒體在網頁中的應用　76

5.4.1　添加Flash動畫對象　76

5.4.2　插入FLV視頻　78

5.4.3　網絡中的音頻文件類型　80

5.4.4　網絡中的視頻文件類型　80

5.4.5　在網頁中插入Shockwave影片　81

5.4.6　在網頁中插入ActiveX控件　82

5.4.7　在網頁中插入插件　83

5.4.8　在網頁中插入背景音樂　84

5.5　綜合案例：多媒體製作　85

5.5.1　插入圖片　86

5.5.2　在網頁中添加音、視頻媒體　87

習題　89

第6章　網頁中的超鏈接　90

6.1　超鏈接概述　90

6.1.1　超鏈接的定義　90

6.1.2　超鏈接的類型　90

6.2　關於鏈接路徑　91

6.2.1　路徑　92

6.2.2　相對路徑　92

6.2.3　根路徑　93

6.3　創建超鏈接的方法　94

6.3.1　使用“屬性”面板創建超鏈接　94

6.3.2　使用指向文件圖標創建超鏈接　94

6.3.3　使用菜單創建超鏈接　94

6.4　各種類型超鏈接的創建　95

6.4.1　文本超鏈接　95

6.4.2　下載文件鏈接　99

6.4.3　創建電子郵件超鏈接　100

6.4.4　圖像超鏈接　101

6.4.5　創建錨記超鏈接　103

6.4.6　創建空鏈接　104

6.4.7　創建腳本超鏈接　105

6.5　管理超鏈接　105

6.5.1　自動更新鏈接　106

6.5.2　在站點範圍內更改鏈接　106

6.5.3　檢查站點中的鏈接錯誤　107

6.6　綜合案例：創建“我愛攝影網”　108

習題　110

第7章　表格使用與簡單頁面

　佈局　111

7.1　創建表格　111

7.1.1　插入表格　111

7.1.2　在表格中輸入網頁元素　113

7.2　設置表格及單元格的屬性　116

7.2.1　設置表格屬性　116

7.2.2　設置單元格屬性　117

7.3　表格與單元格具體操作　121

7.3.1　表格的操作　121

7.3.2　網頁中表格行與列的操作　122

7.3.3　單元格的操作　124

7.4　表格的進一步操作　131

7.4.1　表格分隔線與邊框操作　131

7.4.2　表格特效設置　133

7.5　表格擴展模式　134

7.5.1　表格擴展模式的進入和退出　134

7.5.2　表格擴展模式的應用　135

7.6　綜合案例：用表格佈局模式設計

　網頁　138

習題　140

第8章　設計框架網頁　141

8.1　框架網頁　141

8.1.1　框架網頁概述　141

8.1.2　創建各種框架　141

8.1.3　編輯框架集　143

8.1.4　向框架中添加內容　145

8.1.5　保存框架集　146

8.2　框架屬性　148

8.2.1　佈局框架基本屬性　148

8.2.2　框架鏈接　151

8.2.3　框架標簽　152

8.3　內嵌框架Iframe　154

8.3.1　關於Iframe　154

8.3.2　Iframe屬性　155

8.4　綜合案例：佈置框架　157

習題　158

第9章　CSS樣式表與Div佈局　159

9.1　CSS的基本概念　159

9.1.1　CSS簡介　160

9.1.2　CSS基本語法　160

9.1.3　CSS樣式的分類　161

9.1.4　CSS選擇器　162

9.1.5　在Dreamweaver CS6中

使用CSS樣式表　166

9.2　設置文本CSS樣式　170

9.2.1　設置文字樣式　170

9.2.2　設置文本對象樣式　172

9.3　修飾背景和邊框　173

9.3.1　背景顏色和背景圖像　173

9.3.2　設置邊框樣式　175

9.4　盒模型　176

9.4.1　盒模型簡介　176

9.4.2　設置標簽的顯示方式　178

9.5　CSS+Div佈局　178

9.5.1　Div標簽　179

9.5.2　span標簽　180

9.5.3　三種佈局方式　181

9.6　綜合案例　184

9.6.1　使用CSS實現網頁圖文混排

效果　184

9.6.2　使用CSS+Div佈局網頁　185

習題　187

第 10章　使用行為　189

10.1　認識行為　189

10.1.1　行為　189

10.1.2　事件　189

10.1.3　動作　190

10.2　行為的基本操作　191

10.2.1　“行為”面板　191

10.2.2　添加行為　192

10.2.3　編輯行為　192

10.3　文本類行為　193

10.3.1　彈出消息　193

10.3.2　設置狀態欄文本　194

10.4　圖像類行為　194

10.5　代碼屬性類行為　196

10.6　跳轉類行為　197

10.7　效果類行為　198

10.8　綜合案例：製作一個攝影

　網站　198

習題　200

第 11章　網頁交互和特效　201

11.1　網頁的交互行為　201

11.1.1　拖動AP元素　201

11.1.2　顯示隱藏元素　203

11.2　Spry框架　204

11.2.1　Spry效果　205

11.2.2　Spry菜單欄　205

11.2.3　Spry選項卡式面板　207

11.2.4　Spry折疊式　207

11.2.5　Spry可折疊面板　208

11.3　綜合案例：製作導航條　208

習題　211

第 12章　網頁表單的應用　212

12.1　網頁中的表單知識　212

12.1.1　網頁中表單概述　213

12.1.2　創建表單域　213

12.2　插入文本域　215

12.2.1　文本字段　215

12.2.2　創建文本區域　217

12.3　插入單選按鈕和單選按鈕組　218

12.3.1　插入單個單選按鈕　218

12.3.2　插入單選按鈕組　219

12.4　插入復選框和復選框組　220

12.4.1　插入單個復選框　220

12.4.2　插入復選框組　221

12.5　插入列表和菜單　221

12.5.1　菜單表單　221

12.5.2　列表表單　223

12.5.3　跳轉菜單　224

12.6　插入按鈕和文件域　226

12.6.1　按鈕表單　227

12.6.2　插入文件域　228

12.7　驗證表單內容　229

12.7.1　Spry表單驗證技術　229

12.7.2　Spry驗證文本域　229

12.7.3　Spry驗證密碼域　230

12.7.4　Spry驗證文本區域　231

12.7.5　Spry驗證列表　231

12.7.6　Spry驗證單選按鈕　232

12.7.7　Spry驗證復選框　232

12.8　綜合案例　233

習題　235

第 13章　網站綜合設計與製作

　實例　237

13.1　班級網站的規劃與設計　237

13.1.1　網站定位　237

13.1.2　網站需求分析　237

13.1.3　欄目設計　238

13.1.4　站點定義與目錄管理　238

13.1.5　班級網站的風格設計　238

13.2　網頁設計與製作　239

13.2.1　頁面佈局　239

13.2.2　製作網站首頁　241

13.2.3　二級頁面的製作　250

13.2.4　內容頁面的製作　252

習題　252