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就會被重新修改了。

字型:設定文字的各種樣式,包括文字大小、字型、顏色、底線效果、行距等。
背景:設定網頁背景為單色或圖案,以及圖案的拼貼方式。另外,也可以設定段落文字的背景顏色。
區塊:設定文字間距、對齊與縮排方式。
方框:設定元素的四邊間格及邊界留白,或是浮動方式。
邊框:設定文字或圖片等網頁元素的邊框樣式。
清單:設定項目符號的樣式,或是以圖片來代替項目符號。
定位:設定圖片或文字等網頁元素的精確位置。
擴充功能:設定特殊的視覺效果,例如:陰影、透明、灰階、X光…等變化,或是改變滑鼠指標形狀,不過不是所有的瀏覽器都支援這些擴充功能。

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:清除

這個網誌中的熱門文章

時間迴廊~台灣100年

老美鏡頭下的早期臺灣中部

全球最嚇人9景點