Transcript Dreamweaver 的軟體特色完整的CSS支援

1
01
跨越不同平台的
網頁設計軟體
2
1-1
認識功能強大的 Dreamweaver CS6
Dreamweaver 是網頁設計人員、網頁開發人員與視覺設計人員的理
想工具，它能有效率地設計、開發和維護以標準為基礎的網站和應用
程式。
3
 為什麼 Dreamweaver 在網頁編輯的領域那麼流行？
應用 Dreamweaver 開發的網站在全球占有非常高的比例，為什麼
Dreamweaver 會那麼流行？這與 Dreamweaver 在面對網站開發時堅
持的方向有很大的關係。
在整個網站製作的工作流程中，無論是設計、開發和維護都可以使用
Dreamweaver 完成，美工設計人員或是程式開發人員，都可以在同
一個平台中，藉著直覺式視覺化版面配置介面或簡化的編碼環境，快
速編輯一般的網頁或是互動的應用程式。
Dreamweaver 是網頁設計人員、
網頁開發人員與視覺設計人員的理想工具
4
 Dreamweaver 的軟體特色
1. 直覺式視覺化的開發：Dreamweaver 提供了 設計 檢視及 程式碼
檢視二種編輯方法，在 設計 檢視中可以直接以網頁結果進行設計
，或是切換到 程式碼 檢視中編寫複雜的程式碼，二個設計模式可
以相輔相成，分工合作完成網頁的開發。
Dreamweaver 提供了設計檢視及程式碼檢視二種編輯方法。
5
 Dreamweaver 的軟體特色
2. 整合的工作流程：無論是單獨編輯或是團隊合作，在整個工作流程
中設計、開發和維護內容，都不需要使用不同的軟體，即可完成所
有的工作。同時還可運用其他 Adobe 軟體工具進行智慧整合，建立
各式各樣的內容。
Dreamweaver 可進行設計、開發和維護內容的工作，不需要使用不同的軟體
6
 Dreamweaver 的軟體特色
3. 完整的CSS支援：在開發網頁CSS樣式時，最困難的即是無法預知
設定完成的結果，Dreamweaver 中 CSS 工具的優點，即是讓設計
人員可以輕鬆檢視、編輯並在檔案之間移動 CSS 樣式，立即檢視
修改後的 CSS 樣式對於頁面設計的影響。
Dreamweaver CSS 工具的優點：能讓設計人員輕鬆檢視、編輯 CSS 並能即時預覽
7
 Dreamweaver 的軟體特色
4. 優良的編碼環境：在 程式碼 檢視中可以使用程式碼收合、程式碼
色彩標示、程式行編號以及編碼工具列來組織和加速編碼的動作。
在編輯的過程中還能套用 HTML 和伺服器語言的程式碼提示，完
成複雜的程式碼編輯。
Dreamweaver 程式碼 檢視中提供完整的工具完成複雜的程式碼編輯工作
8
 Dreamweaver 的軟體特色
5. 支援多樣的語法：除了一般網頁編輯使用的H T M L、X H T M L、
C S S、X M L、JavaScript 外，還能支援互動程式使用的 Ajax、
PHP、Adobe ColdFusion、ASP、ASP.NET 和 JSP...等語法。
Dreamweaver 支援領先的網頁開發技術
9
 Dreamweaver 的軟體特色
6. 輕鬆完成 XML 整合：使用 XSL 或 Spry 快速整合資料來源內容
，讓頁面能快速的顯示其資料，甚至能分析出適當的欄位拖放到頁
面上。
7. 快速加入 FLV：不需具備 Flash 的製作技巧與知識，只要利用滑
鼠在 Dreamweaver 中設定即可輕鬆將 FLV 檔案加入網頁中，並能
搭配網頁的內容自訂視訊的環境。
在 Dreamweaver 中可輕鬆將 FLV 檔案加入網頁
10
 Dreamweaver CS6 的新功能
1. 改善 FTP 效能：重新改良的 FTP 傳輸工具，減少大型檔案上傳
的時間，讓網站上傳快又有效率。
2. 支援 HTML5、CSS3 及 JavaScript 程式碼提示：Dreamweaver
CS6 針對加入 HTML5 標籤、CSS3 或 JavaScript 提供程式碼提示
，幫助使用者能在開發的過程中，增加效率並提高正確率。
支援 HTML5、CSS3 及 JavaScript 程式碼提示
11
 Dreamweaver CS6 的新功能
