第十四講 網頁的動態效果

經常上網的朋友一定有過這樣的體驗，當開啟某個網頁時一張圖片會慢慢移入，或者滑鼠停到某個圖片上它會變成另一幅圖片，這就是DHTML，人見人愛的動態網頁。
　　動態網頁可讓訪問者和網頁產生互動，使網頁元素（文字、映像等）顯示簡單的動畫效果。
　　FrontPage2000就提供了製作動態網頁的方法。實現動態效果有三種方法：DHTML工具、組件和插入HTML語句，前二種方法操作都比較容易和直觀，你完全可以輕鬆地建立屬於自己的動態網頁。
　　在網際網路上還有一種所謂動態網站。這種網站在伺服器上有一個資料庫（即所謂ASP空間），採用ASP或PHP等網路語言編程，維護比較簡單，有許可權的訪問者都可以給網站增加內容。大型網站和論壇一般都是動態網站。
一、使用DHTML工具在網頁中實現動態效果
　　1、“DHTML效果”工具列
　　右擊FrontPage視窗工具列上任意位置，在出現的捷徑功能表中選擇“DHTML效果”，會在視窗中顯示所示的“DHTML效果”工具列。使用這個工具列，使用者可以根據自己的意願，通過設定實現單擊、雙擊、懸停滑鼠時的多種效果，當滑鼠移動到一段文字上時，文字發生變化，提醒瀏覽者注意。使文字和圖片實現動態效果。

　　工具列上各按鈕和列表框的說明：
　　1）“開啟”下拉式清單方塊中，選定觸發動態效果的事件。即瀏覽者的什麼操作可產生動態效果？這裡有四種事件可供選擇：
　　●單擊：當一個網站訪問者指到網頁元素和按左滑鼠按鍵時開始動畫。
　　●雙擊：當一個網站訪問者指到網頁元素和雙擊滑鼠按鍵時開始動畫。
　　●滑鼠移至上方：當一個網站訪問者指到和散布在網頁元素上時開始動畫。
　　●網頁載入：當網頁被載入在網站訪問者的瀏覽器時開始動畫。也就是當網頁第一次裝入的時侯發生的事件，它不需要使用者利用滑鼠去觸發它，而只需要訪問者利用瀏覽器開啟它的時侯就會產生預設的動態效果　　2）“應用”下拉式清單方塊中，選定動態效果的類型。不同的觸發事件，能產生的動態效果不同。例如，“網頁載入”可選擇八類動態效果；而“滑鼠移至上方”只有“格式”一種效果可選。
　　3）“選擇設定”下拉式清單方塊，用於選定具體的動態效果。例如，飛入動態效果有從右側、從底等。
　　4）“刪除效果”按鈕，單擊後，刪除動態效果。
　　5）“反白動態HTML效果”按鈕，按下時，設定了動態效果的網頁元素將反白。例如，出現淡藍背景色。
　　2、使用DHTML的基本步驟：
　　●首先在網頁視圖模式下要將使用DHTML的對象（比如文本、圖片）選定；
　　●然後在DHTML工具列的“開啟”的下拉式清單中選擇一種事件（文本和圖片所具有的事件是不同的）；　　●接下來在“應用”下拉式清單選擇一種效果類型；
　　●最後在“選擇設定”下拉式清單對該效果的實現進行設定。
　　【注意】只有前一個下拉式清單選擇好後，下一個下拉式清單方塊才有效（由虛變實）。
　　下面分別對文本和圖片的動態效果設定方法作進一步說明：
　　1）文本的動態效果
　　設定文字的動態HTML效果時，是以段落為單位的。
　　選中一段或幾段文字（若只設一段，只需將游標定在一段的任意位置即可），再單擊“DHTML效果”工具條中“開啟”框右邊的下拉按鈕，在下拉清單中單擊“滑鼠移至上方”，這時右邊的“應用”框由虛變實。然後，單擊“應用”框右邊的下拉按鈕，在“應用”下拉式清單選擇一種效果。這裡只有“格式”一種效果可選。這時右邊的“選擇設定”框由虛變實。單擊“選擇設定”框右邊的下拉按鈕，在下拉框中可單擊“選擇字型”或“選擇邊框”，就可開啟 “字型”對話方塊或“邊框與陰影”對話方塊。在對話方塊中，設定好需要的格式，單擊“確定”按鈕，就可完成設定。這時設定過的文欄位背景會變成所示的淡藍色（“反白動態HTML效果”按鈕已按下）。

