2024年1月7日发(作者：)

第5章 Dreamweaver各種行為動態特效

目錄

1.

2.

3.

4.

5.

6.

7.

8.

觀念：在Dreamweaver裡面做出特效的幾種方法 ........... 2練習1：下載網頁模板，開啟 .......................... 4練習2：製作滑鼠滑過的調換影像效果............................. 7練習3：製作淡入淡出的廣告影像效果........................... 19練習4：製作百葉窗轉場的廣告影像效果....................... 24練習5：製作放大/縮小的廣告影像效果 ......................... 29

練習6：製作標籤面版效果：Spry標籤面版 .................. 33

練習7：製作內容折疊面版效果（展開一個面版會將其它面版折疊收合）：Spry折疊式 ................................................................................. 39

9. 練習8：製作收合面版效果（折疊收合不會影響其它面版）：Spry可收合面版 46

10. 練習9：上傳前，檢查整個網站的超連結狀況........... 56

11. 練習10：上傳前，使用網站報表，清查整個網站（檢查是否更忘了設定標題的網頁，是否更多餘的程式標籤）.................................. 59

1. 觀念：在Dreamweaver裡面做出特效的幾種方法

在Dreamweaver裡面做出特效的幾種方法

(1).使用行為特效，Dreamweaver內部更提供10多種特效

(2).使用Extension外掛元件，將mxp檔案匯入

(3).使用Spry功能（Spry選單列，Spry標籤面板，Spry折疊式，可收合面板）

(4).使用JavaScript，或JavaApplet直接修改網頁程式碼，做出特效

(1).使用行為特效，Dreamweaver內部更提供10多種特效

Dreamweaver裡面提供的行為特效更限，只更10幾種，更時會無法滿足各種網頁設計師要設計的各種網頁動態特效

(2). 使用Extension外掛元件，將mxp檔案匯入

Dreamweaver 提供一種擴充功能，它是一種外掛元件，可以讓使用者下載入他想要元件，做出『行為特效』般的各種網頁特效，

(3).使用Spry功能（Spry選單列，Spry標籤面板，Spry折疊式，可收合面板）

(4).使用JavaScript，或JavaApplet直接修改網頁程式碼，做出特效

JavaApplet與JavaScript也是互動式網頁的設計工具，在Dreamweaver 中提供2種方式來建立

 插入外部『JavaApplet與JavaScript』元件方法

 Dreamweaver內建的使用『JavaApplet與JavaScript』元件的方法

2. 練習1：下載網頁模板，開啟

(1).下載練習範例的模板：下載後，解壓縮後

將更改目錄名稱為『web8』

(2).開啟dreamweaver，建立新網站，開啟這個web8資料夾：

不使用FTP

(3).將網站的資訊轉存：（若沒有轉存，下次來，又要重新新增網站，太麻煩了）

結果：多出了一個『網站定義』檔案

下次開機後，只要將之開啟，即可重新打開這個已經定義好的網站

3. 練習2：製作滑鼠滑過的調換影像效果

滑鼠滑過

(1).開啟網頁

設定圖片Why的影像ID名稱

設定『行為』特效

設定原始檔（切換後的影像）：images/

結果，測試

滑鼠滑過

設定網頁上方橫幅圖片的影像ID名稱：title1

設定『行為』特效

設定原始檔（切換後的影像）：images/

結果，測試

滑鼠滑過

練習2：細切割表格，並匯入圖片

切換到『展開』表格模式目前表格架構

將最上方第1列表格，先切成3列

匯入圖片

第1列，匯入圖片musictop_

第2列第1欄，匯入圖片musictop_第3列，匯入圖片musictop_結果

第2列，匯入圖片musictop_～musictop_結果

如何將兩列之間的列高設定為0，如下

方法：

結果：

將前3列的框線，拉近，盡量靠近圖片

結果：

在第4列第2欄，匯入圖片：topmusic_

將第4列第1欄，分割成4欄

