1、Dreamweaver 網頁編輯 91.01.231.網站規劃開始製作網站,可先簡單做規劃。先規劃首頁及主要的內容,依內容繪出網站規劃圖。注意檔名不要有中文或空白字元2.定義新網站1.首先定義網站位置及本機的工作目錄從功能表中點選網站site/定義網站Define sites ,出現定義網站 Define sites視窗。在 定義網站 Define sites視窗中,按新增New按鈕,開啟 網站定義 Site Definition for Unnamed site 1視窗。左邊分類 Category有五個選項設定網站,首先點選 本地資訊 Local Info設定本機的工作目錄。網站名稱 Sit
2、e Name填入網站名稱(此名稱可任意指定,例如一年一班) 。本地根資料夾 Local Root Folder指定本機的工作目錄,就是要儲存該網站內容的資料夾(如D:web101) ,須新增一個資料夾作為本機的工作目錄。完成後按確定 OK ,出現詢問框,按Create完成網站的定義設定網頁上傳方式再來分類 Category點選網頁伺服器資訊 Web Server Info定義上傳下載網站資料的方式及網站位置伺服器存取 Server Access選單內選擇 FTP主機名稱 Host Name填入 ftp.nkps.tp.edu.tw 或 ftp.nkps.tp.edu.tw物件視窗屬性視窗文件視
3、窗Connect to Remote Host字體 超連結 大小 顏色 字體 對齊主機目錄 Home Directory留空白登入 Login填入 ftp 的 ID密碼 Password填入 xxxxxx 完成後按確定 OK ,出現詢問框,按Create完成網站的定義3.認識 Dreamweaver 基本的浮動視窗網站視窗網站視窗的操作與檔案總管類似。右邊為本地端,在根目錄下按滑鼠右鍵新增檔案 New Files ,新檔案建立後,預設檔名為untitled.htm,將檔名更改為 default.htm。再建立其他的檔案。若要建立資料夾,所在的目錄下,按滑鼠右鍵新增資夾 New Forder左邊
4、為網站伺服器端,按下 Connect to Remote Host 圖示,會連線到伺服器,連線後會出現網頁架構。一般的伺服器首頁為 index.htm,而 Microsoft 的網頁伺服器首頁預設為 default.htm。檔案的搬移及更名請利用網站視窗,Dreamweaver 會自動更新網頁連結,不要使用檔案總管,以免連結失敗。文件視窗網頁編輯的地方。物件視窗提供網頁常用的元件,快速取用如圖片、表格、分格線等。屬性視窗可以檢視及修改元件的屬性,當指向不同的元件會自動變動屬性視窗內容。4.網頁的編輯文字編輯可以編輯字體、大小、顏色、字體、對齊方式。對 HTML 中的文字只有 1 至 7 等級。
5、編輯時按下Enter時為新增段落。會自大小 連結 圖片位置 文字對齊圖片方式 替代文字動空一行。若不想空行則按 Shift+Enter。在 HTML 中要縮排效果須用縮排功能,使用空白鍵是沒有效果的。Dreamweaver 預設字型為英文字故須選Edit Font List 來新增字型,在Available Fonts按移至Chosen Fonts 請不要選細明體及標楷體以外的字體,以免無法呈現該字體,解決方法改為圖形呈現。5.標題及背景顏色標題是顯示在瀏灠器上方可設定背景圖或顏色,若同時設定只會顯示背景圖。6.插入圖形從物件視窗中按 Insert Image 圖示或功能表中的Insert/I
6、mage插入圖形。選定圖片後會出現是否複製到該網站視窗請按是,否則上傳後會現無法顯圖片。將圖片置於 images 目錄下。網路僅接受 jpg,gif,png 三種格式的圖檔,故其他格式要置於 Dreamweaver 須先轉換。標題背景圖背景顏色即使將圖片的寬高都設小,檔案大小並沒有改變,設大則會使圖形產生鋸齒狀,故要指定大小,請使用影像編輯軟體來完成,以免浪費頻寬。alt 是當下載未完成或失敗,顯示在圖片上的文字。align 是當文字與圖片並排時排列方式。圖片在網頁中並無法像 word 的編輯,想放那裡就放那裡,因此會使用表格來輔助排列。7.建立連結超連結可建立在文字或圖片上。在屬性視窗的Li
7、nk欄中填入連結對象即可,或點選旁邊黃色資料夾用選取檔案方式。網站連結如 http:/.tw站內連結如 imagesclass.htmEmail 服務如 mailto:00020nkps.tp.edu.twGopher如 Gopher:/.twNews如 News:.twftp如 ftp:/ftp.nkps.tp.edu.tw若須帳號密號可一併填入ftp:/00020.xxxxxftp.nkps.tp.edu.tw如發現 fil:/xxxx 等字眼則可能結錯誤。網頁內連結frontpage 中的書籤先建立錨點Insert/Invisible Tags/Named Anchor 再輸入名稱連結方
8、式只要在原本連結後面加上#及名稱如 imagesclass.htm#tag1或直接扡曳即可。8.外部影像編輯器Dreamweaver 預設影像編輯器為 FireWork 若無則可設外部影像編輯器Perferences/External Editors9 將現有的網頁下載網站視窗中選網站 Site/檔案同步化Synchronize 叫出 Synchronize 視窗Synchronize 選項中選Entire xxx Site ,Direction 選項中選下載較新檔案 。10 網頁的上傳下載網站視窗中選網站 Site/檔案同步化Synchronize 叫出 Synchronize 視窗Synchronize 選項中選Entire xxx Site ,Direction 選項中選上傳較新檔案至遠端 Put Newer File to remote按 OK 後,即可將本機中更新過的網頁上傳到網站。