使用手冊 取消

使用 Dreamweaver 開發網頁

 

 

概述如何使用 Dreamweaver 設計和開發網站的高階工作流程

本文協助您了解如何使用 Dreamweaver 完成各種階段的網頁開發。

註解:

本文假設您對於網域以及 HTML、CSS 和 JavaScript 具有初級到中級程度的了解。

  1. 網頁開發的第一個階段是規劃,您要分析客群需要、技術和行銷需求。您也要收集設計和發佈網站所需的必要資訊,並且具有類似下列問題的解答︰

    • 我要選擇哪一家服務供應商來代管網站?我是否具有將檔案上傳到發佈伺服器的存取權?
    • 網站要使用哪個網域名稱?
    • 如果您是將現有的網站移轉到 Dreamweaver 中,檔案和資源目前儲存在何處?我是否具有儲存此資訊的伺服器的存取權?
    • 如果您想要動態網站,我可以使用何種伺服器來測試資料是否會以動態方式顯示?我是否具有要用來載入動態資料的網頁應用程式伺服器詳細資訊?
    • 網站需要何種類型的資源?
    • 這些將會是從頭開始設計的資源嗎?如果已經有資源可用,我是否具有存取權?
    • 我想要使用何種應用程式來設計資源?
    • 我是否計劃要建立多方互動網站?

    假設您清楚了解您想要開發的網站以及代管的方式和位置,並且已選擇 Dreamweaver 和 Creative Cloud 進行網頁開發程序,請繼續執行下一步。

  2. 檢查您是否具有您網站所需的所有資源。在您的本機資料夾或 Adobe 的 Creative Cloud Libraries 中,將資源收集並整理在一起。

  3. 使用下列項目在 Dreamweaver 中建立新的文件:

    • 新的空白文件、
    • Dreamweaver 隨附的初學者範本或
    • 他人建立的範本檔案 (*.dwt)
    註解:

    如果您不熟悉 Dreamweaver 或剛開始學習網頁開發,初學者範本可協助您在網頁設計方面順利開始並快速上手。

    即使您打算從頭開始,也最好先看一下這些網頁,以了解良好的網頁設計要素。

  4. 請花幾分鐘的時間來熟悉 Dreamweaver 工作區。尋找您方便使用的工作區,並設定顏色主題。以適合您的方式重新排列不同的面板。

  5. 在 Dreamweaver 中設定您的網站。開始使用檔案和資源建立資料夾結構。在您組織資訊並決定結構之後,就可以開始建立網站 (請參閱關於 Dreamweaver 網站)。

    在這個階段,最好也設定與遠端伺服器的連線,並且設定測試伺服器 (如果您有動態內容)。 

  6. 開始在「程式碼」檢視中撰寫網頁程式碼,或在「設計/即時」檢視中設計網頁。

    如果您計劃使用 Photoshop 構圖,可以將它們擷取到 Dreamweaver,然後進行處理。如需有關處理 Photoshop 構圖的詳細資訊,請參閱 Dreamweaver 中的 Extract

    新增設計元素,例如文字、影像、變換影像、影像地圖、顏色、影片、音效、HTML 連結、表格等。

  7. 使用 CSS 為網頁的外觀設定樣式。 

    您可以在 Dreamweaver 中透過不同方式使用 CSS:

    • 您可以手動撰寫 CSS 程式碼。如需進一步了解 Dreamweaver 中可協助您手動撰寫 CSS 程式碼的程式碼撰寫功能,請參閱Dreamweaver 的程式碼撰寫環境
    • 如果您對於建立 CSS 頁面不太熟悉,可以使用「CSS 設計工具」面板協助建立您的 CSS。如需詳細資訊,請參閱使用 CSS 設計工具配置頁面
    • 如果您偏好使用 Sass 和 Less 檔案,Dreamweaver 也支援該選項,您可將 Sass 和 Less 檔案放入您的 Dreamweaver 網站,並加以使用。然後 Dreamweaver 會自動編譯它們 (或是您可以選擇手動編譯),並即時查看您的 CSS 變更的結果。如需在 Dreamweaver 中使用 Sass 和 Less 檔案的詳細資訊,請參閱 CSS 預處理器
  8. 設定建立動態內容的網頁應用程式。

    許多網站包含動態網頁,允許瀏覽者檢視儲存在資料庫中的資訊,而且通常還允許某些瀏覽者在資料庫中新增資訊和編輯資訊。若要建立這類網頁,您必須先設定網頁伺服器和應用程式伺服器、建立或修改 Dreamweaver 網站,然後連線到資料庫 如需詳細資訊,請參閱動態網站、網頁和網站表單

  9. 建立動態網頁。

    在 Dreamweaver 中,您可以定義不同的動態內容來源,包括從資料庫抽取的資料集、表單參數和 JavaBeans 組件。如果要將動態內容新增到網頁,只要將它拖曳到網頁中即可。

    您可以將網頁設定為一次顯示一筆或多筆記錄、顯示一頁以上的記錄、新增特殊連結以便從一頁記錄移到下一頁 (及移回來),以及建立記錄計數器來幫助用戶追蹤記錄。如需詳細資訊,請參閱動態網站、網頁和網站表單

  10. 測試、預覽和發佈您的網站。

    當您建立網頁時,您需要預覽網頁,以查看您的網站是否依照設計進行。您可以在「分割」檢視中撰寫程式碼,讓程式碼和即時檢視並排顯示。

    您也可以在瀏覽器上即時預覽網頁。

    如果您不需要即時預覽體驗,可以在瀏覽器中使用一般預覽。

    如果您已經定義與遠端伺服器的連線,然後才發佈您的網站,您必須將檔案放在遠端伺服器中,檔案才會有作用。

更快、更輕鬆地獲得協助

新的使用者?