DREAMWEAVER 簡介大葉大學 多媒體學程 黃鈴玲

2013.12.11

OUTLINE

下載網頁範本Dreamweaver 的環境介紹 網站管理 網頁文件視窗

2013/12/11 2

文字格式屬性面板 插入影像 表格 超連結

1. 下載網頁範本 Free Website Template http://www.freewebsitetemplates.com/

選一個版本下載

2013/12/11 3

2. Dreamweaver 的環境介紹 歡迎畫面的使用

啟動 Dreamweaver 時預設會顯示歡迎畫面，可以快速開啟最近編輯的檔案或新增文件。

Dreamweaver CS6 的歡迎畫面。請選按 新增 的 HTML 開啟一個全新的檔案， 以方便等一下的解說2013/12/11 4

操作環境的介紹以下是 Dreamweaver 的操作環境，使用 傳統 使用介面來進行介紹，如果您的介面與我們不同，請比對參考：

2013/12/11 5

新增或管理網站STEP 01

選按功能表列 網站 \ 新增網站 ( 管理網站 ) 開啟對話方塊開始設定。STEP 02

請選按 網站 標籤，在 網站名稱 輸入框，為網站命名，在 本機網站資料夾 中輸入資料夾所在位置，確認無誤後按 儲存 鈕。

3. 網站管理

2013/12/11 6

STEP 03 ( 若需連接網頁伺服器 )伺服器

Webmail 密碼尚未建立 WWW 目錄者請 先 空 白 ，儲存後至視窗右下角新增 WWW 資料夾，再至此處修改。

2013/12/11 7

勾選測試

網站檔案的管理，可說是 Dreamweaver 管理網站的首要戰將。它不僅可以管理本地的資料夾，也可以檢視遠端網站資料，更厲害的是可以存在於個人或多人的工作模式中，亦能同步更新遠端網站及本地資料夾的內容。 檔案面板的簡介

在 檔案 面板，可以看到網站大概的結構，更可以在這裡建立所需要的檔案、資料夾 ... 等，以下是這個面板中重要的元件介紹：

2013/12/11 8

在檔案面板新增 \ 刪除檔案STEP 01

新增網頁：請於 檔案 面板的 本機檢視 狀態中，進入「範例網站，然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 開新檔案，會自動新增一個 <untitled.htm> 的網頁檔案。STEP 02

更改檔名：如果新增時不喜歡預設的檔名，請先選取要更改檔名的檔案，再選按 檔案 面板右上角的 鈕 \ 檔案 \ 重新命名 進入編輯狀態，輸入新的檔名。STEP 03

刪除檔案：請選取要刪除的檔案後按 Delete 鍵，或者也可以選按 檔案 面板右上角的 鈕 \ 檔案 \ 刪除 即完成刪除檔案的動作。

2013/12/11 9

在檔案面板建立資料夾STEP 01

新增資料夾：例如現在要製作一個資料夾：「 test 」，請於 檔案 面板的 本機檢視 中進入範例網站，然後選按 檔案 面板右上角的 鈕 \ 檔案 \ 新增資料夾，軟體自動新增資料夾，這時可以自行輸入想要設定的資料夾名稱。STEP 02

更改資料夾名稱：更改資料夾名稱與更改檔案名稱的方式相彷，請選取要更名的資料夾後，選按 檔案 面板右上角的 鈕 \ 檔案 \ 重新命名 或按 F2 鍵即可進入編輯狀態，完成更名。STEP 03

刪除資料夾：首先選取要刪除的資料夾按 Delete 鍵，或選按 檔案 面板右上角的 鈕 \ 檔案 \ 刪除 即完成刪除檔案的動作。

2013/12/11 10

4. 網頁文件視窗接下來將進入 Dreamweaver 中網頁文件視窗，先簡單的了解編輯環境與一些基本編輯動作。

新增 / 開啟網頁請開新檔案或選取檔案後按 Enter 鍵或連按二下滑鼠左鍵，此時軟體會將檔案開啟在文件視窗。

選取檔案後按 Enter 鍵或連按二下滑鼠左鍵，可以將檔案開啟於文件視窗中2013/12/11 11

儲存檔案1. 編輯過但卻尚未儲存之檔案，在標題列或頁面切換標籤的檔名旁會有一個「 * 」號。

