第二單元：Dreamweaver的基本操作

Presentation on theme: "第二單元：Dreamweaver的基本操作"— Presentation transcript:

1 第二單元：Dreamweaver的基本操作
網頁設計與製作 第二單元：Dreamweaver的基本操作 授課教師：王漢銘 NordriDesign專業商務簡報設計

2 Dreamweaver操作 請至Adobe Dreamweaver官方教學網站，網址為

3 Dreamweaver操作 Adobe Dreamweaver CS5原版官方使用手冊，下載網址為 也有CS6原版官方使用手冊，同學有興趣的，可以自行至網站上蒐尋。

4 歡迎畫面的開啟與關閉

5 認識Dreamweaver的工作區 Dreamweaver可根據不同的網站工作屬性，切換成所需的工作環境。
為了加快操作速度、方便性或預設的工作區環境不適合網站屬性，常需要將工作區調整成符合自身的習慣。

6 認識Dreamweaver環境

7 認識Dreamweaver環境 由應用程式列、工具列、文件視窗、狀態列、屬性檢視窗、面板群組所組成。 應用程式列。 工具列。 文件視窗。
狀態列。 屬性檢視窗。 面板群組。

8 管理工作區 新增工作區 將浮動面板配置完成後，按下「工作區切換器\新增工作區」。 於「視窗\工作區版面\新增工作區」。

9 刪除工作區 若要刪除自行新增的工作區版面，請按下「工作區切換器\管理工作區」。 「視窗\工作區版面\管理工作區」。

10 應用程式列 有工作區切換器、功能表以及應用程式的其他控制項。

11 工具列 可提供如程式碼、分割、設計檢視等各種不同檢視選項、各種檢視選項，和一些常用的工作。 瀏覽器導覽工具列 文件工具列 編碼工具列
樣式呈現工具列

12 狀態列 文件視窗底部的狀態列提供現在所建立文件的其他資訊。

13 屬性檢視窗 屬性檢視窗可供您檢查及編輯目前選取之頁面元素的常用屬性，其內容會隨著選取的元素而不同。

14 面板群組 插入面板 包含將各種物件插入文件中所需的按鈕。每個物件都是片段的HTML 程式碼，當您將它插入文件時可在其中設定各種屬性。將游標移至三角形的圖示上並單點左鍵即可切換其他類別。

15 常用 常用類別：一般網頁上最常使用的物件都可由這裏來尋找，如影像和表格。

16 版面 版面類別：可讓您插入div標籤、Spry Widget、表格、表格元素、頁框。 您也可以選擇表格的兩種檢視： 標準表格。 展開表格。

17 表單 表單類別：包含建立表單和插入表單元素所用的按鈕。

18 資料 資料類別:可讓您插入 Spry 資料物件以及其他動態元素，如資料集、重複區域以及記錄插入和更新表單。

19 Spry Spry 類別：包含建立 Spry 頁面所用的按鈕。

20 文字 文字類別：可插入各種文字和清單格式的標籤。

21 排版輔助工具 尺規 格線 導引線

22 影像藍圖 是一個圖檔，放置在文件的背景中。 只有在Dreamweaver中看得到，在瀏覽器中看頁面時，是看不到的。

23 請同學看完示範操作後，再進行綀習

24 參考資料 文淵閣工作室（2012）。Dreamweaver CS6網頁製作比你想的簡單。台北市：碁峯資訊。

25 感謝您的聆聽 Thank you