哇豪洨

1.開啟Dreamweaver CS4，請將右上角的『設計師』改為『傳統』

2.請點選『網站』，『管理網站』

3.點選『新增』，『網站』

4.請點選『進階』

5.請將『網站名稱』及『本地端資料夾』改為『知性之旅』及『H:\mydream』，再按『確定』

6.在『管理網站』內看到『知性之旅』新增完成後點選『完成』

7.請在右側確認目前所管理的網站為『H:\mydream』

8.在右側的『網站-知性之旅』點右鍵，選取『開新檔案』

9.將檔名改為『index.htm』

10.請重復上面步驟新增其他8個網頁

11.然後開啟首頁『index.htm』

12.請將『標題』中的『無標題文件』改為『知性之旅』

13.請將其他8頁的『標題』都改掉後，會發現九個網頁的檔名後面會多個星號『*』

14.出理星號『*』代表檔案有修改過，請點選『檔案』『全部儲存』

15.儲存後星號會不見，即代表已儲存完畢

16.將首頁開啟

17.請按『插入』，『表格』

18.請輸入『列：1』『欄：1』『表格寬度：800  像素』『邊框粗細：0』『儲存格內距：0』『儲存格間距：0』，之後按『確定』

19.確認有出現一個表格，下方會只有一個『<table>』，在『對齊』點選『置中對齊』

20.在表格內點一下，確認在『<table>』內

21.再新增一次表格

22.輸入『列：4』『欄：1』『表格寬度：100 百分比』『邊框粗細：0』『儲存格內距：0』『儲存格間距：0』後再按『確定』

23.會出現第二個表格出來，下方會有2個『<table>』

24.請重複上一步驟至其他8個網頁做新增表格，做後完再全部儲存

25.再將首頁開啟

26.在表格內中第四列裡點一下

27.確認下方有兩個『<table>』後，將『儲存格』『水平』把『預設』改為『置中對齊』

28.輸入『99中小介業資訊人員實務班』後按『Shift+Enter』，會看到遊標從藍色箭頭處跑去綠色箭頭處

29.再將後面2行輸入完

30.將此三行字選取後按『Ctrl+C』複製

31.至其他網頁點表格中的第四列點一下，按『Ctrl+V』貼上

32.會發現字都靠左，在下面『儲存格』『水平』選取『置中對齊』

33.再將其他網頁都做上一步驟

34.再按『全部儲存』

35.點選『首頁』在『網站-知性之旅』按右鍵選『開新檔案』

36.將檔名改為『style.css』

37.開啟『style.css』跟我紅框處內的文字一樣即正確，之後就把『style.css』關掉

38.在右側上方『CSS樣式』連點兩下開啟

39.再點選『全部』

40.會看到『所有規則』內顯示『（沒有定義樣式）』，點選綠色箭頭所指的『附加樣式表』

41.出現『附加外部樣表』點選『瀏覽』

42.先確認是否在『mydream』資料夾內，點選『style.css』後按『確定』，再按一次『確定』

43.這樣『所有規則』會變成『style.css』

44.但其他網頁的『所有規則』還是『（沒有定義樣式）』，重複上一步驟將其他網頁都設定好

45.做完後再『全部儲存』

46.請將其他網頁關掉只剩『首頁』，點選綠色箭頭處的『新增CSS規則』

47.點選藍色箭頭處，下拉選取『標籤』

48.點選『body』後按『確定』後再按一次『確定』

49.在右邊『所有規則』下的『style.css』會出現『body』

50.重複上一步驟將『h1』『h2』『h3』『img』都新增進去

51.接著在『新增CSS規則』點選『ID』

52.在中間紅框處輸入『#header』後按『確定』，再按『確定』

53.重複上一步驟，把『#menu』『#sidebar』『#news』『#footer』『#content』『#container』新增進去

54.細仔看左上角會看到『style.css』後會有星號『*』

55.再『全部儲存』

56.關掉『首頁』後再去『管理網站』

57.選取『知性之旅』點選『移除』，選『是』，再按『完成』

58.再到『H槽』點選『mydream』資料夾按右鍵選『刪除』，之後按『是』

59.再把所有步驟重新再做到不用看此教學檔都能全部做完為止！