2. 在 Dreamweaver 儲存檔案的方式相當簡單，除了可以選按功能表列 檔案 \ 儲存檔案 就能儲存目前開啟於文件視窗上的作品。3. 也可以按 Ctrl + S 鍵儲存檔案。

編輯過但卻尚未儲存之檔案，在標題列或頁面切換標籤的檔名旁會有一個「 * 」號

2013/12/11 12

在瀏覽器中預覽請按文件工具列 鈕並選按 預覽於 chrome ，也可以按 F12 鍵達到同樣的效果。此時軟體會以預設的瀏覽器 chrome 開啟。 ( 關於瀏覽器本書建議以 chrome 做為預設值 )

透過文件工具列 鈕或按 F12 鍵以預設瀏覽器開啟

2013/12/11 13

5. 文字格式屬性面板Dreamweaver CS6 中，對於文字格式的設定區分為 HTML 與 CSS 二種不同的方式。當套用 HTML 格式時， Dreamweaver 會將屬性加入至網頁內文的 HTML 程式碼中。當套用 CSS 格式時， Dreamweaver 會將屬性寫入文件標題或不同的樣式表中。

2013/12/11 14

在屬性面板中設定 HTML 格式1. 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。2. 選取要設定格式化的文字。3. 設定要套用到選取文字的選項。以下是 屬性 面板中設定 HTML 模式的相關選項說明：

2013/12/11 15

在屬性面板中設定 CSS 樣式1. 如果 屬性 面板尚未開啟，請選按功能表列 視窗 \ 屬性 開啟，然後按 鈕。2. 接著可以執行下列其中一項作業：

• 選取要套用 CSS 樣式的文字區塊，該樣式則會出現在目標規則 選單中。• 從 目標規則 選單中，選取要編輯的樣式動作。

3. 使用 CSS 樣式 屬性 面板中的各個選項變更樣式內容。以下是 屬性 面板中設定 CSS 樣式的相關選項說明：

2013/12/11 16

在屬性面板使用 HTML 與 CSS 模式的時機當 設 定 文 字段落格 式 ( 這 裡指 HTML 的 基 本 標 籤 ， 如 ：段落 <p> 、標題 1 <h1> 、粗體、斜體、項目及編號清單與縮排凸排 ... 等 ) ，因為屬於 HTML 的標籤屬性內容，就必須於 HTML 模式設定。其他較特別的如： ID 值、連結、標題、目標，也是 HTML 的標籤所管理，也必須在 HTML 模式下設定。但是就文字本身的字體、大小、顏色、粗體、斜體與對齊，建議就於 CSS 模式設定，在設定的同時即可自動產生 CSS 樣式，並能套用到頁面上其他相同屬性的文字上。未來套用相同 CSS 樣式的部份若必須調整時，只要修改 CSS 樣式的內容，即能將所有套用的地方一起修改。要注意的是，雖然 HTML 及 CSS 模式的屬性面板中都可以設定粗體、斜體 ... 等文字格式，但不同的是在 HTML 模式下設定是在選取的區域加上相關的 HTML 標籤，在 CSS 模式下是將設定值加入樣式中，或是修改樣式的內容。

2013/12/11 17

設定文字格式此頁面文字格式的規劃，將於指定文字套用四種格式：標題 1 (h1) 、標題 2 (h2) 、標題 3 (h3) 和 段落 (p) 。反白選取要更改格式的標題文字，於 屬性 面板按 鈕，設定 格式：標題 1 ，選取的標題文字已經套上 標題 1 格式。

2013/12/11 18

設定文字顏色請反白選取已套用 h2 樣式的標題文字，於 屬性 面板選按 文字顏色 鈕，於色盤上使用滴管選按 #F60 ，會發現文字呈現橘色， h2 樣式也會自動更新加上此顏色設定。

請利用相同方式設定標 3 與段落文字的字體顏色。

2013/12/11 19

6. 插入影像與設定提示文字STEP 01

插入 \ 常用 面板選按 影像 右側 鈕 \ 影像，開啟對話方塊。STEP 02

選取要插入的影像，按 確定 鈕會自動開啟 影像標籤輔助功能屬性 對話方塊。STEP 03

請於 替代文字 欄中輸入指定文字，按 確定 鈕，如此即完成圖片的插入。STEP 04

下方屬性面板可修改影像相關參數，或製作影像地圖。

2013/12/11 20

影像類型圖片類別 色彩畫質 特色

