使用手冊 取消

在 Dreamweaver 中建立主要和細節頁面

  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 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

關於主要和細節頁面

主要和細節頁面是一組用來組織和顯示資料集資料的頁面。這些頁面可以為網站的瀏覽者提供概要及詳細的檢視。主要頁面會列出所有的記錄,包含會顯示各筆記錄之其他相關資訊的細節頁面的連結。

主要頁面

細節頁面

建立主要和細節頁面時,您可以插入資料物件,在一次作業中建立主要頁面和細節頁面,或是使用伺服器行為,以較具彈性的自訂方式來建立主要和細節頁面。當您使用伺服器行為來建立主要和細節頁面時,請先建立主要頁面以顯示記錄清單,然後加入從清單連至細節頁面的連結。

建立主要頁面

在您開始之前,請確定已為網站定義資料庫連線。

  1. 若要建立空白頁面,請選取「檔案 > 開新檔案 > 空白頁面」、選取頁面類型,然後按一下「建立」。這個頁面便會成為主要頁面。
  2. 定義資料集。

    在「繫結」面板 (「視窗 > 繫結」) 中,按一下加號 (+) 按鈕,選取「資料集」,並選擇選項。如果您要撰寫自己的 SQL 陳述式,請按一下「進階」。

    確定「資料集」包含建立主要頁面所需要的所有表格欄。資料集也必須包括表格欄,其中含有各筆記錄的唯一索引鍵 -- 也就是記錄 ID 欄。在下列範例中,CODE 欄含有各筆記錄的唯一索引鍵。

    在主要頁面中選取的資料集欄

    一般而言,主要頁面中的資料集會從資料庫表格中擷取為數不多的幾個資料欄,而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

    資料集可以由使用者在執行階段加以定義。如需詳細資訊,請參閱建立搜尋及結果頁面

  3. 插入動態表格以顯示記錄。

    請將插入點置於您要動態表格出現在頁面上的位置。選取「插入>資料物件>動態資料>動態表格」、設定選項,然後按一下「確定」。

    如果您不要讓使用者看見記錄 ID,可以從動態表格中刪除該欄位。請按一下頁面中的任何地方,將焦點移到頁面中。將游標移到動態表格中欄位頂端附近,等到欄位儲存格的外框變成紅色後,按一下選取這個欄位。按 Delete 鍵,從表格中刪除這個資料欄。

建立細節頁面的連結

在建立主要頁面並新增資料集之後,請建立會開啟細節頁面的連結。然後修改連結以傳送使用者所選記錄的 ID。細節頁面會使用這個 ID 在資料庫中尋找要求的記錄,然後顯示它。

註解:

請使用相同程序建立對更新頁面的連結。結果頁面類似於主要頁面,而更新頁面則類似於細節頁面。

開啟細節頁面並傳遞記錄 ID (ColdFusion、PHP)

  1. 在動態表格中,為要當成連結的文字選取內容預留位置。
    連結會套用到選取的預留位置。

  2. 在「屬性」檢視窗中,按一下「連結」方塊旁邊的資料夾圖示。
  3. 瀏覽並選取細節頁面。細節頁面會出現在「屬性」檢視窗的「連結」方塊中。

    在動態表格中,所選取文字便會顯示為已連結。當頁面在伺服器上執行時,連結會套用到每個表格列中的文字。

  4. 在主要頁面上,選取動態表格中的連結。
  5. (ColdFusion) 在「屬性」檢視窗的「連結」方塊中,將下列字串加在 URL 的結尾處:
    ?recordID=#recordsetName.fieldName#

    問號會告訴伺服器,後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱,因為稍後會在細節頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下,值是由會從資料集傳回記錄 ID 的 ColdFusion 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 ColdFusion 運算式中,請用資料集的名稱來取代 recordsetName,並以資料集中唯一識別各筆記錄的欄位名稱來取代 fieldName。大部分情況下,欄位會由記錄 ID 編號所構成。在下列範例中,欄位是由唯一位置碼所構成的。

    locationDetail.cfm?recordID=#rsLocations.CODE#

    頁面執行時,會將資料集的 CODE 欄位值插入動態表格的對應列中。例如,如果澳洲坎培拉 (租賃位置) 的代碼是 CBR,那麼便會在動態表格的「坎培拉」列中使用下列 URL:

    locationDetail.cfm?recordID=CBR
  6. 在「屬性」檢視窗的「連結」欄位中,將下列字串加在 URL 的結尾處:
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    問號會告訴伺服器,後面接的是一或多個 URL 參數。recordID 是 URL 參數的名稱 (您可以依喜好命名)。記下 URL 參數的名稱,因為稍後會在細節頁面中用到它。

    等號後面的運算式是參數的值。在這種情況下,值是由會從資料集傳回記錄 ID 的 PHP 運算式所產生的。動態表格中的每一列都會產生不同的 ID。在 PHP 運算式中,請用資料集的名稱來取代 recordsetName,再用資料集中可唯一識別各筆一記錄的欄位名稱來取代 fieldName。大部分情況下,欄位會由記錄 ID 編號所構成。在下列範例中,欄位是由唯一位置碼所構成的。

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    頁面執行時,會將資料集的 CODE 欄位值插入動態表格的對應列中。例如,如果澳洲坎培拉 (租賃位置) 的代碼是 CBR,那麼便會在動態表格的「坎培拉」列中使用下列 URL:

    locationDetail.php?recordID=CBR
  7. 儲存頁面。

