《實用Web前端開發：零基礎學Dreamweaver》主要針對網頁製作領域的初學者，從Dreamweaver工作界面開始介紹，逐步深入，以綜合實例講解結尾。具體內容包括DreamweaverCC入門、站點的創建與管理、HTML基礎知識、CSS樣式、DIV+CSS網頁布局、文字和段落等在網頁中的套用、使用表格布局網頁、創建超連結、使用圖片修飾網頁、創建多媒體對象、表單套用、模板和庫等的套用、使用行為創建網頁特效、網站的發布與推廣、綜合實例。同時，本書每一章都配有二維碼視頻進行重難點講解，力求讓讀者輕鬆掌握並學以致用。
基本介紹
- 書名：實用Web前端開發：零基礎學Dreamweaver
- 作者：中公教育優就業研究院
- ISBN：978-7-5192-3398-3
- 類別：Web前端系列
- 頁數：261
- 定價：50元
- 出版社：世界圖書出版公司北京公司
- 出版時間：2017.6
- 裝幀：平裝
- 開本：787×1092 1/16
編輯推薦,圖書目錄,第1章DreamweaverCC入門1,第2章站點創建與管理20,第3章HTML的基礎知識36,第4章CSS樣式50,第5章DIV+CSS網頁布局62,第6章網頁中文字、段落和列表的套用75,第7章使用表格布局網頁78,第8章創建網頁中的超連結99,第9章使用圖片修飾網頁124,第10章創建網頁中的多媒體對象138,第11章用表單實現頁面互動性147,第12章框架、模板和庫的套用186,第13章使用行為創建網頁特效200,第14章網站的發布與推廣226,第15章綜合實例241,文摘,
編輯推薦
《實用Web前端開發·零基礎學Dreamweaver》一書立足於Dreamweaver 軟體本身，結合工作中常用的操作進行示例講解，便於初學者掌握Dreamweaver 軟體的使用技巧，從而具備從業能力。本書採用雙色印刷，圖文並茂，操作步驟詳細明確，而且每章都配有二維碼視頻進行重難點講解，使讀者在掌握Dreamweaver 軟體基礎知識的基礎上，具備較強的實際操作能力，讀者掃描二維碼即可實現線上學習，操作便捷高效。
圖書目錄
第1章DreamweaverCC入門1
1.1DreamweaverCC功能概述1
1.1.1主要功能1
1.1.2新增功能1
1.2DreamweaverCC的工作界面3
1.2.1選單欄3
1.2.2工具列4
1.2.3文檔視窗4
1.2.4“屬性”面板5
1.2.5面板組5
1.2.6文檔狀態欄5
1.3自定義工作區6
1.3.1瀏覽工作區6
1.3.2視圖切換7
1.3.3處理面板9
1.3.4選擇工作區布局11
1.3.5調整工具列11
1.3.6個性化首選參數12
1.3.7創建自定義的快捷鍵12
1.3.8使用“屬性”檢查器12
1.4網頁的管理13
1.4.1創建網頁13
1.4.2保存網頁與關閉網頁13
1.4.3打開網頁14
1.4.4利用檔案面板管理網頁文檔或資料夾14
1.5可視化輔助工具14
1.5.1標尺工具14
1.5.2格線工具15
1.5.3輔助線工具15
1.6首選項設定16
1.6.1常規參數16
1.6.2代碼格式17
1.6.3複製/貼上17
1.6.4代碼顏色18
1.6.5在瀏覽器中預覽18
1.6.6字型18
1.6.7自定義代碼視圖19
第2章站點創建與管理20
2.1站點規劃20
2.1.1檔案分類保存20
2.1.2合理命名檔案20
2.1.3本地站點與遠程站點21
2.2認識“站點”面板21
2.2.1“站點”面板詳解21
2.2.2創建站點22
2.3設定遠程站點伺服器23
2.3.1設定伺服器23
2.3.2設定版本控制26
2.3.3站點的高級設定26
2.4導出和導入站點32
2.4.1導出站點32
2.4.2導入站點33
2.5維護站點33
2.5.1編輯站點33
2.5.2複製站點34
2.5.3刪除站點34
2.5.4切換站點35
第3章HTML的基礎知識36
3.1HTML概述36
3.2HTML的語法結構36
3.3HTML中的常用標籤37
3.3.1文檔結構標籤37
3.3.2字元格式標籤38
3.3.3區段格式標籤38
3.3.4列表格式標籤39
3.3.5超連結標籤39
3.3.6多媒體標籤40
3.3.7表單標籤40
3.4HTML541
3.4.1HTML5概述41
3.4.2HTML5標籤41
3.5設定頭部信息42
3.5.1設定網頁標題43
3.5.2設定網頁META信息43
3.5.3添加網頁關鍵字44
3.5.4添加網頁說明44
3.5.5設定視口45
3.6“頁面屬性”對話框45
3.6.1設定“外觀(CSS)”選項46
3.6.2設定“外觀(HTML)”選項46
3.6.3設定“連結(CSS)”選項47
3.6.4設定“標題(CSS)”選項47
3.6.5設定“標題/編碼”選項48
3.6.6設定“跟蹤圖像”選項49
第4章CSS樣式50
4.1CSS樣式基礎50
4.1.1CSS樣式概述50
4.1.2CSS樣式的基礎語法50
4.2選擇符51
4.2.1通配選擇符51
4.2.2類型選擇符51
4.2.3包含選擇符51
4.2.4id選擇符51
4.2.5class選擇符51
4.3使用CSS設定顏色52
4.4百分比值53
4.5設定URL的相對路徑和絕對路徑?53
4.5.1相對路徑?53
4.5.2絕對路徑?54
4.5.3套用實例?54
4.6調用CSS檔案?54
4.6.1在頁面內部調用?54
4.6.2調用外部CSS檔案?54
4.7設定CSS屬性56
4.7.1布局屬性57
4.7.2文本屬性58
4.7.3框線屬性59
4.7.4背景屬性60
4.7.5自定義屬性61
第5章DIV+CSS網頁布局62
5.1初識DIV62
5.1.1DIV概述62
5.1.2DIV與Span的區別62
5.1.3DIV+CSS布局優勢64
5.2CSS定位64
5.2.1盒子模型的概念64
5.2.2float定位65
5.2.3position定位68
5.3CSS布局理念70
5.3.1用DIV將頁面分塊70
5.3.2設計各塊的位置70
5.3.3用CSS定位71
5.4常見的布局類型71
5.4.1列固定寬度71
5.4.2列自適應72
5.4.3兩列固定寬度72
5.4.4兩列寬度自適應73
5.4.5兩列右列寬度自適應73
5.4.6三列浮動中間列寬度自適應74
第6章網頁中文字、段落和列表的套用75
6.1文字和段落75
6.1.1設定標題文字75
6.1.2設定文本的字型、字號和顏色75
6.1.3文本的加粗與傾斜?76
6.1.4分段處理76
6.1.5插入水平線76
6.1.6文字排版處理?77
6.2列表套用77
6.2.1無序列表77
6.2.2有序列表?77
6.2.3定義列表77
第7章使用表格布局網頁78
7.1創建表格78
7.2套用表格79
7.2.1輸入表格內容79
7.2.2選定表格元素80
7.2.3設定表格與單元格屬性82
7.2.4像素和百分比的使用83
7.2.5添加和刪除行或列83
7.2.6單元格的合併及拆分85
7.2.7表格排序86
7.2.8嵌套表格87
7.3擴展表格模式87
7.4導入和導出表格數據88
7.4.1導入表格數據88
7.4.2導出表格數據89
7.5表格實戰90
7.5.1製作細線表格90
7.5.2製作分割線91
7.5.3製作隔距框線表格92
7.5.4網頁布局95
7.5.5網頁的構形設計96
第8章創建網頁中的超連結99
8.1超級連結99
8.1.1URL簡介99
8.1.2超級連結路徑99
8.1.3網站內部連結100
8.1.4連結到網站內部圖像101
8.1.5網站外部連結106
8.1.6創建空連結107
8.1.7為網頁添加空連結107
8.2電子郵件連結109
8.3下載連結110
8.3.1創建下載連結110
8.3.2製作音樂下載網頁113
8.4錨記連結116
8.4.1創建錨記連結116
8.4.2跳轉到網頁頂部117
8.5創建腳本連結118
8.6製作多彩連結網頁119
第9章使用圖片修飾網頁124
9.1網頁圖片的格式124
9.1.1GIF格式圖片124
9.1.2JPEG格式圖片124
9.1.3PNG格式圖片125
9.2圖像占位符125
9.2.1插入圖像占位符125
9.2.2將圖像占位符替換為圖像126
9.2.3預覽網頁時不顯示圖像的問題127
9.3互動式圖像128
9.3.1插入互動式圖像128
9.3.2互動式圖像示例128
9.4網頁背景131
9.4.1設定網頁背景顏色131
9.4.2設定網頁背景圖像132
9.4.3使網頁背景呈條紋狀顯示133
9.5圖片相關的其他操作133
9.5.1外部圖像編輯器133
9.5.2設定外部圖像編輯器133
9.5.3製作個性圖像網頁135
9.5.4圖像與文字的搭配136
9.5.5圖像映射136
第10章創建網頁中的多媒體對象138
10.1插入Flash動畫138
10.1.1在網頁中插入Flash動畫138
10.1.2設定Flash動畫屬性139
10.2為網頁添加背景音樂140
10.2.1網頁中常用的音樂格式140
10.2.2使用標籤添加背景音樂140
10.2.3使用外掛程式嵌入音頻141
10.3在網頁中插入視頻143
10.3.1網頁中常用的視頻格式143
10.3.2插入視頻144
10.4在網頁中插入特殊多媒體元素145
10.4.1插入EdgeAnimate動畫145
10.4.2插入HTML5Video與HTML5Audio145
第11章用表單實現頁面互動性147
11.1表單概述147
11.1.1什麼是表單147
11.1.2表單的工作流程148
11.2表單的創建及設定148
11.2.1創建表單148
11.2.2設定表單屬性150
11.3表單元素在網頁中的套用151
11.3.1插入文本151
11.3.2插入密碼153
11.3.3插入文本區域154
11.3.4插入隱藏154
11.3.5插入複選框155
11.3.6插入單選按鈕組157
11.3.7插入選擇選單158
11.3.8插入圖像按鈕159
11.3.9插入檔案160
11.3.10插入按鈕160
11.4表單套用161
11.4.1製作線上調查表161
11.4.2製作下拉選單166
11.4.3製作登錄網頁169
11.4.4製作註冊網頁174
11.4.5創建友情連結網頁181
第12章框架、模板和庫的套用186
12.1框架186
12.1.1框架的組成186
12.1.2框架的優點186
12.1.3框架的缺點187
12.2IFRAME框架187
12.3模板190
12.3.1創建模板190
12.3.2定義可編輯區域191
12.3.3定義可選區域192
12.3.4定義可編輯可選區域193
12.3.5定義重複區域194
12.4基於模板的頁面195
12.4.1新建基於模板的頁面195
12.4.2更新基於模板的頁面196
12.4.3刪除頁面中使用的模板196
12.5使用庫項目196
12.5.1新建庫項目196
12.5.2插入庫項目196
12.5.3編輯庫項目197
12.5.4更新庫項目197
12.5.5庫項目的屬性面板198
第13章使用行為創建網頁特效200
13.1了解DreamweaverCC中的行為200
13.1.1行為的概念200
13.1.2“行為”面板201
13.1.3常見的動作類型202
13.1.4事件203
13.2使用DreamweaverCC內置行為204
13.2.1交換圖像204
13.2.2彈出信息206
13.2.3打開瀏覽器視窗207
13.2.4轉到URL209
13.2.5預先載入圖像209
13.2.6設定容器的文本210
13.2.7設定狀態欄文本210
13.2.8顯示-隱藏元素211
13.2.9檢查外掛程式213
13.2.10檢查表單214
13.3行為技巧216
13.3.1製作滾動公告216
13.3.2製作自動關閉網頁217
13.3.3顯示當前日期和時間219
13.3.4將站點加入收藏夾220
13.3.5將站點設為首頁221
13.3.6實現定時關閉視窗222
13.3.7為頁面設定訪問口令223
第14章網站的發布與推廣226
14.1測試站點226
14.1.1檢查連結226
14.1.2站點報告228
14.1.3清理文檔229
14.2發布網站232
14.3維護網站234
14.4網站的推廣235
14.4.1登錄搜尋引擎235
14.4.2交換廣告條236
14.4.3使用meta標籤236
14.4.4使用傳統方式推廣238
14.4.5藉助網路廣告239
14.4.6登錄網址導航站點240
14.4.7通過論壇宣傳240
第15章綜合實例241
15.1個人部落格網站241
15.1.1網站規劃241
15.1.2切圖分析241
15.1.3頁面實現242
15.2企業網站254
15.2.1網站規劃254
15.2.2切圖分析255
15.2.3頁面實現255
文摘
第1章DreamweaverCC入門
DreamweaverCC是Adobe公司推出的一款擁有可視化編輯界面的網頁製作與管理軟體的最新版本，其提供了強大的可視化布局工具、套用開發功能和代碼編輯支持，使設計和開發人員能夠有效地創建非常吸引人的、基於標準的網站和套用。業界通常將Dreamweaver、Flash、Fireworks稱為“網頁三劍客”。本章將帶領讀者認識DreamweaverCC。
1.1DreamweaverCC功能概述
DreamweaverCC使用所見即所得的接口，亦有HTML(HyperTextMarkupLanguage，超文本標記語言)編輯的功能，其目前有Mac和Windows系統的版本。
DreamweaverCC提供了功能強大的站點管理工具，通過它可以輕鬆實現站點名稱及所在路徑定義、遠程伺服器連線、版本控制等功能，並且可以在這個基礎上實現檔案管理等功能。
1.1.1主要功能
DreamweaverCC是一款功能強大的可視化網頁編輯與管理軟體。利用它，不僅可以輕鬆地創建跨平台和跨瀏覽器的頁面，還可以直接創建具有動態效果的網頁而不用自己編寫原始碼。DreamweaverCC最主要的優勢在於能夠進行多任務工作，並且在操作方法、界面風格方面更加人性化。用戶可以根據自己的喜好和工作方式，重新排列面板和面板組，自定義工作區。
1.1.2新增功能
DreamweaverCC包含新增功能預覽和新功能操作視頻，視頻講解了新功能的操作方法。該版本也提供選項，讓用戶略過預覽，直接開始工作。
新功能視頻解說是在用戶安裝或更新DreamweaverCC時，或刪除偏好設定並重新啟動DreamweaverCC時顯示，也可以通過執行“幫助”>“新增功能視頻”選單命令隨時查看。
相較於以前的版本，DreamweaverCC新增了以下功能。
(1)實時視圖編輯功能
用戶可以直接在實時視圖中編輯並查看設計，連線或退出瀏覽器的時間會更短。實時視圖可以使用全新的基於Chromium的渲染引擎，因此在DreamweaverCC和常用瀏覽器中顯示的內容看起來一樣。實時視圖編輯功能包括快速屬性檢查器、元素的顯示方式、現場查看屬性檢查器等。
(2)元素快速視圖
藉助新的“元素快速視圖”，用戶可以在單個列表視圖中查看HTML元素，並能輕鬆地重新排列、複製和刪除。
(3)使用“CSS設計器”面板
用戶可以使用新的“CSS設計器”面板套用和創建基於標準的CSS布局、顏色、字型、文本以及快速回響的設計。“CSS設計器”面板的框線控制項界面增強，標籤控制項可幫助用戶以簡單而直接的方式，設定四面框線屬性，可避免同時看到所有值，以減少混淆的情形。新的面板支持從一個選擇器複製樣式並貼入另一個選擇器中，用戶可以複製所有樣式，也可以僅複製特定樣式類別，支持快速編輯文字塊。用戶還可以在其中指定屬性的速記代碼，如邊界、間距、框線和框線半徑。
(4)使用jQueryWidget
用戶可以使用jQueryUI將Widget從“插入”面板拖放到Web項目以製作進度條、滑塊、選單和其他有用的組件。
(5)從PSD中提取資源和CSS
用戶可以複製PSD複合元素中的所有或特定CSS屬性，並直接將這些樣式貼上到CSS設計器、實時視圖的元素顯示中，或直接貼上到用戶的代碼(CSS源或HTML文檔)中，然後在PSD複合中選擇的元素的CSS屬性會自動填充到代碼提示。如果希望使用編碼，則可以使用這些代碼提示將CSS屬性提取到代碼中。Extract提供了完整獨立的解決方案，可供從PSD複合中提取樣式信息和資源，無須頻繁地在Photoshop和DreamweaverCC之間來回切換。
(6)使用Typekit設計高品質字型
在網頁中能夠使用的默認字型並不多，如果需要使用特殊的字型效果，通常都是將特殊文字製作成圖片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在網頁中可以載入Adobe提供的EdgeWeb字型，從而在網頁中實現特殊字型效果。執行“修改”>“管理字型”命令，在彈出的“管理字型”對話框中選擇AdobeEdgeWebFonts選項卡，即可使用Adobe提供的EdgeWeb字型。
(7)新增EdgeAnimate插入動畫
在全新的DreamweaverCC中可以插入AdobeEdgeAnimate動畫(OAM檔案)，默認情況下，用戶在DreamweaverCC中插入AdobeEdgeAnimate動畫後，會自動在當前站點的根目錄中生成一個名為edgeanimate_assets的資料夾，將AdobeEdgeAnimate動畫的提取內容放入該資料夾中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate動畫，可以單擊“插入”面板“媒體”選項卡中的“EdgeAnimate作品”按鈕。
(8)在Behance上分享作品
用戶可以在Behance上分享項目，並得到來自世界各地的即時反饋。
(9)使用CreativeCloud存儲作品
用戶可以通過CreativeCloud隨時隨地保存並訪問自己的作品，也可以使用AdobeCreativeCloud，檢查並安裝DreamweaverCC擴展功能。
1.2DreamweaverCC的工作界面
DreamweaverCC的工作界面主要由選單欄、自定義快捷鍵、工具列、文檔視窗、屬性面板、面板組、文檔狀態欄等構成，如圖1-1所示。
圖1-1
1.2.1選單欄
選單欄包括“檔案”“編輯”“查看”“插入”“修改”“格式”“命令”“站點”“視窗”和“幫助”10個選單，如圖1-2所示。選單欄上的每個選單選項下面都有多個子選單，每一個選單命令都可以進行一些相關的命令執行或屬性的設定。
圖1-2
1.2.2工具列
工具列中包含一些按鈕，用來在“代碼”視圖、“拆分”視圖以及“設計”視圖、“實時視圖”間進行切換。此外，工具列還包含一些與文檔操作有關的常用命令和選項，如圖1-3所示。
圖1-3
●“代碼”視圖的按鈕為，用於只在文檔視窗中顯示“代碼”視圖。
●同時顯示“代碼”視圖和“設計”視圖的按鈕為，選中後文檔視窗將拆分為“代碼視圖”和“設計視圖”。其中文檔視窗中左側為“代碼”視圖，右側為“設計”視圖。
●“設計”視圖的按鈕為，用於只在文檔視窗中顯示“設計”視圖。
●“實時視圖”的按鈕為，其中顯示的內容與用戶在瀏覽器中預覽的效果一樣。
●“在瀏覽器中預覽/調試”按鈕為，可根據用戶需求，在用戶選擇的瀏覽器中進行預覽或調試文檔。
●“標題文本框”圖示為，用於為文檔輸入一個標題，該標題將顯示在瀏覽器的標題欄中。如果文檔已有標題，則該標題將顯示於該區域中。
●“檔案管理”按鈕為，用於對檔案進行管理，如對檔案進行獲取、取出、上傳、存回等操作。
1.2.3文檔視窗
文檔視窗用於顯示當前的文檔，包括“設計”視圖、“代碼”視圖、“拆分”視圖、“實時視圖”。
●“設計”視圖：是一個用於可視化頁面布局、可視化編輯以及快速進行應用程式開發的設計環境。在該視圖中，DreamweaverCC顯示文檔的完全可編輯的可視化表示形式，類似於在瀏覽器中查看頁面時看到的內容。用戶可以配置“設計”視圖，以在處理文檔時顯示動態內容。
●“代碼”視圖：一個用於編寫和編輯HTML、JavaScript、伺服器語言代碼以及任何其他類型代碼的手工編碼環境。
●“拆分”視圖：該視圖使用戶可以在一個視窗中同時看到同一文檔的“代碼”視圖和“設計”視圖。
●實時視圖：該視圖使用戶可以直接在文檔視窗預覽設計效果。
1.2.4“屬性”面板
“屬性”面板主要用於查看和更改所選對象的各種屬性，每種對象都具有不同的屬性。在“屬性”面板中包括兩種選項，一種是“HTML”選項，將默認顯示文本的格式、樣式和對齊方式等屬性。另一種是“CSS”選項，單擊屬性面板中的“CSS”選項，可以在“CSS”選項中設定各種屬性。“屬性”面板顯示當前選定的對象或文本的屬性，也可以在這裡直接修改屬性。如圖1-4所示。
圖1-4
1.2.5面板組
DreamweaverCC中的面板可以自由組合成面板組。每個面板組都可以展開和摺疊，並且可以和其他面板組停靠在一起或取消停靠。面板組還可以停靠到集成的應用程式視窗中。這樣就能夠很容易地訪問所需的面板，而不會使工作區變得混亂，如圖1-5所示。
圖1-5
1.2.6文檔狀態欄
文檔狀態欄可以提供與正在創建的文檔有關的其他信息，如圖1-6所示。
圖1-6
●“標籤選擇器”圖示為，單擊圖示可以選擇文檔中屬於該標籤的整個正文。圖示為“元素快速視圖”，用於顯示環繞當前選定內容的標籤的層次結構。通過單擊該層次結構中的標籤，可以選擇該標籤及其全部內容。
●“視窗大小”圖示為，可以調整文檔視窗的大小，使其達到預定義或自定義的尺寸。
1.3自定義工作區
DreamweaverCC包括兩個主要的工作區，用於適應多種不同的計算機配置和各種工作流程。用戶可以根據自己的喜好，調整DreamweaverCC中的編碼環境，使之適合自己的習慣。如果任何預設的工作區都不能完全滿足用戶需要，則可以自定義工作區。
1.3.1瀏覽工作區
DreamweaverCC是行業領先的HTML編輯器，其功能十分強大。不論是編碼人員、開發人員還是設計人員，都可以根據自己的喜好來自定義工作區，使其滿足自己的需求。DreamweaverCC中用戶可配置的面板和工具箱如圖1-7所示。
