Dreamweaver CS5網頁製作教程

在網頁設計中，通常需要使用Dreamweaver 軟體完成編輯，其中Dreamweaver CS 5為廣泛使用版本，但Dreamweaver 軟體不像MIcrosoft Office 一樣全靠視覺化完成，而是需要一定的技術性，對於新手來說，需要掌握一定的常識，才能製作出一個很好的網頁。

操作方法

（01）為方便操作，將檢視設為經典模式

（02）首先為更好地管理網頁，需要將網頁用站點進行統一管理，因此要先新建站點：點選 站點-新建站點

（03）設定好站點名稱和本地儲存位置，點選“儲存”

（04）此時，Dreamweaver 將自動生成一個站點資料夾，右擊資料夾可進行編輯，如建立檔案和資料夾。注：若要刪除其中的檔案或資料夾，則先單擊欲刪除的專案，再按<Delete>鍵，此時本地檔案中的原始檔仍存在。要先將需要使用的素材先統一拷貝到站點資料夾中，再點選站點空口的“重新整理”按鈕，建立需要的網頁頁面。注：任何檔名都不能使用中文或空格，否則會造成讀取錯誤。

（05）開啟需要編輯的HTML檔案，在設計檢視選項可設定檢視樣式：“程式碼”為原始碼編輯檢視；“拆分”為原始碼與設計檢視並存，方便實時預覽網頁效果；“設計”為全視覺化編輯。

（06）網頁設計需要使用視覺化與原始碼編輯相結合佈局，對初學者建議使用表格佈局，此方法最便於掌握，操作起來速度快。插入表格：直接點選快速工具中表格命令；按快捷鍵<Ctrl>+<Alt>+<T> 插入；點選 插入-表格 插入

（07）根據自己需要設定表格屬性

（08）選中表格，在“屬性”控制面板中可設定表格屬性。點選具體單元格可對其單獨設定屬性和編輯內容若需要合併/拆分單元格，則選中需要執行操作的單元格，點選“屬性”視窗中相應命令即可寬/高 屬性可直接設定相應單元格的行高/列寬，其單位為畫素（單位：px）

（09）向表格中輸入需要的文字即可，若需要輸入的效果與實際輸入計算機的不符，則需要用程式碼完成，讀者可自行查閱相關HTML程式碼表，注意輸入程式碼時需要結束標識。內容輸入完畢後，選中表格，在“屬性”中將其間距和邊框均設定為0，即可保留佈局效果，此時在瀏覽器中將不顯示錶格框線，僅保留佈局效果。

（10）對一個網頁中含多個頁面的，則使用框架佈局