概述如何使用 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 CC 中的 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. 測試、預覽和發佈您的網站。 

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

    您也可以在裝置上即時預覽網頁 (如果您是建立多方互動網頁),或在瀏覽器上預覽。

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

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

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

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