熟悉 Dreamweaver 的工作區與基本操作

1. 熟悉 Dreamweaver的工作區與基本操作 講師:陳烱勳 Email: mikemousenana@gmail.com mikemouse@is.cs.nthu.edu.tw

2. 啟動 Dreamweaver • 請按下開始鈕 (以 Windows XP 為例), 執行『程式集/Adobe Dreamweaver CS4』命令啟動　Dreamweaver, 當程式啟動後預設會顯示如下的歡迎畫面, 你可以由此建立新網頁, 或是開啟現成的網頁檔案。

3. 啟動 Dreamweaver

4. 建立新網頁 • 在歡迎畫面的最下方勾選不要再顯示項目, 下次開啟 Dreamweaver 時將不會顯示歡迎畫面。若想再度開啟歡迎畫面, 請執行『編輯/偏好設定』命令開啟偏好設定交談窗, 勾選一般設定頁次的顯示歡迎畫面項目後按下確定鈕, 下次開啟 Dreamweaver 即可看到歡迎畫面。 • 在 Dreamweaver 中要建立新網頁, 有幾種方法： • 從歡迎畫面中建立新網頁：按下歡迎畫面中新增區的 HTML 項目, 即可直接開啟一個空白 HTML 網頁。

5. 建立新網頁

6. 建立新網頁

7. 開啟舊網頁 • 要開啟舊檔案, 請執行『檔案/開啟舊檔』命令開啟開啟舊檔交談窗, 從中即可選擇要開啟的檔案。請開啟 Ch02資料夾中的 Ex02-01.html, 稍後將會利用此檔案帶你熟悉 Dreamweaver 的工作環境。

8. 開啟舊網頁

9. 開啟舊網頁

10. 重新設定工作區

11. 功能表 • 按下各功能表可展開命令選單, 從中可執行各種命令。不過大部分的命令可透過其他面板來執行,或是在編輯區中按右鈕,也可出現相對應的快顯功能表, 善用這 2 種方法可提高製作網頁的效率喔！

12. 功能表

13. 文件視窗 • 文件視窗是用來顯示及編輯網頁的地方, 由檔案標籤、關聯檔案列、文件工具列、編輯區及狀態列所組成, 你可在多個檔案中快速切換以進行編輯、切換不同的編輯模式、檢視預覽網頁、…等, 底下就分別為你做說明。

14. 文件視窗

15. 檔案標籤 • 在進行網頁設計時, 難免會需要同時開啟多個檔案, 為了方便選取欲編輯的網頁,Dreamweaver 會將同時開啟的檔案以標籤形式並存, 只要按下檔案標籤即可切換欲編輯的檔案。 • 例如目前正同時開啟 2 個檔案, 若想切換則可如下操作。

16. 檔案標籤

17. 關聯檔案列 • 當編輯中的網頁有連結到其他程式檔案, 例如：CSS (*.css)、JavaScript (*.js)、動態資料庫連結用的檔案、…等, Dreamweaver 會一併開啟它們, 並在關聯檔案列中顯示檔名,只要按下 即可編輯該檔案；若關聯檔案過多時, 關聯檔案列最右邊會出現 鈕, 按下可顯示其他容納不下的檔案。 • 請切換到 Ex02-01.html, 便會出現關聯檔案列。

18. 關聯檔案列

19. 關聯檔案列

20. 文件工具列 • 如果沒有看到文件工具列, 請執行『檢視/工具列/文件』命令即可。

21. 編輯區 • 編輯區 • 「設計檢視」 • 編輯區中可直接輸入文字、設定格式或加入各類網頁元素, 例如圖片、表格、動畫…等,也就是一般所謂的「所見即所得」編輯方式 • 「程式碼檢視」 • 編輯區中則可編輯 HTML 原始碼及其他的程式語法 • 「分割檢視」 • 不管你在哪一種模式中編輯網頁, 所做的修改都會反應在另一種模式上。

22. 編輯區

23. 編輯區