3. 即時檢視：讓使用者在編輯頁面中實際與伺服器端應用程式及動態
資料進行互動，也能直接輸入 URL 網址來檢查由即時網站伺服器
提供的頁面，如果該頁面是某個本機定義網站的頁面，即可立即進
行編輯。
在發佈之前可以預先利用 即時檢視 觀看頁面呈現的效果
12
 Dreamweaver CS6 的新功能
4. 使用多螢幕預覽面板預視頁面：Dreamweaver 中的 多螢幕預覽 會
將目前編輯的頁面放置在不同的畫面大小下提供預覽，隨著行動裝
置的流行，讓相同的網頁內容在不同平台下有合適展現。
透過 多螢幕預覽 可以一次預覽在智慧型手機、平板電腦及桌上型電腦上的狀態
13
 Dreamweaver CS6 的新功能
5. 新增媒體查詢：媒體查詢 是 CSS3 提出的新觀念，根據瀏覽器的
視窗寬度不同，讓網頁套用不同的 CSS 設定檔，因此可以根據不
同的瀏覽器寬度設計個別的 CSS 樣式檔，讓製作的網頁在不同的
螢幕都能有最好的顯示效果。
媒體查詢讓不同的媒體裝置套用不同的 CSS 樣式，
設計者可以根據不同的畫面大小設計適合的樣式版型
14
 Dreamweaver CS6 的新功能
6. CSS3 樣式語言：讓網頁設計師不用大費周章使用繪圖軟體或程式
碼，就可以提升原本網頁的整體設計，CSS3 新增的屬性、設定值
及選取器名稱，可以製作出實用的圓角、陰影、變形...等出色效果
，兼顧視覺與效能的雙重優勢。
CSS3 向下相容原來的 CSS 規則，還包含更多的選擇器和屬性，
讓網頁開發人員可以實現更多樣式與功能
15
 Dreamweaver CS6 的新功能
7. jQuery 行動支援：jQuery Mobile 是一個行動裝置網頁介面的開發
框架，不同於傳統網頁，它提供了許多工具可以開發出：頁面的切
換、智慧型手機的操作介面、觸控操控的使用...等，如同行動裝置
App 應用程式的使用畫面。
藉由 jQuery Mobile 可以開發出如同行動裝置 App 應用程式的使用畫面
16
 Dreamweaver CS6 的新功能
8. PhoneGap 支援：透過更新的 PhoneGap 支援，進一步將 jQuery
Mobile 的網頁包裝成跨平台的 App 應用程式，安裝在不同系統的
平板電腦與智慧型手機上。
透過更新的 PhoneGap 支援，將 jQuery Mobile 的網頁包裝成跨平台的 App 應用程式
17
1.2
網頁革命新浪潮
隨著行動裝置的流行，為網頁創造出更多不同的需求。更好、更快、
更不耗效能，能充滿多媒體內容，而且能符合不同平台的系統。
18
1.2.1 HTML5 的出現
HTML5是新一代網頁的標準，希望能夠減少瀏覽器對於外掛程式需求
並可促進更豐富的網路應用服務產生。只要瀏覽器支援這個標準，即
可不用經由外掛程式完成要求的內容，這就是 HTML5 誕生的原因了
W3C 對於 HTML5 版本說明
(www.w3.org/TR/html5/)
HTML5 與 HTML4 的差異
(www.w3.org/TR/html5-diff/)
19
1.2.2 HTML5 的新增功能
那 HTML5 到底新增或改善了什麼？雖然 HTML5 的標準沒有完全確
定，但是以下的功能是正在執行，甚至已經實作在許多瀏覽器當中：
1. 新的標籤元素
2. 表單功能的提升
3. 影訊視訊的支援
4. 新的繪圖標籤
5. 其他
20
1.3
Dreamweaver 的操作環境介紹
Dreamweaver 提供了一個彈性的環境，讓使用者可以搭配使用各種
不同的網頁文件。進入 Dreamweaver 軟體首先看到的是歡迎畫面，
開啟文件後就可瀏覽整個操作環境。
1.3.1 啟動 Dreamweaver
STEP
01
請選按 開始 \ 所有程式 \ Adobe Master Collection CS6 \ Adobe
Dreamweaver CS6 開啟 Dreamweaver。第一次開啟時會出現 預設
編輯器 對話方塊，請按 確定 鈕。
STEP
02
如果是第一次啟動，程式會要求授權方式。已經有購買了正式的版權
，請核選 我有一組產品序號，我想啟動 Dreamweaver 後，按 繼續
鈕，再將序號輸入在欄位中即可啟動 Dreamweaver 來使用。如果想
先試用，請核選 我想試用 Dreamweaver，再按 繼續 鈕。
21
1.3.2 Dreamweaver 的環境介紹
 歡迎畫面的使用
