將動態內容新增至頁面

上次更新時間 2024年4月25日
備註

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

關於新增動態內容

在您定義一個或多個動態內容來源後,您就可以使用這些來源在頁面上新增動態內容。內容來源可以包括記錄集中的欄位、HTML 表單提交的值、伺服器物件中包含的值或其他資料。

在 Dreamweaver 中,您幾乎可以將動態內容放置在網頁或其 HTML 來源代碼的任何位置。您可以在插入點放置動態內容、取代文字字串,或將其插入為 HTML 屬性。例如,動態內容可以定義影像的 src 屬性,或表單欄位的 value 屬性。

您可以透過在「連結」面板中選取內容來源,將動態內容新增至頁面。Dreamweaver 會在頁面的代碼中插入伺服器端指令碼,指示伺服器在瀏覽器請求頁面時,將資料從內容來源轉移到頁面的 HTML 代碼中。

通常有多種方式可以讓指定的頁面元素變成動態。例如,要讓影像變成動態,您可以使用「連結」面板、「屬性」檢查器,或「插入」選單中的「影像」指令。

依預設值,HTML 頁面每次只能顯示一筆記錄。 若要顯示記錄集中的其他記錄,您可以新增連結來逐一瀏覽記錄,或者可以建立重複區域以在單次頁面上顯示多個記錄。

關於動態文字

動態文字會採用套用至現有文字或插入點的任何文字格式。例如,如果階層式樣式表 (CSS) 樣式影響選取的文字,取代它的動態內容也會受到該樣式影響。您可以使用任何 Dreamweaver 文字格式工具來新增或變更 動態內容的文字格式。

您也可以將資料格式套用到動態文字。 例如,如果您的資料包含日期,您可以指定特定的日期格式,例如美國格式 04/17/00。或加拿大 訪客使用 17/04/00。

讓文字成為動態文字

您 可以使用動態文字取代現有文字,或者可以將動態 文字放置在頁面上的指定插入點。

新增動態文字

在「設計」檢視中,選取 頁面上的文字,或按一下您要新增動態文字的位置。
在「繫結」面板 (視窗 > 繫結) 中, 從清單中選取內容來源。如果您選取記錄集, 請指定記錄集中您要的欄位。

內容來源應該含有純文字 (ASCII 文字)。 純文字包括 HTML。 如果清單中沒有出現內容來源, 或者可用的內容來源不符合您的需求,請按一下 加號 (+) 按鈕以定義新的內容來源。

(選擇性) 選取文字的資料格式。
按一下「插入」,或將內容來源拖曳到頁面上。

動態內容預留位置隨即顯示。 (如果您選取 頁面上的文字,預留位置會取代選取的文字。) 記錄集內容的預留位置使用語法 {RecordsetName.ColumnName},其中 Recordset 是記錄集的名稱,而 ColumnName 是您從記錄集中選取的欄位名稱。

有時候, 動態文字預留位置的長度會扭曲頁面在 「文件」視窗中的配置。您可以使用空的 大括弧作為預留位置來解決問題,如下一個主題中所述。

顯示動態 文字的預留位置

選擇「編輯」>「偏好設定」> 「隱形元素」(Windows) 或「Dreamweaver」>「偏好設定」> 「隱形元素」(Macintosh)。
在「將動態文字顯示為」彈出選單中,選取「{ }」, 並按一下「確定」。

讓影像成為動態影像

您可以使頁面上的影像成為動態。 例如,假設您設計一個頁面來顯示 慈善拍賣會上待售的項目。每個頁面都會包含描述性文字和 一個項目的相片。頁面的一般配置在每個項目中都保持 相同,但相片 (和描述性文字) 可以變更。

在「設計」檢視中開啟頁面 (「檢視」> 「設計」),將插入點放置在您希望影像出現 在頁面上的位置。
選取「插入>影像」。

「選取影像原始檔」對話方塊便會出現。

按一下「資料來源」選項 (Windows) 或「資料來源」 按鈕 (Macintosh)。

內容來源清單便會出現。

從清單中選取內容來源,然後按一下「確定」。

