第 2 章 認識 Dreamweaver.

Presentation on theme: "第 2 章 認識 Dreamweaver."— Presentation transcript:

1 第 2 章 認識 Dreamweaver

2 本章重點 2-1 Dreamweaver 的工作環境 2-2 Dreamweaver 面板的操作 2-3 自訂個人化的工作環境

3 2-1 Dreamweaver 的工作環境 在進行以下的內容之前, 我們假設各位的電腦裡都已經安裝好 Dreamweaver。如果您還沒安裝, 可以將書附光碟放入光碟機中, 安裝 Adobe Dreamweaver CS3 英文 30 天試用版, 接著依照安裝程式的說明一步一步進行操作即可。

4 Dreamweaver 的工作環境 啟動Dreamweaver 顯示與關閉歡迎畫面 認識 Dreamweaver 的主畫面
將『插入』列改為選單方式

5 啟動Dreamweaver 安裝好 Dreamweaver 後, 請按下開始鈕 (以 Windows Vista 的工作環境為例), 執行 『所有程式/Adobe Dreamweaver CS3』 命令, 便可啟動Dreamweaver,並看到歡迎畫面, 你可以由此建立新網頁, 或是開啟現成的網頁檔案：

6 啟動Dreamweaver

7 顯示與關閉歡迎畫面 在歡迎畫面的最下方勾選不要再顯示項目, 下次開啟 Dreamweaver 時將不會顯示此畫面。如果勾選了不要再顯示項目, 當要再度開啟歡迎畫面, 請執行『 編輯/偏好設定』 命令, 開啟偏好設定交談窗如下操作：

8 認識 Dreamweaver 的主畫面 Dreamweaver 各面板及元件的操作,至於更細部的操作方法, 等實際用到時會再做說明。

9 認識 Dreamweaver 的主畫面 功能表：利用功能表可下達各種命令, 不過在實際使用上, 大部份的命令都可從面板來執行, 或是在網頁中按滑鼠右鈕, 就會出現目前適用的快顯功能表 (會依你選擇的是文字、圖片或其它元件, 出現不同的快顯功能表), 善用這 2 種方法可提高製作網頁的效率！

10 認識 Dreamweaver 的主畫面 插入列：將製作網頁常用的物件分門別類擺放在此處, 你可以在插入列的頂端切換到不同頁次, 然後再按下按鈕即可加入想要的元件。例如要在網頁中插入表格, 即可如下操作：

11 將『插入』列改為選單方式 插入列預設會將物件類別以頁次標籤的方式供你點選, 你也可以改為選單的方式來點選。請按下插入列最右邊的 鈕, 執行『 顯示為選單』 命令。

12 將『插入』列改為選單方式

13 將『插入』列改為選單方式 文件視窗：文件視窗是用來顯示及編輯網頁地方, 你可以任意調整視窗的大小、切換到不同的網頁編輯模式、縮放網頁比例、…等, 請看底下的說明。

14 將『插入』列改為選單方式

15 將『插入』列改為選單方式 切換網頁編輯模式：你可以使用文件工具列的
鈕, 切換不同的網頁編輯模式。顯示設計檢視 是預設的編輯模式, 也就是一般所謂的『 所見即所得』 模式, 在此模式中編輯網頁時, 其呈現的畫面就跟在瀏覽器中看到的大致相同。按下顯示程式碼檢視鈕 , 可以看見目前網頁的 HTML 原始碼, 並可直接對原始碼進行編輯。按下顯示程式碼和設計檢視鈕 , 則會將畫面分割, 同時顯示上述 2 種編輯模式。不管你在哪一種模式中修改網頁, 所做的修改會立即反應在另一種模式中。

16 將『插入』列改為選單方式 為了方便理解, 建議你開啟一個現成的網頁來操作, 請先執行『 檔案/開啟舊檔』命令, 選擇書附光碟 FlagJapan_Site 資料夾中的 main.html 網頁來練習。

17 將『插入』列改為選單方式

18 將『插入』列改為選單方式

19 將『插入』列改為選單方式

20 將『插入』列改為選單方式 編輯區：這是製作網頁內容的區域, 可直接在裡面輸入文字、設定格式或加入各類網頁元件, 例如圖片、表格、動畫…等。
Dreamweaver 預設會將文件視窗最大化 (也就是和工作區整合在一起), 讓你有更多的空間可以編輯網頁。當你開啟多份網頁, 想交互參照其內容, 那麼你可以按下文件視窗右上角的 鈕, 顯示成視窗形式。

21 將『插入』列改為選單方式

