第1章 網頁設計輕松入門
Adobe Dreamweaver CC網頁設計與制作
案例精講 制作圖文混排網頁 35
案 / 例 / 描 / 述....................................................................................35
案 / 例 / 詳 / 解....................................................................................35
邊用邊學 38
2.1 創建文本內容 ........................................................................38
2.1.1 輸入文本 .......................................................................38
2.1.2 設置文本屬性 ................................................................39
第2章 編輯網頁素
· I ·
00 Dw CC雲課堂教學 文前_1-12.indd 1 2021/4/22 下午5:35
案例精講 制作銀杏農場網頁 59
案 / 例 / 描 / 述....................................................................................59
案 / 例 / 詳 / 解....................................................................................59
邊用邊學 62
3.1 超級鏈接的概念 ....................................................................62
3.1.1 相對路徑 .......................................................................62
3.1.2 路徑 ...........................
案例精講 制作公司網站頁面 73
案 / 例 / 描 / 述....................................................................................73
案 / 例 / 詳 / 解....................................................................................73
邊用邊學 85
4.1 插入表格 ................................................................................85
4.1.1 與表格有關的術語 .........................................................85
4.1.2 插入表格 .......................................................................85
4.1.3 表格的基本代碼 .............................................................86
4.2 表格屬性 ................................................................................87
4.2.1 設置表格屬性 ................................................................87
4.2.2 格屬性 .............................................................87
4.2.3 改變背景顏色 ................................................................88
4.2.4 表格的屬性代碼 .............................................................89
4.3 選擇表格 ................................................................................90
4.3.1 選擇整個表格 ................................................................90
4.3.2 選擇格 .............................................................92
4.4 編輯表格 ................................................................................93
4.4.1 復制和粘貼表格 .............................................................93
4.4.2 添加行或列 ....................................................................95
4.4.3 刪除行或列 ....................................................................96
經驗之談 格 97
上手實操 99
實操一：設置表格背景 .......................................................................99
實操二：制作網站首頁 .......................................................................99
第4章 利用表格布局網頁
3.3 在圖像中應用鏈接 ................................................................66
3.3.1 圖像鏈接 .......................................................................66
3.3.2 圖像熱點鏈接 ................................................................67
3.3.3 創建圖像熱點鏈接 .........................................................67
經驗之談 以新窗口打開超鏈接 69
上手實操 71
實操一：制作風景介紹網頁 ................................................................71
實操二：創建下載鏈接 .......................................................................71
· III ·
目錄 CONTENTS
00 Dw CC雲課堂教學 文前_1-12.indd 3 2021/4/22 下午5:35
案例精講 制作網頁結構 101
案 / 例 / 描 / 述..................................................................................101
案 / 例 / 詳 / 解..................................................................................101
邊用邊學 103
5.1 認識HTML.........................................................................103
5.2 HTML5的優勢 ..................................................................103
5.2.1 強大的交互性 ..............................................................103
5.2.2 使用HTML5的優勢 ......................................................104
5.3 HTML5語法 ......................................................................106
5.3.1 文檔類型聲明 ..............................................................106
5.3.2 字符編碼 .....................................................................106
5.3.3 省略引號 .....................................................................107
5.4 HTM素分類 ..........................................................107
5.4.1 素 ..................................................................107
5.4.2 素 ..................................................................107
5.4.3 行內素 ...........................................................108
5.4.4 素 ..................................................................108
5.5 HTML5中素 ......................................................108
5.5.1 sect素 .................................................................108
5.5.2 arti素 ................................................................... 110
5.5.3 as素 .................................................................... 110
5.5.4 hea素 ................................................................. 111
5.5.5 fhgr素 ................................................................ 111
5.5.6 foo素 ................................................................... 111
5.5.7 素 ....................................................................... 112
5.5.8 fig素 ................................................................... 112
5.5.9 vi素 .................................................................... 112
5.5.10 au素 .................................................................. 113
5.5.11 em素 ................................................................ 113
5.5.12 m素 .................................................................. 113
5.5.13 progr素............................................................. 114
5.5.14 me素 ................................................................. 114
5.5.15 t素 .................................................................... 114
5.5.16 素 ..................................................................... 114
5.5.17 can素 ............................................................... 115
5.5.18 comm素 ........................................................... 115
5.5.19 datal素 ............................................................... 115
5.5.20 deta素 ................................................................ 115
5.5.21 datag素 ............................................................. 116
5.5.22 key素 ............................................................... 116
5.5.23 out素 ................................................................ 116
5.5.24 sou素 ................................................................ 116
第5章 HTML基礎知識
· IV ·
Adobe Dreamweaver CC網頁設計與制作
00 Dw CC雲課堂教學 文前_1-12.indd 4 2021/4/22 下午5:35
5.5.25 m素 ................................................................. 116
經驗之談 使用記事本制作HTML文件 117
上手實操 119
實操一：使用HTML制作列表 ............................................................ 119
實操二：使用Dreamweaver軟件生成HTML代碼 ...............................120
第8章 常見組件的應用
案例精講 美化家居網頁 122
案 / 例 / 描 / 述..................................................................................122
案 / 例 / 詳 / 解..................................................................................122
邊用邊學 128
6.1 了解CSS ..............................................................................128
6.1.1 CSS的定義..................................................................128
6.1.2 CSS的設置..................................................................131
6.2 使用CSS ..............................................................................137
6.2.1 外聯樣式表 ..................................................................137
6.2.2 內嵌樣式表 ..................................................................139
6.3 常用網頁樣式 ......................................................................140
6.3.1 字體樣式 .....................................................................140
6.3.2 段落樣式 .....................................................................142
6.3.3 邊框樣式 .....................................................................144
6.3.4 外輪廓 .........................................................................148
6.3.5 列表相關屬性 ..............................................................150
經驗之談 使用CSS縮寫 152
上手實操 153
實操一：排版網頁 ............................................................................153
實操二：替換網頁背景 .....................................................................153
第6章 利用CSS美化網頁
案例精講 制作美味西餐廳網頁 155
案 / 例 / 描 / 述..................................................................................155
案 / 例 / 詳 / 解..................................................................................155
邊用邊學 163
7.1 CSS與Div布局基礎 ...........................................................163
7.1.1 什麼是Web標準 ...........................................................163
7.1.2 Div概述 .......................................................................163
第7章 利用Div CSS布局網頁
· V ·
目錄 CONTENTS
00 Dw CC雲課堂教學 文前_1-12.indd 5 2021/4/22 下午5:35
第8章 常見組件的應用
案例精講 使用canvas繪制簡單圖形 176
案 / 例 / 描 / 述..................................................................................176
案 / 例 / 詳 / 解..................................................................................176
邊用邊學 180
8.1 canvas入門 .........................................................................180
8.1.1 canvas含義 .................................................................180
8.1.2 canvas坐標 .................................................................180
8.2 使用canvas .........................................................................181
8.2.1 在頁面中加入canvas ...................................................181
8.2.2 繪制矩形和五角形 .......................................................183
8.2.3 檢測瀏覽器是否支持 ....................................................186
8.3 繪制曲線路徑 ......................................................................187
8.3.1 繪制路徑的方法 ...........................................................187
8.3.2 描邊的樣式使用 ...........................................................189
8.3.3 填充和曲線的繪制方法 ................................................190
8.4 繪制圖像 ..............................................................................192
8.4.1 使用canvas插入圖片 .........
案例精講 制作社區人員信息采集表 205
案 / 例 / 描 / 述..................................................................................205
案 / 例 / 詳 / 解..................................................................................205
邊用邊學 214
9.1 使用表單 ..............................................................................214
9.1.1 認識表單 .....................................................................214
9.1.2 常見表單 .....................................................................214
9.2 基素 ......................................................................215
9.2.1 文本 ............................................................................215
9.2.2 文本區域 .....................................................................216
9.2.3 密碼 ............................................................................216
9.2.4 單選按鈕和單選按鈕組 ................................................217
9.2.5 復選框和復選框組 .......................................................217
9.2.6 選擇 ............................................................................218
9.2.7 “提交”按鈕和“重置”按鈕 .......................................218
經驗之談 自動完成輸入屬性 219
上手實操 221
實操一：制作注冊頁面 .....................................................................221
實操二：制作登錄界面 .....................................................................221
第9章 利用表單創建動態網頁
案例精講 優化花卉市場網頁 223
案 / 例 / 描 / 述..................................................................................223
案 / 例 / 詳 / 解..................................................................................223
邊用邊學 226
10.1 什麼是行為 ........................................................................226
10.1.1 行為 ........................................................................226
10.1.2 事件 ........................................................................227
10.1.3 常見事件的使用 ......................................................227
10.2 利用行為調節瀏覽器窗口 ...............................................230
10.2.1 打開瀏覽器窗口 ......................................................230
10.2.2 調用腳本 .................................................................231
10.2.3 轉到URL .................................................................232
10.3 利用行為制作圖像特效 ...................................................232
10.3.1 交換圖像與恢復交換圖像 ........................................232
10.3.2 預先載入圖像 ..........................................................234
10.3.3 拖素 ............................................................234
第10章 網頁行為的應用
· VII ·
目錄 CONTENTS
00 Dw CC雲課堂教學 文前_1-12.indd 7 2021/4/22 下午5:35
10.4 利用行為顯示文本 ...........................................................235
10.4.1 彈出信息 .................................................................235
10.4.2 設置狀態欄文本 ......................................................236
10.4.3 設置容器的文本 ......................................................236
10.4.4 設置文本域文字 ......................................................237
10.5 利用行為控制表單 ...........................................................237
10.5.1 “跳轉菜單”行為 .....................................................237
10.5.2 “檢查表單”行為 .....................................................238
經驗之談 “跳轉菜單開始”行為 239
上手實操 240
實操一：制作網頁彈出信息 ..............................................................240
實操二：制作交換圖像效果 ..............................................................240
案例精講 制作室內設計網頁 242
案 / 例 / 描 / 述..................................................................................242
案 / 例 / 詳 / 解..................................................................................242
邊用邊學 250
11.1 創建模板 ............................................................................250
11.1.1 創建空模板 ..............................................................250
11.1.2 從現有網頁創建模板 ................................................251
11.1.3 創建和取消可編輯區域 ............................................252
11.2 管理和使用模板 ................................................................253
11.2.1 應用模板 .................................................................253
11.2.2 從模板中分離 ..........................................................254
11.2.3 更新模板文件 ..........................................................255
11.2.4 創建可選區域 ..........................................................256
11.3 創建和使用庫 ....................................................................256
11.3.1 創建庫項目 ..............................................................256
11.3.2 插入庫項目 ..............................................................257
11.3.3 編輯和更新庫項目 ...................................................258
經驗之談 巧用“資源”面板 259
上手實操 260
實操一：創建網頁模板 .....................................................................260
實操二：創建庫項目 .........................................................................260
第11章 網頁模板和庫的應用
附錄 Adobe Dreamweaver CC常用快捷鍵彙總