啟動 Dreamweaver 時預設會顯示歡迎畫面，可以快速開啟最近編輯
的檔案或新增文件。
Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案，
以方便等一下的解說
22
 操作環境的介紹
以下是 Dreamweaver 的操作環境，使用 傳統 使用介面進行介紹，
如果你的介面與此不同，請比對參考：
23
1.4
Dreamweaver 的輔助資源
Dreamweaver 為了方便使用者能夠快速的學習，在程式內提供了相
當完整的輔助說明及教材，詳細的程度讓人吃驚！更令人感動的是，
Dreamweaver 繁體中文版的說明文件大都以中文顯示，無論是新手
或是進階使用者都能受益無窮。
1.4.1 Dreamweaver 的輔助說明
其實 Dreamweaver 軟體本身就有相當豐富的學習資料，請選按功能
表列中的 說明，即可看到許多相關資料的連結。
各項說明皆鉅細靡遺整理在這裡
24
1.4.2 Dreamweaver 官方網站資源
功能表列 說明 中的 Dreamweaver 說明、Dreamweaver 交流中心
、Dreamweaver 支援中心、Adobe 線上討論區 四個功能，將官方
網站中的線上資源都整理在此，不僅有最新的教材、文件，甚至有全
世界的使用者交流文件與 Adobe 工程師的經驗分享。
Dreamweaver 支援中心
25
1.5
建議環境配置
針對初次使用 Dreamweaver 這套軟體的使用者，整理幾點環境配置
需要注意的地方，讓操作與學習的過程更為順暢。
1.5.1 關閉或重新使用歡迎畫面
許多接觸 Dreamweaver 的朋
友不太習慣使用歡迎畫面，那
要 如 何 關 閉 呢 ？ 進 入
Dreamweaver 時，可於歡迎
畫面請核選啟始頁左下角的 不
要再顯示，此時會出現一個對
話方塊告知恢復歡迎畫面的方
法，按 確定 鈕即可完成設定
。
26
再次進入Dreamweaver 時，歡迎畫面便不會自動開啟！若要重新顯
示該畫面可以選按功能表列 編輯 \ 偏好設定 開啟對話方塊，選按 分
類：一般設定，核選 顯示歡迎畫面 。
27
1.5.2 改變工作區的配置方式
Dreamweaver 根據使用者習慣的不同，設計了多種工作區的配置，甚至
能設計屬於自己的工作區配置，在儲存後供人使用。
1. 選按視窗右上角切換鈕，或由功能表列 視窗\工作區版面 皆可選擇要使
用的工作區配置方式，而本書的所有畫面，皆以 傳統 配置進行說明。
2. 如果對於目前的工作區配置方式十分滿意，可以選按 新增工作區 將目
前的配置儲存起來。如果對於自訂的版面想要執行更名、刪除等動作，
可選按 管理工作區 版面進行管理動作。
28
1.5.3 設定預設的副檔名及編碼方式
Dreamweaver 開啟新檔案時預設副檔名為「.html」，編碼方式為「
Unicode (UTF-8)」。
建議在操作本書範例前，請選按功能表列 編輯\偏好設定 開啟 偏好設
定 對話方塊，在分類：新文件 中修改預設副檔名為「.htm」，保留
預設編碼 預設狀態。
本書所有範例都會以這個設定值來開發，請記得調整以免操作時發生
不必要的錯誤。
29