網頁設計與製作

《網頁設計與製作》共14章，主要介紹如何在網頁中插入文本、圖像、媒體、超級鏈接、表單等網頁元素並設置其屬性，如何運用表格、框架、AP Div、模板、庫等工具對網頁進行佈局，如何運用CSS控制網頁外觀，如何使用行為和Spry構件完善網頁功能，如何在可視化環境下創建應用程序，如何使用Photoshop CS3處理網頁圖像，如何使用Flash CS3製作網頁動畫，如何綜合運用網頁三劍客製作生動活潑的網頁以及創建、管理和維護網站的基本知識。

《網頁設計與製作》遵循由淺入深、循序漸進的原則進行編排，力求把可視化操作與源代碼學習有機地結合在一起。《網頁設計與製作》可作為高等職業學校“網頁設計與製作”課程的教材，也可以作為網頁設計愛好者的入門讀物 ^[1]  。

第1章 網頁製作基礎 1

1.1 常用術語 1

1.1.1 Internet 1

1.1.2 Intranet 1

1.1.3 ISP 2

1.1.4 IP 2

1.1.5 域名 2

1.1.6 網站 2

1.1.7 URL 2

1.1.8 FTP 3

1.1.9 WWW 3

1.1.10 超級文本 3

1.1.11 HTML 3

1.1.12 ASP 4

1.1.13 VBScript和JavaScript 4

1.2 網頁元素 5

1.2.1 文本 5

1.2.2 圖像 6

1.2.3 動畫 6

1.2.4 音頻 7

1.2.5 視頻 8

1.3 瞭解網頁製作工具 8

1.4 網頁佈局類型 9

1.4.1 國字型 9

1.4.2 匡字型 9

1.4.3 三字型 10

1.4.4 川字型 10

1.4.5 其他類型 11

1.5 網站建設流程 11

1.5.1 前期策劃 11

1.5.2 網頁製作 12

1.5.3 網站發佈 12

1.5.4 網站推廣 12

1.5.5 後期維護 13

1.6 建站方式 13

1.6.1 實體主機 13

1.6.2 主機託管 13

1.6.3 虛擬主機 13

小結 14

習題 14

第2章 創建和管理站點 15

2.1 認識Dreamweaver CS3 15

2.1.1 工作界面 15

2.1.2 常用工具欄 17

2.1.3 常用面板 19

2.1.4 工作區佈局 20

2.2 創建站點 21

2.2.1 定義站點 21

2.2.2 設置首選參數 23

2.2.3 創建文件夾和文件 25

2.3 管理站點 26

2.3.1 編輯站點 26

2.3.2 複製站點 27

2.3.3 刪除站點 27

2.3.4 導出站點 27

2.3.5 導入站點 28

2.4 實例——導入、編輯和導出站點 28

小結 30

習題 30

第3章 創建和設置文檔 31

3.1 創建和保存文檔 31

3.1.1 創建文檔 31

3.1.2 保存文檔 33

3.2 添加文檔內容 33

3.2.1 輸入文本 34

3.2.2 導入文檔內容 34

3.2.3 複製和粘貼 35

3.3 設置文檔格式 37

3.3.1 設置瀏覽器標題 37

3.3.2 分段和換行 37

3.3.3 設置文檔標題格式 38

3.3.4 添加空格 39

3.3.5 設置頁邊距 40

3.3.6 設置文本的字體、大小和顏色 41

3.3.7 設置文本樣式 42

3.3.8 設置文本的對齊方式 43

3.3.9 設置文本的縮進和凸出 43

3.3.10 應用列表 43

3.3.11 插入水平線 45

3.3.12 插入日期 45

3.4 實例——設置“國外知名電影節”文檔格式 46

小結 48

習題 48

第4章 使用圖像和媒體 51

4.1 認識網頁常用圖像格式 51

4.1.1 GIF圖像 51

4.1.2 JPEG圖像 51

4.1.3 PNG圖像 52

4.2 在網頁中應用圖像 52

4.2.1 插入圖像 52

4.2.2 設置圖像屬性 55

4.3 插入圖像佔位符 56

4.4 設置網頁背景顏色和背景圖像 57

4.4.1 設置背景顏色 57

4.4.2 設置背景圖像 59

4.5 在網頁中插入媒體 60

4.5.1 插入Flash動畫 60

4.5.2 插入圖像查看器 62

4.5.3 插入ActiveX 64

4.6 實例——設置“西湖十景”網頁 67

小結 69

習題 69

第5章 創建和設置超級鏈接 71

5.1 認識超級鏈接 71

5.1.1 URL 71

5.1.2 路徑 72

5.1.3 鏈接目標 72

5.1.4 超級鏈接的分類 72

5.2 創建超級鏈接 73

5.2.1 文本超級鏈接 73

