- 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 CC (含) 以後版本的使用者介面已經簡化了。因此,您在 Dreamweaver CC 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文。
關於資料庫記錄
顯示資料庫記錄包括擷取儲存於資料庫或其他內容來源的資訊,然後將所取得的資料提供給網頁。Dreamweaver 提供了許多顯示動態內容的方法,並提供了多項內建的伺服器行為,可讓您用來增強動態內容的呈現,同時讓使用者能以更輕鬆的方式來搜尋資料庫,並導覽從資料庫傳回的資訊。
資料庫及其他的動態內容來源提供了更強大且更有彈性的方式,讓您能夠搜尋、排序並檢視大量的資訊。當您需要儲存大量的資訊時,可以使用資料庫來儲存網站的內容,然後以有意義的方式擷取及顯示這些資訊。Dreamweaver 為您提供了幾種工具和預先建立的行為,能協助您有效率地擷取並顯示儲存在資料庫中的資訊。
伺服器行為和格式化元素
Dreamweaver 提供了下列伺服器行為,以及可用來強化動態資料顯示的格式化元素:
格式
可讓您將不同類型的數字、貨幣、日期/時間和百分比數值套用至動態文字上。
例如,如果資料集中有某個項目的價格為 10.989,您可以在頁面中將該價格顯示成 $10.99,方法是在 Dreamweaver 中選取「貨幣 - 2 個小數位數」格式。這個格式會使用兩個小數位數來顯示數字。如果該數值在小數點以下不只兩位數時,則該格式會將該數值進位成最接近小數點以下兩位數的數值。如果該數值是沒有小數點的整數,則會在小數點以下顯示兩個零。
重複區域
伺服器行為可讓您顯示由資料庫查詢所傳回的多個項目,並且讓您指定每個頁面中所要顯示的記錄筆數。
資料集導覽
伺服器行為可讓您插入導覽元素,方便使用者在資料集所傳回的記錄集中前後移動。例如,如果您選擇使用「重複區域」伺服器物件以每頁 10 筆的方式顯示記錄,而資料集共傳回 40 筆記錄時,您一次就可以導覽 10 筆記錄。
資料集狀態列
伺服器行為提供了計數器的功能,可以顯示使用者正在檢視的記錄位於所傳回的整組記錄總數中的相對位置。
顯示區域
伺服器行為可讓您依據目前顯示記錄的關聯性來選擇顯示或隱藏頁面中的項目。例如,若使用者已導覽至資料集中的最後一筆記錄,則您可以隱藏「下一頁」連結,而只顯示「上一頁」記錄連結。
將印刷和頁面版面元素套用至動態資料
Dreamweaver 有一項強大的功能,就是可以在結構化的頁面中呈現動態資料,並使用 HTML 及 CSS 來套用印刷格式。若要在 Dreamweaver 中將格式套用至動態資料,請使用 Dreamweaver 格式工具來格式化動態資料的表格和預留位置。在將資料來源中的資料插入至頁面時,就會自動套用您所指定的字體、段落及表格格式。
導覽資料庫資料集結果
資料集導覽連結可讓使用者從一筆記錄移到下一筆記錄,或是從一組記錄移到下一組記錄。例如,當您完成一次顯示五筆記錄的頁面設計工作後,您可能會想要新增「下一頁」或「上一頁」的連結,讓使用者可以顯示後五筆或前五筆記錄。
您可以建立四種類型的導覽連結以移過資料集:「第一頁」、「上一頁」、「下一頁」和「最後一頁」。單一頁面中可以含有上述任意數目的連結,唯一的限制是這些連結只能用於單一資料集中。您無法在同一個頁面上新增在第二個資料集中移動的連結。
資料集導覽連結必須要有下列動態元素:
一個可供導覽的資料集
頁面中要用來顯示記錄的動態內容
頁面中要有可當做可按式導覽列的文字或影像
一組供資料集導覽之用的「移到記錄」伺服器行為
您可以使用「記錄導覽列」伺服器物件來加入最後兩個元素,也可以分別使用設計工具和「伺服器行為」面板來加入這兩個元素。
建立資料集導覽列
您可以使用「資料集導覽列」伺服器行為在單一作業中建立資料集導覽列。伺服器物件會將下列建置區塊加入至頁面中:
含有文字或影像連結的 HTML 表格
一組「移到」伺服器行為
一組「顯示區域」伺服器行為
文字版的「資料集導覽列」外觀如下:
在頁面中置入導覽列之前,請檢查確定該頁面含有所要導覽的資料集,以及要用來顯示記錄的頁面版面。
當您在頁面中放置了導覽列之後,就可以使用設計工具,依據您個人的喜好來自訂該導覽列。您也可以在「伺服器行為」面板中按兩下「移到」和「顯示區域」伺服器行為,以編輯這兩項伺服器行為。
Dreamweaver 會建立內含文字或影像連結的表格,可讓使用者點選以導覽所選取的資料集內容。顯示資料集中的第一筆記錄時,會隱藏第一頁和上一頁的連結或影像。顯示資料集中的最後一筆記錄時,則會隱藏下一頁和最後一頁的連結或影像。
您可以使用設計工具和「伺服器行為」面板來自訂導覽列的版面。
-
在「設計」檢視中,於頁面中要顯示導覽列的地方放置一個插入點。
-
便會顯示「資料集導覽列」對話方塊 (「插入>資料物件>資料集分頁>資料集導覽列」)。
-
從「資料集」彈出式選單中選取您要導覽的資料集。
-
在「顯示方式」區段中,選取頁面中導覽連結的顯示格式,然後按一下「確定」。
文字
將文字連結放置在頁面上。
影像
包含圖形影像做為連結。Dreamweaver 會使用其專屬的影像檔案。當您在頁面中放置導覽列之後,可以將這些影像更換為您個人想要使用的影像檔案。
自訂資料集導覽列
您可以建立專屬的資料集導覽列,以使用更複雜的版面和格式樣式 (與「資料集導覽列」伺服器物件所建立的簡單表格相較)。
若要建立您自己的資料集導覽列,您必須:
使用文字或影像建立導覽連結
將這些連結放在設計檢視的頁面中
為每個導覽連結指定個別的伺服器行為
這一節描述了如何為導覽連結指派個別的伺服器行為。
建立伺服器行為並將其指定到導覽連結
-
在「設計」檢視中,選取頁面中您要當做是記錄導覽連結的文字或影像。
-
開啟「伺服器行為」面板 (「視窗>伺服器行為」),然後按一下加號 (+) 按鈕。
-
從彈出式選單中選取「資料集分頁」,然後從所列出的伺服器行為中選取適合該連結的伺服器行為。
如果資料集中含有數量龐大的記錄,則「移到最後一筆記錄」伺服器行為可能會在使用者按一下該連結時,經過很長的時間後才執行。
-
在「資料集」彈出式選單中,選取內含記錄的資料集,然後按一下「確定」。
這時已將伺服器行為指派給導覽連結。
設定移到 (伺服器行為) 對話方塊選項
新增可讓使用者在資料集中瀏覽記錄的連結。
-
如果您尚未選取頁面中的任何項目,請從彈出式選單中選取連結。
-
選取含有要以頁面顯示其記錄的資料集,然後按一下「確定」。註解:
如果資料集中含有數量龐大的記錄,則「移到最後一筆記錄」伺服器行為可能會在使用者按一下該連結時,經過很長的時間後才執行。
導覽列設計工作
在建立自訂的導覽列時,請先使用 Dreamweaver 的網面設計工具來建立導覽列的視覺外觀。您不需要建立文字字串或影像的連結,Dreamweaver 會為您建立相關的連結。
建立導覽列的頁面中一定要含有可供導覽的資料集。下圖為簡單資料集導覽列的外觀,其中包含了使用影像或其他內容元素所建立的連結按鈕:
在您將資料集加入頁面,和建立導覽列之後,您必須將各個伺服器行為套用至每一個導覽元素上。例如,一般的資料集導覽列中會含有下列連結,其符合適當的伺服器行為:
導覽連結 |
伺服器行為 |
前往第一頁 |
移到第一頁 |
前往上一頁 |
移到上一頁 |
前往下一頁 |
移到下一頁 |
前往最後一頁 |
移到最後一頁 |
依據資料集結果顯示和隱藏區域
您也可以指定要依據資料集是否為空的情況來顯示或隱藏某個區域。在出現空的資料集時 (例如,沒有符合查詢的記錄),您可以顯示一個訊息通知使用者沒有傳回的記錄。這在建立需依照使用者輸入的資料來進行查詢的搜尋頁面時特別有其必要性; 同樣地,當資料庫連線發生問題,或是當伺服器無法辨識使用者的使用者名稱和密碼時,您便可以顯示錯誤訊息。
以下為「顯示區域」伺服器行為:
如果資料集是空的,即顯示
如果資料集不是空的,即顯示
如果是第一頁,即顯示
如果不是第一頁,即顯示
如果是最後一頁,即顯示
如果不是最後一頁,即顯示
-
在「設計」檢視中,選取頁面中要顯示或隱藏的區域。
-
在「伺服器行為」面板 (「視窗>伺服器行為」) 中,按一下加號 (+) 按鈕。
-
從彈出式選單中選取「顯示區域」,並從所列出的伺服器行為中選取其中一項,然後按一下「確定」。
顯示多筆資料集結果
「重複區域」伺服器行為可以讓您在頁面中顯示資料集中的多筆記錄。所有動態資料選取範圍都可以轉變成重複區域。然而,最常見的區域為表格、表格列,或是一系列的表格列。
-
在「設計」檢視中,選取含有動態內容的區域。
選取的項目並無特定限制,可以包含表格、表格列,甚或是文字的段落都可以。
若要精確地選取頁面中的區域,可以使用文件視窗左側角落上的標籤選取器。例如,如果該區域為表格列,請在頁面上的該表格列中按一下,然後按一下標籤選取器最右邊的 <tr> 標籤,以選取該表格列。
-
選取「視窗>伺服器行為」,以顯示「伺服器行為」面板。
-
按一下加號 (+) 按鈕,然後選取「重複區域」。
-
從彈出式選單中選取所要使用的資料集名稱。
-
選取每一個頁面中所要顯示的記錄筆數,然後按一下「確定」。
在「文件」視窗中,重複區域的四週會出現細細的灰色外框。
在屬性檢視窗中修改重複區域
-
變更下列選項以修改選取的重複區域:
重複區域的名稱。
為重複區域提供記錄的資料集。
顯示的記錄數目
當您選取新選項時,Dreamweaver 就會更新頁面。
重複使用 PHP 資料集
如需重複使用 PHP 資料集的教學課程,請參閱 David Powers 所提供的教學課程:如何在多個重複區域中重複使用 PHP 資料集?(英文)
建立動態表格
以下範例說明了如何將「重複區域」伺服器行為套用於表格列上,並指定每個頁面顯示九筆記錄。列本身會顯示四個不同的記錄:城市、州、地址和郵遞區號。
若要建立以上範例所示的表格,您必須先建立含有動態內容的表格,然後將「重複區域」伺服器行為套用至含有動態內容的表格列。當應用程式伺服器在處理該頁面時,該列會依照「重複區域」伺服器物件所指定的次數進行重複顯示的動作,並會在每一個新列中插入不同的記錄。
-
請執行下列其中一項作業以插入動態表格:
選取「插入>資料物件>動態資料>動態表格」,以顯示「動態表格」對話方塊。
在「插入」面板的「資料」類別中,按一下「動態資料」按鈕,並從彈出式選單中選取「動態表格」圖示。
-
從「資料集」彈出式選單中選取資料集。
-
指定每一個頁面中所要顯示的記錄筆數。
-
(選擇性) 輸入表格邊框、儲存格內空白及儲存格間距的數值。
「動態表格」對話方塊會保存您所輸入的表格邊框、儲存格內空白以及儲存格間距的數值。
註解:如果您進行中的專案需要幾個具有相同外觀的表格,請輸入表格版面值,以便進一步簡化頁面開發。您可以在將這些值插入表格後,使用表格的「屬性」檢視窗來加以調整。
-
按一下「確定」。
表格以及在相關資料集中所定義動態內容的預留位置便會插入到頁面中。
在這個範例中,資料集包含四欄:AUTHORID、FIRSTNAME、LASTNAME 和 BIO。表格的標題列填入了每一筆記錄的名稱。您可以使用任何敘述性文字來編輯標題,或是改用具有代表性的影像。
建立記錄計數器
記錄計數器是使用者在瀏覽一組資料集時的一個參考點。通常,記錄計數器會顯示兩個數值:一個是傳回記錄的總數,另一個則是目前正在檢視的記錄。例如,如果資料集傳回 40 筆個別的記錄,而且每一個頁面顯示 8 筆記錄,則第一個頁面中的記錄計數器會指出「顯示第 1-8 / 40 筆記錄」。
在建立頁面的記錄計數器之前,您必須先建立頁面的資料集、含有動態內容的頁面版面,以及資料集導覽列。
建立簡單記錄計數器
記錄計數器可以讓使用者知道他們在一組特定記錄中的位置 (相對於傳回的記錄總數)。因此,記錄計數器可以大幅增加網頁的可用性,是一項相當有用的行為。
您可以使用「資料集導覽狀態」伺服器物件來建立簡單記錄計數器。這個伺服器物件會在頁面中建立顯示目前記錄狀態的文字項目。您可以使用 Dreamweaver 的網頁設計工具來自訂記錄計數器。
-
將插入點置於您想要插入記錄計數器的位置。
-
選取「插入>資料物件>顯示記錄計數>資料集導覽狀態」,從「資料集」彈出式選單選取資料集,然後按一下「確定」。
「資料集導覽狀態」伺服器物件便會插入文字記錄計數器,其外觀類似於下列範例:
當您在「即時檢視」或瀏覽器中進行檢視時,便會出現類似下列範例的計數器:
建立記錄計數器並將其新增至頁面
-
在「插入資料集導覽狀態」對話方塊中選取要追蹤的資料集,然後按一下「確定」。
建立自訂記錄計數器
您可以使用個別的記錄計數器行為來建立自訂的記錄計數器。建立自訂的記錄計數器可讓您建立較為複雜的記錄計數器,而不是由「資料集導覽狀態」伺服器物件所插入的單一列表格。您可以使用數種創意的方式來安排設計元素,並將伺服器行為套用至各個相關的元素上。
以下為「記錄計數」伺服器行為:
顯示起始記錄編號
顯示結束記錄編號
顯示記錄總數
在建立頁面的自訂記錄計數器之前,您必須先建立頁面的資料集、含有動態內容的適當頁面版面,以及資料集導覽列。
這個範例會建立記錄計數器,其外觀類似於「簡單記錄計數器」中的範例。 在這個範例中,使用 Sans-serif 字體的文字代表的是即將插入頁面中的記錄計數器預留位置。本範例的記錄計數器外觀如下:
顯示記錄 StartRow 到 EndRow 或 RecordSet.RecordCount。
-
在「設計」檢視中,請在頁面上輸入計數器文字。您可以使用任意文字,例如:
Displaying records thru of .
-
將插入點置於文字字串的結尾處。
-
開啟「伺服器行為」面板 (「視窗>伺服器行為」)。
-
按一下左上角的加號 (+) 按鈕,然後按一下「顯示記錄計數」。在這個子選單中,選取「顯示記錄總數」。會在頁面中插入「顯示記錄總數」行為,並且會在前述插入點的位置插入一個預留位置。現在文字字串會變成下列所示:
Displaying records thru of {Recordset1.RecordCount}.
-
將插入點置於文字 records 之後,然後從「伺服器行為>加號 (+) 按鈕>記錄計數」面板中,選取「顯示起始記錄編號」。現在文字字串會變成下列所示:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
-
現在,將插入點置於文字 thru 和 of 之間,然後從「伺服器行為>加號 (+) 按鈕>記錄計數」面板中,選取「顯示起始記錄編號」。現在文字字串會變成下列所示:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
-
請在「即時檢視」中檢視該頁面,以確認計數器可以正確運作。計數器的外觀應該會與下列範例類似:
Displaying records 1 thru 8 of 40.
如果結果頁面中有可以移到下一組記錄的導覽連結,按一下該連結即可將記錄計數器更新為如下所示:
Showing records 9 thru 16 of 40.
使用預先定義的資料格式
Dreamweaver 提供了多項預先定義的資料格式,可以讓您套用至動態資料元素。資料格式樣式包含了日期和時間、貨幣、數值和百分比的格式。
將資料格式套用至動態內容
-
選取「文件」視窗中的動態內容預留位置。
-
選取「視窗>繫結」以顯示「繫結」面板。
-
按一下「格式」欄中的向下鍵按鈕。
如果您沒有看到向下鍵,請展開面板。
-
在「格式」彈出式選單中,選取您所要使用的資料格式類別。
檢查確定該資料格式適用於您所要格式化的資料類型。例如,「貨幣」格式只適用於內含數值資料的動態資料。請注意,同一個資料只能套用一種格式。
-
透過在「即時檢視」中預覽頁面,確認格式已正確套用。
自訂資料格式
-
在「設計」檢視中開啟含有動態資料的頁面。
-
選取要建立自訂格式的動態資料。
您所選動態文字所屬的繫結資料項目會在「繫結」面板 (「視窗>繫結」) 中反白標示。面板會顯示所選取項目的兩個欄:「繫結」和「格式」。如果沒有看到「格式」欄,請展開「繫結」面板來顯示它。
-
在「繫結」面板中,按一下「格式」欄中的向下箭頭,展開可用資料格式的彈出式選單。
如果沒有看到向下箭頭,請將「繫結」面板多展開一點。
-
從彈出式選單中選取「編輯格式清單」。
-
完成這個對話框,然後按一下「確定」。
a. 從清單中選取格式,然後按一下「編輯」。
b. 變更「貨幣」、「數字」或「百分比」對話框中的下列任何參數,然後按一下「確定」。
- 小數點後所要顯示的數字數目
- 是否要在分數之前加上前置的數字零
- 決定負值是否要使用括號或負號來表示
- 是否要使用群組位數
c. 若要刪除資料格式,請在清單中按一下格式,然後按一下減號 (-) 按鈕。
建立資料格式 (僅適用於 ASP)
-
在「設計」檢視中開啟含有動態資料的頁面。
-
選取要建立自訂格式的動態資料。
-
選取「視窗>繫結」以開啟「繫結」面板,然後按一下「格式」欄中的向下鍵。如果您沒有看到向下鍵,請展開面板。
-
從彈出式選單中選取「編輯格式清單」。
-
按一下加號 (+) 按鈕,然後選取格式類型。
-
定義格式,然後按一下「確定」。
-
在「名稱」欄中輸入新格式的名稱,然後按一下「確定」。註解:
雖然 Dreamweaver 只支援為 ASP 頁面建立資料格式,但 ColdFusion 和 PHP 使用者可以下載其他開發人員所建立的格式,或建立伺服器格式後再公佈到 Dreamweaver Exchange 上。如需伺服器格式 API 的詳細資訊,請參閱「擴充 Dreamweaver 功能」(「說明 > 擴充 Dreamweaver 功能 > 伺服器格式」)。