　　在“預覽”中，背景顏色恢複正常：

　　但當滑鼠指標移動到設定過的文欄位，文字會變成設定的效果（本例中將設為蘭色、36磅的“華文彩雲”字型）：

　　【注意】若原來文字的字型、字型大小、顏色不是預設（普通）值，則動態效果的新設定不起作用。如此例中“版主的話”就不能將DHTML效果的字型設為其它格式。
　　用同樣的方法，如果將事件設定成“網頁載入”等，還可以實現“彈起”、“飛入”等許多有趣的效果。大家可以自己試試看!
　　2）圖片的動態效果
　　圖片的DHTML效果同樣可用“DHTML效果”工具條實現。對“滑鼠移至上方”事件，只有“交換圖片”一種效果。我們在FrontPage視窗開啟“老頑童網站”的首頁，選中“電腦世界”印章圖片。在“DHTML效果”對話方塊中，單擊“開啟”框右邊的下拉按鈕，在下拉框中單擊“滑鼠移至上方”，這時右邊的“應用”框由虛變實。在“應用”框中選擇“交換圖片”，然後單擊“選擇設定”框右邊的，在下拉框中選擇“選擇圖片…”，在“圖片”對話方塊中，單擊要加入的圖片（是尺寸放大的“電腦世界”印章圖片），再單擊“確定”按鈕，完成設定：

　　將首頁儲存後，單擊“檔案”、“在瀏覽器中預覽”，將滑鼠指標移動到“電腦世界”印章上時，印章將放大，圖片的解說文字同時也出現，下面的左右二圖分別顯示了滑鼠移至上方前後的情景：

　　【注意】設定圖片的DHTML效果時，前後二幅圖片的尺寸必須相同（至少要差不多）。否則會使後一幅圖片發生嚴重失真。雖然上例中的前一幅“電腦世界”印章圖片中的印章尺寸比後一幅小，但在印章周圍留了空，總的圖片尺寸還是一樣大。這在編輯視窗中“反白動態HTML效果”的淡藍色背景可以看出來。
　　3、DHTML效果的複製、刪除和禁用
　　您還可以通過使用“格式刷”從一個網頁元素複製動態效果到其它的元素，選擇已有動態效果的元素，單擊“格式刷”, 然後將它在您想應用動態效果的網頁元素上“刷”一下即可。
　　您甚至可以應用多重效果到大部分的網頁元素。例如：您可以製作當網頁被載入時讓文本從右方飛入的動態效果，然後添加當網站訪問者單擊文本時框線圍繞文本的動態效果。
　　如果想刪除某一個對象的DHTML效果，先選定該對象，然後單擊“DHTML效果”工具列上的“刪除效果”表徵圖即可。您也可以通過選擇網頁元素和單擊 CTRL＋空格鍵在網頁視圖模式中刪除動畫。
　　如果想禁用DHTML效果，點選“工具”菜單中的“網頁選項”，在開啟的對話方塊裡選擇“相容性”標籤，在“技術”欄中將“動態HTML”前的複選框裡的勾取消，這樣DHTM效果就被禁用了。
　　熟練和靈活的使用動態HTML將給您的首頁增添無窮魅力！
　　4、文本超連結的動態效果
　　為超連結設定動態效果，可以使網頁看起來更生動。當滑鼠指標移動到具有超連結的文本時，文本會發生變化，例如改變顏色、加粗、變大等。這樣可以引起瀏覽者的注意，達到提高瀏覽率的目的。
　　首先開啟首頁，單擊“格式”菜單，在下拉式功能表中選中“背景”命令，在“網頁屬性”對話方塊的“背景”選項卡（如所示）中。選中“啟用超連結翻轉效果”：

　　然後單擊“翻轉樣式”，開啟如所示“字型”對話方塊。

