Dreamweaver 基礎(chǔ)與實(shí)戰(zhàn)教程

第01章
Dreamweaver CC 入門(mén)
1.1 什么是網(wǎng)頁(yè) 002
1.1.1 網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)頁(yè)制作 002
1.1.2 網(wǎng)頁(yè)設(shè)計(jì)術(shù)語(yǔ) 003
1.2 Dreamweaver CC簡(jiǎn)介 004
1.3 Dreamweaver CC的安裝與啟動(dòng) 005
1.3.1 系統(tǒng)要求 005
課堂案例 安裝Dreamweaver CC 006
1.3.2 Dreamweaver CC的啟動(dòng) 007
1.4 Dreamweaver CC的工作界面 007
1.4.1 認(rèn)識(shí)Dreamweaver CC的工作界面 008
1.4.2 “插入”面板 008
1.4.3 狀態(tài)欄 010
1.5 網(wǎng)頁(yè)文件的基本操作 011
1.5.1 新建網(wǎng)頁(yè)文件 011
1.5.2 保存網(wǎng)頁(yè)文件 012
1.5.3 打開(kāi)網(wǎng)頁(yè)文件 013
1.5.4 預(yù)覽網(wǎng)頁(yè) 013
課堂練習(xí) 新建并保存網(wǎng)頁(yè)文件 014
課堂練習(xí) 打開(kāi)并預(yù)覽網(wǎng)頁(yè) 015
課后習(xí)題 016

第02章 創(chuàng)建與管理站點(diǎn)
2.1 創(chuàng)建站點(diǎn) 018
課堂案例 創(chuàng)建本地靜態(tài)站點(diǎn) 018
課堂案例 創(chuàng)建企業(yè)站點(diǎn)并設(shè)置遠(yuǎn)程服務(wù)器 019
2.2 站點(diǎn)文件的基本操作 020
2.2.1 創(chuàng)建頁(yè)面 021
2.2.2 創(chuàng)建文件夾 021
2.2.3 移動(dòng)和復(fù)制文件或文件夾 021
2.2.4 重命名文件或文件夾 022
2.2.5 刪除文件或文件夾 022
2.3 管理站點(diǎn) 022
2.3.1 站點(diǎn)的切換 022
2.3.2 “管理站點(diǎn)”對(duì)話框 023
課堂練習(xí) 在站點(diǎn)中新建文件夾和網(wǎng)頁(yè)文件 023
課后習(xí)題 024

第03章 從HTML到HTML 5
3.1 HTML基礎(chǔ) 026
3.1.1 HTML概述 026
3.1.2 HTML文檔的特點(diǎn) 026
3.1.3 HTML文檔的結(jié)構(gòu) 026
3.1.4 HTML的基本語(yǔ)法 027
3.1.5 HTML代碼編寫(xiě)的注意事項(xiàng) 028
3.2 HTML中常用的重要標(biāo)簽 028
3.2.1 字符格式標(biāo)簽 028
3.2.2 區(qū)段格式標(biāo)簽 029
3.2.3 列表標(biāo)簽 029
3.2.4 表格標(biāo)簽 030
3.2.5 超鏈接標(biāo)簽 030
3.2.6 多媒體標(biāo)簽 031
3.2.7 表單標(biāo)簽 031
3.2.8 分區(qū)標(biāo)簽 032
3.3 在Dreamweaver中編寫(xiě)HTML代碼 032
課堂案例 在設(shè)計(jì)視圖中制作HTML頁(yè)面 033
課堂案例 在代碼視圖中制作HTML頁(yè)面 033
3.4 HTML 5基礎(chǔ) 035
3.4.1 HTML 5概述 035
3.4.2 HTML 5的文檔結(jié)構(gòu) 035
3.4.3 HTML 5的優(yōu)勢(shì) 036
3.5 HTML 5中新增的標(biāo)簽 037
3.5.1 結(jié)構(gòu)標(biāo)簽 037
3.5.2 文本標(biāo)簽 037
3.5.3 應(yīng)用和輔助標(biāo)簽 037
3.5.4 進(jìn)度標(biāo)簽 038
3.5.5 交互性標(biāo)簽 038
3.5.6 在文檔和應(yīng)用中使用的標(biāo)簽 038
3.5.7 ＜ruby＞標(biāo)簽 039
3.5.8 其他標(biāo)簽 039
3.6 網(wǎng)頁(yè)中的其他源代碼 039
3.6.1 CSS樣式代碼 039
3.6.2 JavaScript腳本 040
3.6.3 源代碼中的注釋 040
課堂練習(xí) 使用記事本制作HTML頁(yè)面 041
課后習(xí)題 042

