使用手冊 取消

建立搜尋及結果頁面

  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 網站
  19. 疑難排解
    1. 已修正的問題
    2. 已知問題

 

 

註解:

Dreamweaver 和更高版本的用戶介面已經簡化。因此,您在 Dreamweaver 和更高版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

關於搜尋及結果頁面

您可以使用 Dreamweaver 建立一組頁面,允許使用者搜尋資料庫並檢視搜尋結果。

在大多數的情況中,您至少要有兩個頁面才能在網路應用程式中加入這項功能。第一個頁面是內含可讓使用者輸入搜尋參數的 HTML 表單頁面。雖然這個頁面並不執行任何實際的搜尋工作,但我們一般都將這個頁面視為「搜尋頁面」。

您所需要的第二個頁面是結果頁面,負責執行大部分的工作。結果頁面會執行下列工作:

  • 讀取由搜尋頁面所送出的搜尋參數

  • 連線到資料庫並搜尋記錄

  • 使用所找到的記錄建立資料集

  • 顯示資料集的內容

    此外,您也可以選擇性地加入一個細節頁面, 提供使用者有關結果頁面中特定記錄的詳細資訊。

    如果您只有一個搜尋參數,Dreamweaver 還允許您在不使用 SQL 查詢和變數的情況下,將搜尋功能加入網路應用程式之中,您只需進行頁面的設計工作,然後於一些對話方塊中完成一些設定就可以了。如果您必須用到的搜尋參數不只一個,就必須撰寫 SQL 陳述式並定義其所需的多個變數。

    Dreamweaver 會在頁面中插入 SQL 查詢。當頁面在伺服器上執行時,便會檢查資料庫表格中的各筆記錄。如果在記錄中的指定欄位符合 SQL 查詢條件,該筆記錄就會納入資料集中。SQL 查詢實際上是建立一個只包含搜尋結果的資料集。

    例如,區域銷售人員想要取得特定區域中,收入超過某個水準的客戶的相關資訊。銷售相關人員在搜尋頁面的表單中輸入特定的地理區域,並設定最低收入水準,然後按一下「送出」按鈕,將這兩個值傳送到伺服器。這些值到了伺服器上,便會傳送至結果頁面的 SQL 陳述式,接著建立一個只包含指定區域中,收入超過指定水準的客戶資料集。

建立搜尋頁面

網站中的搜尋頁面通常會包含可讓使用者輸入搜尋參數的表單欄位。您的搜尋頁面至少要有一個 HTML 表單和一個「送出」按鈕。

若要在搜尋頁面中加入 HTML 表單,請完成下列程序。

  1. 開啟搜尋頁面或新頁面,然後選取「插入>表單>表單」。

    網頁上便會建立空白的表單。您可能必須啟用「隱藏元素」(「檢視>視覺輔助>隱藏元素」),才能看見表單的邊界 (以紅色細線表示)。

  2. 從「插入」選單中選取「表單」,加入要讓使用者輸入搜尋參數的表單物件。

    表單物件包含了文字欄位、選單、選項,以及選項按鈕等。您可以視需要加入多個表單物件,讓使用者便於縮小搜尋範圍。但是要注意,搜尋頁面上的搜尋參數數目愈多,SQL 陳述式就會愈複雜。

  3. 在表單中新增「送出」按鈕 (「插入>表單>按鈕」)。
  4. (選擇性) 變更「送出」按鈕上的標籤,方法是選取這個按鈕、開啟「屬性」檢視窗 (「視窗 > 屬性」),然後在「值」方塊中輸入新的值。

    接下來,告訴表單要在使用者按下「送出」按鈕時,將搜尋參數送往何處。

  5. 如下面影像所示,在「文件」視窗底部的標籤選取器中,選取 <form> 標籤以選取表單:
    表單標籤

  6. 在表單的「屬性」檢視窗的「動作」方塊中,輸入負責執行資料庫搜尋的結果頁面檔案名稱。
  7. 在「方法」彈出式選單中,選取下列其中一個方法來指定表單傳送資料至伺服器的作業方式:
    • GET 會將表單資料附加於 URL 之後,以作為查詢字串送出。然而 URL 的長度只限 8192 個字元,所以 GET 方法不適用於長表單。

    • POST 會將表單資料作為訊息的內文而送出。

    • Default 則會使用瀏覽器的預設方法 (通常是 GET)。

      這樣,就完成搜尋頁面了。

建立基本的結果頁面