　　在“字型”對話方塊中，設定好翻轉效果中的字型、字型大小、顏色等（本例中將字型設為“華文彩雲”、字型設為加粗、大小為18pt、字型顏色為蘭色）。這樣當滑鼠移動到“版主的話”上時，它們將以設定的的樣子顯示。單擊“確定”按鈕返回“網頁屬性”對話方塊，再次單擊“確定”按鈕返回編輯視窗。
　　該設定對網頁上所有的超連結文本都有同樣的效果。
　　單擊“預覽”標籤，將滑鼠指標移動到任一超連結點上，超連結文本發生了變化，如所示。

　　這隻是一些簡單的動態效果，我們將在以後學習其他的網頁特效，那時，你的網頁會更加豐富多彩，更具有個人的氣息。
　　5、網頁過渡
　　當通過超連結從一個網頁切換到另一個網頁上時。可以通過網頁過渡以特殊效果實現原網頁的消失和新網頁的出現。
　　現在，我們來看一下如何設定網頁過渡，使單擊超連結離開網頁“indexl.htm'’時，網頁發生特殊的變化。
　　開啟一個網頁後，單擊“格式”菜單，在下拉式功能表中選擇“網頁過渡”，開啟如下 圖所示的“網頁過渡”對話方塊：

　　在對話方塊中，單擊“事件”框右端的下拉按鈕，在下拉框中單擊“進入網頁”。在“周期”框中輸入“5”，在“過渡效果”框中選擇“圓形放射”，單擊“確定”按鈕。這樣在瀏覽器中，由其它網頁進入此網頁時，將產生5秒鐘由圓心向外放射的過渡效果。
　　FrontPage 2000一共提供了26種網頁過渡效果供我們選擇，大家可以自行設定各種網頁過渡效果來體會一下。
二、使用組件在網頁中實現動態效果
　　組件是用Java、VB等進階語言開發的功能模組，可以補充HTML語言的不足。通過組件的特殊效果，可使網頁看起來更加生動、有趣。
　　FrontPage 2000提供多種網頁組件，使用方法和前面介紹的DHTML沒有什麼區別。但對於普通使用者來說，不是所有組件都能使用的，因為有些組件如“網站計數器”需要FrontPage伺服器擴充支援，而很多網際網路伺服器都不提供這種支援。因此，在網頁中插入組件時，必須考慮到伺服器是否支援。
　　下面先介紹在網頁中插入“字幕”、“橫幅廣告管理器”和“懸停按鈕”三種組件的方法。它們均為不需FrontPage伺服器擴充的支援。
　　1、活動字幕
　　滾動字幕可以實現一串文字從螢幕的左邊或右邊，依次不斷地迴圈顯示。就像電視上的節目變更通知一樣。值得注意的是，並不是所有的瀏覽器都支援它，在不支援此項功能的瀏覽器中，字幕將被顯示為普通文字。在微軟的瀏覽器IE上它的效果最好。
　　1）操作步驟：
　　（2）在FrontPage視窗中開啟網頁，將游標移至需插入字幕處。單擊“插入” 菜單，在下拉式功能表中選擇“組件”命令，在其旁邊的子功能表中選擇“字幕”，開啟“字幕屬性”對話方塊：

　　（2）在“字幕屬性”對話方塊上，“文本”框中鍵入需在螢幕上滾動的文字，如，“歡迎光臨！”，並設定其它屬性項後，單擊“確定”，就可完成滾動字幕的插入：

