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

Presentation on theme: "熟悉 Dreamweaver 的工作區與基本操作"— Presentation transcript:

1 熟悉 Dreamweaver 的工作區與基本操作
第 2 章 熟悉 Dreamweaver 的工作區與基本操作 在製作網站之前, 本章將帶你先建立網站與網頁的基本概念, 以及了解如何著手規劃出一個網站, 並用網頁製作軟體實際開發出來的流程。打好這些基本功再動手製作網頁會比較有效率喔！

2 本章重點 2-1 啟動程式與開啟網頁 2-2 認識 Dreamweaver 的工作區 2-3 自由調整工作區的配置
2-4 儲存、關閉網頁及結束程式

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

4 啟動 Dreamweaver

5 建立新網頁 在 Dreamweaver 中要建立新網頁, 有以下兩種方法：
從歡迎畫面中建立新網頁：按下歡迎畫面中新增區的 HTML 項目, 即可直接開啟一個空白 HTML 網頁

6 建立新網頁

7 建立新網頁 從新增文件交談窗中建立新網頁：執行『檔案/開新檔案』命令開啟新增文件交談窗, 從中也可建立新的 HTML 網頁

8 建立新網頁

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

10 開啟舊網頁

11 開啟舊網頁

12 重新設定工作區 下圖就是預設的設計師工作區, 若你所看的介面與下圖不同, 請按下功能表右側的設計師鈕執行『重設「'設計師'」』命令, 將工作區恢復成預設狀態, 以方便之後的操作練習能和我們同步進行

13 重新設定工作區

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

15 功能表

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

17 文件視窗

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

19 檔案標籤

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

21 關聯檔案列

22 關聯檔案列

23 文件工具列 文件工具列可切換網頁編輯模式、預覽檢視網頁在瀏覽器中的呈現結果、設定文件標題、…等, 是用來檢視、管理檔案的好幫手

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

25 編輯區

26 編輯區 可以利用文件工具列的 鈕切換編輯區的檢視模式。初學者若暫時不需要對照 HTML 原始碼, 可按下設計鈕只顯示設計檢視編輯區
等到想探究原始碼, 甚至是進一步編寫、修改程式碼, 再按下分割鈕將程式碼檢視編輯區也一併顯示出 若按下程式碼鈕, 則可只顯示程式碼檢視編輯區

27 編輯區

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

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

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

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

32 其他各種面板 除了剛剛介紹最常用的插入面板及屬性面板外, 還有各式各樣的功能面板, 例如：CSS 樣式面板、檔案面板、…等, 大多數都放在工作區的右側 為了有效地運用空間, 面板會被區分成多個群組, 並以索引標籤的形式分頁, 只要按下索引標籤就可以切換到該面板

33 其他各種面板 在下一節中, 將會說明如何開啟與關閉這些面板, 至於各種面板的用途, 待各章節實際應用到時, 會再深入講解

34 改變編輯區的分割方式 想要同時檢視設計畫面及程式碼, 除了將編輯區水平分割成上、下兩塊外, 也可以視需求改分割成左、右兩半, 或是對調設計畫面及程式碼的顯示位置

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

36 垂直分割編輯區

37 垂直分割編輯區 若想恢復成上、下分割, 只要再按下版面鈕 , 取消勾選『垂直分割』命令即可

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

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

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

41 對調設計檢視與程式碼檢視的顯示位置 按下版面鈕 , 取消勾選『設計檢視在左方』命令 (或『設計檢視在上方』命令) 即可恢復原狀
按下文件工具列的檢視選項鈕也可執行『設計檢視在左方』命令(或『設計檢視在上方』命令)

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

43 展開與收合面板 大部分的面板會開啟在工作區的右側, 按下右上方的 鈕, 可收合所有開啟的面板 按下後會變成 鈕, 若按一下則可再度展開面板
按下後會變成 鈕, 若按一下則可再度展開面板 若於編輯區及面板交接處按住左鈕並往右拉曳, 還可再進一步收合成只剩圖示按鈕, 以騰出更多編輯網頁的空間

44 展開與收合面板

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

46 用 鍵快速隱藏所有面板 若想獲得最大的編輯空間, 可以按下鍵盤上的 鍵, 則目前工作區中所有的面板都會隱藏, 只留下編輯區而已, 這樣在製作或檢視網頁內容時就不會有視覺干擾了 再按一次 鍵, 各面板又會再度出現在原本的位置上, 是個很好用的快速鍵

47 調整面板的高度與寬度 工作區右側的面板是以直式堆疊排列, 當同時展開 3、4 個面板時, 單一面板可得到的高度勢必會減少, 導致無法完整呈現面板內容, 此時可將暫時不需使用的面板折疊到只剩下索引標籤, 以騰出更多的空間給其他面板使用

48 調整面板的高度與寬度

49 調整面板的高度與寬度 除了將面板群組暫時折疊起來外, 也可以自行拉曳調整面板群組的高度
當然, 若覺得面板群組寬度太窄時, 同樣也可用拉曳的方式調整寬度

50 調整面板的高度與寬度

51 移動與組合面板 Dreamweaver 的面板群組預設都是固定在視窗的邊緣, 也可以將面板拉曳出來,成為浮動的形式, 放到習慣的位置上：

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

53 移動與組合面板

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

55 移動與組合面板

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

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

58 開啟與關閉面板 Dreamweaver 預設並不會顯示所有的面板, 如果在目前開啟的面板中找不到欲使用的面板, 可執行視窗功能表從中做選擇
若想關閉用不到的面板, 連索引標籤也不要出現, 只要在面板的索引標籤上按右鈕, 執行『關閉』命令關閉單一面板, 或執行『關閉索引標籤群組』命令關閉整個面板群組

59 開啟與關閉面板

60 管理與套用工作區 經過剛才的介紹, 相信已經知道怎麼調整工作區了。等使用 Dreamweaver 一段時間後, 可能會漸漸培養出自己習慣的操作方式, 也能清楚知道較常使用的面板有哪些,此時便可自訂自己專屬的工作區 底下將說明如何將調配好的工作區儲存起來, 以及如何套用自訂或內建的工作區, 讓你能隨時因應不同的情況, 切換成最容易操作的工作區

61 儲存與刪除自訂的工作區 想保留自行調整過的工作區, 請按下視窗右上方的工作區切換鈕 (按鈕名稱以目前使用中的工作區為主, 例如目前是設計師), 執行『新增工作區』命令, 替目前的工作區命名並按下確定鈕即可 執行『管理工作區』命令則可重新命名或刪除自訂的工作區

62 儲存與刪除自訂的工作區

63 套用工作區 要套用不同的工作區, 只要按下視窗右上方的工作區切換鈕 (按鈕名稱以目前使用中的工作區為主), 即可從中選擇欲使用的工作區

64 儲存網頁 空白網頁編輯好之後, 只要執行『檔案/儲存檔案』命令 (或直接按 Ctrl + S 鍵(Windows), 就會跳出如下的另存新檔交談窗, 讓你指定存檔的名稱和路徑

65 儲存網頁

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

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

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

69 關閉網頁及結束 Dreamweaver

70 關閉網頁及結束 Dreamweaver 想要結束 Dreamweaver, 只要直接按下軟體視窗右上方的關閉鈕就可以了

71 關閉網頁及結束 Dreamweaver