“十三五”期間，數字創意產業作為國家戰略性新興產業
蓬勃發展，設計、影視與傳媒、數字出版、動漫遊戲、在線教
育等數字創意領域日新月異。“十四五”規劃進一步提出“壯
大數字創意、網絡視聽、數字出版、數字娛樂、線上演播等
產業”。
計算機、互聯網、移動網絡技術的迭代更新為數字創意產
業提供了硬件和軟件基礎，而Adobe、Corel、Autodesk等企業
提供了先進的軟件和服務支撐。數字創意產業的飛速發展迫切
需要大量熟練掌握相關技術的從業者。2020年，中國屆
職業技能大賽將平面設計、網站設計與開發、3D數字遊戲、
CAD機械設計等技術列入競賽項目，這一舉措引領了高技能
人纔的培養方向。
職業院校是培養數字創意技能人纔的主力軍。為了培養數
字創意產業發展所需的高素質技能人纔，我們組織了一批具備
較強教科研能力的院校教師和富有實戰經驗的設計師，共同策
劃編寫了本書。本書注重數字技術與美學藝術的結合，以實際
工作項目為脈絡，旨在使讀者能夠掌握視覺設計、創意設計、
數字媒體應用開發、內容編輯等方面的技能，成為具備創新思
維和專業技能的復合型人纔。

