- Dreamweaver 使用手冊
- 簡介
- Dreamweaver 和 Creative Cloud
- Dreamweaver 工作區和檢視
- 設定網站
- 管理檔案
- 版面和設計
- CSS
- 頁面內容和資產
- 設定頁面屬性
- 設定 CSS 標題屬性和 CSS 連結屬性
- 處理文字
- 尋找和取代文字、標籤和屬性
- DOM 面板
- 在即時檢視中編輯
- 在 Dreamweaver 中進行文件編碼
- 在文件視窗中選取並檢視元素
- 在屬性檢視窗中設定文字屬性
- 檢查網頁拼字
- 在 Dreamweaver 中使用水平線
- 在 Dreamweaver 中新增和修改字體組合
- 使用資源
- 在 Dreamweaver 中插入和更新日期
- 在 Dreamweaver 中建立和管理最愛資源
- 在 Dreamweaver 中插入及編輯影像
- 新增媒體物件
- 在 Dreamweaver 中加入視訊
- 插入 HTML5 視訊
- 插入 SWF 檔
- 新增音效效果
- 在 Dreamweaver 中插入 HTML5 音效
- 使用圖庫項目
- 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
- 連結和導覽
- jQuery Widget 和效果
- 撰寫網站程式碼
- 關於在 Dreamweaver 中撰寫程式碼
- Dreamweaver 的程式碼撰寫環境
- 設定程式碼撰寫偏好設定
- 自訂程式碼色彩標示
- 撰寫和編輯程式碼
- 程式碼提示和程式碼完成
- 收合和展開程式碼
- 利用片段重複使用程式碼
- Lint 程式碼
- 最佳化程式碼
- 在設計檢視中編輯程式碼
- 使用頁面的檔頭內容
- 在 Dreamweaver 中插入伺服器端包含
- 在 Dreamweaver 中使用標籤資料庫
- 匯入自訂標籤到 Dreamweaver
- 使用 JavaScript 行為 (一般說明)
- 套用內建的 JavaScript 行為
- 關於 XML 與 XSLT
- 在 Dreamweaver 中執行伺服器端 XSL 轉換
- 在 Dreamweaver 中執行用戶端 XSL 轉換
- 在 Dreamweaver 中新增 XSLT 字元實體
- 格式化程式碼
- 跨產品工作流程
- 範本
- 行動裝置和多螢幕
- 動態網站、網頁和網站表單
- 以視覺化方式建立應用程式
- 測試、預覽和發佈網站
- 疑難排解
Dreamweaver 和更高版本的用戶介面已經簡化。因此,您在 Dreamweaver 和更高版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文。
關於新增動態內容
當您定義了一個或多個動態內容來源之後,便可以使用這些來源,在頁面中新增動態內容。內容來源可以包括資料集中的欄、HTML 表單送出的值、伺服器物件所包含的值,或其他資料。
在 Dreamweaver 中,您幾乎可以將動態內容放在網頁或其 HTML 原始程式碼中的任何位置。您可以將動態內容放在插入點、取代文字字串,或是將其插入成為 HTML 屬性。例如,動態內容可以定義影像的 src 屬性,或是表單欄位的 value 屬性。
您可以在「繫結」面板中選取內容來源,以將動態內容加入頁面中。Dreamweaver 會將伺服器端的 Script 插入頁面的程式碼中,以便在瀏覽器要求頁面時,指示伺服器將資料從內容來源傳送到頁面的 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 Applet 和外掛程式的參數成為動態的,也可以讓 ActiveX、Flash、Shockwave、Director 和 Generator 物件的參數成為動態。
在開始之前,請確定資料集中的欄位含有適合於您所要繫結之物件參數的資料。
-
在「設計」檢視中,選取頁面上的物件並且開啟「屬性」檢視窗 (「視窗 > 屬性」)。
-
按一下「參數」按鈕。
-
如果您的參數沒有出現在清單中,請按一下加號 (+) 按鈕,並在「參數」欄中輸入參數名稱。
-
按一下參數的「值」欄,然後按一下閃電圖示以指定動態值。
資料來源清單就會出現。
-
請從清單中選取資料來源,然後按一下「確定」。
資料來源應該含有適合您想要繫結之物件參數的資料。如果清單中並未出現任何資料來源,或是可用的資料來源不符合您的需要,請定義新的資料來源。