本dreamweaver教程主要是寫給對dreamweaver不熟悉的入門者,尤其單元一的步驟繁瑣,希望可以寫得詳盡。


dreamweaver
啟動dreamweaver後,右上角可以選擇要用什麼介面來使用這個程式;一般初入門的網頁設計師可考慮使用"設計師"介面。
以dreamweaver建立網站,首先啟動dreamweaver後,點選功能列的網站>新增網站


dreamweaver
網站命名可以使用中文,但網站資料夾以及裡面所有的檔案名稱都必須注意兩點:
1.同一網站所使用的所有檔案都應放在同一專案資料夾內
2.相關檔案一律用半形的英文或數字命名(也可使用底線),絕不可以有中文、特殊符號、空白鍵


dreamweaver
建立好新網站名稱及資料夾後,可在右下角的檔案區看到。如果同時管理多個網站,也可直接在檔案區切換。


dreamweaver
建立新檔案的方式有二:
1.直接在右下角的網站-傑昇個人工作室上按右鍵>開新檔案
2.點選功能列的檔案>開新檔案


dreamweaver
開好index檔後,之後直接在右下角點檔案兩下就可以開啟。目前的檢視方式先使用"設計",另外兩種檢視之後的單元再介紹。
點選功能列的修改>頁面屬性,可以開始對首頁(index)做一些版面基本設計。


dreamweaver
頁面屬性中可以設定頁面顏色、文字字形及文字顏色和大小...等等。設定完畢後,若是按下套用的話可以先預覽,再繼續做更改;按下確定鍵對話視窗就關閉。


dreamweaver
設定完頁面屬性後就可以輸入網頁文字內容了。使用軟體的好習慣是經常存檔,才不會當機或遇到奇怪的狀況而需要整個重做。存檔有兩個方式:
1.按下紅色框框1中的地球圖形,會出現預覽於_____,此時如果按下其中一個預覽(例如預覽於google chrome),就會跳出對話視窗詢問是否要存檔,選擇存檔即可。這個方式的方便之處在於存檔時可以順便看看網頁在瀏覽器中的效果。
2.功能列的檔案>儲存檔案;若是同時編輯多個檔案可以選擇全部儲存。


dreamweaver
若想改變標題文字的外觀,可框選要改的字(1)後,到下方(2)修改;先確認目標規則是"新增CSS規則",再更改(2)中的任一項設定,就會跳出(3)新增CSS規則對話框。 單元一中的新增CSS規則類型都是使用"類別",選好後記得為要建立的類別取個名字,然後按下確定就建立完畢。


dreamweaver
建立好後可以在視窗右上角插入面板>CSS樣式欄中,看到剛才新建的CSS樣式。在標題文字仍在選取的狀況下,可以直接在(2)中更改文字外觀,也可在(1)中點選新建的CSS樣式(BT)進行修改。


dreamweaver
內文中的小標題文字,也可以用同樣方式做設定。若是其它文字想套用已建立的CSS規則,選取要套用的文字後,到(2)目標規則點選下拉式選單,即可看到已建立好的樣式,點選就套用了。


dreamweaver
以上是簡單的網頁製作,完成後別忘了去修改標題,這樣瀏覽器的標題才不會是"無標題文件"喔。

回目錄下一篇TOP