第04章 精通CSS樣式
4.1 了解CSS樣式 044
4.1.1 什么是CSS樣式 044
4.1.2 CSS樣式的發(fā)展 044
4.1.3 CSS樣式規(guī)則 045
4.2 認(rèn)識(shí)“CSS設(shè)計(jì)器”面板 045
4.2.1 “源”選項(xiàng)區(qū) 046
4.2.2 “@媒體”選項(xiàng)區(qū) 047
4.2.3 “選擇器”選項(xiàng)區(qū) 048
4.2.4 “屬性”選項(xiàng)區(qū) 048
4.3 CSS選擇器 048
課堂案例 使用通配符選擇器控制網(wǎng)頁(yè)中的所有
標(biāo)簽 052
課堂案例 使用標(biāo)簽選擇器設(shè)置網(wǎng)頁(yè)整體樣式 053
課堂案例 創(chuàng)建和使用ID CSS樣式 054
課堂案例 創(chuàng)建和使用類CSS樣式 056
課堂案例 設(shè)置網(wǎng)頁(yè)中的超鏈接偽類樣式 057
課堂案例 創(chuàng)建并應(yīng)用派生選擇器 059
課堂案例 同時(shí)定義多個(gè)網(wǎng)頁(yè)元素樣式 060
4.4 使用CSS樣式的方法 061
課堂案例 鏈接外部CSS樣式表文件 062
4.5 豐富的CSS樣式設(shè)置 064
4.5.1 布局樣式設(shè)置 064
課堂案例 布局CSS樣式 065
4.5.2 文本樣式設(shè)置 067
課堂案例 設(shè)置網(wǎng)頁(yè)中的文字效果 068
4.5.3 邊框樣式設(shè)置 069
課堂案例 設(shè)置網(wǎng)頁(yè)元素的邊框效果 070
4.5.4 背景樣式設(shè)置 071
課堂案例 為網(wǎng)頁(yè)元素設(shè)置背景圖像 072
4.5.5 其他樣式設(shè)置 073
課堂練習(xí) 鏈接外部CSS樣式表文件 073
課堂練習(xí) 在網(wǎng)頁(yè)中設(shè)置文字列表效果 075
課后習(xí)題 076

