目錄
第1篇 基礎知識
第1章開啟網頁設計之路——網頁設計與制作基礎
1.1 認識網頁和網站 4
1.1.1什麼是網頁 4
1.1.2什麼是網站 5
1.1.3網站的種類和特點 5
1.2 網頁的相關概念 6
1.2.1因特網與萬維網 6
1.2.2瀏覽器與HTML 6
1.2.3URL、域名與IP地址 7
1.2.4上傳和下載 8
1.3 網頁的HTML構成 8
1.3.1文檔標簽 9
1.3.2頭部標簽 9
1.3.3主體標簽 9
1.4
HTML常用標簽 9
1.5 實戰演練——制作日程表 21
1.6 高手甜點 25
1.7 跟我練練手 26
第2章磨刀不誤砍柴工——認識Dreamweaver CC7
2.1 走進Dreamweaver
CC 28
2.1.1案例1——安裝Dreamweaver
CC 28
2.1.2案例2——啟動Dreamweaver
CC 29
2.2
Dreamweaver CC的工作環境 30
2.2.1認識Dreamweaver CC的工作界面 30
2.2.2熟悉【插入】面板組 32
2.3 體驗Dreamweaver
CC的新增功能 34
2.4 認識站點 36
2.5 創建站點 36
2.5.1案例3——創建本地站點 37
2.5.2案例4——創建遠程站點 37
2.6 管理站點 38
2.6.1案例5——打開站點 38
2.6.2案例6——編輯站點 39
2.6.3案例7——刪除站點 39
2.6.4案例8——復制站點 40
2.7 操作站點文件及文件夾 40
2.7.1案例9——創建文件夾 40
2.7.2案例10——創建文件 41
2.7.3案例11——文件或文件夾的移動和復制 41
2.7.4案例12——刪除文件或文件夾 42
2.8 實戰演練1——創建本地站點 42
2.9 實戰演練2——創建站點文件和文件夾 43
2.10
高手甜點 45
2.11
跟我練練手 46
第3章網頁內容之美——創建網頁中的文本
3.1 網頁設計的基本操作 48
3.1.1案例1——新建網頁 48
3.1.2案例2——保存網頁 48
3.1.3案例3——打開網頁 49
3.1.4案例4——預覽網頁 49
3.2 設置頁面屬性 50
3.3 用文字充實網頁 54
3.3.1案例5——插入文字 54
3.3.2案例6——設置字體 55
3.3.3案例7——設置字號 57
3.3.4案例8——設置字體顏色 57
3.3.5案例9——設置字體樣式 58
3.3.6案例10——編輯段落 59
3.3.7案例11——檢查拼寫 64
3.3.8案例12——創建項目列表 65
3.4 特殊文本的操作 67
3.4.1案例13——插入換行符 67
3.4.2案例14——插入水平線 67
3.4.3案例15——插入日期 68
3.4.4案例16——插入特殊字符 69
3.4.5案例17——插入注釋 70
3.5 實戰演練——設置主頁中的跟蹤圖像 71
3.6 高手甜點 73
3.7 跟我練練手 74
第2篇 核心技術
第4章有圖有真相——使用圖像和多媒體
4.1 選擇適合網頁中圖像的格式 78
4.2 用圖像美化網頁 79
4.2.1案例1——插入圖像 79
4.2.2案例2——圖像屬性設置 80
4.2.3案例3——圖像的對齊方式 82
4.2.4案例4——插入鼠標經過圖像 83
4.2.5案例5——插入圖像占位符 84
4.3 在網頁中插入多媒體 85
4.3.1案例6——插入背景音樂 85
4.3.2案例7——插入Flash動畫 86
4.3.3案例8——插入FLV 87
4.3.4案例9——插入HTML5音頻 88
4.3.5案例10——插入HTML5視頻 89
4.4實戰演練——制作圖文並茂的網頁 90
4.5 高手甜點 92
4.6 跟我練練手 92
第5章Web新面孔——HTML素與屬性速覽
5.1 新增的主素 94
5.1.1案例1——sect素 94
5.1.2案例2——arti素 94
5.1.3案例3——as素 97
5.1.4案例4——素 98
5.1.5案例5——t素 100
5.2 新增的非主素 101
5.2.1案例6——hea素 101
5.2.2案例7——hgr素 102
5.2.3案例8——foo素 103
5.2.4案例9——fig素 104
5.2.5案例10——addr素 105
5.3 新增其素 107
5.3.1案例11——m素 107
5.3.2案例12——rp、rt與r素 107
5.3.3案例13——progr素 108
5.3.4案例14——comm素 109
5.3.5案例15——em素 109
5.3.6案例16——details與summ素 110
5.3.7案例17——datal素 110
5.4 新增的全局屬性 111
5.4.1案例18——content
Editable屬性 111
5.4.2案例19——spellcheck屬性 112
5.4.3案例20——tabIndex屬性 112
5.5 新增的其他屬性與廢除的屬性 114
5.5.1案例21——表單相關的屬性 114
5.5.2案例22——鏈接相關屬性 119
5.5.3案例23——其他新增屬性 121
5.5.4案例24——HTML5廢除的屬性 121
5.6 實戰演練——制作HTML5的網頁 123
5.7 高手甜點 125
5.8 跟我練練手 126
第6章不在網頁中迷路——設計網頁超鏈接
6.1 鏈接與路徑 128
6.1.1鏈接的概念 128
6.1.2鏈接的路徑 128
6.1.3鏈接的類型 129
6.2 添加網頁超鏈接 130
6.2.1案例1——添加文本鏈接 130
6.2.2案例2——添加圖像鏈接 131
6.2.3案例3——創建外部鏈接 132
6.2.4案例4——創建錨記鏈接 132
6.2.5案例5——創建圖像熱點鏈接 133
6.2.6案例6——創建電子郵件鏈接 134
6.2.7案例7——創建下載文件的鏈接 135
6.2.8案例8——創建空鏈接 136
6.2.9案例9——創建腳本鏈接 136
6.2.10
案例10——鏈接的檢查 137
6.3 實戰演練——為企業網站添加友情鏈接 138
6.4 高手甜點 139
6.5 跟我練練手 139
第7章簡單的網頁布局——表格的應用
7.1 插入表格 142
7.2 選擇表格 143
7.2.1案例1——選擇完整的表格 143
7.2.2案例2——選擇行和列 144
7.2.3案例3——格 144
7.3 表格屬性 145
7.3.1案例4——格屬性 145
7.3.2案例5——設置整個表格屬性 146
7.4 操作表格 147
7.4.1案例6——調整大小 147
7.4.2案例7——增加行、列 147
7.4.3案例8——刪除行、列 149
7.4.4案例9——剪切、復制和格 149
7.4.5案例10——合並和格 150
7.5操作表格數據 151
7.5.1案例11——向表格中輸入文本 151
7.5.2案例12——向表格中插入圖像 151
7.5.3案例13——表格數據的排序 152
7.5.4案例14——導入表格數據 153
7.5.5案例15——導出表格數據 153
7.6 實戰演練——使用表格布局網頁 154
7.7 高手甜點 157
7.8 跟我練練手 158
第8章讓網頁互動起來——使用網頁表單和行為
8.1 認識表單 160
8.2 在網頁中插素 160
8.2.1案例1——插入表單域 161
8.2.2案例2——插入文本域 161
8.2.3案例3——插入密碼域 163
8.3 在網頁中插入復選框和單選按鈕 164
8.3.1案例4——插入復選框 164
8.3.2案例5——插入單選按鈕 165
8.4 制作網頁菜單和列表 165
8.4.1案例6——插入下拉菜單 165
8.4.2案例7——插入滾動列表 166
8.5 在網頁中插入按鈕 167
8.5.1案例8——插入按鈕 167
8.5.2案例9——插入圖像按鈕 167
8.6 插入文件上傳域 168
8.7 添加網頁行為 169
8.7.1案例10——打開【行為】面板 169
8.7.2案例11——添加行為 170
8.8 常用行為的應用 170
8.8.1案例12——交換圖像 171
8.8.2案例13——彈出信息 172
8.8.3案例14——打開瀏覽器窗口 173
8.8.4案例15——檢查表單行為 175
8.8.5案例16——設置狀態欄文本 177
8.9 實戰演練——使用表單制作留言本 178
8.10
高手甜點 181
8.11
跟我練練手 182
第9章批量制作風格統一的網頁——使用模板和庫
9.1 創建模板 184
9.1.1案例1——在空白文檔中創建模板 184
9.1.2案例2——在【資源】面板中創建模板 184
9.1.3案例3——從現有文檔創建模板 185
9.1.4案例4——創建可編輯區域 186
9.2 管理模板 187
9.2.1案例5——從模板中分離文檔 187
9.2.2案例6——更新模板及基於模板的網頁 188
9.3 庫概述 189
9.4 庫的創建、管理與應用 190
9.4.1案例7——創建庫項目 190
9.4.2案例8——庫項目的應用 191
9.4.3案例9——編輯庫項目 192
9.5 實戰演練——創建基於模板的頁面 194
9.6高手甜點 196
9.7跟我練練手 196
第3篇 高級應用
第10章讀懂樣式表密碼——使用CSS樣式表美化網頁
10.1
初識CSS 200
10.1.1CSS概述 200
10.1.2CSS的作用 200
10.1.3基本CSS語法 201
10.1.4案例1——使用Dreamweaver
CC
編寫CSS 201
10.2
使用CSS的方法 203
10.2.1案例2——行內樣式 203
10.2.2案例3——內嵌樣式 203
10.2.3案例4——鏈接樣式 204
10.2.4案例5——導入樣式 205
10.2.5案例6——優先級問題 206
10.3
使用CSS樣式美化網頁 208
10.3.1案例7——使用字體樣式美化文字 208
10.3.2案例8——使用文本樣式美化文本 212
10.3.3案例9——使用背景樣式美化背景 215
10.3.4案例10——使用鏈接樣式美化鏈接 218
10.3.5案例11——使用列表樣式美化列表 219
10.3.6案例12——使用區塊樣式美化區塊 221
10.3.7案例13——使用寬高樣式設定寬高 222
10.3.8案例14——使用邊框樣式美化邊框 223
10.4
實戰演練——設定網頁中鏈接樣式 225
10.5
高手甜點 228
10.6
跟我練練手 228
第11章架構師的大比拼——網頁布局典型範例
11.1
使用CSS排版 230
11.1.1案例1——將頁面用DIV分塊 230
11.1.2案例2——設置各塊位置 230
11.1.3案例3——用CSS定位 230
11.2
固定寬度網頁剖析與布局 233
11.2.1案例4——網頁單列布局模式 233
11.2.2案例5——網頁1-2-1型布局模式 237
11.2.3案例6——網頁1-3-1型布局模式 240
11.3
自動縮放網頁1-2-1型布局模式 244
11.3.1案例7——“1-2-1”等比例變寬布局 244
11.3.2案例8——“1-2-1”單列變寬布局 245
11.4
自動縮放網頁1-3-1型布局模式 246
11.4.1案例9——“1-3-1”三列寬度等比例布局 246
11.4.2案例10——“1-3-1”單側列寬度固定的
變寬布局 246
11.4.3案例11——“1-3-1”中間列寬度固定的
變寬布局 249
11.4.4案例12——“1-3-1”雙側列寬度固定的
變寬布局 252
11.4.5案例13——“1-3-1”中列和側列寬度
固定的變寬布局 255
11.5
實戰演練——使用CSS設定網頁布局
列的背景色 258
11.6
高手甜點 259
11.7
跟我練練手 260
第12章讓網頁更絢麗——在網頁中編寫JavaScript
12.1
認識JavaScript 262
12.1.1什麼是JavaScript 262
12.1.2JavaScript的特點 262
12.2
JavaScript 在HTML中的使用 263
12.2.1案例1——在HTML網頁頭中嵌入
JavaScript代碼 263
12.2.2案例2——在HTML網頁中嵌入
JavaScript代碼 264
12.2.3案例3——在HTML素事件中嵌
入JavaScript代碼 265
12.2.4案例4——在HTML中調用已經存在的
JavaScript文件 266
12.2.5案例5——通過JavaScript偽URL引入
JavaScript腳本代碼 267
12.3JavaScript的基本語法 268
12.3.1執行順序 268
12.3.2區分大小寫 268
12.3.3分號與空格 268
12.3.4對代碼行進行折行 269
12.3.5案例6——注釋 269
12.4
JavaScript 的數據結構 270
12.4.1標識符 270
12.4.2關鍵字 271
12.4.3保留字 271
12.4.4常量 272
12.4.5變量 272
12.5案例7——使用函數 274
12.6
JavaScript的常用事件 275
12.6.1案例8——頁面事件 275
12.6.2案例9——鼠標事件 276
12.6.3案例10——鍵盤事件 277
12.6.4案例11——表單處理事件 279
12.7
實戰演練——使用事件動態改變圖片
的焦點 281
12.8
高手甜點 282
12.9
跟我練練手 282
第13章讓別人瀏覽我的成果——網站的發布
13.1上傳網站前的準備工作 284
13.1.1注冊域名 284
13.1.2申請空間 285
13.2
測試網站 286
13.2.1案例1——測試站點範圍的鏈接 286
13.2.2案例2——改變站點範圍的鏈接 286
13.2.3案例3——查找和替換 287
13.2.4案例4——清理文檔 288
13.3
上傳網站 289
13.3.1案例5——使用Dreamweaver
CC上傳網站 289
13.3.2案例6——使用FTP工具上傳網站 290
13.4
高手甜點 292
13.5
跟我練練手 293
第14章整體把握網站結構——網站配色與布局
14.1善用色彩設計網頁 296
14.1.1認識色彩 296
14.1.2案例1——網頁上的色彩處理 297
14.2
網頁色彩的搭配 300
14.2.1案例2——確定網站的主題色 300
14.2.2案例3——網頁色彩搭配原理 301
14.2.3案例4——網頁中色彩的搭配 303
14.2.4案例5—&mdash素的色彩搭配 304
14.2.5案例6——網頁色彩搭配的技巧 305
14.3
布局網站板塊結構 306
14.3.1案例7——“國”字型 307
14.3.2案例8——標題正文型 307
14.3.3案例9——左右框架型 307
14.3.4案例10——上下框架型 307
14.3.5案例11——綜合框架型 308
14.3.6案例12——封面型 308
14.3.7案例13——Flash型 308
14.4
網站配色應用案例 308
14.4.1案例14——網絡購物網站色彩應用 308
14.4.2案例15——遊戲網站色彩應用 309
14.4.3案例16——企業門戶網站色彩應用 310
14.4.4案例17——時政新聞網站色彩應用 311
14.4.5案例18——影音視頻網站色彩應用 311
14.4.6案例19——電子商務網站色彩應用 312
14.4.7案例20——娛樂網站色彩應用 312
14.5實戰演練——定位網站頁面的框架 313
14.6高手甜點 314
14.7
跟我練練手 314
第4篇 行業應用案例
第15章行業綜合案例1——制作電子商務類網頁
15.1
整體布局 318
15.1.1設計分析 318
15.1.2排版架構 318
15.2
模塊組成 319
15.3
制作步驟 319
15.3.1樣式表 319
15.3.2網頁頭部 325
15.3.3主體通欄 328
15.3.4主體第二通欄 328
15.3.5主體第三通欄 329
15.3.6網頁底部 331
第16章行業綜合案例2——制作網上音樂類網頁
16.1
構思布局 336
16.1.1設計分析 336
16.1.2排版架構 336
16.2
模塊分割 338
16.2.1頁頭部分 338
16.2.2左側內容列表 340
16.2.3中間內容列表 342
16.2.4右側內容列表 344
16.2.5頁腳部分 346
16.3
整體調整 346
16.3.1頁面內容主體調整 346
16.3.2頁面整體調整 347
第17章行業綜合案例3——制作休閑娛樂類網頁
17.1
整體布局 350
17.1.1設計分析 350
17.1.2排版架構 351
17.2
模塊組成 351
17.3
制作步驟 352
17.3.1制作樣式表 352
17.3.2Logo與導航菜單 359
17.3.3搜索條 359
17.3.4左側視頻模塊 360
17.3.5評論模塊 361
17.3.6右側熱門推薦 362
17.3.7底部模塊 365
第18章行業綜合案例4——制作移動設備類網頁
18.1
網站設計分析 368
18.2
網站結構分析 368
18.3
網站主頁面的制作 369
18.4
網站成品預覽 370
第5篇 全能拓展
第19章增加點擊率——網站優化與推廣
19.1
在網站中添加廣告 380
19.1.1網站廣告分類 380
19.1.2添加網站廣告 381
19.2添加實用查詢工具 382
19.2.1添加天氣預報 382
19.2.2添加IP查詢 383
19.2.3添加萬年歷 383
19.2.4添加列車時刻查詢 384
19.3
網站的宣傳與推廣 385
19.3.1網站宣傳實用策略 385
19.3.2利用大眾傳媒進行推廣 386
19.3.3利用網絡媒介進行推廣 386
19.3.4利用其他形式進行推廣 388
19.4
實戰演練——查看網站的流量 388
19.5
高手甜點 391
19.6
跟我練練手 391
第20章打造堅實的堡壘——網站安全與防御
20.1
網站維護基礎知識 394
20.1.1網站的維護與安全 394
20.1.2常見的網站攻擊方式 395
20.2
網站安全防御策略 396
20.2.1案例1——檢測上傳文件的安全性 396
20.2.2案例2——設置網站訪問權限 397
20.3
高手甜點 399
20.4
跟我練練手 400