視覺效果的加強課件

1、第 8 章視覺效果的加強著作權所有 旗標出版股份有限公司第 8 章視覺效果的加強著作權所有 旗標出版股份有限公司本章提要自動更新網(wǎng)頁內(nèi)容彩色的網(wǎng)頁背景圖案透明圖和交錯圖Client Side 影像地圖網(wǎng)頁物件的提示說明本章提要自動更新網(wǎng)頁內(nèi)容自動更新網(wǎng)頁內(nèi)容自動更新網(wǎng)頁是說使用者在載入該網(wǎng)頁後, 並未執(zhí)行任何動作, 瀏覽器卻會自動重複載入同一網(wǎng)頁或另一網(wǎng)頁的內(nèi)容。播報即時新聞或股市即時行情的站上常可看到這種效果。自動更新網(wǎng)頁內(nèi)容自動更新網(wǎng)頁是說使用者在載入該網(wǎng)頁後, 並未自動更新網(wǎng)頁內(nèi)容Server push 及 Client pull 標籤自動切換網(wǎng)頁IE 的網(wǎng)頁切換特效自動更新網(wǎng)頁內(nèi)容Se

2、rver push 及 Client pServer push 及 Client pullServer push 就是由伺服器端來控制網(wǎng)頁的更新或變換, 這種作法是伺服器在送出資料後, 瀏覽器與伺服器的連線狀態(tài)不會中止, 而當伺服器覺得有需要時, 會送出新的網(wǎng)頁內(nèi)容讓瀏覽器顯示；如此一直循環(huán)下去。Server push 及 Client pullServeServer push 及 Client pullClient pull 是瀏覽器在所收到的網(wǎng)頁內(nèi)容中, 就指示了有關自動更新的做法, 例如一分鐘後自動重讀 (Reload) 網(wǎng)頁, 瀏覽器就依其指示每分鐘都會到網(wǎng)站伺服器上將最新的內(nèi)容讀回來

3、。Server push 及 Client pullClienServer push 及 Client pullServer push 的優(yōu)點是, 本地端與伺服器端的連線狀態(tài)一直保持著, 所以要傳新的資料過來時會比較有效率, 但相對地也耗掉較多的伺服器資源。Client pull 只要使用 標籤即可做到, 較 Server push 要自行寫程式放在伺服器上容易。Server push 及 Client pullServe 標籤主要用來定義 HTML 標籤未提供, 且與網(wǎng)頁內(nèi)容相關的資訊 (meta-information)。其有關網(wǎng)頁更新的屬性包括：HTTP-EQUIV, 設為 refres

4、h (大小寫均可), 意思是重新載入網(wǎng)頁。CONTENT, 設定幾秒後要重讀網(wǎng)頁, 單位為秒。 標籤主要用來定義 HTML 標籤未提供, 且與 標籤 標籤自動切換網(wǎng)頁若要自動顯示另一個網(wǎng)頁內(nèi)容, 則需在 CONTENT 屬性中設定, 其格式如下：自動切換網(wǎng)頁若要自動顯示另一個網(wǎng)頁內(nèi)容, 則需在 CONTE自動切換網(wǎng)頁範例自動切換網(wǎng)頁範例IE 的網(wǎng)頁切換特效IE 還可以在 標籤加上一個網(wǎng)頁切換的特效。也就是設定在進入或離開網(wǎng)頁時, 以特殊的效果慢慢秀出正要顯示的網(wǎng)頁。其所需的語法如下：IE 的網(wǎng)頁切換特效IE 還可以在 標籤加上一IE 的網(wǎng)頁切換特效事件種類可分為：Enter (進入此網(wǎng)頁時使用

5、此特效)Exit (離開此頁時使用此特效)Site-Enter (進入網(wǎng)站時使用此特效)Site-Exit (離開網(wǎng)站時使用此特效)Duration 則是設定效果的持續(xù)時間, 最大值為 30 秒。效果代碼則有 24 種可使用。IE 的網(wǎng)頁切換特效事件種類可分為：IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效IE 的網(wǎng)頁切換特效彩色的網(wǎng)頁色彩的指定方式設定背景顏色設定網(wǎng)頁文字與連結的顏色設定個別的文字顏色其它標籤的顏色設定彩色的網(wǎng)頁色彩的指定方式色彩的指定方式色彩有紅 (Red)、綠 (Green)、藍

