Download presentation
Presentation is loading. Please wait.
1
第 14 章 網頁特效技巧
2
本章提要 「表現方式」工作窗格的操作 彈出訊息視窗 在狀態列顯示說明文字 在圖層物件顯示說明文字 滑鼠變換影像效果
製作連結到指定網頁的下拉式選單 開啟指定尺寸的瀏覽視窗 網頁切換效果
3
「表現方式」工作窗格的操作 加入指令的方法 事件與動作的觀念 刪除或修改特效指令 調整特效指令的執行順序
4
「表現方式」工作窗格的操作 在 FrontPage 中要製作動態式的網頁特效並不難, 因為 FrontPage 已經幫我們將這些程式碼寫成一個個的指令, 你只要使用表現方式工作窗格的各項指令, 就能輕鬆製作網頁特效。 請開啟一份新網頁, 然後執行『檢視/工作窗格』命令, 切換到表現方式工作窗格：
5
「表現方式」工作窗格的操作
6
加入指令的方法 選取要產生作用的目標元件, 該元件的 HTML 標籤會顯示在表現方式工作窗格最上方。若是希望網頁一載入就出現效果, 則請選取 <body> 標籤後再設定。
7
加入指令的方法 按下表現方式工作窗格的插入鈕, 選擇一種效果, 並在隨後出現的交談窗中, 設定此效果的屬性。
選擇事件, 以決定什麼時候要發生你所設定的效果。例如選擇 onmouseover事件, 則表示當滑鼠移到元件上時, 就會產生所設定的效果。
8
事件與動作的觀念 假設我們已經在表現方式工作窗格中加入一種效果, 那麼工作窗格就會顯示出事件及動作的資訊：
9
事件與動作的觀念 事件和動作都是 Script 中的用語, 意思是：當瀏覽者做了什麼事件後, 就會發生你所設定好的動作。
例如在現實生活中, 當我們按下電燈開關時, 燈泡就會發光, 這就是典型的事件與動作的關係： 電燈開關就是讓使用者能觸發事件的介面, 對應在網頁上就是指加入特效指令的目標元件, 例如：圖片、圖層、…等。
10
事件與動作的觀念 按下則是事件, 如果你只是盯著開關看, 那什麼事也不會發生, 一旦按下開關後, 才算觸發了事件。在網頁上, 事件的類型有很多種, 例如滑鼠移過、按下或離開目標元件時、網頁載入時、按下鍵盤時、…都是。 燈泡發光則代表動作, 也就是我們所預期的網頁效果, 例如跳出一個訊息視窗、或是變換圖形、…等。
11
事件與動作的觀念
12
事件與動作的觀念 在範例網站的左框架 (mainframe-left.htm) 就是一個變換圖片的特效, 當滑鼠移到圖片上時, 就會改顯示成另一張圖片：
13
各種事件的意義 列在事件選單中的事件, 都是以 Script 中的語法來命名, 從字面上就可以判斷每個事件的意義, 常見的有：
onmouseover：滑鼠移到目標上時。 onmouseup：按下滑鼠再放開左鈕時。 onmouseout：滑鼠移開時。 onmousedown：按下滑鼠時 (尚未放開左鈕)。
14
各種事件的意義 onclick：用滑鼠點選物件時 (按下左鈕並放開)。 ondblclick：用滑鼠雙按物件時。 onload：載入網頁時。
onabort：當瀏覽者不載入影像時。 onhelp：執行瀏覽器的輔助說明時。 onscroll：當瀏覽者捲動捲軸時。
15
刪除或修改特效指令 已經加入的特效指令, 還是可以修改內容, 只要雙按事件或是動作欄位, 即可開啟對應的交談窗繼續修改屬性；若要刪除指令, 則可在選取後, 按下刪除鈕。
16
刪除或修改特效指令 若加入特效指令, 在工作窗格中卻看不到蹤影, 通常是因為你沒有選取加上指令的元件。例如在某張圖片上加入特效指令, 那麼一定要選取這張圖片, 工作窗格中才會顯示對應的指令項目；若當初是對 <body> 標籤設定指令, 則修改時就要先選取 <body> 標籤。
17
調整特效指令的執行順序 若對同一個事件設定好幾個動作, 就有必要調整其先後順序, 讓我們想要的效果能按順序出現。
18
彈出訊息視窗 當你規劃好網頁版面後, 但又想加入一些網站的說明、最新消息, 或是提示瀏覽者有哪些重要資訊時, 就可以在網頁中加入彈出式的訊息視窗以傳遞訊息。 例如在瀏覽範例網站的首頁時, 就會跳出一個訊息視窗, 顯示網站的說明文字, 這就是本節所要介紹的範例。
19
彈出訊息視窗
20
範例實作 請開啟練習檔 ex14-01.htm, 由於本例是要讓網頁一載入的時候就出現訊息視窗, 所以請選取快顯標籤選擇器列的 <body> 標籤, 然後在表現方式工作窗格中按下插入鈕選擇快顯視窗訊息：
21
範例實作
22
範例實作 在開啟的交談窗中輸入文字, 這些文字就是你所要顯示的訊息：
23
範例實作 在事件中選擇何時要跳出這個訊息視窗。預設值是 onload, 就是當網頁載入時即跳出訊息視窗：
24
範例實作 設定好之後, 請切換到預覽模式, 或是按下 [F12] 鍵開啟瀏覽器來預覽即可。
如果你是要瀏覽者點選某項連結文字或影像時, 才跳出訊息交談窗, 那麼可在選取一段連結文字或影像後, 再依上述步驟進行 (注意, 事件要選擇 onmouseup 喔！) 。
![範例實作 設定好之後, 請切換到預覽模式, 或是按下 [F12] 鍵開啟瀏覽器來預覽即可。](http://slidesplayer.com/slide/11743046/65/images/24/%E7%AF%84%E4%BE%8B%E5%AF%A6%E4%BD%9C+%E8%A8%AD%E5%AE%9A%E5%A5%BD%E4%B9%8B%E5%BE%8C%2C+%E8%AB%8B%E5%88%87%E6%8F%9B%E5%88%B0%E9%A0%90%E8%A6%BD%E6%A8%A1%E5%BC%8F%2C+%E6%88%96%E6%98%AF%E6%8C%89%E4%B8%8B+%5BF12%5D+%E9%8D%B5%E9%96%8B%E5%95%9F%E7%80%8F%E8%A6%BD%E5%99%A8%E4%BE%86%E9%A0%90%E8%A6%BD%E5%8D%B3%E5%8F%AF%E3%80%82.jpg "如果你是要瀏覽者點選某項連結文字或影像時, 才跳出訊息交談窗, 那麼可在選取一段連結文字或影像後, 再依上述步驟進行 (注意, 事件要選擇 onmouseup 喔！) 。")
25
在狀態列顯示說明文字 除了上一節介紹的彈出式訊息交談窗外, 我們還可以在瀏覽器的狀態列加上一些說明文字來傳遞訊息。同樣地你可以在範例網站的首頁中看到此效果。
26
範例成果
27
範例實作 請開啟練習檔 ex14-02.htm, 這個例子同樣也是要在網頁一載入的時候就產生動作, 所以請選取快顯標籤選擇器列的 <body> 標籤, 然後按下表現方式工作窗格的插入鈕, 再選擇『設定文字/設定狀態列文字』命令。
28
範例實作 在開啟的交談窗中輸入想要顯示的文字, 並按下確定鈕：
29
範例實作 回到表現方式工作窗格, 即可看到設定的效果：
30
範例實作 在此我們的作法是讓網頁先顯示彈出訊息視窗, 而在瀏覽者關閉訊息視窗後才顯示狀態列說明文字。
31
在圖層物件顯示說明文字 在範例網站的相關網站網頁 (link.htm), 我們擺放了一些與數位攝影有關的網站連結, 瀏覽者只要將滑鼠移到連結按鈕上, 就會在網頁下方看到該網站的簡介：
32
在圖層物件顯示說明文字
33
範例實作 請開啟練習檔 ex14-03.htm：
34
範例實作 選取第一張圖片 (台灣攝影學會), 按下表現方式工作窗格的插入鈕, 執行『設定文字/設定圖層文字』命令。
在開啟的交談窗中, 輸入要顯示的文字, 並選擇文字要顯示在哪個圖層中：
35
範例實作
36
範例實作 請將事件改成 onmouseover, 表示當滑鼠經過時要執行我們剛才設定的動作。 設定好後, 就可以利用瀏覽器來預覽了。
37
滑鼠變換影像效果 相信你一定看過隨滑鼠指標變換圖片的效果, 也就是當滑鼠移到某張圖片上時, 就會變成另外一張圖片的效果。
例如原本可能是一個按鈕圖片, 當滑鼠移到圖片上時, 按鈕就變成按下的狀態。 在範例網站的左框架 (mainframe-left.htm) 中, 這幾張圖片就是套用此一效果, 你可以開啟瀏覽器來試試。
38
滑鼠變換影像效果
39
範例實作 請先準備好二張大小相同的圖片, 一張是滑鼠還沒移上去時的狀態, 另一張則是滑鼠移上去後的圖片；通常第二張圖片只會做顏色或是文字上的簡單變化, 當然你也可以換成完全不同的圖片, 或是 Gif 動畫檔。
40
範例實作
41
範例實作 開啟練習檔 ex14-04.htm, 在網頁中插入第一張圖片並選取起來。然後在表現方式工作窗格中, 按下插入鈕, 執行『交換圖像』命令。
42
範例實作
43
範例實作 在開啟的交換圖像交談窗中, 設定要變換的圖片。
44
範例實作 按下確定鈕, 即可在表現方式工作窗格中看到建立好的效果。
45
製作連結到指定網頁的下拉式選單 當網頁的選單層級較多時, 層層點選實在是浪費不少時間, 還好我們可以利用連結網頁的下拉選單來快速跳到想看的網頁。在範例網站上框架 (mainframe-top.htm) 的右側就放了一個網頁連結選單：
46
製作連結到指定網頁的下拉式選單
47
製作連結到指定網頁的下拉式選單
48
範例實作 請開啟練習檔ex14-05.htm, 然後按下表現方式工作窗格的插入鈕, 選擇『導向功能表』命令。 建立選單中的連結項目：
49
範例實作
50
範例實作
51
範例實作 請按新增鈕建立其他的連結項目。利用上移或是下移鈕可調整連結項目的位置：
52
範例實作 按下確定鈕：
53
開啟指定尺寸的瀏覽視窗 將超連結開啟在新視窗, 相信你在前面的章節中早就學會了, 現在我們要介紹的是如何開啟沒有工具列的瀏覽視窗, 並且指定視窗大小。 在編修技巧網頁 (tips.htm) 底下的各子頁面中都套用了這樣的效果：
54
開啟指定尺寸的瀏覽視窗
55
開啟指定尺寸的瀏覽視窗
56
範例實作 請開啟練習檔 ex14-06.htm, 選取圖片後, 按下表現方式工作窗格的插入鈕, 選擇『開啟瀏覽器視窗』命令：
57
範例實作
58
範例實作 設定要連結的網頁或檔案, 並勾選要在瀏覽視窗中出現哪些工具列：
59
範例實作 按下確定鈕即可在表現方式工作窗格中看到所設定的事件及動作, 預設的事件是 onclick, 也就是按一下滑鼠左鈕才執行動作, 你可以視需求更改成其他的事件。最後開啟瀏覽器就可以看到結果了。
60
替「開啟瀏覽器視窗」功能的圖片加上超連結小手
原本按下加上會開啟視窗的圖片, 並非設有超連結, 因此當滑鼠移到圖片上時, 不會出現超連結小手。為了提醒瀏覽者可以按下圖片來開啟新視窗, 我們可以替圖片加上沒有超連結目標的超連結, 讓滑鼠指標移至圖片上仍會出現小手。 在圖片上按右鈕執行『圖片內容』命令：
61
替「開啟瀏覽器視窗」功能的圖片加上超連結小手
62
網頁切換效果 如果已經厭倦在瀏覽網頁時單調的一頁換一頁, 不妨替你的網頁加入網頁切換效果, 讓所有到你網站瀏覽的人, 在切換網頁時都有驚喜感喲！ 網頁切換效果和一般在街上看到的霓虹招牌很類似, 會隨時不斷地以各種方式變換, 在 FrontPage 中提供了一些現成的特效供我們使用, 像是溶解特效、擴展、棋盤式特效、…等等。
63
網頁切換效果
64
範例實作 請開啟練習檔 ex14-07.htm , 然後執行『格式/網頁切換』命令：
65
範例實作
66
範例實作
67
範例實作
68
範例實作
69
切換網頁的時機
70
切換網頁的時機 進入網頁：進入此網頁時展現網頁切換效果。 離開網頁：離開此網頁時展現網頁切換效果。 進入網站：進入此網站時展現網頁切換效果。
離開網站：離開此網站時展現網頁切換效果。
71
範例實作 設定完之後, 你可以利用瀏覽器預覽一下網頁的切換效果。
這麼多的換頁效果該如何選擇, 你可以視網頁的內容及個人的喜好, 多試幾次, 選擇自己喜歡的樣式。
Similar presentations
