使用手冊 取消

將動態內容新增至頁面

 

 

註解:

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

關於新增動態內容

當您定義了一個或多個動態內容來源之後,便可以使用這些來源,在頁面中新增動態內容。內容來源可以包括資料集中的欄、HTML 表單送出的值、伺服器物件所包含的值,或其他資料。

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

您可以在「繫結」面板中選取內容來源,以將動態內容加入頁面中。Dreamweaver 會將伺服器端的 Script 插入頁面的程式碼中,以便在瀏覽器要求頁面時,指示伺服器將資料從內容來源傳送到頁面的 HTML 程式碼。

要讓指定的頁面元素成為動態,通常可以有好幾種方式。例如,如果要讓影像成為動態,您可以使用「繫結」面板、「屬性」檢視窗,或「插入」選單中的「影像」命令。

依預設值,HTML 頁面每次只能顯示一筆記錄。若要顯示資料集中的其他記錄,您可以新增連結,每次只移過一筆記錄,或是建立重複區域,在單一頁面上顯示一筆以上的記錄。

關於動態文字

動態文字會採用套用到現有文字或插入點的任何文字格式。例如,假設某一「串接樣式表」(CSS) 樣式會影響選取的文字,那麼取代這些文字的動態內容也會受這個樣式影響。您可以使用任何 Dreamweaver 文字格式工具來新增或變更動態內容的文字格式。

您也可以將資料格式套用到動態文字。例如,假設您的資料是由日期構成,您可以指定特定的日期格式,例如針對美國訪客指定 04/17/00,針對加拿大訪客指定 17/04/00。

讓文字成為動態文字

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

新增動態文字

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

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

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

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

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

顯示動態文字的預留位置

  1. 選取「編輯 > 偏好設定 > 隱藏元素」(Windows) 或「Dreamweaver > 偏好設定 > 隱藏元素」(Macintosh)。
  2. 在「顯示動態文字於」彈出式選單中選取 { },然後按一下「確定」。

讓影像成為動態影像

您可以使頁面上的影像成為動態。例如,假如您要設計一個頁面來顯示慈善拍賣會的銷售項目。每個頁面都含有某一個項目的描述性文字和照片。頁面一般版面的每個項目都會保持不變,但是照片 (和描述性文字) 則可能會變更。

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

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

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

    內容來源清單便會出現。

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

    這個內容來源應該是含有影像檔案路徑的資料集。視網站的檔案結構而定,路徑可以是絕對、文件相對或是根相對。

    註解:

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

    如果清單中並未出現任何資料集,或是可用的資料集不符合您的需要,請定義新的資料集。

使 HTML 屬性成為動態屬性

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

您可以將 HTML 屬性與「繫結」面板繫結或與「屬性」檢視窗繫結。

使用繫結面板使 HTML 屬性成為動態屬性

  1. 選擇「視窗>繫結」以開啟「繫結」面板。
  2. 請確定「繫結」面板列出了您想要使用的資料來源。

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

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

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

  4. 在「繫結」面板中,從清單中選取內容來源。
  5. 在「繫結到」方塊中,從彈出式選單中選取 HTML 屬性。
  6. 按一下「繫結」。

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

使用屬性檢視窗使 HTML 屬性成為動態屬性

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

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

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

    • 如果您想要繫結的屬性旁邊沒有資料夾圖示,請按一下檢視窗左邊的「清單」索引標籤 (兩個索引標籤下面的那個)。

      「屬性」檢視窗的「清單」檢視便會出現。

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

  3. 若要使屬性的值成為動態,請按一下這個屬性,然後按一下該屬性所在列尾端的閃電圖示或資料夾圖示。

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

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

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

    內容來源應該含有適合您想要繫結之 HTML 屬性的資料。如果清單中並未出現任何內容來源,或是可用的內容來源不符合您的需要,請定義新的內容來源。

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

使 ActiveX、Flash 及其他物件參數成為動態參數

您可以讓 Java Applet 和外掛程式的參數成為動態的,也可以讓 ActiveX、Flash、Shockwave、Director 和 Generator 物件的參數成為動態。

在開始之前,請確定資料集中的欄位含有適合於您所要繫結之物件參數的資料。

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

    資料來源清單就會出現。

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

    資料來源應該含有適合您想要繫結之物件參數的資料。如果清單中並未出現任何資料來源,或是可用的資料來源不符合您的需要,請定義新的資料來源。

更快、更輕鬆地獲得協助

新的使用者?