Adobe Dreamweaver CC網(wǎng)頁設(shè)計與制作

第1章 網(wǎng)頁設(shè)計輕松入門
Adobe Dreamweaver CC網(wǎng)頁設(shè)計與制作
案例精講 制作圖文混排網(wǎng)頁 35
案 / 例 / 描 / 述....................................................................................35
案 / 例 / 詳 / 解....................................................................................35
邊用邊學(xué) 38
2.1 創(chuàng)建文本內(nèi)容 ........................................................................38
2.1.1 輸入文本 .......................................................................38
2.1.2 設(shè)置文本屬性 ................................................................39
第2章 編輯網(wǎng)頁的構(gòu)成元素
· I ·
00 Dw CC云課堂教學(xué) 文前_1-12.indd 1 2021/4/22 下午5:35
案例精講 制作銀杏農(nóng)場網(wǎng)頁 59
案 / 例 / 描 / 述....................................................................................59
案 / 例 / 詳 / 解....................................................................................59
邊用邊學(xué) 62
3.1 超級鏈接的概念 ....................................................................62
3.1.1 相對路徑 .......................................................................62
3.1.2 路徑 ...........................
案例精講 制作公司網(wǎng)站頁面 73
案 / 例 / 描 / 述....................................................................................73
案 / 例 / 詳 / 解....................................................................................73
邊用邊學(xué) 85
4.1 插入表格 ................................................................................85
4.1.1 與表格有關(guān)的術(shù)語 .........................................................85
4.1.2 插入表格 .......................................................................85
4.1.3 表格的基本代碼 .............................................................86
4.2 表格屬性 ................................................................................87
4.2.1 設(shè)置表格屬性 ................................................................87
4.2.2 設(shè)置單元格屬性 .............................................................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 復(fù)制和粘貼表格 .............................................................93
4.4.2 添加行或列 ....................................................................95
4.4.3 刪除行或列 ....................................................................96
經(jīng)驗(yàn)之談 合并單元格 97
上手實(shí)操 99
實(shí)操一：設(shè)置表格背景 .......................................................................99
實(shí)操二：制作網(wǎng)站首頁 .......................................................................99
第4章 利用表格布局網(wǎng)頁
3.3 在圖像中應(yīng)用鏈接 ................................................................66
3.3.1 圖像鏈接 .......................................................................66
3.3.2 圖像熱點(diǎn)鏈接 ................................................................67
3.3.3 創(chuàng)建圖像熱點(diǎn)鏈接 .........................................................67
經(jīng)驗(yàn)之談 以新窗口打開超鏈接 69
上手實(shí)操 71
實(shí)操一：制作風(fēng)景介紹網(wǎng)頁 ................................................................71
實(shí)操二：創(chuàng)建下載鏈接 .......................................................................71
· III ·
目錄 CONTENTS
00 Dw CC云課堂教學(xué) 文前_1-12.indd 3 2021/4/22 下午5:35
案例精講 制作網(wǎng)頁結(jié)構(gòu) 101
案 / 例 / 描 / 述..................................................................................101
案 / 例 / 詳 / 解..................................................................................101
邊用邊學(xué) 103
5.1 認(rèn)識HTML.........................................................................103
5.2 HTML5的優(yōu)勢 ..................................................................103
5.2.1 強(qiáng)大的交互性 ..............................................................103
5.2.2 使用HTML5的優(yōu)勢 ......................................................104
5.3 HTML5語法 ......................................................................106
5.3.1 文檔類型聲明 ..............................................................106
5.3.2 字符編碼 .....................................................................106
5.3.3 省略引號 .....................................................................107
5.4 HTML5的元素分類 ..........................................................107
5.4.1 結(jié)構(gòu)性元素 ..................................................................107
5.4.2 級塊性元素 ..................................................................107
5.4.3 行內(nèi)語義性元素 ...........................................................108
5.4.4 交互性元素 ..................................................................108
5.5 HTML5中新增的元素 ......................................................108
5.5.1 section元素 .................................................................108
5.5.2 article元素 ................................................................... 110
5.5.3 aside元素 .................................................................... 110
5.5.4 header元素 ................................................................. 111
5.5.5 fhgroup元素 ................................................................ 111
5.5.6 footer元素 ................................................................... 111
5.5.7 nav元素 ....................................................................... 112
5.5.8 figure元素 ................................................................... 112
5.5.9 video元素 .................................................................... 112
5.5.10 audio元素 .................................................................. 113
5.5.11 embed元素 ................................................................ 113
5.5.12 mark元素 .................................................................. 113
5.5.13 progress元素............................................................. 114
5.5.14 meter元素 ................................................................. 114
5.5.15 time元素 .................................................................... 114
5.5.16 wbr元素 ..................................................................... 114
5.5.17 canvas元素 ............................................................... 115
5.5.18 command元素 ........................................................... 115
5.5.19 datalist元素 ............................................................... 115
5.5.20 details元素 ................................................................ 115
5.5.21 datagrid元素 ............................................................. 116
5.5.22 keygen元素 ............................................................... 116
5.5.23 output元素 ................................................................ 116
5.5.24 source元素 ................................................................ 116
第5章 HTML基礎(chǔ)知識
· IV ·
Adobe Dreamweaver CC網(wǎng)頁設(shè)計與制作
00 Dw CC云課堂教學(xué) 文前_1-12.indd 4 2021/4/22 下午5:35
5.5.25 menu元素 ................................................................. 116
經(jīng)驗(yàn)之談 使用記事本制作HTML文件 117
上手實(shí)操 119
實(shí)操一：使用HTML制作列表 ............................................................ 119
實(shí)操二：使用Dreamweaver軟件生成HTML代碼 ...............................120
第8章 常見組件的應(yīng)用
案例精講 美化家居網(wǎng)頁 122
案 / 例 / 描 / 述..................................................................................122
案 / 例 / 詳 / 解..................................................................................122
邊用邊學(xué) 128
6.1 了解CSS ..............................................................................128
6.1.1 CSS的定義..................................................................128
6.1.2 CSS的設(shè)置..................................................................131
6.2 使用CSS ..............................................................................137
6.2.1 外聯(lián)樣式表 ..................................................................137
6.2.2 內(nèi)嵌樣式表 ..................................................................139
6.3 常用網(wǎng)頁樣式 ......................................................................140
6.3.1 字體樣式 .....................................................................140
6.3.2 段落樣式 .....................................................................142
6.3.3 邊框樣式 .....................................................................144
6.3.4 外輪廓 .........................................................................148
6.3.5 列表相關(guān)屬性 ..............................................................150
經(jīng)驗(yàn)之談 使用CSS縮寫 152
上手實(shí)操 153
實(shí)操一：排版網(wǎng)頁 ............................................................................153
實(shí)操二：替換網(wǎng)頁背景 .....................................................................153
第6章 利用CSS美化網(wǎng)頁
案例精講 制作美味西餐廳網(wǎng)頁 155
案 / 例 / 描 / 述..................................................................................155
案 / 例 / 詳 / 解..................................................................................155
邊用邊學(xué) 163
7.1 CSS與Div布局基礎(chǔ) ...........................................................163
7.1.1 什么是Web標(biāo)準(zhǔn) ...........................................................163
7.1.2 Div概述 .......................................................................163
第7章 利用Div CSS布局網(wǎng)頁
· V ·
目錄 CONTENTS
00 Dw CC云課堂教學(xué) 文前_1-12.indd 5 2021/4/22 下午5:35
第8章 常見組件的應(yīng)用
案例精講 使用canvas繪制簡單圖形 176
案 / 例 / 描 / 述..................................................................................176
案 / 例 / 詳 / 解..................................................................................176
邊用邊學(xué) 180
8.1 canvas入門 .........................................................................180
8.1.1 canvas含義 .................................................................180
8.1.2 canvas坐標(biāo) .................................................................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插入圖片 .........
案例精講 制作社區(qū)人員信息采集表 205
案 / 例 / 描 / 述..................................................................................205
案 / 例 / 詳 / 解..................................................................................205
邊用邊學(xué) 214
9.1 使用表單 ..............................................................................214
9.1.1 認(rèn)識表單 .....................................................................214
9.1.2 常見表單 .....................................................................214
9.2 基本表單元素 ......................................................................215
9.2.1 文本 ............................................................................215
9.2.2 文本區(qū)域 .....................................................................216
9.2.3 密碼 ............................................................................216
9.2.4 單選按鈕和單選按鈕組 ................................................217
9.2.5 復(fù)選框和復(fù)選框組 .......................................................217
9.2.6 選擇 ............................................................................218
9.2.7 “提交”按鈕和“重置”按鈕 .......................................218
經(jīng)驗(yàn)之談 自動完成輸入屬性 219
上手實(shí)操 221
實(shí)操一：制作注冊頁面 .....................................................................221
實(shí)操二：制作登錄界面 .....................................................................221
第9章 利用表單創(chuàng)建動態(tài)網(wǎng)頁
案例精講 優(yōu)化花卉市場網(wǎng)頁 223
案 / 例 / 描 / 述..................................................................................223
案 / 例 / 詳 / 解..................................................................................223
邊用邊學(xué) 226
10.1 什么是行為 ........................................................................226
10.1.1 行為 ........................................................................226
10.1.2 事件 ........................................................................227
10.1.3 常見事件的使用 ......................................................227
10.2 利用行為調(diào)節(jié)瀏覽器窗口 ...............................................230
10.2.1 打開瀏覽器窗口 ......................................................230
10.2.2 調(diào)用腳本 .................................................................231
10.2.3 轉(zhuǎn)到URL .................................................................232
10.3 利用行為制作圖像特效 ...................................................232
10.3.1 交換圖像與恢復(fù)交換圖像 ........................................232
10.3.2 預(yù)先載入圖像 ..........................................................234
10.3.3 拖動AP元素 ............................................................234
第10章 網(wǎng)頁行為的應(yīng)用
· VII ·
目錄 CONTENTS
00 Dw CC云課堂教學(xué) 文前_1-12.indd 7 2021/4/22 下午5:35
10.4 利用行為顯示文本 ...........................................................235
10.4.1 彈出信息 .................................................................235
10.4.2 設(shè)置狀態(tài)欄文本 ......................................................236
10.4.3 設(shè)置容器的文本 ......................................................236
10.4.4 設(shè)置文本域文字 ......................................................237
10.5 利用行為控制表單 ...........................................................237
10.5.1 “跳轉(zhuǎn)菜單”行為 .....................................................237
10.5.2 “檢查表單”行為 .....................................................238
經(jīng)驗(yàn)之談 “跳轉(zhuǎn)菜單開始”行為 239
上手實(shí)操 240
實(shí)操一：制作網(wǎng)頁彈出信息 ..............................................................240
實(shí)操二：制作交換圖像效果 ..............................................................240
案例精講 制作室內(nèi)設(shè)計網(wǎng)頁 242
案 / 例 / 描 / 述..................................................................................242
案 / 例 / 詳 / 解..................................................................................242
邊用邊學(xué) 250
11.1 創(chuàng)建模板 ............................................................................250
11.1.1 創(chuàng)建空模板 ..............................................................250
11.1.2 從現(xiàn)有網(wǎng)頁創(chuàng)建模板 ................................................251
11.1.3 創(chuàng)建和取消可編輯區(qū)域 ............................................252
11.2 管理和使用模板 ................................................................253
11.2.1 應(yīng)用模板 .................................................................253
11.2.2 從模板中分離 ..........................................................254
11.2.3 更新模板文件 ..........................................................255
11.2.4 創(chuàng)建可選區(qū)域 ..........................................................256
11.3 創(chuàng)建和使用庫 ....................................................................256
11.3.1 創(chuàng)建庫項(xiàng)目 ..............................................................256
11.3.2 插入庫項(xiàng)目 ..............................................................257
11.3.3 編輯和更新庫項(xiàng)目 ...................................................258
經(jīng)驗(yàn)之談 巧用“資源”面板 259
上手實(shí)操 260
實(shí)操一：創(chuàng)建網(wǎng)頁模板 .....................................................................260
實(shí)操二：創(chuàng)建庫項(xiàng)目 .........................................................................260
第11章 網(wǎng)頁模板和庫的應(yīng)用
附錄 Adobe Dreamweaver CC常用快捷鍵匯總