使用手冊 取消

了解網路應用程式

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

註解:

Dreamweaver CC (含) 以後版本的使用者介面已經簡化了。因此,您在 Dreamweaver CC 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

關於網路應用程式

網路應用程式是一個包含網頁的網站,其中這些網頁的內容可能有部分或全部都尚未決定。只有在使用者向網頁伺服器要求網頁時,網頁的最後內容才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化,每個要求的結果都不同,所以這種網頁便稱為動態網頁。

建立網路應用程式時,必須考慮到各種需要和問題。本節說明網路應用程式的常見用法,並提供一個簡單的範例。

網路應用程式的常見用法

網頁瀏覽者和開發人員應用網路應用程式的方法很多,其中包括:

  • 讓使用者在內容豐富的網站上輕鬆快速地找到資訊。

    這類型的網路應用程式可以根據使用者的需求,為使用者提供搜尋、組織和導覽內容的功能。範例包括公司的內部網路、Microsoft MSDN (www.msdn.microsoft.com) 和 Amazon.com (www.amazon.com)。

  • 收集、儲存和分析網站使用者所提供的資料。

    在過去,在 HTML 表格中輸入的資料是透過電子郵件傳送給員工,或以 CGI 應用程式的形式處理。網路應用程式可以將表格資料直接儲存到資料庫,還可以將資料擷取出來,建立網站報告以提供分析。常見的範例包括網路銀行網頁、商店的結帳網頁、意見調查和使用者意見表格等。

  • 更新經常變更內容的網站。

    網路應用程式可以除去網頁設計師需要經常更新網站之 HTML 的負擔。如新聞編輯人員之類的內容提供者可以為網路應用程式提供內容,而網路應用程式即可自動更新網站。範例包括 Economist (www.economist.com) 和 CNN (www.cnn.com)。

網路應用程式範例

小珍是長時間使用 Dreamweaver 的專業網頁設計師,她負責為一家擁有 1000 名員工的中等規模公司維護其內部網路和網際網路網站。有一天,人力資源部門的王先生來向她請教一個問題。人力資源正在執行一項員工健康方案,不論是走路、騎腳踏車或跑步,員工所運動的每公里都可獲得點數。每個員工都必須用電子郵件將每月運動的里程數報告給王先生。每個月的月底,王先生會收集所有的電子郵件,並根據員工的總點數,提供小額的現金獎勵給員工。

王先生的問題是這項健康方案太過熱門, 參加的員工數量太龐大,現在每到月底,王先生的信箱都快被蜂擁而來的電子郵件塞爆了。王先生問小珍有沒有可用的網路解決方案。

小珍建議他使用可執行下列工作的內部網路應用程式:

  • 讓員工在網頁上使用簡單的 HTML 表格輸入運動里程數

  • 將員工的里程數儲存在資料庫內

  • 根據里程數資料計算健康點數

  • 讓員工追蹤每月進度

  • 讓王先生在每月月底只要按一下便可以看到總點數

    小珍在中午前靠 Dreamweaver 的工具,便輕鬆快速地建好了應用程式並開始執行。

網路應用程式的運作方式

網路應用程式是靜態和動態網頁的集合。靜態網頁不因網站使用者要求而變更:網頁伺服器會直接將網頁傳送到要求的網頁瀏覽器而不修改。相反地,動態網頁在傳送到要求的瀏覽器前,會由伺服器進行修改。因為網頁會變更,所以才稱為動態。

例如,您可以設計顯示健康結果的網頁,並將某些資訊 (例如員工名稱和結果) 留到特定員工要求該網頁時才決定。

下一節將更深入探討網路應用程式的運作方式。

處理靜態網頁

靜態的網站是由一組相關的 HTML 網頁和檔案 (存放在執行網頁伺服器的電腦上) 所組成。

網頁伺服器是提供網頁的軟體,會回應網頁瀏覽器發出的要求。當使用者在網頁上按一下連結、在瀏覽器中選擇書籤,或者在瀏覽器的網址文字方塊中輸入 URL 時,便會產生網頁要求。

靜態網頁的最後內容是由網頁設計師決定,不會在要求網頁時變更。以下是一個範例:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
    </body> 
</html>

這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫,然後才被放到伺服器上。因為 HTML 一旦放到伺服器上後就不會變更,所以這類網頁又稱為靜態網頁。

註解:

嚴格說來,「靜態」網頁並不是靜態。例如,滑鼠變換影像或 Flash 內容 (SWF 檔案) 都會使靜態網頁變得活靈活現。不過,只要是在傳送到瀏覽器時沒有經過修改的網頁,這本手冊便將它稱為靜態網頁。

當網頁伺服器接到靜態網頁的要求時,伺服器會讀取要求、找到網頁,然後將它傳送到要求的瀏覽器,如下例所示:

處理靜態網頁