6、 (Blue) 三原色, 電腦螢幕也是用這三原色的電子槍組合出所謂的各種顏色。在 HTML 中, 指定顏色的方式有 2 種：使用 RGB 16 進位表示法使用顏色名稱色彩的指定方式色彩有紅 (Red)、綠 (Green)、藍 使用 RGB 16進位表示法如同螢幕的作法一樣, 指定顏色要如何利用紅 (Red)、綠 (Green)、藍 (Blue) 三原色來組成, 其格式為：從 00 到 ff, 以十進位來看即 0 到 255, 例如要用最亮的紅色時, 就指定 #ff0000。使用 RGB 16進位表示法如同螢幕的作法一樣, 指定顏色要基本顏色的表示法基本顏色的表示法遞色的困擾以 #RRGGBB

7、的方式可指定多達 1600 多萬色, 但所設的顏色在 256 色、65536 色等顯示模式下, 將會出現(xiàn)遞色 (dither) 的情形, 也就是以兩個系統(tǒng)調(diào)色盤中的顏色, 模擬出所設定的顏色, 此時網(wǎng)頁的顯示效果可能會打折扣。遞色的困擾以 #RRGGBB 的方式可指定多達 1600 多遞色的困擾有人提出所謂的安全色, 也就是只使用六個數(shù)值 (00、33、66、99、cc、ff) 來指定 RGB 三個顏色, 因此最多只會有 216 種顏色, 使得所指定的顏色都能容於 256 色顯示模式下的調(diào)色盤, 網(wǎng)頁顯示時才不會出現(xiàn)變色的不良效果。遞色的困擾有人提出所謂的安全色, 也就是只使用六個數(shù)值 (0使

8、用顏色名稱不喜歡用 16 進位的數(shù)字來指定顏色, 也可用顏色名稱來指定：使用顏色名稱不喜歡用 16 進位的數(shù)字來指定顏色, 也可用顏設定背景顏色使用 標籤中的 BGCOLOR 屬性來設定：例如要使用橙色做為背景：設定背景顏色使用 標籤中的 BGCOLOR 屬設定網(wǎng)頁文字與連結的顏色TEXT=#rrggbb：設定網(wǎng)頁中文字的顏色。LINK=#rrggbb：設定超連結文字的顏色。VLINK=#rrggbb：設定已連結過的超連結文字的顏色。ALINK=#rrggbb：當滑鼠按下時, 超連結文字的顏色。設定網(wǎng)頁文字與連結的顏色TEXT=#rrggbb：設定網(wǎng)頁中設定網(wǎng)頁文字與連結的顏色設定網(wǎng)頁文字與連

9、結的顏色設定網(wǎng)頁文字與連結的顏色設定網(wǎng)頁文字與連結的顏色設定個別的文字顏色想要在不同段落中使用不同顏色的文字, 或是在同一段中單獨一行、一句要設定成不同的顏色, 可用 標籤的 COLOR 屬性來設定：設定個別的文字顏色想要在不同段落中使用不同顏色的文字, 或是設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色設定個別的文字顏色其它標籤的顏色設定標籤屬性說明表格 BGCOLORBORDERCOLOR設定背景顏色設定表格邊框顏色跑馬燈 BGCOLOR設定背景顏色分隔線 COLOR設定分隔線顏色其它標籤的顏色設定標籤屬性說明