在第4列第1欄匯入圖片：musictop_

再匯入一張圖片：musictop_

現在要做出以下的框線

分析其結構

目前結構

先匯入musictop_

將下面一列，分成3個欄位

匯入圖形musictop_，musictop_

中間欄位匯入left_（漸層背景）

存檔，預覽

關閉網頁，並命名為

4. 練習3：製作淡入淡出的廣告影像效果

滑鼠按一下，1秒後淡入淡出變換影像

先新增一個圖層Ap Div

插入一張影像：

要先在圖層內，先點按一下，才能匯入影像

設定『行為』特效︰出現/淡出效果

特別注意：設定之前，一定要先點按圖片一下（不是點按圖層Ap Div）

設定參數：1秒後變換

設定結果

onClick：代表滑鼠按一下，就會變換

結果，測試

滑鼠按一下，1秒後淡入淡出變換影像

新增第2個事件

網頁載入後，1秒後就會變換影像重新點選圖片，新增行為：出現淡出效果設定『行為』的觸發事件︰網頁載入時：onLoad

結果，測試

1秒後自動淡入淡出變換影像

注意：幾個常見的事件

(1). onLoad︰網頁載入時，就會觸發事件

(2). onClick：滑鼠按一下，就會觸發事件

(3). onMouseDown︰滑鼠按下時，就會觸發事件

(4). onMouseUp︰滑鼠放開時，就會觸發事件

(5). onMouseOver︰滑鼠滑過時（滑鼠移至），就會觸發事件

(6). onMouseOut︰滑鼠滑過時（滑鼠移出），就會觸發事件

(7). onMouseMove︰除了剛進入區域會觸發事件外，在區域內移動滑鼠，也會觸發該事件

5. 練習4：製作百葉窗轉場的廣告影像效果滑鼠滑過時，出現百葉窗變換影像

先移除前一題所做的事件

要記得，要先點按圖片一下，才會出現各種事件

設定『行為』特效︰百葉窗效果

特別注意：設定之前，一定要先點按圖片一下（不是點按圖層Ap Div）

設定參數：要記得去選取目標元素

設定結果

onClick：代表滑鼠按一下，就會變換

結果，測試

滑鼠按一下，出現百葉窗變換影像

新增第2個事件

設定『行為』的觸發事件︰滑鼠滑過時：onMouseOver

結果，測試

滑鼠滑過時，出現百葉窗變換影像

注意：幾個常見的事件

(1). onLoad︰網頁載入時，就會觸發事件

(2). onClick：滑鼠按一下，就會觸發事件

(3). onMouseDown︰滑鼠按下時，就會觸發事件

(4). onMouseUp︰滑鼠放開時，就會觸發事件

(5). onMouseOver︰滑鼠滑過時（滑鼠移至），就會觸發事件

(6). onMouseOut︰滑鼠滑過時（滑鼠移出），就會觸發事件

(7). onMouseMove︰除了剛進入區域會觸發事件外，在區域內移動滑鼠，也會觸發該事件

動作上 onmouseover 只在剛進入區域時觸發。onmousemove。

修改第2個事件

設定『行為』的觸發事件︰滑鼠移出時：onMouseOut

結果，測試

滑鼠移出時，出現百葉窗變換影像

6. 練習5：製作放大/縮小的廣告影像效果滑鼠按一下，出現變大變換影像

滑鼠移出時，出現縮小變換影像

先移除前一題所做的事件

要記得，要先點按圖片一下，才會出現各種事件

設定『行為』特效︰放大/縮小效果

特別注意：設定之前，一定要先點按圖片一下（不是點按圖層Ap Div）

設定參數：要記得去選取目標元素

設定結果

onClick：代表滑鼠按一下，就會變換

結果，測試

滑鼠按一下，出現變大變換影像

新增第2個事件：縮小

設定『行為』的觸發事件︰滑鼠移出時：onMouseOut