24. 狀態列 • 狀態列會顯示選取或編輯中的 HTML 標籤、網頁視窗尺寸、網頁檔案大小及預估下載時間、網頁編碼等資訊。

25. 插入面板將網頁常用的元素, 分門別類地放在不同的頁次中, 按下插入面板上方的頁次按鈕, 即可進行切換。

26. 屬性面板 • 屬性面板可設定文字、圖片及各網頁元素的屬性樣式 (如：文字大小、圖片尺寸、…等),當你在編輯區選擇了不同的元件時, 屬性面板就會自動變成對應的設定欄位, 夠聰明吧！

27. 屬性面板 • 另外, 屬性面板可分為上下 2 截, 下半截通常是比較進階的設定。按一下面板右下方的箭頭符號 (若看不到箭頭, 也可在面板空白處雙按滑鼠左鈕), 可顯示/隱藏下半截的面板。

28. 其他各種面板

29. 垂直分割編輯區 • 大部分的網頁的設計會呈現長條式, 因此若覺得水平分割讓編輯區變得過於狹隘時, 你可以按下功能表的版面鈕 , 執行『垂直分割』命令 (必須先切換成分割檢視模式才可作用), 讓編輯區分割成左、右兩半。

30. 垂直分割編輯區

31. 對調設計檢視與程式碼檢視的顯示位置 • 分割後的設計畫面與程式碼也可交換顯示位置。例如剛剛垂直分割後的編輯區, 我們希望設計畫面在左邊, 程式碼在右邊, 則可按下功能表的版面鈕 , 執行『設計檢視在左方』命令 (若是水平分割, 則會顯示『設計檢視在上方』命令)。

32. 對調設計檢視與程式碼檢視的顯示位置

33. 對調設計檢視與程式碼檢視的顯示位置

34. 調整 Dreamweaver 的面板配置 • Dreamweaver 將製作網頁所需的各項控制功能區分成多個面板, 你可視需求自由調整面板的配置, 以讓出更大的編輯空間。

35. 展開與收合面板

36. 按下收合後的面板標籤鈕, 可開啟單一面板群組來使用, 再按一下即可收合。

37. 調整面板的高度與寬度

38. 調整面板的高度與寬度

39. 移動與組合面板

40. 移動與組合面板 • 此外, 面版的群組也可以自行調配。若要將面板移動到其他面板群組中, 請於索引標籤上按住左鈕, 拉到到其他面板的索引標籤標題列, 待面板群組周圍出現亮藍色外框即可放開左鈕。

41. 移動與組合面板

42. 移動與組合面板 • 你也可以將面板拉曳回原來的面板區, 只要拉曳到面板群組的上緣或下緣處, 就會出現一條亮藍色粗線讓你定位, 放開滑鼠即可固定位置。

43. 移動與組合面板

44. 將「插入」面板拉曳到文件視窗的上方 • 接觸過 Dreamweaver CS3 (含以前版本) 的使用者, 應該知道插入面板原本是位於文件視窗上方的位置。不過在 Dreamweaver CS4 中, 插入面板合併到右側面板群組中了。 • 若覺得新的位置操作不太順手, 你也可以將插入面板恢復到文件視窗的上方喔！

45. 將「插入」面板拉曳到文件視窗的上方

46. 儲存網頁 • 若是已經存檔過的檔案, 執行『檔案/儲存檔案』命令則可直接存檔；如果想要另外存成其他檔名, 或是要存到其他地方, 則必須執行『檔案/另存新檔』命令。

47. 關閉網頁及結束 Dreamweaver • 要關閉已經開啟的網頁, 只要按下檔案標籤上的 ×鈕即可；如果要關閉的網頁有經過修改但尚未存檔, 則會出現如下交談窗, 詢問你是否要先存檔再關閉：

48. 關閉網頁及結束 Dreamweaver • 如果想要一次關閉所有開啟的網頁, 但不要關閉 Dreamweaver, 請執行『檔案/全部關閉』命令, 或是在任意一個檔案標籤上按右鈕, 也可執行『全部關閉』命令。