10、表格 TABLE運用顏色的範例運用顏色的範例運用顏色的範例運用顏色的範例運用顏色的範例運用顏色的範例背景圖案在 標籤中的 BACKGROUND 屬性可設定背景圖案：背景圖案在 標籤中的 BACKGROUND 屬背景圖案背景圖案使用材質(zhì)做為背景雖然用圖片當背景可做出很炫的效果, 但也有 2 個不好控制的地方：圖案比視窗小時, 就會有貼磁磚的效果, 而且使用者可自行調(diào)整視窗大小, 貼圖的情形可能與設計的版面配置不同, 效果也不同。使用較花俏的圖案時, 圖案各部分的顏色不容易和文件中的文字搭配。使用材質(zhì)做為背景雖然用圖片當背景可做出很炫的效果, 但也有 使用材質(zhì)做為背景建議使用內(nèi)容、色調(diào)較單純的圖形

11、, 也就是所謂的材質(zhì)。材質(zhì)圖案的檔案大小通常都很小, 可節(jié)省傳檔時間, 由於材質(zhì)圖案一塊塊貼上時, 看起來就像一大張完整的圖案, 也較能表現(xiàn)背景效果。使用材質(zhì)做為背景建議使用內(nèi)容、色調(diào)較單純的圖形, 也就是所謂使用材質(zhì)做為背景將上例改成使用網(wǎng)景提供的背景圖案, 看起來又別有一種風味：使用材質(zhì)做為背景將上例改成使用網(wǎng)景提供的背景圖案, 看起來又使用材質(zhì)做為背景使用材質(zhì)做為背景IE 的固定背景IE 還支援另一個屬性 BGPROPERTIES, 可將背景圖案設成固定在瀏覽器視窗的中央, 不會隨使用者捲動視窗內(nèi)容而跟著移動, 其用法為：IE 的固定背景IE 還支援另一個屬性 BGPROPERTI透明圖

12、和交錯圖設定透明圖製作交錯圖透明圖和交錯圖設定透明圖設定透明圖普通圖檔的顯示情形透明圖檔的顯示情形設定透明圖普通圖檔的顯示情形透明圖檔的顯示情形設定透明圖我們當然可以把圖形的背景顏色設成與網(wǎng)頁背景色相同, 但若又想換網(wǎng)頁的背景顏色, 豈不是又要更改圖片背景顏色? 如果網(wǎng)頁背景是花紋或另一張圖片, 則將該圖片設定成透明的背景是比較方便的做法。設定透明圖我們當然可以把圖形的背景顏色設成與網(wǎng)頁背景色相同,設定透明圖透明圖也是 GIF89a 的規(guī)格, 所以仍需使用支援此格式的影像、繪圖工具才行。在此以友立資訊的 PhotoImpact 為例。啟動 PhotoImpact, 開啟要轉存於 GIF 透明圖

13、的圖檔, 然後執(zhí)行檔案 / 另存新檔命令：設定透明圖透明圖也是 GIF89a 的規(guī)格, 所以仍需使用支設定透明圖1 按選擇存成 GIF 格式2 輸入檔名3 按儲存鈕設定透明圖1 按選擇存成 GIF 格式2 輸入檔名3 按儲存設定透明圖5 切換到此頁次4 選此項表示要指定透明色彩設定透明圖5 切換到此頁次4 選此項表示要指定透明色彩設定透明圖預覽圖片8 在想設成透明的顏色上按一下6 選此項7 按此鈕設定透明圖預覽圖片8 在想設成透明的顏色上按一下6 選此項7設定透明圖9 按此鈕存檔透明的區(qū)域會以網(wǎng)格顯示設定透明圖9 按此鈕存檔透明的區(qū)域會以網(wǎng)格顯示設定透明圖若想將多個顏色設為透明：按此鈕可選多個

14、顏色設定透明圖若想將多個顏色設為透明：按此鈕可選多個顏色製作交錯圖普通圖傳到一半, 整張圖尚未全部顯現(xiàn)：製作交錯圖普通圖傳到一半, 整張圖尚未全部顯現(xiàn)：製作交錯圖交錯圖傳到一半, 整張圖看起來是一條一條的：製作交錯圖交錯圖傳到一半, 整張圖看起來是一條一條的：製作交錯圖交錯圖是將圖片以另一種特殊的方式存檔, 使得圖檔在只傳輸了 1/5、1/4 時, 就顯示出整體、但不甚清晰的影像。使用交錯圖時, 檔案大小會略增。製作交錯圖交錯圖是將圖片以另一種特殊的方式存檔, 使得圖檔在製作交錯圖交錯圖在一般的繪圖軟體中都有支援, 而且比製作透明圖方便不少, 只需在存檔時加以設定即可, 再以 PhotoImp

