Transcript Dreamweaver的基本操作

網頁設計與製作
第二單元：Dreamweaver的基本操作
授課教師：王漢銘
NordriDesign專業商務簡報設計
Dreamweaver操作
• 請至Adobe Dreamweaver官方教學網站，網址為
http://helpx.adobe.com/tw/dreamweaver/topi
cs.html
Dreamweaver操作
• Adobe Dreamweaver CS5原版官方使用手冊，下
載網址為
http://help.adobe.com/zh_TW/dreamweaver/cs
/using/dreamweaver_cs5_help.pdf，請同學先
下載後，先看一下。
• 也有CS6原版官方使用手冊，同學有興趣的，可
以自行至網站上蒐尋。
歡迎畫面的開啟與關閉
認識Dreamweaver的工作區
• Dreamweaver可根據不同的網站工作屬性，切換
成所需的工作環境。
• 為了加快操作速度、方便性或預設的工作區環境
不適合網站屬性，常需要將工作區調整成符合自
身的習慣。
認識Dreamweaver環境
認識Dreamweaver環境
• 由應用程式列、工具列、文件視窗、狀態列、屬
性檢視窗、面板群組所組成。
•
•
•
•
•
•
應用程式列。
工具列。
文件視窗。
狀態列。
屬性檢視窗。
面板群組。
管理工作區
• 新增工作區
• 將浮動面板配置完成後，按下「工作區切換器\新增
工作區」。
• 於「視窗\工作區版面\新增工作區」。
刪除工作區
• 若要刪除自行新增的工作區版面，請按下「工作
區切換器\管理工作區」。
• 「視窗\工作區版面\管理工作區」。
應用程式列
• 有工作區切換器、功能表以及應用程式的其他控
制項。
工具列
• 可提供如程式碼、分割、設計檢視等各種不同檢
視選項、各種檢視選項，和一些常用的工作。
• 瀏覽器導覽工具列
• 文件工具列
• 編碼工具列
• 樣式呈現工具列
狀態列
• 文件視窗底部的狀態列提供現在所建立文件的其
他資訊。
屬性檢視窗
• 屬性檢視窗可供您檢查及編輯目前選取之頁面元
素的常用屬性，其內容會隨著選取的元素而不同
。
面板群組
• 插入面板
• 包含將各種物件插入文件中所需的按鈕。每個物件都
是片段的HTML 程式碼，當您將它插入文件時可在其
中設定各種屬性。將游標移至三角形的圖示上並單點
左鍵即可切換其他類別。
常用
• 常用類別：一般網頁上最常使用的物件都可由這
裏來尋找，如影像和表格。
版面
• 版面類別：可讓您插入div標籤、Spry Widget、
表格、表格元素、頁框。
• 您也可以選擇表格的兩種檢視：
• 標準表格。
• 展開表格。
表單
• 表單類別：包含建立表單和插入表單元素所用的
按鈕。
資料
• 資料類別:可讓您插入 Spry 資料物件以及其他
動態元素，如資料集、重複區域以及記錄插入和
更新表單。
Spry
• Spry 類別：包含建立 Spry 頁面所用的按鈕。
文字
• 文字類別：可插入各種文字和清單格式的標籤。
排版輔助工具
• 尺規
• 格線
• 導引線
影像藍圖
• 是一個圖檔，放置在文件的背景中。
• 只有在Dreamweaver中看得到，在瀏覽器中看頁
面時，是看不到的。
請同學看完示範操作後，再進行綀習
參考資料
• 文淵閣工作室（2012）。Dreamweaver CS6網頁
製作比你想的簡單。台北市：碁峯資訊。
• 施威銘研究室（2012）。正確學會Dreamweaver
CS6的十六堂課。台北市：旗標。
24
感謝您的聆聽
Thank you
25