當使用者按一下表單的「搜尋」按鈕時,就會將搜尋參數傳送到伺服器上的結果頁面。事實上,負責從資料庫中擷取資料記錄的是伺服器上的結果頁面,而不是瀏覽器中的搜尋頁面。如果搜尋頁面只送出一個搜尋參數至伺服器,您可以在不使用 SQL 查詢和變數的情況下建立結果頁面。您只要建立具有篩選器的基本資料集,便能排除與搜尋頁面送出的搜尋參數不相符的記錄。

註解:

如果您要使用一個以上的搜尋條件,就必須在進階「資料集」對話方塊中定義資料集 (請參閱建立進階的結果頁面)。

建立資料集以保存搜尋結果

  1. 在「文件」視窗中開啟結果頁面。

    如果您還沒有結果頁面,請建立空白的動態頁面 (「檔案>開新檔案>空白頁面」)。

  2. 建立新的資料集,方法是開啟「繫結」面板 (「視窗>繫結」)、按一下加號 (+) 按鈕,然後從彈出式選單中選取「資料集」。
  3. 請確認所顯示的是簡單「資料集」對話方塊。
    資料集對話方塊

    註解:

    如果所顯示的是進階對話方塊,請按一下「簡單」按鈕,切換成簡單對話方塊。

  4. 輸入資料集名稱,再選取連線。

    該連線應該是要連線到含有可讓使用者搜尋資料的資料庫。

  5. 在「表格」彈出式選單中,選取要在資料庫中進行搜尋的表格。
    註解:

    在使用單一參數搜尋時,您可以只搜尋單一表格中的記錄; 若要同時搜尋多個表格,您必須使用進階「資料集」對話方塊,而且要定義 SQL 查詢。

  6. 若只想要將某些表格欄納入資料集中,請按一下「已選取」,然後在清單中使用 Control+按一下 (Windows) 或 Command+按一下 (Macintosh) 以選取您要的欄。

    您應該只將含有要顯示在結果頁面之資訊的資料欄納入。

    目前先讓「資料集」對話方塊保持開啟。您會在稍後用它來擷取由搜尋頁面所送出的參數,並建立資料集篩選器來排除不符合參數的記錄。

建立資料集篩選器

  1. 從「篩選器」區域中的第一個彈出式選單,選取資料庫表格中的欄,以搜尋符合參數的記錄。

    例如,如果搜尋頁面所傳送的值為城市名稱,請從表格中選取包含城市名稱的欄。

  2. 在第一個選單旁邊的彈出式選單中,選取等號 (這應該是預設值)。
  3. 如果搜尋頁面中的表單是使用 POST 方法,請在第三個彈出式選單中選取「表單變數」;如果搜尋頁面中的表單是使用 GET 方法,則請選取「URL 參數」。

    搜尋頁面會使用表單變數或 URL 參數,將資訊傳送到結果頁面。

  4. 在第四個方塊中,輸入搜尋頁面中接受搜尋參數的表單物件名稱。

    物件的名稱可兼作表單變數名稱及 URL 參數名稱。若要取得表單的名稱,請切換至搜尋頁面,按一下以選取表單中的表單物件,然後在「屬性」檢視窗中查看物件的名稱。

    例如,您想要建立一個只包含某特定國家/地區中冒險旅行的資料集。假設表格中有一個名稱為 TRIPLOCATION 的欄。同時,我們還假設搜尋頁面中的 HTML 表單是使用 GET 方法,且其中包含一個名稱為「位置」的選單物件,用來顯示國家/地區的清單。下列範例會顯示「篩選器」區段應有的外觀:

    表單物件參數

  5. (選擇性) 按一下「測試」、輸入測試值,然後按一下「確定」,以連線到資料庫並建立資料集的實體。

    測試值會模擬原本應該由搜尋頁面傳回來的值。按一下「確定」關閉測試資料集。

  6. 如果您對這個資料集感到滿意,請按一下「確定」。

    伺服器端 Script 會插入頁面中,以便在伺服器上執行頁面時用來檢查資料庫表格中的每一筆記錄。如果記錄中的指定欄位符合篩選條件,該筆記錄就會納入資料集中。這個 Script 便會建立只含有搜尋結果的資料集。

    下一步是在結果頁面中顯示資料集。如需詳細資訊,請參閱顯示搜尋結果

建立進階的結果頁面

如果搜尋頁面會送出一個以上的搜尋參數到伺服器,您必須為結果頁面撰寫 SQL 查詢,並且在 SQL 變數中使用這些搜尋參數。

註解:

如果您只有一個搜尋條件,則可以使用簡單的「資料集」對話方塊定義資料集 (請參閱建立基本的結果頁面)。

  1. 在 Dreamweaver 中開啟結果頁面,然後開啟「繫結」面板 (「視窗 > 繫結」),按一下加號 (+) 按鈕,再從彈出式選單中選取「資料集」,以建立資料集。
  2. 請確認所顯示的是進階「資料集」對話方塊。

    進階對話方塊有一個可以輸入 SQL 陳述式的文字區域。如果顯示的是簡單對話方塊,請按一下「進階」按鈕切換成進階對話方塊。

  3. 輸入資料集名稱,再選取連線。

    該連線應該是要連線到含有可讓使用者搜尋資料的資料庫。

  4. 在 SQL 文字區域中輸入 Select 陳述式。

    請確定該陳述式包含 Where 子句,且其中有用來保存搜尋參數的變數。在以下的範例中,變數的名稱為 varLastNamevarDept

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ 
    WHERE LASTNAME LIKE 'varLastName' ¬ 
    AND DEPARTMENT LIKE 'varDept'

    若要減少文字輸入的工作,您可以使用進階「資料集」對話方塊底部的資料庫項目樹狀結構。如需相關說明,請參閱撰寫 SQL 以定義進階資料集

    如需有關 SQL 語法的說明,請參閱 SQL 入門,網址為:www.adobe.com/go/learn_dw_sqlprimer_tw

  5. 按一下「變數」區域中的加號 (+) 按鈕後,輸入變數的名稱、預設值 (也就是在沒有傳回執行階段值時,變數應該使用的值),以及執行階段值 (通常是保存瀏覽器所傳送值的伺服器物件,例如 Request 變數),以將搜尋參數的值指定給 SQL 變數。

    在下列 ASP 範例中,搜尋頁面的 HTML 表單會使用 GET 方法,頁面中還包含一個名為 LastName 與另一個名為 Department 的文字欄位。

    ASP 範例

    在 ColdFusion 中,執行階段值為 #LastName##Department#。在 PHP 中,執行階段值為 $_REQUEST["LastName"]$_REQUEST["Department"]

  6. (選擇性) 按一下「測試」,建立會使用預設變數值的資料集實體。

    這些預設值會模擬原本應該由搜尋頁面傳回來的值。按一下「確定」關閉測試資料集。

  7. 如果您對這個資料集感到滿意,請按一下「確定」。

    SQL 查詢便會插入至頁面中。

    下一步是在結果頁面中顯示資料集。

顯示搜尋結果

在建立保存搜尋結果的資料集後,您必須將資訊顯示在結果頁面中。顯示記錄的方法可以很簡單,您只需將「繫結」面板中的個別欄拖曳到結果頁面就可以了。您可以加入導覽連結,方便使用者在資料集中前後移動,或者是建立一個重複區域,在頁面中同時顯示多筆記錄; 您還可以加入細節頁面的連結。

如需有關將動態內容顯示在頁面上,而不將結果顯示於動態表格中的方法的詳細資訊,請參閱顯示資料庫記錄

  1. 將插入點放在您希望動態表格在結果頁面上出現的位置,然後選取「插入>資料物件>動態資料>動態表格」。
  2. 完成「動態表格」對話方塊,選取您定義要保存搜尋結果的資料集。
  3. 按一下「確定」。顯示搜尋結果的動態表格便會插入至結果頁面。

建立結果頁面的細節頁面

您可以在搜尋及結果頁面中包含細節頁面,用以顯示結果頁面中特定記錄的詳細資訊。在這種情況下,結果頁面也會兼作主要及細節頁面設定中的主要頁面。

您可以建立可開啟相關頁面並傳送現有參數至該頁面的連結。只有在使用 ASP 伺服器模式時,才可以使用這個伺服器行為。

在將「前往相關頁面」伺服器行為加入至頁面之前,請先確定該頁面可以接收其他頁面所傳來的表單或 URL 參數。伺服器行為的工作就是要將這些參數傳送至第三個頁面中。例如,您可以將結果頁面接收的搜尋參數傳送至另一個頁面,以省去使用者必須重新輸入搜尋參數的麻煩。

此外,您也可以在頁面中選取要做為相關頁面連結的文字或影像;或者將指標置於頁面中而不選取任何項目,連結文字便會自動插入至頁面中。

  1. 在「前往相關頁面」方塊中,按一下「瀏覽」並尋找相關頁面檔案。

    如果目前的頁面會送出資料給它自己,就請輸入目前頁面的檔案名稱。

  2. 如果您所要傳送的參數是使用 GET 方法直接從 HTML 表單接收,或是列在頁面的 URL 中,請選取「URL 參數」選項。
  3. 如果您所要傳送的參數是使用 POST 方法直接從 HTML 表單接收,請選取「表單參數」選項。
  4. 按一下「確定」。

    當使用者按下這個新連結時,該頁面就會使用查詢字串將參數傳送至相關頁面。

更快、更輕鬆地獲得協助

新的使用者?