第05章 CSS 3.0新增屬性及應(yīng)用
5.1 新增的顏色定義方法 078
5.1.1 HSL顏色的定義方法 078
5.1.2 HSLA顏色的定義方法 078
5.1.3 RGBA顏色的定義方法 078
課堂案例 為網(wǎng)頁(yè)元素設(shè)置半透明背景 079
5.2 新增的文字設(shè)置屬性 080
5.2.1 text-overflow屬性 080
5.2.2 word-wrap屬性 081
5.2.3 word-break和word-space屬性 081
5.2.4 text-shadow屬性 082
課堂案例 為網(wǎng)頁(yè)文字設(shè)置陰影效果 082
5.2.5 @font-face規(guī)則 084
課堂案例 在網(wǎng)頁(yè)中實(shí)現(xiàn)特殊字體效果 084
5.3 新增的背景設(shè)置屬性 086
5.3.1 background-size屬性 086
課堂案例 實(shí)現(xiàn)始終滿屏顯示的網(wǎng)頁(yè)背景 087
5.3.2 background-origin屬性 089
5.3.3 background-clip屬性 090
5.3.4 background屬性 090
課堂案例 為網(wǎng)頁(yè)設(shè)置多背景圖像 091
5.4 新增的邊框設(shè)置屬性 092
5.4.1 border-colors屬性 092
5.4.2 border-image屬性 093
5.4.3 border-radius屬性 093
課堂案例 為網(wǎng)頁(yè)元素設(shè)置圓角效果 094
5.4.4 box-shadow屬性 096
課堂案例 為網(wǎng)頁(yè)元素設(shè)置陰影效果 097
5.5 新增的多列布局屬性 098
5.5.1 columns屬性 098
5.5.2 column-width屬性 099
5.5.3 column-count屬性 099
5.5.4 column-gap屬性 099
5.5.5 column-rule屬性 100
5.5.6 column-span屬性 100
課堂案例 設(shè)置網(wǎng)頁(yè)內(nèi)容分欄顯示 101
5.6 新增的盒模型設(shè)置屬性 103
5.6.1 opacity屬性 103
課堂案例 設(shè)置網(wǎng)頁(yè)元素的不透明度 104
5.6.2 overflow-x和overflow-y屬性 105
5.6.3 resize屬性 106
5.6.4 outline屬性 106
5.6.5 content屬性 108
課堂案例 為網(wǎng)頁(yè)元素賦予文字內(nèi)容 108
課堂練習(xí) 實(shí)現(xiàn)網(wǎng)頁(yè)元素的任意縮放 109
課堂練習(xí) 為網(wǎng)頁(yè)元素添加輪廓外邊框效果 110
課后習(xí)題 112

第06章 Div+CSS網(wǎng)頁(yè)布局
6.1 創(chuàng)建Div 114
6.1.1 了解Div 114
6.1.2 如何插入Div 114
6.1.3 在設(shè)計(jì)視圖中插入Div 115
6.1.4 塊元素與行內(nèi)元素 116
6.1.5 Div+CSS布局的優(yōu)勢(shì) 117
6.2 CSS基礎(chǔ)盒模型 117
6.2.1 CSS基礎(chǔ)盒模型概述 118
6.2.2 margin屬性——邊距 119
課堂案例 制作歡迎頁(yè)面 119
6.2.3 border屬性——邊框 120
課堂案例 為圖像添加邊框效果 120
6.2.4 padding屬性——填充 121
課堂案例 設(shè)置網(wǎng)頁(yè)元素盒模型效果 122
6.2.5 空白邊疊加 123
課堂案例 網(wǎng)頁(yè)中空白邊疊加的應(yīng)用 123
6.3 網(wǎng)頁(yè)元素的定位 124
6.3.1 CSS的定位屬性 125
6.3.2 相對(duì)定位relative 125
課堂案例 實(shí)現(xiàn)網(wǎng)頁(yè)元素的疊加顯示 126
6.3.3 絕對(duì)定位absolute 127
課堂案例 網(wǎng)頁(yè)元素固定在頁(yè)面右側(cè) 127
6.3.4 固定定位 128
課堂案例 實(shí)現(xiàn)固定位置的頂部導(dǎo)航欄 128
6.3.5 浮動(dòng)定位 129
課堂案例 制作順序排列的圖像列表 129
6.4 常用網(wǎng)頁(yè)布局方式 132
6.4.1 居中布局 132
6.4.2 浮動(dòng)布局 134
6.4.3 自適應(yīng)高度的解決方法 138
課堂練習(xí) CSS盒模型綜合應(yīng)用 138
課堂練習(xí) 設(shè)置元素溢出處理 140
課后習(xí)題 142

