註解:

Dreamweaver CC (含) 以後版本的使用者介面已經簡化了。因此,您在 Dreamweaver CC 和更新版本中可能會找不到本文所描述的一些選項。如需詳細資訊,請參閱本文

Dreamweaver 和動態網頁設計

請依照這些一般步驟以順利設計和建立動態網站。

  1. 設計網頁。

    設計任何網站 (不論靜態或動態) 的重要步驟就是網頁的視覺設計。在將動態元素加入網頁時,網頁設計對可用性而言就相當重要。您要仔細考量使用者與個別網頁以及整個網站的互動方式。

    將動態內容包含到網頁內的常見方法是建立表格來表示內容,並將動態內容匯入表格的一個或多個儲存格中。使用這個方法,您就可以用結構化的格式來表示各種類型的資訊。

  2. 建立動態內容的來源。

    動態網站需要可以抽取資料的內容來源,才能在網頁上顯示相關資料。您必須先執行下列動作,才能在網頁中使用內容來源:

    • 建立動態內容來源 (如資料庫) 和處理網頁之應用程式伺服器的連線。使用「繫結」面板建立資料來源;之後便可以在面板中選取和插入資料來源。

    • 建立資料集以指定您要在資料庫中顯示的資訊,或是要在網頁中包含的變數。您也可以從「資料集」對話方塊內測試查詢,並在將查詢加入「繫結」面板之前,先進行所有必要的調整。

    • 選取動態內容元素,並將其插入選取的網頁中。

  3. 在網頁上新增動態內容。

    在定義資料集或其他資料來源,並將其加入「繫結」面板之後,您就可以將資料集所代表的動態內容插入網頁中。Dreamweaver 選單驅動介面讓新增動態內容元素的步驟變得很簡單,就像從「繫結」面板中選取動態內容來源,再將其插入目前網頁內適當的文字、影像或表單物件中一樣容易。

    當您將動態內容元素或其他伺服器行為插入網頁時,Dreamweaver 會將伺服器端 Script 插入網頁的原始碼中。這個 Script 會指示伺服器從定義好的資料來源擷取資料,再把資料呈現在網頁內。若要在網頁中置入動態內容,您可以執行下列其中一項作業:

    • 在「程式碼」或「設計」檢視中,將動態內容放在插入點上。

    • 取代文字字串或其他預留位置。

      將動態內容插入 HTML 屬性中。例如,動態內容可以定義影像的 src 屬性或表單欄位的 value 屬性。

  4. 在網頁上新增伺服器行為。

    除了新增動態內容之外,您也可以使用伺服器行為,在網頁內包含複雜的應用程式邏輯。伺服器行為是伺服器端程式碼中預先定義好的片段,會將應用程式邏輯加入網頁,提供更好的互動和功能。

    Dreamweaver 伺服器行為讓您無需自行撰寫程式碼,就可以將應用程式邏輯加入網站。Dreamweaver 中的伺服器行為支援 ColdFusion、ASP 和 PHP 文件類型。伺服器行為撰寫後通過快速、安全且穩定的測試。內建的伺服器行為可支援所有瀏覽器的跨平台網頁。

    Dreamweaver 提供的點按介面,使得在網頁上套用動態內容和複雜行為,變得就像是插入文字和設計元素一樣容易。您可以使用下列伺服器行為:

    • 從現有的資料庫定義資料集。然後您所定義的資料集就會儲存在「繫結」面板中。

    • 在單一網頁上顯示多筆記錄。您可以選取整個表格或包含動態內容的個別儲存格或列,然後指定要顯示在每個網頁檢視上的記錄數。

    • 建立動態表格並插入網頁中,然後建立表格與資料集的關聯。稍後,您可以分別使用「屬性」檢視窗和「重複區域伺服器行為」來修改表格的外觀和重複區域。

    • 將動態文字物件插入網頁中。您插入的文字物件是來自於預先定義資料集的項目,您可以對它套用任何資料格式。

    • 在資料庫中建立更新資訊的記錄導覽和狀態控制項、主要/細節頁面和表單。

    • 顯示資料庫記錄中一筆以上的記錄。

    • 建立資料集導覽連結,讓使用者能夠檢視資料庫記錄中的上一筆或下一筆記錄。

    • 新增記錄計數器,以協助使用者追蹤傳回的記錄數目,以及記錄在傳回結果中的所在位置。

    您也可以自行撰寫伺服器行為,或是安裝由協力廠商撰寫的伺服器行為,來擴充 Dreamweaver 的伺服器行為。

  5. 進行網頁測試和除錯。

    在網路上製作動態網頁 (或整個網站) 之前,您必須先測試其功能。您也應該考慮應用程式的功能將會對殘障人士有何影響。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策