22 將『插入』列改為選單方式

23 將『插入』列改為選單方式 尺規：尺規可將網頁的空間及元件 (例圖片、表格、…等) 以精確的數值呈現出來,輔助你做版面的編排。

24 將『插入』列改為選單方式 尺規的單位有像素、英吋、公分 3 種選擇 (預設為像素), 在尺規上按右鈕, 由快顯功能表中選擇所要的單位即可 (或是執行 『檢視/尺規』 命令, 由子功能表中勾選所要的單位)。

25 將『插入』列改為選單方式 狀態列：顯示目前網頁中主要的 HTML 標籤、網頁視窗尺寸、網頁檔案大小及預估下載時間等資訊。

26 將『插入』列改為選單方式 縮放與調整顯示比例工具：當你在編輯網頁時, 可能會需要做細微的調整, 例如調整表格距離、圖片的位置、…等, 當要進行這些細微的調整時, 你可以按下狀態列的縮放工具鈕 將網頁放大：

27 將『插入』列改為選單方式

28 將『插入』列改為選單方式 如果要縮小網頁的檢視比例, 你可以先按下縮放工具鈕 , 再按住 Alt 鍵, 這時候指標會變成 樣子, 在網頁中按一下即可縮小顯示比例。

29 將『插入』列改為選單方式 除了使用縮放工具來調整網頁的顯示比例外, 你也可以在設定顯示比例欄中選擇Dreamweaver 設定好的比例來縮放, 或是直接在設定顯示比例欄中自行輸入數值來縮放。

30 將『插入』列改為選單方式

31 將『插入』列改為選單方式 在編輯網頁時你除了可以拉曳文件視窗的垂直捲軸或是水平捲軸來捲動網頁外, 還可以善用狀態列的手掌工具來移動網頁。請按下手掌工具鈕 , 此時滑鼠指標會變成 形狀, 你只要按住左鈕, 上下左右拉曳網頁即可移動到你想要檢視的地方。

32 將『插入』列改為選單方式

33 將『插入』列改為選單方式 屬性面板：可設定文字、圖片及各網頁元件的屬性 (例如文字大小、圖片尺寸、…等), 當你在編輯區選擇了不同的元件時, 屬性面板就會自動變成對應的屬性畫面,夠聰明吧！ 另外, 屬性面板可分為上下 2 截, 下半截通常是比較進階的屬性設定。按一下面板右下方的箭頭符號 (或在面板空白處雙按滑鼠左鈕), 可將下半截的面板顯示或隱藏。

34 將『插入』列改為選單方式

35 將『插入』列改為選單方式 其他各種面板：Dreamweaver 還有各式各樣的面板, 大多數都放在畫面右側的區域, 而有些預設沒顯示的面板, 則要另外執行功能表命令來開啟。通常我們不會把所有面板都顯示出來, 否則畫面會放不下。

36 2-2 Dreamweaver 面板的操作 Dreamweaver 操作環境的特色就在於面板可靈活調配, 所以接下來我們要介紹面板的各項基本操作, 以免各位在編輯網頁時, 會找不到自己想用的面板。

37 Dreamweaver 面板的操作 面板群組和面板 面板群組功能表 由『視窗』功能表開啟面板 摺疊/ 關閉面板群組 摺疊面板群組
調整面板群組的尺寸 調整面板群組的高度 調整面板群組的寬度 隱藏面板區 用 F4 鍵快速隱藏所有面板 移動面板群組 移動與組合面板

38 面板群組和面板 在 Dreamweaver 主畫面右側有許多常用的面板, 我們以其中一個來進行講解。首先, 你要先分清楚『面板群組』和『面板』的差別：

39 面板群組和面板 以上圖為例, 這個面板群組的標題名稱叫做檔案, 而在此面板群組中, 放置了 3 個『面板』 , 分別是檔案面板、資源面板以及片段面板。 也就是說,『 面板群組』 只是一個容器, 用來擺放多個不同的『 面板』。這樣的好處是, 你可以將自己常用的面板集中放在一起, 工作起來比較有效率 (Dreamweaver已經幫我們做初步的分類, 不過你也可以視需求自己更改), 而且當面板群組移動或關閉時, 裡面所包含的面板也會一起跟著移動或關閉, 不必再做個別調整。

40 面板群組功能表 在每個面板群組的最右側,都有一個
鈕, 按下去後會出現功能表, 除了有面板群組專用的功能外, 還會依照目前的面板列出可用的命令：