GIF 256 色 可製作背景透明圖， GIF 動畫檔。JPG(JPEG) 全彩 網頁上的全彩影像圖片，較常用於照片類的影像圖片。

PNG 全彩 可製作背景透明圖，亦可處理全彩的影像圖片，但是在瀏覽器的支援上較少，需使用 IE5 版本以上的瀏覽器方能閱讀，不過相當有前瞻性，為下一個網頁影像圖片的主流。

PSD 全彩 Dreamweaver 支援插入 PSD 格式影像檔，但需透過最佳化的轉檔動作，將 PSD 格式檔轉存為 JPEG 或其他網頁相容格式，操作方式請參考下頁說明。

2013/12/11 21

7. 表格 認識表格

2013/12/11 22

插入表格的基本方法STEP 01

請由 插入 \ 版面 面板選按 表格 鈕，開啟對話方塊。STEP 02

於 表格 對話方塊指定表格的各個屬性，其屬性說明如下：

2013/12/11 23

選取欄、列、儲存格與表格的方法插入表格後，是否覺得欄寬不夠寬、列高不夠高、顏色不太搭 ... 等問題，然而在動手設定、修改前，一定要先知道如何快速選取要調整的表格或儲存格。

選取儲存格不連續儲存格的選取 (Ctrl 鍵 ) ：STEP 01

請按 Ctrl 鍵不放，將滑鼠指標移至欲選取的儲存格上方，目標儲存格會呈紅框狀態，此時請按一下滑鼠左鍵。 STEP 02 繼續按 Ctrl 鍵不放，用滑鼠點選即可選取多個儲存格。

2013/12/11 24

選取儲存格連續儲存格的選取 (Shift 鍵 ) ：STEP 01

按 Ctrl 鍵不放，將滑鼠指標移至欲選取的儲存格上方，目標儲存格會呈紅框狀態，此時請按一下滑鼠左鍵。STEP 02

按 Shift 鍵不放，再如圖於另一儲存格按一下滑鼠左鍵，這樣一來即選取了範圍內的所有儲存格。

2013/12/11 25

選取列與欄選取列：將滑鼠指標移至欲選取列的最左方，待呈 → 時，目標列也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此列選取。

選取欄：將滑鼠指標移至欲選取欄的最上方，待呈 ↓ 時，目標欄也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此欄選取。

2013/12/11 26

選取表格將滑鼠指標移至欲選取表格的左上角，待呈 時，目標表格也會呈紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此表格選取。

將滑鼠指標移至表格左上角，待呈 時，按一下 Ctrl 鍵，即可將整個表格結構以紅色框線標示出來。

2013/12/11 27

表格屬性面板選取整個表格時，會看到此表格的 屬性 面板。

儲存格屬性面板選取任一儲存格時，在 屬性 面板除了會顯示文字的設定欄位外，在下方會顯示儲存格的設定欄位。

2013/12/11 28

插入 超連結 超連結的對象1. 命名錨點的超連結：當內容太過冗長時，可用錨點來製作快速指定的連結方式。2. 網站內部的超連結：連結到網站內部其他網頁，或是同一網頁中的其他內容。3. 網站外部的超連結：連結到其他網站的內容，例如：相關網站介紹4. 檔案下載的超連結：將檔案以超連結的方式提供下載服務。5. 電子郵件的超連結：建立一個空白電子郵件，並已填妥收件者 E-

mail ，以提供一個與網友互動的管道。2013/12/11 29

8. 超連結

命名錨點的使用若將文字、圖片全部設計在同一個網頁可能會使該網頁變得太過冗長，進而造成閱讀上的不易。這時就必須使用 Dreamweaver 中的命名錨點，它類似 Word 中的書籤，只需要在幾個關鍵地方插入 命名錨點，當它與連結搭配時就能很快地捲動到命名錨點的位置。首先要確認功能表列 檢視 \ 視覺輔助 \ 隱藏元素 為被核選狀態，如此就可看到插入錨點時所有元素符號。

STEP 01 插入命名錨點插入點置於指定的文字前，在 插入 \ 常用 面板選按 命名錨點 鈕開啟對話方塊。

STEP 02 輸入名稱輸入 錨點名稱 ( 如 aa) ，按 確定 鈕，頁面即產生一命名錨點。

STEP 03 插入超連結選定文字插入超連結，連結選 #aa2013/12/11 30

參考資料：