使用 Dreamweaver 開發網頁

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

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

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

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

使用下列項目在 Dreamweaver 中建立新的文件：

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

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

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

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

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

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

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

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

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

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

設定建立動態內容的網頁應用程式。

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

建立動態網頁。

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

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

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

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

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

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

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