5.2.2 圖像超級鏈接 76

5.2.3 圖像地圖 77

5.2.4 電子郵件超級鏈接 78

5.2.5 錨記超級鏈接 80

5.2.6 空鏈接 81

5.2.7 鼠標經過圖像 81

5.2.8 導航條 82

5.2.9 Flash文本 85

5.2.10 Flash按鈕 86

5.2.11 腳本鏈接 87

5.3 實例——設置“航空母艦”網頁中的超級鏈接 88

小結 88

習題 89

第6章 使用表格佈局頁面 91

6.1 認識表格 91

6.2 創建表格 92

6.2.1 插入表格 92

6.2.2 選擇表格 93

6.2.3 插入行或列 95

6.2.4 刪除行或列 95

6.2.5 合併單元格 95

6.2.6 拆分單元格 96

6.2.7 複製或剪切 96

6.2.8 粘貼表格 96

6.2.9 移動表格內容 97

6.3 設置表格和單元格屬性 97

6.3.1 設置表格屬性 98

6.3.2 設置單元格屬性 99

6.4 嵌套表格 100

6.5 實例——使用表格佈局“一翔文學”網頁 101

6.5.1 製作頁眉 101

6.5.2 製作主體 102

6.5.3 製作頁腳 103

小結 104

習題 104

第7章 使用CSS樣式控制網頁外觀 107

7.1 認識CSS樣式 107

7.2 【CSS樣式】面板 108

7.3 CSS樣式的類型 108

7.4 創建CSS樣式 110

7.5 CSS樣式的屬性 113

7.5.1 類型 113

7.5.2 背景 114

7.5.3 區塊 115

7.5.4 方框 116

7.5.5 邊框 117

7.5.6 列表 118

7.5.7 定位 118

7.5.8 擴展 120

7.6 CSS樣式的應用 120

7.6.1 應用CSS樣式 120

7.6.2 附加樣式表 122

7.7 實例——設置“一翔商城”網頁樣式 122

7.7.1 設置頁眉CSS樣式 123

7.7.2 設置網頁主體的CSS樣式 124

7.7.3 設置頁腳的CSS樣式 127

小結 127

習題 127

第8章 使用框架和AP Div佈局頁面 129

8.1 創建框架 129

8.1.1 創建框架 129

8.1.2 保存框架 131

8.1.3 在框架中打開網頁文檔 131

8.1.4 拆分框架 132

8.2 設置框架 134

8.2.1 選擇框架和框架集 134

8.2.2 設置框架集屬性 134

8.2.3 設置框架屬性 136

8.2.4 設置框架中的超級鏈接 137

8.3 創建AP Div 138

8.3.1 創建AP Div 138

8.3.2 修改AP Div的默認設置 139

8.4 設置AP Div 140

8.4.1 選擇AP Div 140

8.4.2 設置AP Div屬性 141

8.4.3 縮放AP Div 142

8.4.4 移動AP Div 143

8.4.5 對齊AP Div 143

8.5 Div標籤 144

8.6 實例——佈局“天搜”網頁 145

8.6.1 佈局頁眉 145

8.6.2 佈局主體 146

8.6.3 佈局頁腳 148

小結 149

習題 149

第9章 使用庫、模板和行為 152

9.1 創建庫項目 152

9.1.1 創建空白庫項目 152

9.1.2 從已有的網頁創建庫項目 154

9.1.3 修改庫項目 155

9.1.4 刪除庫項目 155

9.2 應用庫項目 156

9.2.1 插入庫項目 156

9.2.2 更新應用了庫項目的文檔 156

9.2.3 從源文件中分離庫項目 157

9.3 創建模板 157

9.3.1 創建空白模板文件 158

9.3.2 添加模板對象 159

9.3.3 將現有網頁保存為模板 161

9.3.4 刪除模板 163

9.4 應用模板 163

9.4.1 使用模板創建網頁 163

9.4.2 更新應用了模板的文檔 165

9.4.3 將網頁從模板中分離 165

9.5 使用行為 165

9.5.1 彈出信息 166

9.5.2 打開瀏覽器窗口 167

9.5.3 調用JavaScript 168

9.5.4 改變屬性 168

9.5.5 交換圖像 169

9.5.6 拖動AP元素 170

9.5.7 Spry效果 171

9.6 實例——製作“職業學校”網頁模板 172

9.6.1 創建和編排庫項目 172

9.6.2 創建和編輯模板文檔 174

9.6.3 使用模板創建網頁 177

小結 178

習題 178

第10章 創建動態網頁 180

10.1 插入表單對象 180

10.1.1 表單 180

10.1.2 文本域和文本區域 181

10.1.3 單選按鈕和單選按鈕組 183

10.1.4 複選框 184

10.1.5 列表/菜單 185

10.1.6 跳轉菜單 185