開啟細節頁面並傳遞記錄 ID (ASP)

  1. 選取要兼作連結的動態內容。
  2. 在「伺服器行為」面板 (「視窗 > 伺服器行為」) 中,按一下加號 (+) 按鈕,再從彈出式選單中選取「前往細節頁面」。
  3. 在「細節頁面」方塊中,按一下「瀏覽」以尋找頁面。
  4. 指定要傳送至細節頁面的值,方法是先選取一個資料集,然後從「資料集和欄」彈出式選單中選取資料欄。每一筆記錄通常都會有一個唯一的值,例如記錄的唯一索引鍵 ID。
  5. 您可以視情況需要,選取「URL 參數」或「表單參數」等選項,將現有的網頁參數傳送至細節頁面。
  6. 按一下「確定」。

    特殊的連結便會包圍選取的文字。當使用者按一下此連結時,「前往細節頁面」伺服器行為就會將含有記錄 ID 的 URL 參數傳送至細節頁面。例如,假設 URL 參數的名稱為 id,而細節頁面的名稱為 customerdetail.asp,則當使用者按下該連結時,URL 看起來會像下列這樣:

    http://www.mysite.com/customerdetail.asp?id=43

    URL 的第一個部分 http://www.mysite.com/customerdetail.asp,會開啟細節頁面; 而第二個部分的 ?id=43 則是一個 URL 參數。這個參數會告訴細節頁面所要尋找和顯示的記錄, 其中的 id 就是 URL 參數的名稱,而 43 則是這個參數的值。在這個範例中,URL 參數包含的記錄 ID 編號為 43。

尋找所要求的記錄,並將該筆記錄顯示於細節頁面

為了顯示主要頁面要求的記錄,您必須定義資料集以保存單一記錄,並將資料集欄繫結至細節頁面。

  1. 切換至細節頁面。如果您還沒有細節頁面,請建立空白頁面 (「檔案>開新檔案」)。
  2. 在「繫結」面板 (「視窗>繫結」) 中,按一下加號 (+) 按鈕,然後從彈出式選單中選取「資料集 (查詢)」。

    簡單「資料集」對話方塊便會出現。如果出現的是進階對話方塊,請按一下「簡單」。

  3. 命名該資料集,然後選取要為資料集提供資料的資料來源及資料庫表格。
  4. 在「欄」區域中,選取要包含在資料集中的表格欄。

    這個資料集可以和主要頁面上的資料集相同或不同。一般而言,細節頁面中的資料集會提供較多的資料欄,以顯示較詳細的資訊。

    如果是不同的資料集,請確定細節頁面上的資料集至少包含一個和主要頁面資料集共通的欄。共通的欄通常是記錄 ID 欄,但也可以是相關表格的結合欄位。

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

  5. 完成「篩選器」區段,以尋找並顯示主要頁面所傳送 URL 參數中指定的記錄:
    • 在「篩選器」區域的第一個彈出式選單中,選取資料集的欄,這個欄必須和主要頁面所傳送的 URL 參數值相符。例如,如果 URL 參數中含有記錄 ID 編號,則應選取含有記錄 ID 編號的欄。在前一節所討論的範例中,稱為 CODE 的資料集欄包含的值,與主要頁面所傳送的 URL 參數值相符。

    • 在第一個選單旁的彈出式選單中,選取等號 (系統應該已經自動選了等號)。

    • 在第三個彈出式選單中,選取「URL 參數」。主要頁面會使用 URL 參數將資訊傳送到細節頁面。

    • 在第四個方塊中,請輸入由主要頁面所傳送之 URL 參數的名稱。

  6. 按一下「確定」。資料集會在「繫結」面板中出現。
  7. 若要將資料集欄繫結至細節頁面,請選取「繫結」面板中的欄 (「視窗>繫結」),然後將它們拖曳到頁面中。

    在將主要及細節頁面上傳到伺服器之後,您可以在瀏覽器中開啟主要頁面。按一下主要頁面上的細節連結,便會開啟細節頁面,其中包含有關所選取記錄的詳細資訊。

尋找特定記錄並在頁面上顯示該資料 (ASP)