第07章 插入文本元素
7.1 設(shè)置網(wǎng)頁(yè)頭信息 144
7.1.1 設(shè)置網(wǎng)頁(yè)標(biāo)題 144
7.1.2 設(shè)置網(wǎng)頁(yè)關(guān)鍵字 144
7.1.3 設(shè)置網(wǎng)頁(yè)說(shuō)明 145
7.1.4 插入視口 145
7.1.5 設(shè)置網(wǎng)頁(yè)META信息 145
課堂案例 設(shè)置網(wǎng)頁(yè)頭信息 147
7.2 在網(wǎng)頁(yè)中輸入文本 148
7.2.1 在網(wǎng)頁(yè)中輸入文本的兩種方法 148
課堂案例 制作內(nèi)容介紹網(wǎng)頁(yè) 149
7.2.2 插入段落 150
7.2.3 插入換行符 150
7.3 插入特殊的文本對(duì)象 151
7.3.1 插入水平線 151
課堂案例 在網(wǎng)頁(yè)中插入水平線 152
7.3.2 插入時(shí)間 153
7.3.3 插入空格和特殊字符 153
課堂案例 在網(wǎng)頁(yè)中插入系統(tǒng)時(shí)間和特殊字符 154
7.4 插入列表 155
7.4.1 插入ul項(xiàng)目列表 155
課堂案例 制作新聞列表 156
7.4.2 插入ol編號(hào)列表 157
課堂案例 制作排行列表 157
7.4.3 設(shè)置列表屬性 158
課堂練習(xí) 在網(wǎng)頁(yè)中實(shí)現(xiàn)滾動(dòng)文本效果 159
課堂練習(xí) 在網(wǎng)頁(yè)中實(shí)現(xiàn)圖文混排 161
課后習(xí)題 162

第08章 插入圖像和多媒體元素
8.1 插入圖像元素 164
課堂案例 制作圖像歡迎網(wǎng)頁(yè) 164
8.1.1 設(shè)置圖像屬性 165
8.1.2 鼠標(biāo)經(jīng)過(guò)圖像 165
課堂案例 制作網(wǎng)站導(dǎo)航菜單 166
8.2 插入Canvas元素 167
8.2.1 了解Canvas元素 167
8.2.2 插入Canvas元素 167
8.2.3 使用JavaScript實(shí)現(xiàn)在畫(huà)布中繪圖的
流程 168
課堂案例 在網(wǎng)頁(yè)中繪制圓形 169
8.3 插入動(dòng)畫(huà)元素 170
課堂案例 在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà) 170
8.3.1 設(shè)置Flash SWF屬性 172
8.3.2 插入Flash Video 172
課堂案例 在網(wǎng)頁(yè)中插入Flash Video 173
8.3.3 了解動(dòng)畫(huà)合成 174
課堂案例 在網(wǎng)頁(yè)中插入動(dòng)畫(huà)合成 174
8.4 插入插件 175
8.4.1 使用插件嵌入音頻 175
課堂案例 在網(wǎng)頁(yè)中嵌入音頻 176
8.4.2 使用插件嵌入視頻 177
課堂案例 在網(wǎng)頁(yè)中嵌入視頻 177
8.5 插入HTML 5 Audio元素 179
8.5.1 插入HTML 5 Audio元素 179
8.5.2 HTML 5支持的音頻文件格式 179
課堂案例 在網(wǎng)頁(yè)中插入HTML與Audio元素 180
8.6 插入HTML 5 Video元素 180
8.6.1 插入HTML 5 Video元素 181
8.6.2 HTML 5支持的視頻文件格式 181
8.6.3 Audio與Video元素屬性 181
課堂案例 制作HTML 5視頻頁(yè)面 182
課堂練習(xí) 為網(wǎng)頁(yè)添加背景音樂(lè) 183
課堂練習(xí) 實(shí)現(xiàn)圖片滾動(dòng)效果 184
課后習(xí)題 186

第09章 設(shè)置網(wǎng)頁(yè)超鏈接
9.1 創(chuàng)建超鏈接 188
9.1.1 創(chuàng)建文字和圖像超鏈接 188
9.1.2 設(shè)置超鏈接屬性 189
9.1.3 相對(duì)路徑和絕對(duì)路