Transcript ch03 Dreamweaver 快速入門教學投影

Chapter 3
Dreamweaver
快速入門
這一章將Dreamweaver 環境的基本操作，包括建立網站與編輯
網頁文字。
開始
離開
＊教科書投影片同教科書受著作權保護，僅供教師作為授課用途。學校教師得使用投
影片，於授課期間，搭配用書進行教學；由於投影片極易重製、列印、出版，為避免
第三人（含學生）因不知情而發生侵權行為，請支持與協助不將教學投影片以任何型
式移轉予第三人使用。如有特殊需求，請向出版社申請授權協議。
目錄
3-1
3-2
3-3
3-4
3-5
Dreamweaver 的簡介
啟動Dreamweaver
認識 Dreamweaver環境
定義與複製網站
網頁的文字編排
回章首
上一頁
下一頁
離開
3-1 Dreamweaver 的簡介
Dreamweaver 原 本 是 由 美 國 一 家 以 多 媒 體 軟 體 聞 名 的
Macromedia 公司所開發的網頁設計軟體，另外還有處理向量
圖形的 Fireworks 和動畫設計軟體 Flash，都是 Macromedia
的產品。
2005年4月，Adobe 宣布收購 Macromedia，提高了它在多媒
體和網路出版的能力。2005年12月，Adobe 以市值約 34 億
美元的股票交易完成併購。Macromedia 從此更名為 Adobe，
原本 Macromedia 旗下產品的「Macromedia」產品即被
「Adobe」所取代。
Dreamweaver 是網頁設計者的第一選擇，因為操作容易，它
的使用極為普及。第四篇的實戰篇中所有新增修改等操作，與
資料的查詢顯示畫面，都只要在 Dreamweaver 拉一拉滑鼠就
好。當然設計網頁的基本功能，譬如超連結的設定，也都可以
在 Dreamweaver 完成，可以不需要了解 HTML 的語法就做
得出來和自行寫 HTML 程式碼相同的效果。
下一節
上一頁
下一頁
回目錄
3-2 啟動Dreamweaver CS5
雙擊桌面上 Dreamweaver CS5 的捷徑，即可啟動
Dreamweaver CS5。剛開始看到的畫面是歡迎畫面，可以按
下「不要再顯示」，這樣以後每次啟動 Dreamweaver CS5 時
不會再出現這個歡迎畫面。
下一節
上一頁
下一頁
回目錄
3-2-1 安裝 Dreamweaver CS5
下一節
上一頁
下一頁
回目錄
3-3 認識Dreamweaver環境
功能面板
功能表
常用工具列
文件視窗
尺規
屬性面板
下一節
上一頁
下一頁
回目錄
3-3-1 功能表
「檔案」/「開新檔案」：
剛開始要編輯網頁前，一定要先開新的網頁檔案。其實 Dreamweaver 提供
了許多範本 （template），有不同的頁框的版面配置方式，方便使用者選擇
較適合的版面開始修改成自己要的版面。
下一節
上一頁
下一頁
回目錄
3-3-1 功能表
「修改」/「頁面屬性」：
頁面屬性可以修改的項目很多，像整個網頁的背景圖案也可從「修改」/
「頁面屬性」做修改。它會將整個網頁重覆填滿這個設定的背景圖案。
下一節
上一頁
下一頁
回目錄
3-3-1 功能表
下一節
上一頁
下一頁
回目錄
3-3-3 文件工具列
文件工具列上最左邊有三個切換檢視模式的按鈕，分別是「程式碼」、
「分割」和「設計」模式。
「程式碼」模式：
下一節
上一頁
下一頁
回目錄
3-3-3 文件工具列
「分割」模式：
上半部是程
式碼
下半部是設計
模式
下一節
上一頁
下一頁
回目錄
3-3-3 文件工具列
「設計」模式：
顯示目前設計出來的網頁外觀
下一節
上一頁
下一頁
回目錄
3-3-3 文件視窗
在文件工具列上還有個「標題」欄位，這串文字將會是這個網頁用瀏覽器
時的瀏覽視窗中的標題文字。而最右邊的
按鈕功能就是預覽網頁，另
外也可以按「F12」 功能鍵預覽網頁。
下一節
上一頁
下一頁
回目錄
3-3-4 尺規
尺規在文件視窗的上方和左方。若不需要顯示尺規，則執行「檢視」/
「尺規」，取消「顯示」的勾選。
若要變換尺規的單位，則執行「檢視」/「尺規」下的「像素」、「英
吋」、或「公分」。通常使用圖形時以像素為單位才有意義，一般用英吋、
或公分即可。
下一節
上一頁
下一頁
回目錄
3-3-5 屬性面板
屬性面板在文件視窗的下方，它是用來設定文件視窗中被選取物件的各種屬性
值。因為被選取的物件，有可能是文字、表格或影像…等不同物件，屬性面板
中顯示的欄位也會視物件種類而變動。例如：下面是“表格”的屬性面板：
以下則是“影像”物件的屬性面板。按下屬性面板右下方出現 按鈕，可以展
開屬性面板的下半部，設定其它較不常更改到的屬性。 ：
點下可顯示下半部的屬性頁面
下一節
上一頁
下一頁
回目錄
3-3-6 功能面板
Dreamweaver 的功能面板在文件視窗的右邊，比較常用的有資料庫、應
用程式、檔案…等面板。在面板的頁標籤位置上雙擊滑鼠，即可將面板展
開或收合。
展開面板
下一節
上一頁
下一頁
回目錄
3-4 定義與複製網站
Dreamweaver 是以目錄做為網站的主體，這一節就來看
看怎麼定義一個全新的網站。當順利建立起第一個網站後，
之後要再建其它網站，就可以用複製網站的方式來完成了。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 1: 在 C:\AppServ\www 下
建立一個新的資料夾，
並將它命名為
“bookstore”，以做為
“小丸子書店”網站的
主目錄
Step 2:執行「網站」功能表下
的「新增網站」
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 3: 修改「網站名稱」欄位與相關目錄位置
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 4:切換到「伺服器」設定選項，按下
下一節
鈕新增伺服器。
上一頁
下一頁
回目錄
3-4-1 定義網站
將連線方式改成「本機/網路」。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
將「伺服器資料夾」設為“C:\AppServ\www\bookstore\”，「Web URL」
設為“http://localhost/bookstore/”。最後按「儲存」。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 5:切換到「進階設定」設定選項，可看到本地資訊的Web URL已被設為
“http://localhost/bookstore/”。確認無誤後，按「儲存」鈕，回到「管理網站」
的畫面
Step 6:在「管理網站」視窗可看到現在已建立了“小丸子書店”的新網站。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 7:每當剛建立或複製完成
一個新的網站，
Dreamweaver 會自動
將目前的網站切換到這
個新的網站。
Step 8:將游標移到網站名稱列
上按右鍵，在選單中選
「開新檔案」，並將預
設的新檔名
“untitled.php”改為
“index.html”。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 9:雙擊“index.html”開啟網頁編輯畫面，在文件視窗中輸入一些
測試文字
Step 10:在「標題」欄位更改網頁標題文字成“小丸子書店”。
下一節
上一頁
下一頁
回目錄
3-4-1 定義網站
Step 11:最後按 或 F12 功能鍵預覽網頁的結果。
下一節
上一頁
下一頁
回目錄
3-4-2 複製網站
“現在要將小丸子書店”網站，複製成另一個網站：“小妮子的家”
Step 1:在 C:\AppServ\www 下再另建一個目錄：“nini”
Step 2:執行「網站」功能表下的「管理網站」
在「管理網站」視窗中按「複製」，便產生了一個名為“小丸子
書店 複製”的網站。
下一節
上一頁
下一頁
回目錄
3-4-2 複製網站
Step 3:接著按「編輯」，在「本地資訊」分類中，將子目錄都改為
“nini”
下一節
上一頁
下一頁
回目錄
3-4-2 複製網站
Step 4:切換到「測試伺服器」，同樣將子目錄都改為 “nini”。最後再
按「完成」，這樣就網站的複製了
下一節
上一頁
下一頁
回目錄
3-4-2 複製網站
Step 5:當有很多網站時，只要先選取要切換到哪個網站再按「完成」，
就可以切換到那個網站，檔案面板也會變成顯示該網站的目錄
切換到另個網站
了
下一節
上一頁
下一頁
回目錄
3-5 網頁的文字編排
Dreamweaver 是所見即所得的介面，所有格式的修改只要先選取
要修改的文字或段落，再設定格式即可。這一節將從匯入一個
Word文件開始，將匯進來的文字逐一調整它的格式。
上一節
上一頁
下一頁
回目錄
3-5-1 匯入Word文件
Step 1: 開啟一個空白網頁。執行「檔案」功能表／「匯入」／
「Word 文件」
Step 2:選取要匯入的Word 文件檔
上一節
上一頁
下一頁
回目錄
3-5-1 匯入Word文件
Step 3:文件視窗就會填入Word 檔案文件的內容
上一節
上一頁
下一頁
回目錄
3-5-2 項目清單與編號清單
有些文字內容是項目的方式條列出來，可以在前面加上項目符號，
或是1, 2, 3 的編號
Step 1:先將插入點移到每一個項目最前面按 Enter 鍵，讓每個項目
項目都變成段落
按 Enter 鍵加入段落
上一節
上一頁
下一頁
回目錄
3-5-2 項目清單與編號清單
Step 2:將所有材料都選取起來，按下 「項目清單」鈕，每個材料
前面都會加上項目清單符號
上一節
上一頁
下一頁
回目錄
3-5-2 項目清單與編號清單
Step 3:同樣的方法將每個“做法”前都按Enter 鍵，讓每個做法都
變成一個段落
Step 4:將所有做法都選取起來，按下 「編號清單」鈕
法前面都會加上項目編號
上一節
上一頁
，每個做
下一頁
回目錄
3-5-3 空白字元與特殊字元
若在 Dreamweaver 文件視窗一直按空白鍵，是否發現插入點幾乎完
全都沒有移動。這是因為在「偏好設定」的「一般設定」中，「允許
多個連續空白」選項是未勾選的狀態。
HTML 只允許字元之間有一個空白；若要在文件中加入額外空白，您
必須插入不斷行空白；或者將「允許多個連續空白」選項勾選起來，
每次當你按下空白鍵時，就會自動加入“&nbsp”符號，它其實就是
一個空白字元。
上一節
上一頁
下一頁
回目錄
3-5-3 空白字元與特殊字元
若要在文件中加入額外空白，您必須插入不斷行空白；或者將「允許
多個連續空白」選項勾選起來，每次當你按下空白鍵時，就會自動加
入“&nbsp”符號，也就是一個空白字元。
這個選項要勾選起來才
能連續輸入空白
上一節
上一頁
下一頁
回目錄
3-5-3 空白字元與特殊字元
 其他加入空白字元還有特殊字元符號的方式：
Step 1: 將插入點移到要插入空白字元的位置，執行「插入」／
「HTML」／「特殊字元」／「不斷行空白」。
將插入點移到這裡
上一節
上一頁
下一頁
回目錄
3-5-3 空白字元與特殊字元
上一節
上一頁
下一頁
回目錄
3-5-3 空白字元與特殊字元
  就是網頁中的空白字元
切換到「程式碼」模式。注意到空白字元就是“ ”符號了嗎？
  就是網頁中的
空白字元
上一節
上一頁
下一頁
回目錄
3-5-4 段落編排
 第四章會提到一個段落是由一段由 HTML標籤 <p> 和 </p> 之間的程
式碼所包圍起來。要將某一行放在左右邊界的中間位置，也就是靠中對
齊，只要先將插入點移到這一列上，按滑鼠右鍵選「靠中對齊」，就會
將整個段落文字整個移到中間的位置。
說明：
靠左對齊：整段文字靠左對齊。
靠中對齊：整段文字靠中對齊。
靠右對齊：整段文字靠右對齊。
靠行：整段文字每一行的兩邊靠邊對齊。
靠中對齊了!
上一節
上一頁
回目錄