onMouseOut︰滑鼠滑過時（滑鼠移出），就會觸發事件

結果，測試

滑鼠移出時，出現縮小變換影像

注意：幾個常見的事件

(1). onLoad︰網頁載入時，就會觸發事件

(2). onClick：滑鼠按一下，就會觸發事件

(3). onMouseDown︰滑鼠按下時，就會觸發事件

(4). onMouseUp︰滑鼠放開時，就會觸發事件

(5). onMouseOver︰滑鼠滑過時（滑鼠移至），就會觸發事件

(6). onMouseOut︰滑鼠滑過時（滑鼠移出），就會觸發事件

(7). onMouseMove︰除了剛進入區域會觸發事件外，在區域內移動滑鼠，也會觸發該事件

動作上 onmouseover 只在剛進入區域時觸發。onmousemove。

修改第2個事件

設定『行為』的觸發事件︰滑鼠移出時：onMouseOut

結果，測試

滑鼠移出時，出現百葉窗變換影像

7. 練習6：製作標籤面版效果：Spry標籤面版點按第1個標籤面版

點按第2個標籤面版

先在愛情測驗的上方，加入『Spry標籤面版』

或是

結果

將標籤1複製貼上

將內容貼到『內容1』複製

貼上

要記得：單擊標籤2所出現的符號，代表已經切換至此

將標籤2複製貼上

將內容貼到『內容2』

結果，測試

發現多出許多行空白列使用程式碼來刪除

游標先點到『愛情事件簿 in 2010。。。。。』前面

刪除這幾行

注意：不要刪除到Div，那是分隔欄位

結果，測試

注意：如何新增第3個標籤面版呢？

8. 練習7：製作內容折疊面版效果（展開一個面版會將其它面版折疊收合）：Spry折疊式點按第1個標籤

點按第3個標籤

在愛情觀的上方，加入『Spry折疊式』

或是

結果

將標籤1與內容複製貼到『標籤標記1』不好的作法：『愛情觀』無法將綠色背景整個複製上去

如何才能將『愛情觀』的綠色背景整個複製上呢？關鍵：注意：這一列綠色背景的類別為：L2

先反白『標籤標記1』，設定其類別為L2

然後剪下『愛情觀』

貼到『標籤標記1』

然後將內容複製貼上

同樣的方法，將標籤2與內容複製貼到『標籤標記2』要先到『標籤標記2』，然後點選

結果：

先反白『標籤標記2』，設定其類別為L2然後剪下『人生觀』

貼到『標籤標記2』然後將內容複製貼上

同樣的方法，將標籤3與內容複製貼到『標籤標記3』

但要先新增第3個『標籤標記3』

點選Spry折疊式Accordion1，然後在屬性面版按『+』

要先到『標籤標記3』，然後點選

反白『標籤標記3』，設定其類別為L2然後剪下『價值觀』

貼到『標籤標記3』然後將內容複製貼上

結果，測試

發現多出許多行空白列

反白這些多餘的綠色欄位，然後刪除delete

將下方的框點往上移動

結果：

發現：3個標籤面版都折疊起來了，如何打開來編修了方法：按

如何將每一個標籤面版的空白列刪除呢?

9. 練習8：製作收合面版效果（折疊收合不會影響其它面版）：Spry可收合面版折疊第1個標籤

折疊第3個標籤

在作家私房站介紹的上方，加入『Spry可收合面版』

或是

結果

將標籤1與內容複製貼到『標籤標記1』

如何才能將『作家私房站介紹』的綠色背景整個複製上呢？

關鍵：注意：這一列綠色背景的類別為：L2先反白『索引標籤』，設定其類別為L2

結果

然後剪下『作家私房站介紹』貼到『索引標籤』然後將內容複製貼上

同樣的方法，新增第2個『可收合面版』

結果：

先反白『索引標籤』，設定其類別為L2結果

然後剪下『「芸珊的網路浪漫」介紹』，貼到『索引標籤』然後將內容複製貼上