A. 網頁瀏覽器要求靜態網頁。 B. 網頁伺服器找到網頁。 C. 網頁伺服器將網頁傳送到要求的瀏覽器。 

以網路應用程式的例子而言,當使用者要求網頁時,某些特定的程式碼行是未決定的。將網頁傳送到瀏覽器前,您必須使用某些機制決定這些程式碼行。下一節中將討論這個機制。

處理動態網頁

當網頁伺服器收到靜態網頁的要求時,伺服器會直接將網頁傳送到要求的瀏覽器。當網頁伺服器收到動態網頁的要求時,卻會有不同的反應:它會將網頁傳送到負責完成網頁的特定軟體, 這個特殊軟體稱為應用程式伺服器。

應用程式伺服器會讀取網頁上的程式碼、根據程式碼中的指示完成網頁,然後再將程式碼從網頁移除。然後應用程式伺服器會將靜態網頁傳回網頁伺服器,後者則將該網頁傳送到要求的瀏覽器。瀏覽器在網頁到達時所取得的資料是純粹的 HTML。下面是處理過程的檢視:

處理動態網頁

A. 網頁瀏覽器要求動態網頁。 B. 網頁伺服器找到網頁,並將它傳送給應用程式伺服器。 C. 應用程式伺服器掃描網頁上的指示並完成網頁。 D. 應用程式伺服器將完成的網頁傳回給網頁伺服器。 E. 網頁伺服器將完成的網頁傳送到要求的瀏覽器。 

存取資料庫

應用程式伺服器可以讓您使用資料庫之類的伺服器端資源, 例如,動態網頁可以指示應用程式伺服器從資料庫擷取資料,並將其插入網頁的 HTML 中。如需詳細資訊,請參閱 www.adobe.com/go/learn_dw_dbguide_tw

使用資料庫儲存內容,可讓您將網站的設計以及要顯示給網站使用者的內容加以區隔。您不必為每個網頁撰寫個別的 HTML 檔,只需針對想要呈現的各種不同資訊撰寫網頁 (或範本) 即可。接著,您就可以將內容上傳至資料庫中,然後讓網站依據使用者的要求擷取該內容。您也可以在單一來源中更新資訊,然後將變更填入整個網站,而不必手動編輯每個網頁。您可以使用 Adobe Dreamweaver 來設計網頁表單,以便從資料庫插入、更新或刪除資料。

從資料庫擷取資料的指示稱為「資料庫查詢」。 查詢是由搜尋準則所組成,這些準則是以稱為 SQL (結構化查詢語言) 的資料庫語言表達。SQL 查詢會被寫入網頁的伺服器端 Script 或標籤。

應用程式伺服器無法直接與資料庫溝通,因為資料庫的專用格式會使資料變得無法辨認,就像在「記事本」或 BBEdit 中開啟 Word 文件會使文件變得無法辨認一樣。應用程式伺服器只能經由資料庫驅動程式這個媒介才能與資料庫進行溝通:資料庫驅動程式是軟體,作用就像應用程式伺服器和資料庫之間的解譯器。

驅動程式建立了通訊後,便可以針對資料庫進行查詢並建立資料集。「資料集」是從資料庫中的一或多個表格中擷取出的一組資料。 資料集會傳回至應用程式伺服器,而伺服器會使用資料以完成動態網頁。

以下是一個以 SQL 所寫成的簡單資料庫查詢:

SELECT lastname, firstname, fitpoints 
FROM employees

這個陳述式會建立一個三欄的資料集,並將資料庫中所有員工的姓、名和健康點數等列填入。如需詳細資訊,請參閱 www.adobe.com/go/learn_dw_sqlprimer_tw

下列範例會顯示查詢資料和將資料傳到瀏覽器的程序:

存取資料庫

A. 網頁瀏覽器要求動態網頁。 B. 網頁伺服器找到網頁,並將它傳送給應用程式伺服器。 C. 應用程式伺服器掃描網頁上的指示。 D. 應用程式伺服器將查詢傳送到資料庫驅動程式。 E. 驅動程式針對資料庫執行查詢。 F. 傳回資料集給驅動程式。 G. 驅動程式將資料集傳送到應用程式伺服器。 H. 應用程式伺服器在網頁中插入資料,然後將網頁傳送到網頁伺服器。 I. 網頁伺服器將完成的網頁傳送到要求的瀏覽器。 

您的網路應用程式幾乎可以使用任何的資料庫,只要伺服器上安裝了適當資料庫驅動程式即可。

如果您計劃建立小型廉價的應用程式,可以使用以檔案為主的資料庫,例如以 Microsoft Access 建立的資料庫。如果您計劃建立商務關鍵性的完整應用程式,可以使用伺服器架構的資料庫,例如以 Microsoft SQL Server、Oracle 9i 或 MySQL 建立的資料庫。

如果存放資料庫的系統不是您的網頁伺服器,請確定這兩個系統之間的連線速度夠快,這樣網路應用程式才能快速而有效地運作。