41 由『視窗』功能表開啟面板 Dreamweaver 預設並不會顯示所有的面板, 如果你在眾多面板群組裡找不到你想要的面板, 那麼可以拉下視窗功能表, 從中選擇你所要的面板：

42 摺疊/ 關閉面板群組 你可以視編輯網頁時的需要, 將面板群組暫時摺疊收起 (只留下標題列), 或是乾脆將面板群組關閉, 騰出更多的空間給其它面板群組或是編輯區使用：

43 摺疊面板群組

44 關閉面板群組 若想關閉用不到的面板群組, 連標題列也不要出現, 只要從該面板群組功能表中執行『 關閉面板群組』 命令即可。面板群組裡所包含的面板也會一起消失在螢幕上：

45 調整面板群組的尺寸 我們可以調整面板群組的高度與寬度, 以免面板太小而不方便點選。

46 調整面板群組的高度 在畫面右側的面板群組是以直式排列, 當你同時展開 3 、4 個面板群組時, 可能某個面板群組會被往下擠壓, 導致高度不夠而無法完整顯現面板內容。此時除了將其它的面板群組暫時隱藏起來外, 你也可以試試另一種方法－用滑鼠來調整面板群組的高度：

47 調整面板群組的寬度 面板群組的寬度也是可以調整的：

48 調整面板群組的寬度

49 隱藏面板區 如果你覺得中間的網頁編輯區範圍太小, 以致製作網頁時看不到整個內容, 那麼可試著將整個右側及下方的面板群組隱藏起來, 就可以多出不少編輯空間哦！

50 隱藏面板區

51 隱藏面板區

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

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

54 移動面板群組

55 移動面板群組

56 移動面板群組 若想讓面板群組再度固定住, 只要將它拉曳回視窗四周或面板群組的邊緣：

57 移動面板群組

58 移動與組合面板 Dreamweaver 預設依面板的功能來做分類, 並擺放在不同的面板群組裡。若是你不習慣預設的分類方式, 你也可以任意拆開、組合面板, 以符合個人的使用習慣。

59 移動面板群組

60 2-3 自訂個人化的工作環境 自訂網頁編輯區的視窗大小 自訂下載時間預估值

61 自訂網頁編輯區的視窗大小 Dreamweaver 的網頁編輯區是放在獨立的文件視窗裡, 而一般我們在編輯網頁時, 預設是將此視窗最大化, 以獲得最大的工作空間, 為什麼這裡卻要教各位自訂文件視窗的尺寸呢？ 這是因為我們必須模擬瀏覽者在觀看網頁時的瀏覽器視窗大小；大部份人所用的瀏覽器, 都會有工具列、網址列、捲軸、狀態列、…等, 扣掉這些工具列後, 所剩下的畫面空間才是網頁真正能顯示的範圍, 也就是我們在設計網頁時所應模擬的視窗大小。

62 自訂網頁編輯區的視窗大小

63 自訂網頁編輯區的視窗大小 假設螢幕解析度設成 1024× 768 像素, 在東扣西扣之後, 還剩下多大的網頁可視範圍呢？這可真難算啊！幸好 Dreamweaver 幫我們把各種螢幕解析度下的最大可視範圍都算好了, 只要從狀態列選擇想要模擬的視窗大小, 視窗就會自動縮放成正確的尺寸：

64 自訂網頁編輯區的視窗大小

65 自訂網頁編輯區的視窗大小

66 自訂網頁編輯區的視窗大小 如果選擇『 編輯大小』 命令, 則可自行設定所需視窗尺寸的設定值, 或是另行修改 Dreamweaver 內建的預設值：

67 自訂網頁編輯區的視窗大小

68 自訂下載時間預估值 在製作網頁還有一個很重要的考量重點就是『 該網頁會耗費瀏覽者多少下載時間』。從 Dreamweaver 的狀態列中, 你可以清楚得知目前網頁的檔案大小 (不只是html 檔的大小, 而是連同網頁裡的圖片等元件都算進去) 以及下載時間, 這樣我們就知道瀏覽者要花多少時間來下載這個網頁了。 你可以執行『 檔案/開啟舊檔』 命令, 由書附光碟的 FlagJapan_Site 資料夾中開啟 main.html 來觀看, 沒有開啟檔案也沒關係, 你可以由下圖中的說明來了解。

69 自訂下載時間預估值

70 自訂下載時間預估值 不過現在大多數的人都使用 512k 以上的寬頻上網了, 所以我們也來看看用寬頻速率需要花費多少下載時間。請執行 『編輯/偏好設定』 命令, 再切換到狀態列頁次, 便可更換預設的連線速度：

71 自訂下載時間預估值