《網頁設計與製作入門與實戰》是2016年9月清華大學出版社出版的圖書，作者是智雲科技。
基本介紹
- 中文名：網頁設計與製作入門與實戰
- 作者：智雲科技
- 出版社：清華大學出版社
- 出版時間：2016年9月
- 定價：85 元
- ISBN：9787302445579
內容簡介,圖書目錄,
內容簡介
本書共分為16章，主要包括網頁設計與製作基礎、Photoshop網頁圖像設計、Dreamweaver網頁製作以及綜合案例實戰4個部分。通過對本書的學習，不僅能讓讀者學會Photoshop CS6和Dreamweaver CS6的基本操作方法，而且還能通過本書中列舉的實戰案例幫助讀者掌握網頁設計與製作中更多的小技巧，使讀者更加得心應手地設計與製作網頁。
本書主要定位於希望快速進入網頁設計與製作領域的初、中級用戶，特別適合初學網頁設計與製作的人員、大中專學生及網頁設計製作愛好者。此外，本書也可作為網頁設計與製作培訓班的教材和自學者的自學讀物。
圖書目錄
Chapter 01 網頁設計與製作基礎
1.1 了解網頁的基本概念 2
1.1.1 網頁設計基礎知識 2
1.1.2 網頁的基本組成元素 3
1.1.3 網站的分類 5
1.2 HTML的基本概念 7
1.2.1 HTML的含義與組成 8
1.2.2 認識HTML標籤 8
1.2.3 使用記事本編寫HTML代碼 9
1.2.4 使用瀏覽器查看頁面效果 10
1.3 網頁的色彩搭配 11
1.3.1 網頁的配色基礎 11
1.3.2 網頁色彩搭配方案 12
1.3.3 網頁配色的注意事項 14
1.4 了解域名與網站設計的流程 15
1.4.1 域名的常見分類 15
1.4.2 認識域名伺服器（DNS） 17
1.4.3 網站的設計流程 18
1.5 網頁製作的常用工具 20
1.5.1 網頁美化工具Photoshop 20
1.5.2 網頁編輯工具Dreamweaver 20
給你支招
如何通過網頁查看HTML原始碼並保存
21
留白在網頁中有哪些好處 22
Chapter 02 Photoshop CS6網頁界面設計基礎
2.1 熟悉Photoshop CS6的操作界面
24
2.1.1 選單欄和命令 24
2.1.2 工具選項欄 25
2.1.3 文檔視窗 25
2.1.4 工具箱 27
2.1.5 標題欄 28
2.1.6 浮動面板 28
2.1.7 狀態欄 28
2.2 Photoshop CS6的最佳化設定 29
2.2.1 自定義工作界面 29
2.2.2 修改工作區的背景顏色 30
2.2.3 自定義工具的快捷鍵 31
2.3 圖像的類型和解析度 32
2.3.1 圖像的類型 32
2.3.2 解析度 33
2.4 常見的頁面布局輔助工具 34
2.4.1 使用標尺定點陣圖像 34
2.4.2 使用參考線準確編輯圖像 35
2.4.3 使用格線精準調整圖像 36
2.4.4 為圖像添加注釋 37
給你支招
如何刪除自定義的工作界面 38
如何開啟Photoshop CS6的對齊功能 39
Chapter 03 圖像的基本處理
3.1 調整圖像與畫布 42
3.1.1 調整圖像尺寸 42
3.1.2 裁剪圖像大小 42
3.1.3 調整畫布尺寸 43
3.2 圖像的變換與變形操作 45
3.2.1 移動圖像 45
3.2.2 旋轉與縮放圖像 47
3.2.3 斜切圖像 48
3.3 選擇繪圖區域 49
3.3.1 選取規則區域 50
3.3.2 選取不規則區域 51
3.4 使用繪圖工具 55
3.4.1 畫筆工具 55
3.4.2 鉛筆工具 56
3.4.3 仿製圖章工具 57
3.4.4 橡皮擦工具 58
3.5 繪製矢量圖像 60
3.5.1 鋼筆工具 60
3.5.2 繪製形狀 62
給你支招
如何使用鉛筆工具快速繪製西洋棋
棋盤 63
如何將人物的頭髮調整為自己喜歡的
顏色 65
Chapter 04 圖層和文本的使用
4.1 Photoshop圖層概述 68
4.1.1 認識“圖層”面板 68
4.1.2 創建圖層 68
4.1.3 圖層的基本操作 69
4.1.4 圖層的合併和層組 71
4.2 套用圖層樣式效果 73
4.2.1 添加圖層樣式 73
4.2.2 多種圖層樣式效果介紹 74
4.3 創建文字 77
4.3.1 橫排文字工具 77
4.3.2 直排文字工具 78
4.3.3 橫排文字蒙版工具 79
4.4 編輯文字 81
4.4.1 創建變形文字 81
4.4.2 沿路徑排列文字 82
給你支招
如何將背景圖層轉換為普通圖層 84
如何修改圖層的名稱和顏色 85
如何創建段落文字 86
Chapter 05 網頁切片輸出與動畫製作
5.1 圖像的最佳化與輸出 88
5.1.1 圖像的格式 88
5.1.2 最佳化圖像 89
5.1.3 輸出Web圖像 91
5.2 創建和編輯切片 92
5.2.1 切片的類型 92
5.2.2 創建切片 92
5.2.3 編輯切片 93
5.3 管理切片 94
5.3.1 選擇、移動和調整切片 94
5.3.2 組合與鎖定切片 95
5.3.3 將切片輸出到網頁 96
5.4 創建GIF動畫 99
5.4.1 認識“時間軸”面板 99
5.4.2 創建動畫 99
5.4.3 保存動畫 102
給你支招
如何基於圖層創建切片 103
如何處理瀏覽器不顯示輸出的動畫的
情況 104
Chapter 06 常用網頁元素的設計
6.1 設計網頁主要元素 106
6.1.1 認識網頁主圖 106
6.1.2 設計標題文字 107
6.1.3 設計網頁按鈕 109
6.1.4 製作網頁背景圖像 112
6.2 設計網頁Logo 114
6.2.1 Logo的尺寸規格 114
6.2.2 Logo的表現形式 115
6.2.3 Logo的定位 115
6.2.4 Logo的設計方法 116
6.3 設計網頁Banner 119
6.3.1 網頁Banner的設計策劃 119
6.3.2 網頁Banner的設計技巧 121
給你支招
如何在網頁按鈕上添加放大鏡圖示 123
如何對多個圖層同時進行操作 124
Chapter 07 初識Dreamweaver CS6
7.1 Dreamweaver CS6的工作界面
126
7.1.1 選單欄 126
7.1.2 文檔視窗 127
7.1.3 面板組 129
7.1.4 “插入”面板 129
7.2 網頁製作的基本操作 131
7.2.1 新建網頁 131
7.2.2 保存網頁 132
7.2.3 打開網頁 133
7.2.4 預覽網頁 134
7.2.5 關閉網頁 135
7.3 創建、配置與發布本地站點 136
7.3.1 創建本地站點 136
7.3.2 配置遠程伺服器 137
7.3.3 發布站點 139
7.4 管理站點 139
7.4.1 刪除站點 140
7.4.2 編輯站點 140
7.4.3 導出站點 141
7.4.4 添加檔案和資料夾 142
7.4.5 重命名與刪除檔案/資料夾 142
給你支招
如何改變預覽網頁時的瀏覽器 143
如何導入站點檔案 145
Chapter 08 在網頁中插入基礎網頁元素
8.1 在對話框中設定頁面屬性 148
8.1.1 設定外觀 148
8.1.2 設定外觀 149
8.1.3 設定連結 150
8.1.4 設定標題 152
8.1.5 設定標題/編碼 153
8.2 設定字型與頁面背景的效果 155
8.2.1 添加頁面標題 155
8.2.2 為文字添加加粗和傾斜樣式 156
8.2.3 設定文字的大小 157
8.2.4 設定文本的顏色 157
8.3 文本的簡單操作 158
8.3.1 在網頁中錄入文本 158
8.3.2 讓文本換行分段 158
8.3.3 設定文本的對齊方式 159
8.3.4 設定文本的字型格式 160
8.4 項目列表和編號列表的使用 161
8.4.1 插入項目列表 161
8.4.2 插入編號列表 162
8.5 插入特殊頁面元素 163
8.5.1 插入換行符 163
8.5.2 插入水平線 164
8.5.3 插入日期 164
給你支招
如何利用跟蹤圖像製作網頁 166
如何插入特殊符號 167
Chapter 09 用圖像、多媒體與超連結豐富網頁
9.1 在網頁中插入圖像 170
9.1.1 插入圖像 170
9.1.2 調整圖像大小 172
9.1.3 調整圖片的亮度和對比度 173
9.1.4 裁剪頁面中的圖像 174
9.2 在網頁中插入多媒體 175
9.2.1 插入背景音樂 175
9.2.2 插入Flash動畫 177
9.2.3 插入FLV視頻 178
9.3 超連結概述 180
9.3.1 認識超連結的類型 180
9.3.2 連結路徑有哪些分類 182
9.4 創建網頁常用的超連結 184
9.4.1 創建文本連結 184
9.4.2 創建圖像連結 186
9.4.3 創建熱點連結 187
9.4.4 創建空連結 188
9.4.5 創建腳本連結 189
給你支招
如何插入非FLV格式的視頻檔案 190
如何在網頁中插入E-mail連結 192
Chapter 10 使用表格布局頁面
10.1 創建表格並輸入內容 194
10.1.1 精確插入指定行列的表格 194
10.1.2 在表格中輸入內容 195
10.2 格式化表格效果 196
10.2.1 表格與單元格的選擇 196
10.2.2 設定單元格大小和對齊方式 198
10.2.3 為表格添加框線 199
10.2.4 單元格中文本格式和背景格式的
設定 200
10.3 編輯表格 201
10.3.1 插入行或列 201
10.3.2 刪除行或列 202
10.3.3 複製、剪下和貼上單元格 203
10.3.4 合併單元格 205
10.4 表格的特殊處理 206
10.4.1 外部導入表格數據 206
10.4.2 對表格數據排序 207
給你支招
如何插入嵌入式表格 208
如何拆分合併後的單元格 209
Chapter 11 使用CSS樣式表美化頁面
11.1 認識CSS層疊樣式表 212
11.1.1 CSS層疊樣式表概述 212
11.1.2 CSS的3種類型 212
11.1.3 CSS的基本語法 213
11.2 網頁中套用CSS樣式的方法 215
11.2.1 嵌入式CSS 215
11.2.2 內聯式CSS 216
11.2.3 外聯式CSS 216
11.3 各種CSS樣式選擇器的創建 218
11.3.1 創建ID選擇器 218
11.3.2 創建標籤選擇器 220
11.3.3 創建類選擇器 221
11.3.4 創建複合選擇器 223
11.4 CSS中的常用樣式 225
11.4.1 字型樣式的設定 226
11.4.2 文本段落樣式的設定 228
11.4.3 背景樣式的設定 229
11.4.4 方框樣式的設定 231
11.4.5 框線樣式的設定 231
11.4.6 列表樣式的設定 233
11.4.7 定位樣式的設定 233
給你支招
創建外部CSS樣式檔案 234
如何將篩選結果保存到新工作表中 236
Chapter 12 利用Div+CSS布局網頁
12.1 初識Div標籤 238
12.1.1 Div標籤概述 238
12.1.2 插入Div標籤 238
12.1.3 為Div標籤添加CSS樣式表 240
12.1.4 Div+CSS的布局優勢 241
12.2 Div標籤的定位方法 242
12.2.1 盒子模型的概念 242
12.2.2 通過float屬性定位Div標籤 243
12.2.3 通過position屬性定位Div
標籤 244
12.3 Div標籤的常見布局模式 245
12.3.1 單行單列固定寬度 245
12.3.2 一列自適應 246
12.3.3 一列固定寬度居中 246
12.3.4 兩列固定寬度 247
12.3.5 兩列寬度自適應 248
12.3.6 兩行右列寬度自適應 248
給你支招
如何創建嵌套Div標籤 249
如何設定Div標籤對象的行高 250
Chapter 13 表單元素、模板和庫的運用
13.1 插入表單元素 252
13.1.1 什麼是表單 252
13.1.2 初步認識表單對象 252
13.1.3 插入表單域 256
13.1.4 插入文本域 257
13.1.5 插入密碼域 259
13.1.6 插入複選框 260
13.1.7 插入按鈕 261
13.2 使用模板 263
13.2.1 創建空白模板 263
13.2.2 定義模板中的可編輯區域 264
13.2.3 創建基於模板的網頁 265
13.2.4 從模板中分離網頁 266
13.3 創建和套用庫項目 267
13.3.1 創建庫項目 267
13.3.2 向頁面中插入庫項目 268
13.3.3 修改並更新庫項目 268
給你支招
如何自動選擇文本框中所有文本內容 270
如何將當前網頁創建為模板 271
如何在現有網頁檔案上套用模板 272
Chapter 14 使用JavaScript行為創建特效網頁
14.1 認識JavaScript 274
14.1.1 JavaScript的含義 274
14.1.2 事件 274
14.1.3 熟悉動作類型 275
14.1.4 如何使用JavaScript 275
14.2 在網頁中添加行為 276
14.2.1 交換圖像 276
14.2.2 打開瀏覽器視窗 278
14.2.3 調用JavaScript 279
14.2.4 檢查表單 280
14.3 jQuery的套用 281
14.3.1 使用jQuery的核心函式 282
14.3.2 使用jQuery選擇器 282
14.3.3 使用jQuery操作對象的屬性 284
給你支招
如何恢復交換圖像 285
解決預覽頁面時腳本的執行問題 286
Chapter 15 線上出境游網站設計
15.1 案例製作的效果和思路 288
15.2 網站的結構設計 289
15.2.1 製作網站布局結構 289
15.2.2 創建網站文檔 289
15.2.3 為頁面設定輔助線 290
15.2.4 製作頁面背景 291
15.3 設計頁面主體的內容 292
15.3.1 設計頁面的頭部 292
15.3.2 設計頁面的中部 295
15.3.3 設計頁面的底部 297
15.4 輸出網站頁面設計圖 298
15.4.1 將圖像保存為JPG格式 298
15.4.2 切割並輸出圖像 299
15.5 案例製作總結和答疑 301
給你支招
如何下載網站前台的布局模板 301
如何避免導出的切片圖像呈現黑白色 302
Chapter 16 製作現代家居裝飾網站
16.1 案例製作效果和思路 304
16.2 創建網站的基礎框架 306
16.2.1 創建網站站點 306
16.2.2 創建網站模板 307
16.2.3 創建樣式檔案 309
16.2.4 將樣式表連結到模板中 311
16.3 在模板中製作頭部和底部 312
16.3.1 製作頁面頭部 312
16.3.2 製作頁面底部 316
16.4 通過模板製作網頁 317
16.4.1 製作現代家居裝飾網首頁 317
16.4.2 製作現代家居裝飾網展示頁 320
16.4.3 修改模板頁中的導航選單 322
16.5 案例製作總結和答疑 323
給你支招
如何在Dreamweaver中使用注釋
標籤 324
如何在Dreamweaver中添加外部
字型 325
