Dreamweaver的一些實用技巧
網站設計的基礎篇
CHAPTER 4 文字的編排與美化
4-1-3 插入空白字元或特殊字元
在『插入』面板→『文字』類別→其他字元
4-3-2 更換清單屬性
在『屬性』面板→『清單項目』類別裡更換
4-5-2 設定水平線屬性
在『插入』面板→『常用』類別→水平線（屬性面板可以做修改調整在10-5-2）
4-6 加入與更新網頁時間
在『插入』面板→『常用』類別→日期（屬性面板可以做修改調整）
CHAPTER 5 圖片的加入與應用
5-2 網頁插圖的處理
『屬性』面板裡的替代就是程式語法裡的Alt="文字文字"。
5-2-6 設定圖片邊框及套用CSS邊框樣式
先將圖片邊框設定30，新增CSS規則→選取器類型：標籤（重新定義HTML元素）→選取器名稱：輸入"border"→規則定義：（新增樣式表檔）<可存成.css檔案>→接著在『邊框』選項做設定，設定好CSS之後就在『屬性』面板→『類別』裡選擇border
5-4-1 影像地圖的設定項目
點要設定的圖片→在『屬性』面板上→選擇連結區域的工具紐「矩形」「圓形」「不規則形狀」來做超連結
_blank：開啟新視窗。
_parent：出現在母視窗。
_self：出現在同一個視窗。
_top：去除目前的框架，而以全視窗的方式呈現。
CHAPTER 6 網網相連的超連結設定
6-1-2 變更連結文字的色彩與樣式
在『頁面屬性』修改
| 連結文字 | a:link | 滑鼠未經過的狀態。 |
| 查閱過連結 | a:visited | 已經檢閱過的狀態。 |
| 變換影像連結 | a:hover | 移到連結上的狀態。 |
| 作用中的連結 | a:active | 按下連結文字所顯示的效果。 |
6-4 連結電子郵件
在電子郵件後面加入「whclucky@hotmail.com?subject=網站意見」等文字，開啟空白文件時主旨列中顯示「網站意見」。
CHAPTER 7 插入多媒體物件
7-3-1 插入背景音樂
『插入』面板→『常用』類別→媒體→外掛程式→置入音檔→寬高可修改
7-3-2 背景音樂的參數設定
如果想把聲音撥放面板隱藏起來，『屬性』面板→『參數』類別→「參數」輸入「hidden」「值」輸入「true」
如果不希望背景音樂突然停掉「參數」輸入「loop」「值」輸入「true」
8-3-5 表格資料的排序
選取表格後→命令(C)→表格排序(S)
進階版面設計篇
CHAPTER 10 CSS樣式設定
10-1 CSS樣式與網頁的結合
類別（可套用至任何HTML元素）
對於可能會經常使用的樣式，可以選用這種選取器類別，這樣容易讓網站具有一致性。
ID（僅套用至一個HTML元素）
想要讓網頁元素具有與眾不同的樣式，就可以選用此種方式。
標籤（重新定義HTML元素）
對於HTML標籤語法，諸如：圖片<img>、標題<h>、段落文字<P>…等，想要重新定義它的樣式，可以選用此類別。
複合（依您的選項而定）
選用此項可將樣式套用到特定元素之中。
10-2-1 重新定義HTML元素
將標題2重新定義，新增CSS規則→選取器類型：標籤（重新定義HTML元素）→選取器名稱：輸入"h2"→規則定義：（僅此文件）→接著隨意做設定，『屬性』面板裡的『格式』類別標題2就會被重新修改了。
字型：設定文字的各種樣式，包括文字大小、字型、顏色、底線效果、行距等。
背景：設定網頁背景為單色或圖案，以及圖案的拼貼方式。另外，也可以設定段落文字的背景顏色。
區塊：設定文字間距、對齊與縮排方式。
方框：設定元素的四邊間格及邊界留白，或是浮動方式。
邊框：設定文字或圖片等網頁元素的邊框樣式。
清單：設定項目符號的樣式，或是以圖片來代替項目符號。
定位：設定圖片或文字等網頁元素的精確位置。
擴充功能：設定特殊的視覺效果，例如：陰影、透明、灰階、Ｘ光…等變化，或是改變滑鼠指標形狀，不過不是所有的瀏覽器都支援這些擴充功能。
10-4-3 連結以建立的外部樣式表
連結.css檔，『CSS樣式』面板→附加樣式表→連結檔案（連結：外部連結；匯入：轉換到網頁裡）
10-4-4 設計階段樣式表
對於網站的設計製作，通常都要耗費相當多時程，尤其是網站改版時，要讓原先網站內容可以運用，又要方便設計師可以重新設定新的樣式，這時候則可以考慮使用「設計階段」的功能來輔助樣式設定，好讓原先使用的樣式表先隱藏起來，而將新設定的樣式於設計的階段顯示出來。
格式(O)→CSS樣式(C)→設計階段(D)→選取要顯示跟隱藏的外部.css檔
10-5-2 以CSS設定水平分隔線
將水平線重新定義，新增CSS規則→選取器類型：標籤（重新定義HTML元素）→選取器名稱：輸入"hr"→規則定義：（僅此文件）→接著在『邊框』選項做設定
10-5-3 以CSS設定項目清單樣式
將項目清單重新定義，新增CSS規則→選取器類型：標籤（重新定義HTML元素）→選取器名稱：輸入"li"→規則定義：（僅此文件）→接著在『清單』選項做設定
10-5-4 以CSS設定圖片特效
圖片陰影特效，新增CSS規則→選取器類型：類別（可套用至任何HTML元素）→選取器名稱：輸入"imgeffect"→規則定義：（僅此文件）→『擴充功能』選項→Filter：Shadow(Color=0, Direction=10)
CHAPTER 11 版面物件設定
11-1-1 建立AP Div
在『插入』面板→『版面』類別→『繪製AP Div』鈕，接著在網頁上拖曳出矩形的區塊，就可以在『AP元素』面板上看到它。
11-1-5 AP Div的溢位設定
Visible：會將網頁元素盡可能的顯示出來。
Hidden：AP Div區域以外的網頁元素都會隱藏起來。
Scroll：會顯示卷軸（即使影像未超出圖層範圍也會顯現）。
Auto：會自動依據AP Div區域及內容物大小，來自動設定捲軸的出現與否。
11-1-6 AP Div的CSS樣式設定
打開『CSS樣式』面板→選擇「#apDiv1」可修改其框架樣式。
11-1-7 以「AP元素」面板管理元素
控制隱藏／顯示／防止重疊
11-1-8 AP Div與表格的轉換
修改(M)→轉換(C)→AP Div到表格(A)→選擇最精確的
11-2-1 插入Div標籤
『插入』面板→『常用』類別→『插入Div標籤』
11-2-2 設定Div標籤的大小與底色
新增CSS規則→選取器類型：ID（僅套用至一個HTML元素）→選取器名稱：輸入"#header"→規則定義：（僅此文件）→接著設定Div樣式
CHAPTER 12 視窗分割處理
12-2-1 建立頁框網頁
方法一：開始(F)→開新檔案(N)
方法二：歡迎視窗的「新增」處選擇「更多」
使用方法一、方法二之後「來自樣本的頁面」→「頁框組」→選好後按「建立」
方法三：『插入』面板→『常用』類別→『頁框』
12-2-2 儲存頁框網頁
在「頁框」面板上按一下邊緣處，使顯現黑色粗框，表示目前選取「頁框組」
12-3-3 設定目標框架
左邊框架連結，右邊框架顯示連結的方法是在『屬性』面板→『目標』類別
12-4-1 插入iframe
『插入』面板→『版面』類別→『IFRAME』
12-4-2 編修iframe
點選剛加入的內嵌頁框→修改(M)→編輯標籤(E)
互動網頁製作篇
CHAPTER 14 Spry組件的應用
14-1-1 插入Spry選單列
『插入』面板→『Spry』類別→『Spry選單列』
14-1-2 編輯Spry選單項目
在網頁上點選Spry選單列的藍色標題，使顯現下方的屬性，修改。
14-2-1 插入Spry標籤面板
『插入』面板→『Spry』類別→『Spry標籤面板』
14-2-2 插入標籤內容
14-3-1 插入與編修Spry摺疊式面板
『插入』面板→『Spry』類別→『Spry摺疊式』
「.AccordionPanelTab」規則：可以更換預設的標籤底色，但不包括目前被選取的標籤。
「.AccordionPanelOpen .AccordionPanelTab」規則：可以更換預設被選取的標籤底色。
「.AccordionPanelOpen .AccordionPanelTabHover」規則：設定滑鼠移入預設展開的面板時，所呈現的顏色。
「.AccordionFocused .AccordionPanelTab」規則：設定面板被點選後所呈現的色彩，但不包括目前被選取的標籤。
「.AccordionFocused .AccordionPanelOpen .AccordionPanelTab」規則：設定面板被點選後，目前被展開的標籤顏色。
14-4-1 插入與編輯Spry可收合面板
『插入』面板→『Spry』類別→『Spry可收合面板』
14-4-2 編修Spry可收合面板的樣式
「.CollapsiblePanelTab」：設定預設的面板顏色。
「.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover」：控制滑鼠移入面板標籤時所呈現的顏色。
「.CollapsiblePanelFocused .CollapsiblePanelTab」：設定面板被展開時，或再度收合時所呈現的顏色。
CHAPTER 15 互動表單製作
15-2-1 建立表單區域範圍
『插入』面板→『表單』類別→『表單』，顯示出紅色虛線，便是表單元件放置的位置
15-2-2 插入文字欄位
『插入』面板→『表單』類別→『文字欄位』，分為單行、多行與密碼，可自行在『屬性』面板設定。
15-2-3 插入選項按鈕獲選像按鈕群組
方法一：『插入』面板→『表單』類別→『選項按鈕』
方法二：插入(I)→表單→(F)→選項按鈕群組(G)
15-2-4 插入核取方塊或核取方塊群組
『插入』面板→『表單』類別→『核取方塊群組』，依序輸入標籤跟值按確定之後就能在屬性做設定。
15-2-5 插入清單/選單
『插入』面板→『表單』類別→『選取(清單/選單)』，之後要在『屬性』面板的『清單值…』設定「項目標籤」「值」。
15-2-6 插入按鈕
『插入』面板→『表單』類別→『按鈕』，在屬性面板設定「標籤：send」「值：送出」「動作：送出表單(S)」。
『插入』面板→『表單』類別→『按鈕』，在屬性面板設定「標籤：reset」「值：重設」「動作：重設表單(R)」。
『插入』面板→『表單』類別→『按鈕』，在屬性面板設定「標籤：submit」「值：填寫說明」「動作：無(N)」。
15-2-7 插入其他表單元件
- 檔案欄位
如果要使用檔案上傳，『插入』面板→『表單』類別→『檔案欄位』，不過要配合伺服器設定才可以使用。 - 影像按鈕
可以使用影像檔來做為表單資料的傳送鈕，『插入』面板→『表單』類別→『影像欄位』 - 跳頁選單
跳頁選單提供下拉式的清單可供瀏覽者選擇選項，同時在選擇後，還能直接前往到指定的網頁，『插入』面板→『表單』類別→『跳頁選單』 - 欄位集
「欄位集」的元件主要是針對表單的相關欄位進行分類，諸如：姓名、住址、聯絡電話…等，屬於個人的基本資料，就可以將它以「欄位集」的功能歸類於「個人資料」；『插入』面板→『表單』類別→『欄位集』
15-3-2 加入Spry驗證文字欄位
以「Spry驗證文字欄位」為例，舉凡電子郵件地址、日期、時間、信用卡、郵遞區號、電話號碼、身分證字號、貨幣、IP位址、URL等，都是「Spry驗證文字欄位」可以驗證的類型。
點選出生年月日的表單欄位→按下『插入』面板→『表單』類別→『Spry驗證文字欄位』，在『屬性』面板→『類型：日期』→『格式：mm/dd/yy』→『預覽狀態：必要填』→『驗證於：onBlur』，按下F12預覽網頁，當輸入錯誤的格式時，一旦滑鼠點選其他欄位時，該欄位就會變成紅色，並顯示「格式無效」的訊息；反之則成為綠色。
onBlur：當填寫資料者將滑鼠點選到其他欄位，或是在欄位之外按下滑鼠時，就進行欄位資料的驗證。
onChange：當填寫資料者變更欄位中的內容時，就進行驗證。
onSubmit：當填寫資料者按下「送出」鈕提交表單時，就進行資料的驗證。
15-4 表單內容的傳送
當資料填寫完畢，按下「送出」鈕，表單資料必須透過伺服器及資料庫處理軟體，才能進行資料的處理。如果沒有這些設備，也可以透過電子郵件的方式來傳送。要設定以電子郵件傳送資料，請先點選表單上的紅框，然後由『屬性』面板設定以下三項：
動作：設為「whclucky@hotmail.com?subject=郵件主旨」。
方法：DW提供「POST」和「GET」兩種方法，通常都設為「POST」。
編碼類型：必須設為「text/plain」，才能以純文字的方式傳送資料。
CHAPTER 16 行為指令的應用
16-1-1 加入與設定行為指令
要加入行為指令，首先各位必須在網頁上點選要加入行為設定的網頁元件，接著再由面板上的「＋」鈕下拉，即可選擇要加入的行為指令，而加入行為指令後，面板下方就會顯示事件及動作的相關資訊；如要刪除行為指令則須點選「－」鈕。
針對事件的執行時機點來說，各位大致上可以由英文字面得知它所代表的意義；選擇不同的行為動作，所顯示的事件執行時機也會不相同，這裡僅就常用的事件做說明：
onBlur：設定滑鼠一齣表單時。
onClick：按下滑鼠左鍵並放開。
onDbClick：用滑鼠按兩下左鍵。
onKeyDown：按下按鍵時。
onKeyUp：按下按鍵後再放開。
onMouseDpwn：按下滑鼠時。
onMouseOut：滑鼠移開時。
onMouseOver：滑鼠移到元件上時。
onMouseUp：按下滑鼠左鍵再放開。
onLoad：載入網頁時。
onUnload：離開網頁時。
16-2 常用的行為指令
16-2-1 彈出訊息
點選任意圖片→行為面板上的「＋」→「彈出訊息」→「onClick」，只要點圖片就會有跳出視窗。
16-2-2 動態效果 - 縮放、淡出、震動、擠壓
在行為面板上的「＋」裡面，隨便測試看看就好了。
16-2-3 標示效果
先點表格→行為面板上的「＋」→「效果」→「標示」→「onMouseOver」，就可以看到表格在滑鼠滑入時就會有顏色變化。
16-2-4 開啟瀏覽器視窗
先點圖片或文字→行為面板上的「＋」→「開啟瀏覽器視窗」→「輸入URL／視窗寬度／屬性／視窗名稱」→「onClick」，只要點文字或圖片就可以彈出視窗。
16-2-5 顯示隱藏元素
當滑鼠在滑入或移出某個區域範圍時，設定網頁元素呈現或隱藏狀態。須配合AP Div的功能才能做到。
『插入』面板→『版面』類別→『繪製AP Div』鈕，接著在網頁上拖曳出矩形的區塊，接著在AP Div裡面放入文字或圖片，然後在『AP元素』面板將圖層隱藏。
接著點選圖片在『屬性』面板上繪製「矩形連結區域工具」，之後點選矩形連結→行為面板上的「＋」→「顯示隱藏元素」→「選擇要顯示的項目」→「onMouseOver」
完成以上動作之後只要滑鼠滑過矩形連結區塊就會顯示，但滑鼠移開後卻不會隱藏，如果要隱藏則須以下動作。
在同樣的矩形連結上→行為面板上的「＋」→「顯示隱藏元素」→「選擇要顯示的項目」→「onMouseOut」
16-2-6 前往URL
要讓連結不會出現「
」→行為面板上的「＋」→「前往URL」→「設定網址」→「onClick」 網站設計附錄篇
APPENDIX A 附錄
附錄1 將視訊檔轉換成Flv格式
用Adobe Media Encoder就可以轉檔了。
附錄2 將轉存表格式資料
開啟Word文件→另存新檔(A)→檔案名稱：xxx／檔案類型：純文字→選擇Unicode (UTF-8)，這樣就不會有亂碼的情形了。
附錄3 HTML標籤常用語法
◢文字
H：標題文字大小
Align：對齊方式
P：段落
Br：換行
Hr：水平分隔線
Blockquote：特殊引述文件區
Pre：預先格式化
Nobr：不換行
Wbr：非強迫換行
Nowrap：表格的文字不斷行
Font size：字型尺寸
B：粗體
I：斜體
U：下底線
S：刪除字
Sup：上標字
Sub：下標字
◢表格
Table：宣告表格的開始與結束
Border：設定表格外框是否顯現格線，及邊框粗細
Tr：宣告表格中每一行（Table Row）的開始與結束，就是定義表格有多少行資料
Th：製作表格的標題（Table Header）
Td：宣告表格資料（Table Data）
Width：寬度設定，可使用％或數值
Height：高度設定
Cellspacing：表格間距，指表格中某儲存格內框與外框之間的框線寬度
Cellpadding：表格內邊留白，用來設定儲存格中的資料與該儲存格內框的距離
Bordercolor：表格框線色彩
◢清單設計
Ol：編號清單
Ul：項目清單
Li：清單項目
Menu：菜單式清單
Compact：簡潔式列表，可以緊密排列各要項的內容
◢超連結
Text：一般文字顏色
Link：連結的文字顏色
Alink：連結時文字所顯示的顏色
Vlink：連結後文字所顯示的顏色
◢圖像
Img Src：線上圖像檔
Body Background：背景圖像
Alt：替代或說明文字
Lowsrc：低解析圖
Align：對齊文字
Hspace：水平方向留白
Vspace：垂直方向留白
Clear：清除