Dreamweaver CC 2018網(wǎng)頁制作案例教程

第1章  網(wǎng)頁制作基礎知識   1
1.1  網(wǎng)頁與網(wǎng)頁制作的基礎知識   2
1.1.1  網(wǎng)頁與網(wǎng)站的概念   2
1.1.2  網(wǎng)頁的常見類型   3
1.1.3  網(wǎng)頁的頁面元素   3
1.1.4  網(wǎng)頁制作的相關知識   4
1.2  網(wǎng)站設計的常用流程   6
1.2.1  網(wǎng)站策劃   6
1.2.2  設計配色   6
1.2.3  收集素材   11
1.2.4  規(guī)劃站點   12
1.2.5  制作網(wǎng)頁   12
1.2.6  測試站點   12
1.2.7  發(fā)布站點   12
1.3  初識Dreamweaver CC 2018   12
1.4  Dreamweaver站點管理   14
1.4.1  為什么要創(chuàng)建站點   14
1.4.2  創(chuàng)建站點   15
1.4.3  編輯站點   15
1.4.4  管理站點   16
1.5  Dreamweaver環(huán)境設置   18
1.5.1  常規(guī)設置   18
1.5.2  不可見元素設置   19
1.5.3  網(wǎng)頁字體設置   19
1.5.4  文件類型/編輯器類型   20
1.5.5  界面顏色設置   20
1.6  Dreamweaver代碼編輯   20
1.6.1  使用快速標簽編輯器   22
1.6.2  使用【代碼片段】面板   22
1.6.3  優(yōu)化網(wǎng)頁源代碼   23
1.7  案例演練   25
第2章  操作網(wǎng)頁文檔   27
2.1  創(chuàng)建空白網(wǎng)頁   28
2.2  設置網(wǎng)頁屬性   28
2.2.1  設置外觀(CSS)   29
2.2.2  設置外觀(HTML)   30
2.2.3  設置鏈接(CSS)   31
2.2.4  設置標題(CSS)   33
2.2.5  設置標題/編碼   33
2.2.6  設置跟蹤圖像   34
2.3  定義頭部信息   34
2.3.1  設置META   34
2.3.2  設置說明信息   36
2.3.3  設置關鍵詞   36
2.4  案例演練   36
第3章  編輯網(wǎng)頁文本   39
3.1  輸入網(wǎng)頁文本   40
3.1.1  輸入普通文本   40
3.1.2  輸入特殊文本   40
3.1.3  輸入日期與時間   41
3.1.4  插入水平線   42
3.1.5  插入滾動文本   43
3.2  設置文本格式   44
3.2.1  設置段落文本   44
3.2.2  設置標題文本   45
3.2.3  為文本設置預定義格式   46
3.3  設置字體樣式   46
3.3.1  設置字體類型   46
3.3.2  設置字體顏色   47
3.3.3  設置粗體和斜體   48
3.2.4  設置字體大小   48
3.4  設置文本樣式   49
3.4.1  設置文本換行   49
3.4.2  設置文本對齊   49
3.4.3  設置文本縮進和凸出   50
3.5  設置列表樣式   51
3.5.1  設置項目列表   51
3.5.2  設置編號列表   52
3.5.3  設置定義列表   53
3.5.4  設置列表屬性   53
3.6  案例演練   54
第4章  設計網(wǎng)頁圖像   57
4.1  插入網(wǎng)頁圖像   58
4.1.1  網(wǎng)頁圖像文件簡介   58
4.1.2  在網(wǎng)頁中插入圖像   58
4.1.3  設置網(wǎng)頁背景圖像   58
4.2  設置網(wǎng)頁圖像的屬性   59
4.2.1  使用圖像的【屬性】面板   59
4.2.2  HTML圖像的屬性代碼   60
4.3  處理網(wǎng)頁圖像效果   61
4.3.1  使用外部圖像編輯軟件   61
4.3.2  編輯圖像設置   62
4.3.3  從源文件更新圖像   62
4.3.4  裁剪圖像   63
4.3.5  設置圖像的亮度和對比度   63
4.3.6  設置銳化圖像   63
4.3.7  重新取樣圖片   63
4.4  制作鼠標經(jīng)過圖像   63
4.5  案例演練   64
第5章  添加網(wǎng)頁多媒體   67
5.1  插入Flash SWF動畫   68
5.1.1  在網(wǎng)頁中插入Flash動畫   68
5.1.2  調(diào)整Flash動畫大小   69
5.1.3  設定Flash動畫信息   69
5.1.4  控制Flash動畫播放   70
5.1.5  設置Flash動畫邊距   70
5.1.6  設置對齊方式與顏色   70
5.1.7  Flash附加參數(shù)設置   71
5.2  插入Flash Video視頻   72
5.3  插入普通音視頻   73
5.4  插入HTML5音視頻   75
5.4.1  插入HTML5視頻   75
5.4.2  插入HTML5音頻   75
5.5  案例演練   76
第6章  設置網(wǎng)頁超鏈接   81
6.1  超鏈接的基礎知識   82
6.1.1  超鏈接的類型   82
6.1.2  超鏈接的路徑   82
6.2  設置基本超鏈接   83
6.2.1  設置文本的圖像超鏈接   83
6.2.2  設置圖像映射超鏈接   83
6.3  設置錨點超鏈接   85
6.4  設置音視頻超鏈接   86
6.5  設置文件下載超鏈接   87
6.6  設置電子郵件超鏈接   88
6.7  管理超鏈接   89
6.7.1  更新超鏈接   89
6.7.2  修改超鏈接   89
6.7.3  測試超鏈接   90
6.8  案例演練   90
第7章  使用表格   93
7.1  創(chuàng)建與調(diào)整表格   94
7.1.1  網(wǎng)頁中表格的用途   94
7.1.2  創(chuàng)建表格   94
7.1.3  調(diào)整表格   96
7.2  為表格添加內(nèi)容   97
7.2.1  在表格中輸入文本   98
7.2.2  在表格中插入圖像   98
7.3  設置表格和單元格屬性   99
7.3.1  設置表格屬性   99
7.3.2  設置單元格屬性   101
7.4  排序表格數(shù)據(jù)   104
7.5  導入和導出網(wǎng)頁表格   104
7.5.1  導入表格式數(shù)據(jù)   104
7.5.2  導出表格式數(shù)據(jù)   105
7.6  案例演練   106
第8章  使用表單   113
8.1  制作表單的方法   114
8.1.1  表單的基礎知識   114
8.1.2  創(chuàng)建表單   115
8.2  設置表單屬性   115
8.3  使用文本域和密碼域   116
8.4  使用文本區(qū)域   118
8.5  使用選擇對象(列表/菜單)   119
8.6  使用單選按鈕   121
8.7  使用復選框   123
8.8  使用文件域   124
8.9  使用標簽和字段集   125
8.9.1  使用標簽   125
8.9.2  使用域集   126
8.10  使用按鈕和圖像按鈕   127
8.10.1  使用按鈕   127
8.10.2  使用圖像按鈕   128
8.11  使用隱藏域   129
8.12  使用HTML5表單對象   130
8.13  案例演練   131
第9章  使用CSS   139
9.1  認識CSS樣式表   140
9.1.1  CSS樣式表的功能   140
9.1.2  CSS樣式表的規(guī)則   140
9.1.3  CSS樣式表的類型   140
9.2  創(chuàng)建CSS樣式表   142
9.2.1  創(chuàng)建外部樣式表   142
9.2.2  創(chuàng)建內(nèi)部樣式表   143
9.2.3  附加外部樣式表   143
9.3  添加CSS選擇器   144
9.3.1  添加類選擇器   144
9.3.2  添加id選擇器   145
9.3.3  添加標簽選擇器   145
9.3.4  添加其他選擇器   146
9.4  編輯CSS樣式效果   149
9.4.1  CSS類型設置   149
9.4.2  CSS背景設置   151
9.4.3  CSS區(qū)塊設置   153
9.4.4  CSS方框設置   154
9.4.5  CSS邊框設置   156
9.4.6  CSS列表設置   157
9.4.7  CSS定位設置   157
9.4.8  CSS擴展設置   159
9.4.9  CSS過渡設置   159
9.5  案例演練   160
第10章  制作Div CSS頁面   163
10.1  Div與盒模型簡介   164
10.1.1  認識Div   164
10.1.2  盒模型   164
10.2  理解標準布局   165
10.2.1  網(wǎng)頁標準   165
10.2.2  內(nèi)容、結(jié)構、表現(xiàn)和
行為   165
10.3  使用Div CSS   166
10.4  插入Div標簽   167
10.5  常用Div CSS布局方式   168
10.5.1  高度自適應布局   168
10.5.2  網(wǎng)頁內(nèi)容居中布局   170
10.5.3  網(wǎng)頁元素浮動布局   171
10.6  案例演練   174
第11章  定位網(wǎng)頁對象   185
11.1  使用定位   186
11.2  使用相對定位   188
11.3  使用固定定位   190
11.4  案例演練   192
第12章  使用CSS3動畫   195
12.1  使用CSS3 Transition   196
12.1.1  CSS3 Transition簡介   196
12.1.2  設置緩動屬性   197
12.1.3  設置緩動時間   198
12.1.4  設置延遲時間   198
12.1.5  設置緩動效果   199
12.2  使用CSS3 Transform   200
12.2.1  CSS3 Transform簡介   200
12.2.2  制作變形菜單   203
12.2.3  制作3D平面   206
12.3  使用CSS3 Animation   207
12.3.1  CSS3 Animation簡介   207
12.3.2  制作旋轉(zhuǎn)的商品圖片   210
12.4  案例演練   211
第13章  設計HTML5結(jié)構   217
13.1  HTML5簡介   218
13.1.1  創(chuàng)建HTML5文件   218
13.1.2  HTML5文件的基本結(jié)構   219
13.1.3  瀏覽器對HTML5的
支持   221
13.2  使用HTML5新增的主體
結(jié)構元素   222
13.2.1  使用section元素   222
13.2.2  使用article元素   222
13.2.3  使用aside元素   223
13.2.4  使用nav元素   224
13.2.5  使用time元素   225
13.3  使用HTML5新增的非主體
結(jié)構元素   226
13.3.1  使用header元素   226
13.3.2  使用hgroup元素   227
13.3.3  使用footer元素   227
13.3.4  使用figure元素   228
13.3.5  使用address元素   229
13.4  使用HTML5新增的其他
常用元素   229
13.4.1  使用mark元素   230
13.4.2  使用rp、rt和rudy元素   230
13.4.3  使用progress元素   230
13.4.4  使用command元素   231
13.4.5  使用embed元素   231
13.4.6  使用detail和summary
元素   231
13.4.7  使用datalist元素   232
13.5  使用HTML5新增的
全局屬性   233
13.5.1  使用contentEditable屬性   233
13.5.2  使用spellcheck屬性   233
13.5.3  使用tabIndex屬性   233
13.6  使用HTML5新增的
其他屬性   234
13.6.1  使用表單相關屬性   234
13.6.2  使用鏈接相關屬性   238
13.6.3  使用其他屬性   239
13.7  案例演練   239
第14章  使用網(wǎng)頁行為   241
14.1  認識行為   242
14.1.1  行為的基礎知識   242
14.1.2  JavaScript代碼簡介   242
14.2  使用行為調(diào)節(jié)瀏覽器窗口   243
14.2.1  打開瀏覽器窗口   243
14.2.2  轉(zhuǎn)到URL   244
14.2.3  調(diào)用JavaScript   245
14.3  使用行為應用圖像   245
14.3.1  交換圖像與恢復交換
圖像   246
14.3.2  拖動AP元素   248
14.4  使用行為顯示文本   249
14.4.1  彈出信息   249
14.4.2  設置狀態(tài)欄文本   250
14.4.3  設置容器的文本   250
14.4.4  設置文本域文字   251
14.5  使用行為加載多媒體   252
14.5.1  檢查插件   252
14.5.2  顯示-隱藏元素   253
15.5.3  改變屬性   253
14.6  使用行為控制表單   254
14.6.1  跳轉(zhuǎn)菜單、跳轉(zhuǎn)菜單
開始   254
14.6.2  檢查表單   256
14.7  案例演練   257
第15章  制作移動設備網(wǎng)頁   263
15.1  iQuery和jQuery Mobile簡介   264
15.1.1  iQuery   264
15.1.2  jQuery Mobile   264
15.2  建立jQuery Mobile頁面   265
15.3  使用jQuery Mobile組件   267
15.3.1  使用列表視圖   267
15.3.2  使用布局網(wǎng)格   270
15.3.3  使用可折疊區(qū)塊   271
15.3.4  使用文本輸入框   271
15.3.5  使用密碼輸入框   272
15.3.6  使用文本區(qū)域   272
15.3.7  使用選擇菜單   273
15.3.8  使用復選框   273
15.3.9  使用單選按鈕   274
15.3.10  使用按鈕   275
15.3.11  使用滑塊   275
15.3.12  使用翻轉(zhuǎn)切換開關   275
15.4  使用jQuery Mobile主題   276
15.5  案例演練   277
第16章  使用模板和庫項目   279
16.1  創(chuàng)建模板   280
16.1.1  將網(wǎng)頁保存為模板   280
16.1.2  創(chuàng)建空白網(wǎng)頁模板   281
16.2  編輯模板   281
16.2.1  設置可編輯區(qū)域   281
16.2.2  設置可選區(qū)域   282
16.2.3  設置重復區(qū)域   283
16.3  應用模板   284
16.3.1  從模板新建網(wǎng)頁   284
16.3.2  為網(wǎng)頁應用模板   284
16.4  管理模板   285
16.4.1  刪除網(wǎng)頁模板   285
16.4.2  打開網(wǎng)頁上附加的模板   285
16.4.3  更新網(wǎng)頁模板   285
16.4.4  將網(wǎng)頁脫離模板   285
16.5  使用庫項目   286
16.5.1  認識庫項目   286
16.5.2  創(chuàng)建庫項目   286
16.5.3  設置庫項目   286
16.5.4  應用庫項目   287
16.5.5  修改庫項目   287
16.6  案例演練   288