10.1.7 圖像域 186

10.1.8 文件域 187

10.1.9 隱藏域 187

10.1.10 字段集 187

10.1.11 標籤 188

10.1.12 按鈕 188

10.2 Spry驗證表單對象 189

10.2.1 Spry驗證文本域 189

10.2.2 Spry驗證文本區域 190

10.2.3 Spry驗證複選框 190

10.2.4 Spry驗證選擇 191

10.3 搭建ASP應用程序開發環境 191

10.3.1 配置IIS服務器 192

10.3.2 定義可以使用腳本語言的站點 192

10.3.3 創建後台數據庫 192

10.4 製作數據列表 193

10.4.1 創建數據庫連接 193

10.4.2 創建記錄集 196

10.4.3 添加動態數據 198

10.4.4 添加重複區域 199

10.4.5 記錄集分頁 200

10.4.6 顯示記錄計數 201

10.5 插入、更新和刪除記錄 201

10.5.1 插入記錄 201

10.5.2 更新記錄 203

10.5.3 刪除記錄 207

10.6 用户身份驗證 209

10.6.1 限制對頁的訪問 209

10.6.2 用户登錄 209

10.6.3 用户註銷 210

10.6.4 檢查新用户 211

10.7 實例——製作用户信息查詢網頁 212

小結 213

習題 213

第11章 使用Photoshop CS3處理圖像 216

11.1 認識Photoshop CS3 216

11.1.1 屬性欄 217

11.1.2 工具箱 217

11.1.3 控制面板 217

11.2 新建和存儲文件 218

11.2.1 新建文件 218

11.2.2 存儲文件 219

11.3 編輯圖像 221

11.3.1 調整圖像大小 221

11.3.2 調整畫布大小 221

11.3.3 旋轉畫布 222

11.3.4 選擇圖像 222

11.3.5 羽化圖像 223

11.3.6 裁剪圖像 224

11.3.7 裁切圖像 225

11.3.8 自由變換圖像 225

11.3.9 變換圖像 226

11.3.10 填充選區 227

11.3.11 描邊選區 227

11.4 編輯文字 228

11.4.1 輸入文字 228

11.4.2 柵格化文字 229

11.4.3 輸入段落文字 230

11.4.4 設置文字屬性 231

11.4.5 路徑和文字 231

11.5 使用圖層 233

11.5.1 認識圖層 233

11.5.2 圖層基本操作 235

11.5.3 圖層樣式 237

11.6 切割圖像 237

11.6.1 創建切片 237

11.6.2 保存切片 238

11.7 實例——使用Photoshop CS3設計網頁 239

小結 241

習題 241

第12章 使用Flash CS3製作動畫 243

12.1 認識Flash CS3 243

12.1.1 工具箱 244

12.1.2 時間軸 244

12.1.3 常用面板 244

12.1.4 場景和舞台 246

12.2 創建和保存Flash文件 246

12.2.1 創建Flash文件 246

12.2.2 保存Flash文件 247

12.3 使用時間軸 248

12.3.1 時間軸的功能和作用 248

12.3.2 圖層的基本類型 249

12.3.3 圖層的基本操作 249

12.3.4 幀的基本類型 250

12.3.5 幀的基本操作 251

12.4 使用元件、庫和實例 252

12.4.1 創建元件 252

12.4.2 管理庫 254

12.4.3 創建和編輯實例 255

12.5 實例——創建和導出Flash動畫 258

12.5.1 製作逐幀動畫 258

12.5.2 製作形狀補間動畫 259

12.5.3 製作動作補間動畫 261

12.5.4 製作遮罩動畫 262

12.5.5 製作引導動畫 263

12.5.6 導出Flash動畫 265

小結 265

習題 266

第13章 使用網頁三劍客製作網頁 267

13.1 實例概述 267

13.2 網站策劃 268

13.3 定義站點 269

13.4 製作網站首頁 270

13.4.1 製作網站標誌 270

13.4.2 製作宣傳標語 272

13.4.3 製作導航圖像 275

13.4.4 製作Flash動畫 277

13.4.5 佈局網站首頁 279

13.5 製作網站二級頁面 282

13.5.1 製作二級頁面導航圖像 282

13.5.2 製作庫文件 283

13.5.3 製作二級頁面模板 284

13.5.4 使用模板生成二級頁面 285

13.6 發佈網站 287

小結 287

習題 287

第14章 發佈和維護網站 288

14.1 配置IIS服務器 288

14.1.1 配置Web服務器 288

14.1.2 配置FTP服務器 290

14.2 發佈網站 290

14.3 維護網站 292

14.3.1 檢查鏈接 292

14.3.2 修改鏈接 293

14.3.3 查找和替換 294

14.3.4 清理文檔 294

14.3.5 保持同步 295

小結 296

習題 296