撰寫動態網頁

動態網頁的撰寫包含下列事項:先撰寫 HTML、然後在 HTML 中加入伺服器端 Script 或標籤,使網頁變成動態。當您檢視產生的程式碼時,該語言會以內嵌的形式出現在網頁的 HTML 中, 所以這些語言被稱為 HTML 內嵌程式語言。下列基本範例使用的是「ColdFusion 標記語言」(CFML):

注意:Dreamweaver CC 和更新版本已移除對 CFML 的支援。

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <!--- embedded instructions start here ---> 
        <cfset department="Sales"> 
        <cfoutput> 
        <p>Be sure to visit our #department# page.</p> 
        </cfoutput> 
        <!--- embedded instructions end here ---> 
    </body> 
</html>

這個網頁上的內嵌指示會執行下列動作:

  1. 建立稱為 department 的變數,並將字串 "Sales" 指定給它。

  2. 在 HTML 程式碼中插入變數的值 "Sales"

應用程式伺服器會將下列網頁傳回網頁伺服器:

<html> 
    <head> 
        <title>Trio Motors Information Page</title> 
    </head> 
    <body> 
        <h1>About Trio Motors</h1> 
        <p>Trio Motors is a leading automobile manufacturer.</p> 
        <p>Be sure to visit our Sales page.</p> 
    </body> 
</html>

網頁伺服器會將網頁傳送給要求的瀏覽器,後者會將其顯示為:

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

您需要視伺服器上提供的伺服器技術,選擇要使用的 Script 或標籤語言。以下是 Dreamweaver 所支援的伺服器技術最常用的語言:

伺服器技術

語言

ColdFusion

ColdFusion 標記語言 (CFML)

Active Server Pages (ASP)

VBScript

JavaScript

PHP

PHP

Dreamweaver 可以建立網頁運作時必要的伺服器端 Script 或標籤,或者您也可以在 Dreamweaver 程式碼撰寫環境中自行撰寫。

網路應用程式詞彙

本節定義網路應用程式相關的常用詞彙。

應用程式伺服器

可以協助網頁伺服器處理包含伺服器端 Script 或標籤等網頁的軟體。從伺服器要求這種網頁時,網頁伺服器會將網頁交由應用程式伺服器處理,再傳送給瀏覽器。如需詳細資訊,請參閱網路應用程式的運作方式

常見的應用程式伺服器包括 ColdFusion 和 PHP。

資料庫

存放在表格中的資料集合。表格的每一列構成一筆記錄,而每一欄構成記錄中的欄位,如下列範例所顯示:

資料庫

資料庫驅動程式

如同網路應用程式和資料庫之間的解譯器之軟體。資料庫中的資料是以專用格式儲存的。資料庫驅動程式可以讓網路應用程式讀取和操作無法用其他方式解讀的資料。

資料庫管理系統

(DBMS 或稱資料庫系統) 用來建立和操作資料庫的軟體。常見的資料庫系統包括 Microsoft Access、Oracle 9i 和 MySQL。

資料庫查詢

從資料庫擷取資料集的作業。查詢是由搜尋準則所組成,這些準則是以稱為 SQL 的資料庫語言來表示。例如,查詢可以指定資料集內只能包含特定的欄或記錄。

動態網頁

在頁面傳送至瀏覽器前,由應用程式伺服器所自訂的網頁。

資料集

從資料庫中的一或多個表格中擷取出的一組資料,如下列範例所示:

資料集

關聯式資料庫

包含多個表格,並會在表格間共用資料的資料庫。下列資料庫是關聯式的,因為兩個表格共用 DepartmentID 欄。

關聯式資料庫

伺服器技術

應用程式伺服器用來在執行階段修改動態網頁的技術。

Dreamweaver 開發環境支援下列伺服器技術:

  • Adobe® ColdFusion®

  • Microsoft Active Server Pages (ASP)

  • PHP: Hypertext Preprocessor (PHP)

    您也可以使用 Dreamweaver 程式碼撰寫環境,開發未列於此處的其他伺服器技術的網頁。

靜態網頁

在頁面傳送至瀏覽器前,不會由應用程式伺服器修改的網頁。如需詳細資訊,請參閱處理靜態網頁

網路應用程式

包含網頁的網站,其中這些網頁的內容可能有部分或全部都尚未決定。這些網頁的最後內容只有在使用者向網頁伺服器要求網頁時,才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化,每個要求的結果都不同,所以這種網頁便稱為動態網頁。

網頁伺服器

會對網頁瀏覽器的要求做出回應而傳送網頁的軟體。當使用者在瀏覽器中的網頁上按一下連結、在瀏覽器中選擇書籤,或者在瀏覽器的網址文字方塊中輸入 URL 時,便會產生網頁要求。

常見的網頁伺服器包括 Microsoft Internet Information Server (IIS) 及 Apache HTTP Server。

Adobe 標誌

登入您的帳戶