Transcript 教學投影片 - 大葉大學

DREAMWEAVER 簡介
大葉大學 多媒體學程 黃鈴玲
2013.12.11
下載
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
3. 網站管理
 新增或管理網站
STEP
01
選按功能表列 網站 \ 新增網站 (管理網站) 開啟對話方塊開始設定。
STEP
02
請選按 網站 標籤，在 網站名稱 輸入框，為網站命名，
在 本機網站資料夾 中輸入資料夾所在位置，確認無誤後按 儲存 鈕。
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 做為預設值)
透過文件工具列
2013/12/11
鈕或按 F12 鍵以預設瀏覽器開啟
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 色
JPG(JPEG)
全彩
網頁上的全彩影像圖片，較常用於照片類的影像圖片。
PNG
全彩
可製作背景透明圖，亦可處理全彩的影像圖片，但是在瀏
覽器的支援上較少，需使用 IE5 版本以上的瀏覽器方能
閱讀，不過相當有前瞻性，為下一個網頁影像圖片的主流。
PSD
全彩
Dreamweaver 支援插入 PSD 格式影像檔，但需透過最佳化
的轉檔動作，將 PSD 格式檔轉存為 JPEG 或其他網頁相
容格式，操作方式請參考下頁說明。
2013/12/11
特色
可製作背景透明圖，GIF 動畫檔。
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
 選取表格
將滑鼠指標移至欲選取表格的左上角，待呈
時，目標表格也會呈
紅框狀態，此時請按一下滑鼠左鍵。如此一來就可將此表格選取。
將滑鼠指標移至表格左上角，待呈
個表格結構以紅色框線標示出來。
2013/12/11
時，按一下 Ctrl 鍵，即可將整
27
表格屬性面板
選取整個表格時，會看到此表格的 屬性 面板。
儲存格屬性面板
選取任一儲存格時，在 屬性 面板除了會顯示文字的設定欄位外，在
下方會顯示儲存格的設定欄位。
2013/12/11
28
8. 超連結
 插入 超連結
 超連結的對象
1. 命名錨點的超連結：當內容太過冗長時，可用錨點來製作快速指定
的連結方式。
2. 網站內部的超連結：連結到網站內部其他網頁，或是同一網頁中的
其他內容。
3. 網站外部的超連結：連結到其他網站的內容，例如：相關網站介紹
4. 檔案下載的超連結：將檔案以超連結的方式提供下載服務。
5. 電子郵件的超連結：建立一個空白電子郵件，並已填妥收件者
mail，以提供一個與網友互動的管道。
2013/12/11
E-
29
命名錨點的使用
若將文字、圖片全部設計在同一個網頁可能會使該網頁變得太過冗長
，進而造成閱讀上的不易。這時就必須使用 Dreamweaver 中的命名
錨點，它類似 Word 中的書籤，只需要在幾個關鍵地方插入 命名錨點
，當它與連結搭配時就能很快地捲動到命名錨點的位置。
首先要確認功能表列 檢視 \ 視覺輔助 \ 隱藏元素 為被核選狀態，如此
就可看到插入錨點時所有元素符號。
STEP
01 插入命名錨點
插入點置於指定的文字前，在 插入 \ 常用 面板選按 命名錨點 鈕開啟
對話方塊。
STEP
02 輸入名稱
輸入 錨點名稱(如aa)，按 確定 鈕，頁面即產生一命名錨點。
03 插入超連結
選定文字插入超連結，連結選 #aa
STEP
2013/12/11
30
參考資料：