15、act 為例。開啟圖檔後, 執(zhí)行檔案 / 另存新檔命令。選擇 GIF 或 PNG 格式, 再按選項鈕：製作交錯圖交錯圖在一般的繪圖軟體中都有支援, 而且比製作透明製作交錯圖GIF 格式製作交錯圖GIF 格式製作交錯圖PNG 格式製作交錯圖PNG 格式Client Side 影像地圖影像地圖的種類實作 Client Side 影像地圖Client Side 影像地圖影像地圖的種類影像地圖的種類Server Side 影像地圖, 當使用者在影像地圖上按下滑鼠鈕時, 瀏覽器將滑鼠的座標值傳到 Server, 由 Server 根據(jù)原先設定好的 Map 檔來決定要連結到哪一個 URL, 然後將這個 U

16、RL 傳回瀏覽器, 瀏覽器再將該對應的網(wǎng)頁載入。隨著 Server 的不同, 又分為 NCSA 與 CERN 兩種。影像地圖的種類Server Side 影像地圖, 當使用者在影像地圖的種類Client Side 影像地圖, 是事先在網(wǎng)頁中指定在哪一部分按滑鼠, 就連上哪一個 URL, 所以當按下滑鼠時, 瀏覽器就能決定要連到哪一個 URL, 與 Server 完全無關。影像地圖的種類Client Side 影像地圖, 是事先在網(wǎng)實作 Client Side 影像地圖製作對照表設定圖片為影像地圖實例實作 Client Side 影像地圖製作對照表製作對照表滑鼠在圖片上的座標位置與 URL 的對

17、照表是用 標籤來定義, 這個對照表可與圖片放在同一個檔案中, 或是放在另一個檔案。在這個標籤中, 我們要先用 NAME 屬性為這個對照表設一個名稱, 其用法如下：製作對照表滑鼠在圖片上的座標位置與 URL 的對照表是用 製作對照表接下來是用 標籤定義圖片中每塊區(qū)域的位置、大小、及所要連結的 URL。其格式如下：製作對照表接下來是用 標籤定義圖片中每塊區(qū)域的 標籤的屬性第一個屬性是 SHAPE, 用來設定此區(qū)域的形狀：rect (或 rectangle) 矩形circ (或 circle) 圓形poly (或 polygon) 多邊形第二個屬性是 COORDS, 設定該區(qū)域的位置及大小： 標籤的

18、屬性第一個屬性是 SHAPE, 用來設定 標籤的屬性 標籤的屬性 標籤的屬性第三個屬性是 HREF, 用來指定該區(qū)域所要連結的 URL。例如：若希望某個區(qū)域在按下時不會連到任何地方, 則可寫成： 標籤的屬性第三個屬性是 HREF, 用來指定該circ 與 poly 的座標描述法SHAPE=circ 時 COORDS 的描述需要一組圓心的座標與半徑的值, 例如：SHAPE=poly 時則需依序填入多邊形每個頂點的座標組, 且至少要填入 3 個點：circ 與 poly 的座標描述法SHAPE=circ 時設定圖片為影像地圖在 標籤中加入一個 USEMAP 屬性, 指定對照表的位置就算完成：設定圖片為影像地圖在 標籤中加入一個 USEMA外部 MAP 檔若影像地圖很大、很複雜, 根據(jù) HTML 規(guī)格指出, 可考慮將 MAP 的對照表放在另一個 HTML 檔, 在 標籤中參考這個外部檔案：外部 MAP 檔若影像地圖很大、很複雜, 根據(jù) HTML 規(guī)實例這個例子用一個簡單、分成四部分的矩形