內容來源應該是包含 影像檔案路徑的記錄集。根據您網站的檔案結構,路徑可以是絕對路徑、文件相對路徑或根目錄相對路徑。

備註

Dreamweaver 目前 不支援儲存在資料庫中的二進位影像。

如果清單中沒有出現記錄集,或是可用的記錄集不符合您的需求,請定義新的記錄集。

使 HTML 屬性成為動態屬性

您可以透過將 HTML 屬性繫結到資料, 動態變更頁面的外觀。例如,您可以 透過將表格的 background 屬性繫結 到記錄集中的欄位來變更表格的背景影像。

您可以使用 「繫結」面板或「屬性」檢視器來繫結 HTML 屬性。

使用 「繫結」面板製作動態 HTML 屬性

選擇「視窗」>「繫結」來開啟「繫結」面板。
確保「繫結」面板列出您想要使用的資料來源。

內容來源應該包含適合 您要繫結之 HTML 屬性的資料。如果清單中沒有內容來源,或是可用的內容來源不符合您的需求,請按一下加號 (+) 按鈕來定義新的資料來源。

在「設計」檢視中,選取 HTML 物件。

例如,若要選取 HTML 表格,請在 表格內按一下,並在「文件」視窗左下角的標記 選擇器中按一下 <table> 標記。

在「繫結」面板中,從您的 清單中選取內容來源。
在「繫結至」方塊中,從 彈出選單選取 HTML 屬性。
按一下「繫結」。

下次頁面在應用程式伺服器上執行時, 資料來源的值將指派給 HTML 屬性。

使用 「屬性」檢視器製作動態 HTML 屬性

在「設計」檢視中,選取 HTML 物件並開啟「屬性」檢視器 (「視窗」> 「屬性」)。

例如,要選取 HTML 表格,請按一下表格內部,然後按一下「文件」視窗左下方標記選擇器中的 <table> 標記。

您將動態內容來源繫結至 HTML 屬性的方式取決於其所在位置。
  • 如果您要繫結的屬性在「屬性」檢視窗中旁邊有檔案夾圖示,請按一下檔案夾圖示以開啟檔案選取對話框;然後按一下「資料來源」選項以顯示資料來源清單。

  • 如果您要繫結的屬性旁邊沒有檔案夾圖示,請按一下檢視窗左側的「清單」標籤 (兩個標籤中較下方的標籤)。

    「屬性」檢視窗的「清單」檢視隨即出現。

  • 如果您要繫結的屬性並未列在「清單」檢視中,請按一下加號 (+) 按鈕;然後輸入屬性的名稱或按一下小箭頭按鈕,並從彈出選單中選取屬性。

若要讓屬性的值成為動態,請按一下該屬性;然後按一下屬性列結尾處的閃電圖示或檔案夾圖示。

如果您按一下閃電圖示,會出現資料來源清單。

如果您按一下檔案夾圖示,會出現檔案選取對話框。選取「資料來源」選項以顯示內容來源的清單。

從內容來源清單中選取來源,然後按一下「確定」。

內容來源應該儲存符合您要繫結的 HTML 屬性的資料。如果清單中沒有出現內容來源,或是可用的內容來源不符合您的需求,請定義新的內容來源。

下次頁面在應用程式伺服器上執行時,資料來源的值將會指派給 HTML 屬性。

讓 ActiveX、Flash 和其他物件參數成為動態

您可以讓 Java 小程式和增效模組的參數,以及 ActiveX、Flash、Shockwave、Director 和產生器物件的參數成為動態。

開始之前,請確定記錄集中的欄位儲存了符合您要繫結的物件參數的資料。

在「設計」檢視中,選取頁面上的物件,然後開啟「屬性」檢視窗 (「視窗 > 屬性」)。
按一下「參數」按鈕。
如果您的參數沒有出現在清單中,請按一下加號 (+) 按鈕,並在「參數」欄中輸入參數名稱。
按一下參數的「值」欄,然後按一下閃電圖示以指定動態值。

資料來源清單就會出現。

請從清單中選取資料來源,然後按一下「確定」。

資料來源應該儲存符合您要繫結的物件參數的資料。如果清單中沒有出現資料來源,或是可用的資料來源不符合您的需求,請定義新的資料來源。