　　這時，滾動字幕是靜止的，單擊[檔案] 功能表下的“在瀏覽器中預覽”命令，將網頁在瀏覽器中開啟，可以看到文字從螢幕右端滾動而出的情景。
　　2）字幕屬性設定
　　在插入字幕時，使用者可在“字幕屬性”對話方塊中對字幕的滾動方向、速度、表現方式、字型、字型大小等作出多種設定，設定在“字幕屬性”對話方塊上進行。在插入完成後，右擊字幕後在彈出的捷徑功能表選擇“字幕屬性”命令也可出現“字幕屬性”對話方塊。設定方法是：
　　（1）“方向”選項區
　　選中“左”單選框，文字自右向左滾動；選中“右”單選框，滾動方向相反。
　　（2）“速度”選項區
　　“延遲”框中設定前一次滾動結束至後一次滾動開始之間隔，單位為毫秒；
　　“數量”框中設定文字滾動時，向前移動的“步長”，單位為像素。
　　（3）“表現方式”選項區
　　設定滾動的方式。選中“捲軸”，文字以“方向”、“速度”選項區中選定的方向、速度迴圈滾動；選中“投影片”，文字前端滾動到螢幕邊緣時，便消失；選中“交替”，文字在螢幕上左右擺（滾）動。
　　（4）“文本對齊”選項區
　　設定滾動文字在字幕區中的位置。
　　（5）“大小”選項區
　　設定字幕區的寬度和高度。度量單位是“像素”或“百分比（相對螢幕）”。一般宜用“百分比”。字幕的大小也可以直接用滑鼠拖動字幕四周（角）的操作點方法改變。
　　（6）“重複”選項區
　　設定文字滾動的次數。選中“連續”複選框，滾動將不限次地進行；取消該複選框，可在下邊的數值框中設定滾動的次數。
　　（7）“背景顏色”
　　設定字幕的背景顏色。一般均選用“自動”，即選用網頁的背景。
　　（8）若要修改滾動文字的字型、字形、字型大小等屬性，可單擊“樣式”開啟“修改樣式”對話方塊，在對話方塊中單擊“格式”按鈕，並在下拉式功能表中選擇“字型”命令(左），就可在“字型”對話方塊中(右）進行具體修改。

　　2、日期時間戳記
　　日期時間戳記是在網頁中插入的一個時間標記，它顯示的不是當前的日期和時間，而是最後一次編輯網頁的日期和時間。瀏覽者可以根據日期時間戳記確定網頁的更新時間。
　　日期時間戳記一般可放在在網頁的最上方或下方，並可在其前面或後面加上“更新時間：”、“更新”等字樣。插入方法如下：
　　單擊“插入”菜單，選擇“日期和時間”命令，開啟“日期時間屬性”對話方塊，如所示。

　　單擊日期格式和時間格式框右邊的，選擇日期格式和時間格式，單擊“確定”按鈕，完成設定。本例在其後面加上“更新”兩字最後結果如下：

　　3、懸停按鈕
　　懸停按鈕效果和文字圖片的DHTML效果差不多，但更豐富多采。懸停按鈕可以達到這樣一種效果：當我們把滑鼠放在按鈕上時，按鈕的顏色會發生非常漂亮的漸層變化，或凸起、凹陷效果，甚至還有聲音和動畫效果。當然和其他按鈕一樣，懸停按鈕一般都是超級連結的源。單擊它會開啟一個連結。
　　下面我們來看一看插入和設定懸停按鈕的方法：
　　在FrontPage視窗中開啟網頁，將游標移至需插入懸停按鈕處，然後單擊“插入”菜單，在“插入”菜單中選擇“組件”，接著單擊“組件”菜單中的“懸停按鈕…”。出現所示的“懸停按鈕屬性”對話方塊，在“懸停按鈕屬性”對話方塊中輸入按鈕文本，設定好按鈕顏色、效果顏色等屬性，單擊“確定”按鈕就可完成。

　　“懸停按鈕屬性”對話方塊的各選項說明：
　　1）“按鈕文本”框：輸入按鈕的標籤文字。若需改變文字屬性，可單擊“字型”按鈕，然後在“字型”對話方塊上進行設定。
　　2）“連結到”框：設定以懸停按鈕為超級連結源的目標網頁或其它檔案（URL），可單擊“瀏覽”按鈕，然後在“選擇懸停按鈕超連結”對話方塊上選擇連結化物件。
　　【注意】懸停按鈕的超連結設定不能用常規方法實現，只能在這裡設定。如果按鈕連結的是電子郵件信箱，由於沒有“電子郵件超連結”按鈕，所以要麻煩一些。在“懸停按鈕屬性”對話方塊中的“連結到”框中輸入mailto:電子郵件地址。注意在mailto:與電子郵件地址之間不能有空格
　　3）“按鈕顏色”下拉式清單方塊：選定按鈕顏色。
　　【注意】若在“自訂”屬性中，為按鈕選擇了圖片，則本框設定無效。
　　4）“背景顏色”下拉式清單方塊：選定按鈕的背景顏色。通常被按鈕顏色遮蔽。
　　5）“效果”下拉式列表框：選定滑鼠指標移動到該按鈕上時的顯示效果。共有7個選項：
　　（1）“填充顏色”：從“按鈕顏色”變為“效果顏色”；
　　（2）“顏色對比”：從“按鈕顏色”變為“效果顏色”與“按鈕顏色”的中間色；
　　（3）“發光”：按鈕中間部位變成“效果顏色”，並向四周逐漸過渡到“按鈕顏色”；
　　（4）“反色發光”：按鈕四周變成“效果顏色”，並向中心逐漸過渡到“按鈕顏色”（與光暈效果相反）；
　　（5）“微微發光”：按鈕中間地區的顏色變淡；
　　（6）“凸出”：按鈕上的文字向右上方移動一個像素（不易看出來）；
　　（7）“凹進”：按鈕文字向左下方移動一個像素（不易看出來）。
　　簡言之，懸停效果主要是按鈕上的顏色變化。且決定於按鈕顏色和效果顏色。
　　6）“效果顏色”下拉式清單方塊：選定效果顏色。
　　7）“寬度”和“高度”文字框：設定懸停按鈕的寬度與高度（單位是像素）。懸停按鈕的寬度與高度也可直接用滑鼠拖動懸停按鈕四周的控制點來改變。
　　8）“自訂”按鈕：用於設定懸停按鈕的聲音和圖片效果。單擊後，開啟所示的“自訂”對話方塊，設定聲音和圖片。

　　“播放聲音”：可通過“瀏覽”選擇設定“單擊（滑鼠）時”和“懸停時”的音效檔。
　　“自訂圖片”：可通過“瀏覽”選擇設定按鈕圖片和懸停圖片。若未設定按鈕圖片，則懸停時，可將文字的按鈕換成一張圖片，但圖片的大小最好與按鈕的大小差不多。
　　下面二張圖是將“經氣療法”網頁的目錄部分改用懸停按鈕在瀏覽器中的情況，是滑鼠移至上方前的情景。是滑鼠移至上方在“版主的話”時的變化。

　　5、橫幅廣告管理器
　　在很多網頁上，在網頁的上部有一條橫條地區用於播放的是廣告圖片，稱為“橫幅廣告”。橫幅廣告類似投影片播放，它將多幅圖片以一定次序和時間間隔迴圈地在“橫幅視窗”中顯示。FrontPage 2000的“橫幅廣告管理器就是用於實現此目的的一種組件，可以用它實現動畫效果。具體操作方法：
　　1）先準備好兩個或兩個以上大小相等的圖片檔案，本例準備的是下面二幅：

　　　

　　2）在FrontPage 2000中開啟需要實現動畫效果的網頁，將游標定位於適宜位置。然後單擊“插入” 菜單下的“組件”命令，在“組件”的二級菜單裡選擇“橫幅廣告管理器”，出現如所示的“橫幅廣告管理器屬性”對話方塊。

　　3）在對話方塊中單擊“顯示圖片”框左側的“添加”按鈕，在彈出的“添加橫幅廣告圖片”對話方塊中按直接選取你準備的圖片檔案，再單擊“確定”按鈕可添加一幅圖片。有幾幅圖片就重複幾次。

　　4）再設定好對話方塊中的其它參數，單擊“確定”按鈕，即可得到所示的橫幅廣告。其中顯示的圖片只是第一幅，但在瀏覽狀態下會依次顯示後面的圖片。

　　“橫幅廣告管理器屬性”對話方塊中的參數設定：
　　1）“寬度”與“高度”文字框
　　即確定橫幅廣告的大小。若廣告圖片的高度或寬度大於上述設定值，則圖片被截去一部分。若廣告圖片的高度或寬度小於上述設定值，則周圍出現一個灰色的邊框。橫幅廣告的大小也可以直接用滑鼠拖動字幕四周（角）的操作點方法改變。
　　2）“過渡效果”下拉式清單方塊
　　選定切換圖片時的過渡效果。共有6個選項：①“無”，無過渡效果；②“水平遮蔽”，水平百頁窗過渡效果；③“垂直遮蔽”，垂直百頁窗過渡效果；④“分解”，下一幅圖片，從當前圖片上擴散出現的效果；⑤“盒狀收縮”，從四周向中心匯合的過渡效果；⑥“盒狀放射”，從中心向四周擴散的過渡效果。
　　3）“每幅圖片顯示（秒）”文字框：設定每幅圖片的顯示時間。
　　4）“連結到”框：設定以橫幅廣告為超級連結源的目標網頁或其它檔案（URL）。
　　5）“顯示圖片”框
　　利用左側的“添加”、“刪除”、“上移”和“下移”按鈕可添加、刪除或調整圖片的顯示順序。
　　6、網站計數器
　　計數器是一項非常有趣的使用中的元素，它能夠自動累計參觀首頁的人數，讓網站主人有一種成就感。計數器幾乎是任何一個個人首頁必備的。
　　Frontpage雖然也提供網站計數器，有很多教材介紹插入網站計數器的方法。但因為多數伺服器都不支援它，所以我們這裡就不介紹了。不過許多提供首頁空間的伺服器都提供免費的計數器，計數器都大同小異。如新竹網站可以直接在“系統管理”頁選擇採用計數器。也有一些網站專門提供計數器服務，如“太極鏈”（http://www.textclick.com/）就是這樣一個網站。下面我們簡單介紹一下在“太極鏈”中申請免費計數器的方法：
　　在IE開啟“太極鏈”網站，如所示：

　　單擊“流量統計”下拉式功能表中的“太極統計（免費）” 選項，進入“太極鏈網站統計”網頁：

　　在網頁的下部單擊“新使用者註冊”，進入新使用者註冊網頁。按要求逐項天好設定檔，就會出現如下網頁：

　　用滑鼠拖動的方法選中這段代碼，然後滑鼠右擊該代碼塊，在捷徑功能表中選擇“複製”命令。再在FrontPage視窗開啟首頁，將游標定在要插入計數器的儲存格位置，單擊視窗下面的“HTML”按鈕。使視窗變為“HTML”視圖。將游標移動到插入位置，單擊常用工具列上的“粘貼”按鈕，就可將代碼插入：

　　在“普通”視圖下看不到計數器效果，但用瀏覽器預覽就可看到太極計數表徵圖：

　　按一下滑鼠該表徵圖，就會連結到太極網站你所註冊的計數器資料庫，把對你的網站的訪問統計顯示出來：

　　從可知，統計資料很詳細，若喜歡，你甚至可以查看一下有那些地區的網友訪問過你的網站。
三、插入HTML語句實現特殊效果
　　雖然FrontPage可以實現許多特殊效果，但終歸簡單了一些。我們可以通過插入一些HTML語句來實現特殊效果。
　　在網上有很多現成的能顯示各種特殊效果的程式段，如“走馬燈”、彈出廣告等等。這些程式段都是用JavaScript等語言編的，我們只要把它們複製過來就可以了。
　　下面的語句用於在網頁上顯示當前的時間和星期。這樣，瀏覽者一進入網頁，就知道當前的時間了。
<script language=JavaScript>
　today=new Date();
　function initArray(){
　　this.length=initArray.arguments.length;
　　for(var i=0;i<this.length;i++)
　　this[i+1]=initArray.arguments[i] }
　var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
　tyear =today.getYear()<100?1900+today.getYear():today.getYear();
　tmonth=today.getMonth()+1;
　tday=today.getDate();
　tweek=tyear+"年"+tmonth+"月"+tday+"日 "+d[today.getDay()+1];
　document.write(tweek);
</script>
　　在網頁的HTML視圖的適當位置插入這段程式。在瀏覽器中預覽網頁，就可以在網頁中出現了當前的時間和星期。