Transcript 酷炫的多媒體與特效網頁設計 關於版主
Slide 1
Chapter 10
酷炫的多媒體與特效
網頁設計─關於版主
學習重點：「關於版主」網頁設計流程
大綱
上一章
下一章
下一頁
離開
Slide 2
Chapter 10
酷炫的多媒體與特效
網頁設計─關於版主
為了使版主的自我介紹能更加吸引人，在「關於版主」網頁設計上，
特別使用了特效與媒體來呈現，例如版主相片的交換特效、捲動式顯
示版主相片、動畫顯示版主簡介等等，希望藉此讓瀏覽者留下更深刻
的印象。以下就是幾個「關於版主」的製作原則和注意事項，提供大
家參考：
可以使用藝術相片來突顯版主，讓網頁更富個人特色。
建議使用一些特效來突顯版主個人的特色，但不宜過多，否則整個網頁太
過花俏反而不便於閱讀。
如果一些特效不能使用軟體直接製作，可以透過其他軟體進行設計，再插
入到網頁中，例如Flash動畫等。
大綱
上一章
下一章
上一頁
開始
離開
Slide 3
目錄
10-1
10-2
10-3
10-4
10-5
10-6
10-7
製作交換圖片特效
製作開啟瀏覽視窗特效
製作捲動影像特效
製作顯示圖層特效
製作火焰文字特效
插入Flash動畫
課後習題 【實作題】
大綱
回首頁
離開
Slide 4
10-1 製作交換圖片特效
交換圖片特效是一種可以因應滑鼠事件而產生的圖片變換效果。對
於不懂設計的使用者來說，如果想要做出這種效果，或許會覺得很
複雜，但透過FrontPage製作此特效，其實只需透過幾個非常簡單
的操作步驟而已。FrontPage提供了「DHTML效果」功能，您只需
單擊幾下滑鼠即可製作出交換圖片特效。 。
成果展示：
下例將利用軟體的「DHTML效果」功能，為網頁上的版主藝術相片
製作交換圖片特效，使得當滑鼠移至圖片上方時即變換成另外一張
圖片。
下一節
下一頁
回目錄
Slide 5
10-1 製作交換圖片特效
1.原來網頁的圖片
2.滑鼠移到上方時，變成另一張圖片的效果
練習檔案：..\Example\練習檔\Ex10\10-1\10-1.htm
成果檔案：..\Example\成果檔\Ex10\10-1\10-1_Ok.htm
下一節
上一頁
下一頁
回目錄
Slide 6
10-1 製作交換圖片特效
步驟一、開啟「DHTML效果」工具列：
1.執行「檢視─工具列
─DHTML效果」功能
補充說明：DHTML的概念
DHTML是指「Dynamic Hyper Text Markup Language（動態超文件標示
語言）」特效，其整合了CSS(cascading style sheets)、DOM (document
object model)、Script(JavaScript 及 VBscript)和HTML等各種程式語言，
專門用來製作各種網頁特效。
下一節
上一頁
下一頁
回目錄
Slide 7
10-1 製作交換圖片特效
步驟二、製作交換圖片特效：
1.選取圖片
2.設定滑鼠事件
3.設定特效類型
4.展開選單，選取「選擇圖片」選項
5.選取交換的圖片
6.單擊「開啟」按鈕
下一節
上一頁
下一頁
回目錄
Slide 8
10-1 製作交換圖片特效
補充說明：移除DHTML效果
如果想要移除圖片上的DHTML效果，可以選取該圖片，然後單擊
「DHTML效果」工具列上的「移除效果」按鈕即可。
1.單擊「移除效果」按鈕，可移除DHTML效果
下一節
上一頁
下一頁
回目錄
Slide 9
10-1 製作交換圖片特效
步驟三、預覽網頁效果：
1.單擊「預覽」按鈕
2.將滑鼠移到圖片上，
預覽圖片交換效果
除了利用「DHTML效果」功能來製作圖片交換特效外，還可以利用「表
現方式」來實現此效果，您只需為圖片套用「交換圖像」指令即可，關
於表現方式的相關介紹，請看下面的內容。
下一節
上一頁
回目錄
Slide 10
10-2 製作開啟瀏覽視窗特效
一般情況下，網頁內容插入超連結後，會以瀏覽器預設的視窗開啟連
結，通常有瀏覽器的導覽工具列、功能表列、狀態列等等。但如果想
單純用一個視窗區域開啟連結，而且視窗的大小能夠符合連結內容的
話，就可以透過「表示方式」功能，為對象插入「開啟瀏覽器視窗」
指令。本節將為圖片插入此指令，並據以介紹「表現方式」功能的使
用方法。
成果展示：
下例為圖片插入「開啟瀏覽器視窗」表現方式指令，並指定連結、視
窗名稱、視窗大小等參數，讓瀏覽者在雙擊該圖片後就會自動開啟瀏
覽器視窗。
上一節
下一節
下一頁
回目錄
Slide 11
10-2 製作開啟瀏覽視窗特效
1.雙擊圖片執行連結
2.開啟指定大小的瀏覽器視窗
練習檔案：..\Example\練習檔\Ex10\10-2\10-2.htm
成果檔案：..\Example\成果檔\Ex10\10-2\10-2_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 12
10-2 製作開啟瀏覽視窗特效
步驟一、插入「開啟瀏覽器視窗」指令：
1.選取圖片
2.執行「格式─表現方式」
功能，開啟「表現方式」
窗格
3.單擊「插入」按鈕，選取
「開啟瀏覽器視窗」功能
4.指定連結
5.設定視窗名稱
6.設定視窗大小
7.單擊「確定」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 13
10-2 製作開啟瀏覽視窗特效
步驟二、變更指令事件：
在預設的狀況下，「開啟瀏覽器視窗」指令的事件為「onclick」，
現將事件變更為「ondblclick」，讓瀏覽者雙擊圖片即開啟瀏覽器視
窗。
1.單擊事件右邊的倒三角形按鈕
2.展開選單後，選取「ondblclick」選項
當想要刪除表現方式指令，可以選取插入指令
的對象，然後選取需要刪除的指令，單擊「刪
除」按鈕即可。
上一節
下一節
上一頁
回目錄
Slide 14
10-3 製作捲動影像特效
FrontPage不但提供多種製作網頁特效的功能，而且還支援JavaScript、
JavaApplet等特效。為此，很多設計師都會將JAVA程式加入網頁，製作
出軟體本身無法製作的網頁特效。例如本節將利用JavaScript製作捲動
影像特效，藉此學習利用JavaScript程式設計網頁特效。
成果展示：
本例將JavaScript程式插入到網頁程式碼內，然後修改程式碼參數，製
作水平捲動影像的網頁特效。 ：
上一節
下一節
下一頁
回目錄
Slide 15
10-3 製作捲動影像特效
1.利用JavaScript製作的捲動影像特效
2.利用JavaScript製作的捲動影像特效
練習檔案：..\Example\練習檔\Ex10\10-3\10-3.htm
素材檔案：..\Example\練習檔\Ex10\10-3\10-3.txt
成果檔案：..\Example\成果檔\Ex10\10-3\10-3_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 16
10-3 製作捲動影像特效
步驟一、指定插入點：
將游標定位在頁面中需要插入特效的位置，然後透過「分割」編輯模式，
在程式碼視窗中指定插入點。
1.將游標定位在頁面上
2.單擊「分割」按鈕
3.找到頁面游標在程式
碼內的位置
上一節
下一節
上一頁
下一頁
回目錄
Slide 17
10-3 製作捲動影像特效
步驟二、加入程式碼：
將素材檔案內的JavaScript程式加入到網頁，製作捲動影像特效。
1.按下Ctrl＋A快速鍵，選取全部內容
2.按下Ctrl＋C快速鍵，複製程式碼
3.按下Ctrl＋V快速鍵，在程式碼的插
入點加入程式碼
上一節
下一節
上一頁
下一頁
回目錄
Slide 18
10-3 製作捲動影像特效
補充說明：JavaScript與JavaApplet的概念
JavaApplet是一種高階語言，此類語言要經過編譯器處理後才可以
被電腦識別，這種程式會封存為一個獨立的檔案，可以在網頁任意
處或任意頁面反覆使用，提高網頁設計的工作效率，但其開發難度
並不適合剛接觸網頁製作的初學者。
JavaScript同樣是基於Java所開發出來的一種網頁程式語言，這種
語言的跨平台性很強，絕大多數瀏覽器都支援。它可以直接在用戶
端的瀏覽器內執行﹐也就是在執行過程中，並不會加重瀏覽器的負
荷，因此被廣泛用來製作網頁特效。
上一節
下一節
上一頁
下一頁
回目錄
Slide 19
10-3 製作捲動影像特效
步驟三、修改圖片與連結參數 ：
1.找到第206行的程式碼，
修改圖片位置
2.再修改圖片連結參數
上一節
下一節
上一頁
下一頁
回目錄
Slide 20
10-3 製作捲動影像特效
步驟四、修改其他圖片程式參數：
依照步驟三的方法，修改其他圖片程式的位置與連結參數，並複製多
個相同的程式，以新增更多的捲動圖片。
1.修改原來程式中的圖片位置與連結參數後的結果
2.複製更多的圖片程式後的結果
上一節
下一節
上一頁
下一頁
回目錄
Slide 21
10-3 製作捲動影像特效
步驟五、修改捲動區參數 ：
移到195行的程式碼區域中，修改捲動區的寬度，以及捲動速度、背景色彩
等參數，使之更適合網頁需求。
1.修改捲動區寬度
2.修改捲動速度
3.修改捲動區背景色彩
上一節
下一節
上一頁
下一頁
回目錄
Slide 22
10-3 製作捲動影像特效
步驟六、修改表格邊框參數：
在加入的JavaScript程式中，其實使用了表格來定位影像捲動區域。
為了讓表格顯示更明顯，此步驟透過程式碼將表格邊框設定為1。
1.將程式碼視窗移動到278行
2.修改邊框寬度為1
加入並修改JavaScript程式後，即可讓網頁產生Java程式所設定的
影像水平捲動效果。這種效果在瀏覽者移動滑鼠到圖片時就會停止
捲動，單擊圖片就會執行該圖片指定的連結，非常有趣，您都來試
試吧。
上一節
下一節
上一頁
回目錄
Slide 23
10-4 製作顯示圖層特效
圖層的主要作用是在於定位與編排資料，但如果圖層與表現方式結
合的話，可以產生意想不到的網頁效果，例如隱藏、顯示、移動等
等。本節將為大家介紹如何使用表現方式製作圖層的顯示與隱藏特
效。
成果展示：
下例為圖片插入「表現方式」中的「變更內容」指令，然後設定圖
層的可見度參數，當瀏覽者移動滑鼠至圖片上時，即可顯示圖層，
移開滑鼠則隱藏圖層。
上一節
下一節
下一頁
回目錄
Slide 24
10-4 製作顯示圖層特效
1.滑鼠未移到圖片上，圖層隱藏
2.滑鼠移到圖片上，圖層被顯示
練習檔案：..\Example\練習檔\Ex10\10-4\10-4.htm
成果檔案：..\Example\成果檔\Ex10\10-4\10-4_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 25
10-4 製作顯示圖層特效
步驟一、隱藏圖層：
1.執行「格式─圖層」功能
2.選取圖層
3.雙擊隱藏選取的圖層
上一節
下一節
上一頁
下一頁
回目錄
Slide 26
10-4 製作顯示圖層特效
步驟二、插入「變更內容」指令：
為圖層上方的圖片插入「變更內容」表現方式指令，以設定圖層的可
見度。
1.選取圖片
2.單擊「插入」按鈕，執
行「變更內容」功能
3.勾選「選取元素」選項
4.設定元素類型與識別碼
5.單擊「可見度」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 27
10-4 製作顯示圖層特效
步驟三、設定可見度樣式：
1.選取「顯示」選項
2.單擊「確定」按鈕
3.勾選「滑鼠移出時
還原事件」核取項
4.單擊「確定」按鈕
經過圖層與表現方式功能的結合，圖層的應用已經擴大到特效的領
域，您也可以嘗試利用圖層來製作不同的網頁特效。
上一節
下一節
上一頁
回目錄
Slide 28
10-5 製作火焰文字特效
JavaScript的功能可說是非常強大，它所涉及的範圍相當廣泛，例如
圖片特效、文字特效、視窗特效、滑鼠特效、時間特效等等。本章第
三節介紹了JavaScript的影像特效，本節將為大家介紹利用JavaScript
來製作火焰效果的文字特效。
成果展示：
下例將為網頁加入JavaScript程式碼，然後修改程式碼的標題文字，
製作該標題文字的火焰特效。
上一節
下一節
下一頁
回目錄
Slide 29
10-5 製作火焰文字特效
利用JavaScript製作火焰文字特效
練習檔案：..\Example\練習檔\Ex10\10-5\10-5.htm
素材檔案：..\Example\練習檔\Ex10\10-5\10-5_head.txt、10-5_body.txt
成果檔案：..\Example\成果檔\Ex10\10-5\10-5_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 30
10-5 製作火焰文字特效
步驟一、加入程式碼：
將「10-5_head.txt」素材檔內的程式碼加入到網頁
標籤內。
1.單擊「程式碼」按鈕
2.將游標定位在程式碼前，
按下Enter鍵換行
3.將素材檔的程式碼加入網頁
上一節
下一節
上一頁
下一頁
回目錄
Slide 31
10-5 製作火焰文字特效
步驟二、加入程式碼：
選取網頁上標題，然後將「10-5_body.txt」素材檔內的程式碼加入到
標題處。
1.單擊「分割」按鈕
2.選取網頁上的標題文字
3.加入素材檔的程式碼，取代
原來的標題
上一節
下一節
上一頁
下一頁
回目錄
Slide 32
10-5 製作火焰文字特效
步驟三、修改文字內容：
將步驟二加入的程式碼中的「請輸入文字內容」文字，變更成為「我
的自述」。
1.修改文字內容
頁面上的文字同步更新
JavaScript程式還可以製作更多不同的特效，因篇幅有限故在此不再
各別說明。現在網路上提供了很多免費的JavaScript特效下載，各位
可透過網路下載自己需要的特效，然後使用上述的方法加入到網頁中
即可。
上一節
下一節
上一頁
回目錄
Slide 33
10-6 插入Flash動畫
FrontPage 不但支援 Java 程式，還支援多種媒體類型，例如影片、
聲音、動畫等等。如果有些特效無法直接在 FrontPage 中製作，可
以透過其它製作特效的媒體進行製作，然後再插入到網頁中，以達
到預期的目的。本節將介紹在網頁上插入Flash動畫的方法。
成果展示：
下例將透過「Web元件」功能，為網頁插入Flash動畫，然後設定動
畫的大小，調整成符合網頁設計的需求。
上一節
下一節
下一頁
回目錄
Slide 34
10-6 插入Flash動畫
1.為網頁插入的Flash動畫
練習檔案：..\Example\練習檔\Ex10\10-6\10-6.htm
素材檔案：..\Example\練習檔\Ex10\10-6\images\text.swf
成果檔案：..\Example\成果檔\Ex10\10-6\10-6_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 35
10-6 插入Flash動畫
步驟一、插入Flash動畫：
1.將游標定位在表格內
2.執行「插入─Web元件」功能
3.選取「進階控制項」元件類型
4.選取「Flash格式的影片」控制項
5.單擊「完成」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 36
10-6 插入Flash動畫
步驟二、選取Flash動畫：
1.選取需要插入的Flash動畫檔
2.單擊「插入」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 37
10-6 插入Flash動畫
步驟三、設定Flash動畫大小：
1.雙擊Flash動畫，開啟「Flash
格式屬性的影片」視窗
2.取消勾選「保持比例」核取項
3.設定Flash動畫大小
4.單擊「確定」按鈕
經過上述操作後，「關於版主」網頁就完成了。其實，FrontPage
提供的DHTML效果、表示方式等功能，還可以製作諸如文字變化
特效、快顯視窗訊息特效等其他類型的特效，這些操作與前面講述
的操作方法大同小異，各位應可舉一反三。接著，透過本章的習題
來回顧這些技巧吧！
上一節
下一節
上一頁
回目錄
Slide 38
10-7 課後習題
選擇題
回目錄
離 開
Slide 39
10-7 課後習題_選擇題
1.（ ）DHTML是一種基於下列哪一種語法所產生的網頁程式？
A.JavaScript。
B.JavaApplet。
C.HTML。
D.ASP。
2.（ ）以下哪一項不是JavaScript程式的特點？
A.跨平台性很強，絕大多數瀏覽器都有支援。
B.在用戶端的瀏覽器內執行。
C.廣泛用來製作網頁特效。
D.加重瀏覽器的負荷。
看答案
下一頁
回目錄
Slide 40
10-7 課後習題_選擇題
3.（ ）圖層不具有下列哪一種「表現方式」的可見度樣式？
A.繼承。
B.顯示。
C.隱藏。
D.溢出。
看答案
上一頁
回目錄
Slide 41
10-7 課後習題_選擇題答案
1.（A）DHTML是一種基於下列哪一種語法所產生的網頁程式？
A.JavaScript。
B.JavaApplet。
C.HTML。
D.ASP。
2.（D）以下哪一項不是JavaScript程式的特點？
A.跨平台性很強，絕大多數瀏覽器都有支援。
B.在用戶端的瀏覽器內執行。
C.廣泛用來製作網頁特效。
D.加重瀏覽器的負荷。
選擇題
下一頁
回目錄
Slide 42
10-7 課後習題_選擇題答案
3.（D）圖層不具有下列哪一種「表現方式」的可見度樣式？
A.繼承。
B.顯示。
C.隱藏。
D.溢出。
選擇題
上一頁
回目錄
Slide 43
實作題
一、本實作題將利用「DHTML效果」功能，為「我的自述」第一段文
字套用「選擇字型」的設定格式動態效果，當滑鼠移至上面時，段
落變成深紅色，然後為第二段文字套用「選擇框線」的設定格式動
態效果，使滑鼠移至上面時，段落出現淺黃色的框線效果。
1.滑鼠移到第一
段文字上時，
段落變成深紅
色
2.滑鼠移到第二
段文字上時，
段落產生淺黃
色框的效果
練習檔案：..\Example\練習檔\Ex10\10-P1\10-P1.htm
成果檔案：..\Example\成果檔\Ex10\10-P1\10-P1_Ok.htm
下一頁
回目錄
Slide 44
實作題
提示：
1) 選取「我的自述」標題下的第一段文字，然後開啟「DHTML效
果」工具列，設定事件為「滑鼠移過」、套用為「設定格式」、
動作為「選擇字型」。
上一頁
下一頁
回目錄
Slide 45
實作題
提示：
2) 開啟「字型」視窗後，設定字型色彩為「深紅色」，然後單擊
「確定」按鈕。
上一頁
下一頁
回目錄
Slide 46
實作題
提示：
3) 選取「我的自述」標題下的第二段文字，設定事件為「滑鼠移
過」、套用為「設定格式」、動作為「選擇框線」。
上一頁
下一頁
回目錄
Slide 47
實作題
提示：
4) 開啟「框線及網底」視窗後，切換到「框線」籤頁，選取「方塊」
選項，然後切換到「網底」籤頁，設定背景色彩為「淺黃色」，
最後單擊「確定」按鈕。
上一頁
下一頁
回目錄
Slide 48
實作題
二、本實作題要求使用「表現方式」功能，為動畫物件插入「快顯視
窗訊息」指令，並設定訊息為「歡迎光臨JOICY網站」，最後變
更滑鼠事件為「onmouseover」，使瀏覽者移動滑鼠至動畫物件
上，即彈出訊息視窗。
滑鼠移至動畫物件上，即顯示訊息視窗
練習檔案：..\Example\練習檔\Ex10\10-P2\10-P2.htm
成果檔案：..\Example\成果檔\Ex10\10-P2\10-P2_Ok.htm
上一頁
下一頁
回目錄
Slide 49
實作題
提示：
1) 開啟「框線及網底」視窗後，切換到「框線」籤頁，選取「方塊」
選項，然後切換到「網底」籤頁，設定背景色彩為「淺黃色」，
最後單擊「確定」按鈕。
上一頁
下一頁
回目錄
Slide 50
實作題
提示：
2) 透過「表現方式」視窗，修改「快顯視窗訊息」的事件為
「onmouseover」。
上一頁
回目錄
Chapter 10
酷炫的多媒體與特效
網頁設計─關於版主
學習重點：「關於版主」網頁設計流程
大綱
上一章
下一章
下一頁
離開
Slide 2
Chapter 10
酷炫的多媒體與特效
網頁設計─關於版主
為了使版主的自我介紹能更加吸引人，在「關於版主」網頁設計上，
特別使用了特效與媒體來呈現，例如版主相片的交換特效、捲動式顯
示版主相片、動畫顯示版主簡介等等，希望藉此讓瀏覽者留下更深刻
的印象。以下就是幾個「關於版主」的製作原則和注意事項，提供大
家參考：
可以使用藝術相片來突顯版主，讓網頁更富個人特色。
建議使用一些特效來突顯版主個人的特色，但不宜過多，否則整個網頁太
過花俏反而不便於閱讀。
如果一些特效不能使用軟體直接製作，可以透過其他軟體進行設計，再插
入到網頁中，例如Flash動畫等。
大綱
上一章
下一章
上一頁
開始
離開
Slide 3
目錄
10-1
10-2
10-3
10-4
10-5
10-6
10-7
製作交換圖片特效
製作開啟瀏覽視窗特效
製作捲動影像特效
製作顯示圖層特效
製作火焰文字特效
插入Flash動畫
課後習題 【實作題】
大綱
回首頁
離開
Slide 4
10-1 製作交換圖片特效
交換圖片特效是一種可以因應滑鼠事件而產生的圖片變換效果。對
於不懂設計的使用者來說，如果想要做出這種效果，或許會覺得很
複雜，但透過FrontPage製作此特效，其實只需透過幾個非常簡單
的操作步驟而已。FrontPage提供了「DHTML效果」功能，您只需
單擊幾下滑鼠即可製作出交換圖片特效。 。
成果展示：
下例將利用軟體的「DHTML效果」功能，為網頁上的版主藝術相片
製作交換圖片特效，使得當滑鼠移至圖片上方時即變換成另外一張
圖片。
下一節
下一頁
回目錄
Slide 5
10-1 製作交換圖片特效
1.原來網頁的圖片
2.滑鼠移到上方時，變成另一張圖片的效果
練習檔案：..\Example\練習檔\Ex10\10-1\10-1.htm
成果檔案：..\Example\成果檔\Ex10\10-1\10-1_Ok.htm
下一節
上一頁
下一頁
回目錄
Slide 6
10-1 製作交換圖片特效
步驟一、開啟「DHTML效果」工具列：
1.執行「檢視─工具列
─DHTML效果」功能
補充說明：DHTML的概念
DHTML是指「Dynamic Hyper Text Markup Language（動態超文件標示
語言）」特效，其整合了CSS(cascading style sheets)、DOM (document
object model)、Script(JavaScript 及 VBscript)和HTML等各種程式語言，
專門用來製作各種網頁特效。
下一節
上一頁
下一頁
回目錄
Slide 7
10-1 製作交換圖片特效
步驟二、製作交換圖片特效：
1.選取圖片
2.設定滑鼠事件
3.設定特效類型
4.展開選單，選取「選擇圖片」選項
5.選取交換的圖片
6.單擊「開啟」按鈕
下一節
上一頁
下一頁
回目錄
Slide 8
10-1 製作交換圖片特效
補充說明：移除DHTML效果
如果想要移除圖片上的DHTML效果，可以選取該圖片，然後單擊
「DHTML效果」工具列上的「移除效果」按鈕即可。
1.單擊「移除效果」按鈕，可移除DHTML效果
下一節
上一頁
下一頁
回目錄
Slide 9
10-1 製作交換圖片特效
步驟三、預覽網頁效果：
1.單擊「預覽」按鈕
2.將滑鼠移到圖片上，
預覽圖片交換效果
除了利用「DHTML效果」功能來製作圖片交換特效外，還可以利用「表
現方式」來實現此效果，您只需為圖片套用「交換圖像」指令即可，關
於表現方式的相關介紹，請看下面的內容。
下一節
上一頁
回目錄
Slide 10
10-2 製作開啟瀏覽視窗特效
一般情況下，網頁內容插入超連結後，會以瀏覽器預設的視窗開啟連
結，通常有瀏覽器的導覽工具列、功能表列、狀態列等等。但如果想
單純用一個視窗區域開啟連結，而且視窗的大小能夠符合連結內容的
話，就可以透過「表示方式」功能，為對象插入「開啟瀏覽器視窗」
指令。本節將為圖片插入此指令，並據以介紹「表現方式」功能的使
用方法。
成果展示：
下例為圖片插入「開啟瀏覽器視窗」表現方式指令，並指定連結、視
窗名稱、視窗大小等參數，讓瀏覽者在雙擊該圖片後就會自動開啟瀏
覽器視窗。
上一節
下一節
下一頁
回目錄
Slide 11
10-2 製作開啟瀏覽視窗特效
1.雙擊圖片執行連結
2.開啟指定大小的瀏覽器視窗
練習檔案：..\Example\練習檔\Ex10\10-2\10-2.htm
成果檔案：..\Example\成果檔\Ex10\10-2\10-2_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 12
10-2 製作開啟瀏覽視窗特效
步驟一、插入「開啟瀏覽器視窗」指令：
1.選取圖片
2.執行「格式─表現方式」
功能，開啟「表現方式」
窗格
3.單擊「插入」按鈕，選取
「開啟瀏覽器視窗」功能
4.指定連結
5.設定視窗名稱
6.設定視窗大小
7.單擊「確定」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 13
10-2 製作開啟瀏覽視窗特效
步驟二、變更指令事件：
在預設的狀況下，「開啟瀏覽器視窗」指令的事件為「onclick」，
現將事件變更為「ondblclick」，讓瀏覽者雙擊圖片即開啟瀏覽器視
窗。
1.單擊事件右邊的倒三角形按鈕
2.展開選單後，選取「ondblclick」選項
當想要刪除表現方式指令，可以選取插入指令
的對象，然後選取需要刪除的指令，單擊「刪
除」按鈕即可。
上一節
下一節
上一頁
回目錄
Slide 14
10-3 製作捲動影像特效
FrontPage不但提供多種製作網頁特效的功能，而且還支援JavaScript、
JavaApplet等特效。為此，很多設計師都會將JAVA程式加入網頁，製作
出軟體本身無法製作的網頁特效。例如本節將利用JavaScript製作捲動
影像特效，藉此學習利用JavaScript程式設計網頁特效。
成果展示：
本例將JavaScript程式插入到網頁程式碼內，然後修改程式碼參數，製
作水平捲動影像的網頁特效。 ：
上一節
下一節
下一頁
回目錄
Slide 15
10-3 製作捲動影像特效
1.利用JavaScript製作的捲動影像特效
2.利用JavaScript製作的捲動影像特效
練習檔案：..\Example\練習檔\Ex10\10-3\10-3.htm
素材檔案：..\Example\練習檔\Ex10\10-3\10-3.txt
成果檔案：..\Example\成果檔\Ex10\10-3\10-3_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 16
10-3 製作捲動影像特效
步驟一、指定插入點：
將游標定位在頁面中需要插入特效的位置，然後透過「分割」編輯模式，
在程式碼視窗中指定插入點。
1.將游標定位在頁面上
2.單擊「分割」按鈕
3.找到頁面游標在程式
碼內的位置
上一節
下一節
上一頁
下一頁
回目錄
Slide 17
10-3 製作捲動影像特效
步驟二、加入程式碼：
將素材檔案內的JavaScript程式加入到網頁，製作捲動影像特效。
1.按下Ctrl＋A快速鍵，選取全部內容
2.按下Ctrl＋C快速鍵，複製程式碼
3.按下Ctrl＋V快速鍵，在程式碼的插
入點加入程式碼
上一節
下一節
上一頁
下一頁
回目錄
Slide 18
10-3 製作捲動影像特效
補充說明：JavaScript與JavaApplet的概念
JavaApplet是一種高階語言，此類語言要經過編譯器處理後才可以
被電腦識別，這種程式會封存為一個獨立的檔案，可以在網頁任意
處或任意頁面反覆使用，提高網頁設計的工作效率，但其開發難度
並不適合剛接觸網頁製作的初學者。
JavaScript同樣是基於Java所開發出來的一種網頁程式語言，這種
語言的跨平台性很強，絕大多數瀏覽器都支援。它可以直接在用戶
端的瀏覽器內執行﹐也就是在執行過程中，並不會加重瀏覽器的負
荷，因此被廣泛用來製作網頁特效。
上一節
下一節
上一頁
下一頁
回目錄
Slide 19
10-3 製作捲動影像特效
步驟三、修改圖片與連結參數 ：
1.找到第206行的程式碼，
修改圖片位置
2.再修改圖片連結參數
上一節
下一節
上一頁
下一頁
回目錄
Slide 20
10-3 製作捲動影像特效
步驟四、修改其他圖片程式參數：
依照步驟三的方法，修改其他圖片程式的位置與連結參數，並複製多
個相同的程式，以新增更多的捲動圖片。
1.修改原來程式中的圖片位置與連結參數後的結果
2.複製更多的圖片程式後的結果
上一節
下一節
上一頁
下一頁
回目錄
Slide 21
10-3 製作捲動影像特效
步驟五、修改捲動區參數 ：
移到195行的程式碼區域中，修改捲動區的寬度，以及捲動速度、背景色彩
等參數，使之更適合網頁需求。
1.修改捲動區寬度
2.修改捲動速度
3.修改捲動區背景色彩
上一節
下一節
上一頁
下一頁
回目錄
Slide 22
10-3 製作捲動影像特效
步驟六、修改表格邊框參數：
在加入的JavaScript程式中，其實使用了表格來定位影像捲動區域。
為了讓表格顯示更明顯，此步驟透過程式碼將表格邊框設定為1。
1.將程式碼視窗移動到278行
2.修改邊框寬度為1
加入並修改JavaScript程式後，即可讓網頁產生Java程式所設定的
影像水平捲動效果。這種效果在瀏覽者移動滑鼠到圖片時就會停止
捲動，單擊圖片就會執行該圖片指定的連結，非常有趣，您都來試
試吧。
上一節
下一節
上一頁
回目錄
Slide 23
10-4 製作顯示圖層特效
圖層的主要作用是在於定位與編排資料，但如果圖層與表現方式結
合的話，可以產生意想不到的網頁效果，例如隱藏、顯示、移動等
等。本節將為大家介紹如何使用表現方式製作圖層的顯示與隱藏特
效。
成果展示：
下例為圖片插入「表現方式」中的「變更內容」指令，然後設定圖
層的可見度參數，當瀏覽者移動滑鼠至圖片上時，即可顯示圖層，
移開滑鼠則隱藏圖層。
上一節
下一節
下一頁
回目錄
Slide 24
10-4 製作顯示圖層特效
1.滑鼠未移到圖片上，圖層隱藏
2.滑鼠移到圖片上，圖層被顯示
練習檔案：..\Example\練習檔\Ex10\10-4\10-4.htm
成果檔案：..\Example\成果檔\Ex10\10-4\10-4_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 25
10-4 製作顯示圖層特效
步驟一、隱藏圖層：
1.執行「格式─圖層」功能
2.選取圖層
3.雙擊隱藏選取的圖層
上一節
下一節
上一頁
下一頁
回目錄
Slide 26
10-4 製作顯示圖層特效
步驟二、插入「變更內容」指令：
為圖層上方的圖片插入「變更內容」表現方式指令，以設定圖層的可
見度。
1.選取圖片
2.單擊「插入」按鈕，執
行「變更內容」功能
3.勾選「選取元素」選項
4.設定元素類型與識別碼
5.單擊「可見度」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 27
10-4 製作顯示圖層特效
步驟三、設定可見度樣式：
1.選取「顯示」選項
2.單擊「確定」按鈕
3.勾選「滑鼠移出時
還原事件」核取項
4.單擊「確定」按鈕
經過圖層與表現方式功能的結合，圖層的應用已經擴大到特效的領
域，您也可以嘗試利用圖層來製作不同的網頁特效。
上一節
下一節
上一頁
回目錄
Slide 28
10-5 製作火焰文字特效
JavaScript的功能可說是非常強大，它所涉及的範圍相當廣泛，例如
圖片特效、文字特效、視窗特效、滑鼠特效、時間特效等等。本章第
三節介紹了JavaScript的影像特效，本節將為大家介紹利用JavaScript
來製作火焰效果的文字特效。
成果展示：
下例將為網頁加入JavaScript程式碼，然後修改程式碼的標題文字，
製作該標題文字的火焰特效。
上一節
下一節
下一頁
回目錄
Slide 29
10-5 製作火焰文字特效
利用JavaScript製作火焰文字特效
練習檔案：..\Example\練習檔\Ex10\10-5\10-5.htm
素材檔案：..\Example\練習檔\Ex10\10-5\10-5_head.txt、10-5_body.txt
成果檔案：..\Example\成果檔\Ex10\10-5\10-5_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 30
10-5 製作火焰文字特效
步驟一、加入程式碼：
將「10-5_head.txt」素材檔內的程式碼加入到網頁
標籤內。
1.單擊「程式碼」按鈕
2.將游標定位在程式碼前，
按下Enter鍵換行
3.將素材檔的程式碼加入網頁
上一節
下一節
上一頁
下一頁
回目錄
Slide 31
10-5 製作火焰文字特效
步驟二、加入程式碼：
選取網頁上標題，然後將「10-5_body.txt」素材檔內的程式碼加入到
標題處。
1.單擊「分割」按鈕
2.選取網頁上的標題文字
3.加入素材檔的程式碼，取代
原來的標題
上一節
下一節
上一頁
下一頁
回目錄
Slide 32
10-5 製作火焰文字特效
步驟三、修改文字內容：
將步驟二加入的程式碼中的「請輸入文字內容」文字，變更成為「我
的自述」。
1.修改文字內容
頁面上的文字同步更新
JavaScript程式還可以製作更多不同的特效，因篇幅有限故在此不再
各別說明。現在網路上提供了很多免費的JavaScript特效下載，各位
可透過網路下載自己需要的特效，然後使用上述的方法加入到網頁中
即可。
上一節
下一節
上一頁
回目錄
Slide 33
10-6 插入Flash動畫
FrontPage 不但支援 Java 程式，還支援多種媒體類型，例如影片、
聲音、動畫等等。如果有些特效無法直接在 FrontPage 中製作，可
以透過其它製作特效的媒體進行製作，然後再插入到網頁中，以達
到預期的目的。本節將介紹在網頁上插入Flash動畫的方法。
成果展示：
下例將透過「Web元件」功能，為網頁插入Flash動畫，然後設定動
畫的大小，調整成符合網頁設計的需求。
上一節
下一節
下一頁
回目錄
Slide 34
10-6 插入Flash動畫
1.為網頁插入的Flash動畫
練習檔案：..\Example\練習檔\Ex10\10-6\10-6.htm
素材檔案：..\Example\練習檔\Ex10\10-6\images\text.swf
成果檔案：..\Example\成果檔\Ex10\10-6\10-6_Ok.htm
上一節
下一節
上一頁
下一頁
回目錄
Slide 35
10-6 插入Flash動畫
步驟一、插入Flash動畫：
1.將游標定位在表格內
2.執行「插入─Web元件」功能
3.選取「進階控制項」元件類型
4.選取「Flash格式的影片」控制項
5.單擊「完成」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 36
10-6 插入Flash動畫
步驟二、選取Flash動畫：
1.選取需要插入的Flash動畫檔
2.單擊「插入」按鈕
上一節
下一節
上一頁
下一頁
回目錄
Slide 37
10-6 插入Flash動畫
步驟三、設定Flash動畫大小：
1.雙擊Flash動畫，開啟「Flash
格式屬性的影片」視窗
2.取消勾選「保持比例」核取項
3.設定Flash動畫大小
4.單擊「確定」按鈕
經過上述操作後，「關於版主」網頁就完成了。其實，FrontPage
提供的DHTML效果、表示方式等功能，還可以製作諸如文字變化
特效、快顯視窗訊息特效等其他類型的特效，這些操作與前面講述
的操作方法大同小異，各位應可舉一反三。接著，透過本章的習題
來回顧這些技巧吧！
上一節
下一節
上一頁
回目錄
Slide 38
10-7 課後習題
選擇題
回目錄
離 開
Slide 39
10-7 課後習題_選擇題
1.（ ）DHTML是一種基於下列哪一種語法所產生的網頁程式？
A.JavaScript。
B.JavaApplet。
C.HTML。
D.ASP。
2.（ ）以下哪一項不是JavaScript程式的特點？
A.跨平台性很強，絕大多數瀏覽器都有支援。
B.在用戶端的瀏覽器內執行。
C.廣泛用來製作網頁特效。
D.加重瀏覽器的負荷。
看答案
下一頁
回目錄
Slide 40
10-7 課後習題_選擇題
3.（ ）圖層不具有下列哪一種「表現方式」的可見度樣式？
A.繼承。
B.顯示。
C.隱藏。
D.溢出。
看答案
上一頁
回目錄
Slide 41
10-7 課後習題_選擇題答案
1.（A）DHTML是一種基於下列哪一種語法所產生的網頁程式？
A.JavaScript。
B.JavaApplet。
C.HTML。
D.ASP。
2.（D）以下哪一項不是JavaScript程式的特點？
A.跨平台性很強，絕大多數瀏覽器都有支援。
B.在用戶端的瀏覽器內執行。
C.廣泛用來製作網頁特效。
D.加重瀏覽器的負荷。
選擇題
下一頁
回目錄
Slide 42
10-7 課後習題_選擇題答案
3.（D）圖層不具有下列哪一種「表現方式」的可見度樣式？
A.繼承。
B.顯示。
C.隱藏。
D.溢出。
選擇題
上一頁
回目錄
Slide 43
實作題
一、本實作題將利用「DHTML效果」功能，為「我的自述」第一段文
字套用「選擇字型」的設定格式動態效果，當滑鼠移至上面時，段
落變成深紅色，然後為第二段文字套用「選擇框線」的設定格式動
態效果，使滑鼠移至上面時，段落出現淺黃色的框線效果。
1.滑鼠移到第一
段文字上時，
段落變成深紅
色
2.滑鼠移到第二
段文字上時，
段落產生淺黃
色框的效果
練習檔案：..\Example\練習檔\Ex10\10-P1\10-P1.htm
成果檔案：..\Example\成果檔\Ex10\10-P1\10-P1_Ok.htm
下一頁
回目錄
Slide 44
實作題
提示：
1) 選取「我的自述」標題下的第一段文字，然後開啟「DHTML效
果」工具列，設定事件為「滑鼠移過」、套用為「設定格式」、
動作為「選擇字型」。
上一頁
下一頁
回目錄
Slide 45
實作題
提示：
2) 開啟「字型」視窗後，設定字型色彩為「深紅色」，然後單擊
「確定」按鈕。
上一頁
下一頁
回目錄
Slide 46
實作題
提示：
3) 選取「我的自述」標題下的第二段文字，設定事件為「滑鼠移
過」、套用為「設定格式」、動作為「選擇框線」。
上一頁
下一頁
回目錄
Slide 47
實作題
提示：
4) 開啟「框線及網底」視窗後，切換到「框線」籤頁，選取「方塊」
選項，然後切換到「網底」籤頁，設定背景色彩為「淺黃色」，
最後單擊「確定」按鈕。
上一頁
下一頁
回目錄
Slide 48
實作題
二、本實作題要求使用「表現方式」功能，為動畫物件插入「快顯視
窗訊息」指令，並設定訊息為「歡迎光臨JOICY網站」，最後變
更滑鼠事件為「onmouseover」，使瀏覽者移動滑鼠至動畫物件
上，即彈出訊息視窗。
滑鼠移至動畫物件上，即顯示訊息視窗
練習檔案：..\Example\練習檔\Ex10\10-P2\10-P2.htm
成果檔案：..\Example\成果檔\Ex10\10-P2\10-P2_Ok.htm
上一頁
下一頁
回目錄
Slide 49
實作題
提示：
1) 開啟「框線及網底」視窗後，切換到「框線」籤頁，選取「方塊」
選項，然後切換到「網底」籤頁，設定背景色彩為「淺黃色」，
最後單擊「確定」按鈕。
上一頁
下一頁
回目錄
Slide 50
實作題
提示：
2) 透過「表現方式」視窗，修改「快顯視窗訊息」的事件為
「onmouseover」。
上一頁
回目錄