您可以新增會在資料集中尋找特定記錄的伺服器行為,以便在頁面上顯示記錄資料。只有在使用 ASP 伺服器模式時,才可以使用這個伺服器行為。

  1. 建立具有下列必要項目的頁面:
  2. 按一下「伺服器行為」面板 (「視窗 > 伺服器行為」) 上的加號 (+) 按鈕,再選取「資料集分頁 > 移到特定記錄」,可以新增伺服器行為來尋找 URL 參數所指定的記錄。
  3. 在「移到記錄來源」彈出式選單中,選取您為頁面所定義的資料集。
  4. 在「欄來源」彈出式選單中,選取含有由其他頁面所傳送值的欄。

    例如,當其他頁面傳送的是記錄 ID 編號時,就選取含有記錄 ID 編號的欄。

  5. 在「比對 URL 參數」方塊中,輸入由其他頁面所傳送的 URL 參數名稱。

    例如,如果其他頁面用來開啟細節頁面的 URL 是 id=43,則在「比對 URL 參數」方塊中輸入 id

  6. 按一下「確定」。

    下一次瀏覽器再要求該頁面時,伺服器行為就會讀取其他頁面所傳送 URL 參數中的記錄 ID,再移到資料集中指定的記錄。

在一次作業中建立主要和細節頁面

開發網路應用程式時,您可以使用「主要及細節頁面組」資料物件,快速建立主要和細節頁面。

  1. 若要建立空白動態頁面,請選取「檔案>開新檔案>空白頁面」、從「頁面類型」清單選取動態頁面,然後按一下「建立」。

    這個頁面便會成為主要頁面。

  2. 定義頁面的資料集。

    請確定該資料集中不只包含主要頁面所需的所有欄,同時也必須要包含細節頁面所需的所有欄。一般而言,主要頁面中的資料集會從資料庫表格中擷取為數不多的幾個資料欄,而細節頁面中的資料集則會從同一個資料庫表格中擷取更多的資料欄以提供更詳細的資訊。

  3. 在「設計」檢視中開啟主要頁面,然後選取「插入>資料物件>主要及細節頁面組」。
  4. 在「資料集」彈出式選單中,請確定已選取了含有要於主要頁面中顯示記錄的資料集。
  5. 在「主要頁面欄位」區域中,選取要顯示於主要頁面中的資料集欄。

    根據預設,會選取資料集中的所有欄。如果資料集中含有唯一索引鍵欄,像是 recordID,請選取該索引鍵欄,並按一下減號 (-) 按鈕,這個索引鍵欄便不會顯示在頁面上。

  6. 若要變更各欄在主要頁面中的顯示順序,請選取清單中的某欄,然後按一下向上或向下鍵來調整順序。

    在主要頁面中,資料集欄會以水平方式顯示於表格中; 因此當您按一下向上鍵時,會將直欄左移一個位置,而按一下向下鍵時,會將直欄右移一個位置。

  7. 在「連結到詳細資料來源」彈出式選單中,選取資料集中要在細節頁面顯示數值並做為連結的欄。

    例如,如果您要讓主要頁面中的每一個產品名稱,都有一個連至細節頁面的連結時,請選取含有產品名稱的資料集欄。

  8. 在「傳送唯一索引鍵」彈出式選單中,選取內含用來識別記錄之數值的資料集欄。

    通常會選擇的欄是記錄 ID 編號, 系統會將這個數值傳送至細節頁面,用來識別使用者所選取的記錄為何。

  9. 如果唯一索引鍵欄不是數值,請取消選取「數值」選項。
    註解:

    依預設值,會選取這個選項,但不見得所有的伺服器模式都必須沿用這個選項。

  10. 指定主要頁面中所要顯示的記錄數目。
  11. 在「細節頁面名稱」文字方塊中,按一下「瀏覽」尋找您所建立的細節頁面檔案,或者輸入名稱,直接讓資料物件建立這個細節頁面檔案。
  12. 在「細節頁面欄位」區域中,請選取要顯示於細節頁面中的欄。

    根據預設,會選取主要頁面資料集中的所有欄。如果資料集中含有唯一索引鍵欄,像是 recordID,請選取該索引鍵欄,並按一下減號 (-) 按鈕,這個索引鍵欄便不會顯示細節頁面上。

  13. 若要變更各欄在細節頁面中的顯示順序,請選取清單中的某欄,然後按一下向上或向下鍵來調整順序。

    在細節頁面中,資料集欄會以垂直方式顯示於表格中。按一下向上鍵會將欄上移一個位置,按一下向下鍵則會將欄下移一個位置。

  14. 按一下「確定」。

    資料物件會建立細節頁面 (如果您尚未建立細節頁面),並同時在主要頁面和細節頁面中加入動態內容和伺服器行為。

  15. 依照您的需求自訂主要和細節頁面的版面。

    您可以使用 Dreamweaver 網頁設計工具,完全自訂每個頁面的版面。您也可以在「伺服器行為」面板中的項目上按兩下,來編輯伺服器行為。

    在使用資料物件建立主要及細節頁面之後,請使用「伺服器行為」面板 (「視窗>伺服器行為」) 來修改資料物件插入頁面中的各種建置組塊。

Adobe 標誌

登入您的帳戶