網站的成功與否，很重要的一個因素在於它的構思及設計理念，好的創意及豐富的內容纔
能夠讓網頁煥發出勃勃生機。
1.2.1 網頁配色藝術
色彩對網站的設計來說非常重要，從一個網站的色彩設計中就可以看出網站的風格。色彩
的魅力是無限的，可以讓本身平淡無味的東西瞬間變得漂亮起來。作為說服力的視覺語
言，色彩在人們的生活中起著非常重要的作用。
1. 色彩的基本概念
自然界的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰
色，而其他顏色均屬於彩色。任何一種彩色都具有三個屬性。
色相（Hue）：也叫色澤，是顏色的基本特征，反映顏色的基本面貌，是一種色彩區別於
另一種色彩的主要特征。
飽和度（Saturation）：也叫純度，指顏色的純潔程度。飽和度高的色彩純、鮮亮，飽和
度低的色彩暗淡、含灰色。
明度（Brightness或Lightness或Luminousity）：也叫亮度，體現顏色的明暗程度，明度
越大，色彩越亮。
非彩色隻有明度特征，沒有色相和飽和度的區別。
計算機屏幕的色彩是由RGB（紅、綠、藍）三種色光合成的，通過調整這三個基本色可以
調校出其他的顏色，在許多圖像處理軟件裡，都有提供色彩調配功能，如圖1-21所示。
2. 色彩搭配
網頁的色彩是樹立網站形像的關鍵要素之一，色彩搭配既是一項技術性工作，也是一項藝
術性很強的工作。在設計網頁時，除了要考慮網站本身的特點外，還要遵循一定的藝術規律，
纔能設計出色彩鮮明、性格獨特的網站。網頁色彩的搭配需要遵循一些原理，這些原理包括色
彩的鮮明性、獨特性、藝術性，以及色彩搭配的合理性。充分運用色彩搭配的原理，可以使網
頁具有更深的藝術內涵，並能提升網頁的文化品位。
（1）近似色搭配。
近似色是指色環中兩個或三個相鄰的顏色，例如橙黃色—黃色，紅色—橙色為近似色。近
似色的搭配給人的視覺效果是比較舒服、自然，畫面統一和諧，如圖1-22所示。
圖1-22
（2）互補色搭配。
互補色是指在色環中相對的兩種色彩，該色繫為對比類型，例如紅—綠為互補色。其
效果讓人感覺對比強烈、炫目，有時候會成為一種很好的搭配形式，如圖1-23所示。