Download presentation
Presentation is loading. Please wait.
1
第 8 章 視覺效果的加強 著作權所有 © 旗標出版股份有限公司
2
本章提要 自動更新網頁內容 彩色的網頁 背景圖案 透明圖和交錯圖 Client Side 影像地圖 網頁物件的提示說明
3
自動更新網頁內容 自動更新網頁是說使用者在載入該網頁後, 並未執行任何動作, 瀏覽器卻會自動重複載入同一網頁或另一網頁的內容。
自動更新網頁是說使用者在載入該網頁後, 並未執行任何動作, 瀏覽器卻會自動重複載入同一網頁或另一網頁的內容。 播報即時新聞或股市即時行情的站上常可看到這種效果。
4
自動更新網頁內容 Server push 及 Client pull <META> 標籤 自動切換網頁 IE 的網頁切換特效
5
Server push 及 Client pull
6
Server push 及 Client pull
Client pull 是瀏覽器在所收到的網頁內容中, 就指示了有關自動更新的做法, 例如一分鐘後自動重讀 (Reload) 網頁, 瀏覽器就依其指示每分鐘都會到網站伺服器上將最新的內容讀回來。
7
Server push 及 Client pull
Client pull 只要使用 <META> 標籤即可做到, 較 Server push 要自行寫程式放在伺服器上容易。
8
<META> 標籤 主要用來定義 HTML 標籤未提供, 且與網頁內容相關的資訊 (meta-information)。
其有關網頁更新的屬性包括： HTTP-EQUIV, 設為 refresh (大小寫均可), 意思是重新載入網頁。 CONTENT, 設定幾秒後要重讀網頁, 單位為秒。
9
<META> 標籤
10
自動切換網頁 若要自動顯示另一個網頁內容, 則需在 CONTENT 屬性中設定, 其格式如下：
11
自動切換網頁範例
12
IE 的網頁切換特效 IE 還可以在 <META> 標籤加上一個網頁切換的特效。也就是設定在進入或離開網頁時, 以特殊的效果慢慢秀出正要顯示的網頁。其所需的語法如下：
13
IE 的網頁切換特效 事件種類可分為： Duration 則是設定效果的持續時間, 最大值為 30 秒。效果代碼則有 24 種可使用。
Page-Enter (進入此網頁時使用此特效) Page-Exit (離開此頁時使用此特效) Site-Enter (進入網站時使用此特效) Site-Exit (離開網站時使用此特效) Duration 則是設定效果的持續時間, 最大值為 30 秒。效果代碼則有 24 種可使用。
14
IE 的網頁切換特效
15
IE 的網頁切換特效
16
IE 的網頁切換特效
17
IE 的網頁切換特效
18
彩色的網頁 色彩的指定方式 設定背景顏色 設定網頁文字與連結的顏色 設定個別的文字顏色 其它標籤的顏色設定
19
色彩的指定方式 色彩有紅 (Red)、綠 (Green)、藍 (Blue) 三原色, 電腦螢幕也是用這三原色的電子槍組合出所謂的各種顏色。
在 HTML 中, 指定顏色的方式有 2 種： 使用 RGB 16 進位表示法 使用顏色名稱
20
使用 RGB 16進位表示法 如同螢幕的作法一樣, 指定顏色要如何利用紅 (Red)、綠 (Green)、藍 (Blue) 三原色來組成, 其格式為： 從 00 到 ff, 以十進位來看即 0 到 255, 例如要用最亮的紅色時, 就指定 #ff0000。
21
基本顏色的表示法
22
遞色的困擾 以 #RRGGBB 的方式可指定多達 1600 多萬色, 但所設的顏色在 256 色、65536 色等顯示模式下, 將會出現遞色 (dither) 的情形, 也就是以兩個系統調色盤中的顏色, 模擬出所設定的顏色, 此時網頁的顯示效果可能會打折扣。
23
遞色的困擾 有人提出所謂的安全色, 也就是只使用六個數值 (00、33、66、99、cc、ff) 來指定 RGB 三個顏色, 因此最多只會有 216 種顏色, 使得所指定的顏色都能容於 256 色顯示模式下的調色盤, 網頁顯示時才不會出現變色的不良效果。
24
使用顏色名稱 不喜歡用 16 進位的數字來指定顏色, 也可用顏色名稱來指定：
25
設定背景顏色 使用 <BODY> 標籤中的 BGCOLOR 屬性來設定： 例如要使用橙色做為背景：
26
設定網頁文字與連結的顏色 TEXT=#rrggbb：設定網頁中文字的顏色。 LINK=#rrggbb：設定超連結文字的顏色。
VLINK=#rrggbb：設定已連結過的超連結文字的顏色。 ALINK=#rrggbb：當滑鼠按下時, 超連結文字的顏色。
27
設定網頁文字與連結的顏色
28
設定網頁文字與連結的顏色
29
設定個別的文字顏色 想要在不同段落中使用不同顏色的文字, 或是在同一段中單獨一行、一句要設定成不同的顏色, 可用 <FONT> 標籤的 COLOR 屬性來設定：
30
設定個別的文字顏色
31
設定個別的文字顏色
32
設定個別的文字顏色
33
設定個別的文字顏色
34
表格 <TABLE> <TR> <TH> <TD>
其它標籤的顏色設定 標 籤 屬 性 說 明 表格 <TABLE> <TR> <TH> <TD> BGCOLOR BORDERCOLOR 設定背景顏色 設定表格邊框顏色 跑馬燈 <MARQUEE> BGCOLOR 設定背景顏色 分隔線 <HR> COLOR 設定分隔線顏色
35
運用顏色的範例
36
運用顏色的範例
37
運用顏色的範例
38
背景圖案 在 <BODY> 標籤中的 BACKGROUND 屬性可設定背景圖案：
39
背景圖案
40
使用材質做為背景 雖然用圖片當背景可做出很炫的效果, 但也有 2 個不好控制的地方：
圖案比視窗小時, 就會有貼磁磚的效果, 而且使用者可自行調整視窗大小, 貼圖的情形可能與設計的版面配置不同, 效果也不同。 使用較花俏的圖案時, 圖案各部分的顏色不容易和文件中的文字搭配。
41
使用材質做為背景 建議使用內容、色調較單純的圖形, 也就是所謂的材質。材質圖案的檔案大小通常都很小, 可節省傳檔時間, 由於材質圖案一塊塊貼上時, 看起來就像一大張完整的圖案, 也較能表現背景效果。
42
使用材質做為背景 將上例改成使用網景提供的背景圖案, 看起來又別有一種風味：
43
使用材質做為背景
44
IE 的固定背景 IE 還支援另一個屬性 BGPROPERTIES, 可將背景圖案設成固定在瀏覽器視窗的中央, 不會隨使用者捲動視窗內容而跟著移動, 其用法為：
45
透明圖和交錯圖 設定透明圖 製作交錯圖
46
設定透明圖 普通圖檔的顯示情形 透明圖檔的顯示情形
47
設定透明圖 我們當然可以把圖形的背景顏色設成與網頁背景色相同, 但若又想換網頁的背景顏色, 豈不是又要更改圖片背景顏色?
如果網頁背景是花紋或另一張圖片, 則將該圖片設定成透明的背景是比較方便的做法。
48
設定透明圖 透明圖也是 GIF89a 的規格, 所以仍需使用支援此格式的影像、繪圖工具才行。在此以友立資訊的 PhotoImpact 為例。
啟動 PhotoImpact, 開啟要轉存於 GIF 透明圖的圖檔, 然後執行檔案 / 另存新檔命令：
49
設定透明圖 1 按選擇存成 GIF 格式 2 輸入檔名 3 按儲存鈕
50
設定透明圖 5 切換到此頁次 4 選此項表示要指定透明色彩
51
設定透明圖 預覽圖片 8 在想設成透明的顏色上按一下 6 選此項 7 按此鈕
52
設定透明圖 9 按此鈕存檔 透明的區域會以網格顯示
53
設定透明圖 若想將多個顏色設為透明： 按此鈕可選多個顏色
54
製作交錯圖 普通圖傳到一半, 整張圖尚未全部顯現：
55
製作交錯圖 交錯圖傳到一半, 整張圖看起來是一條一條的：
56
製作交錯圖 交錯圖是將圖片以另一種特殊的方式存檔, 使得圖檔在只傳輸了 1/5、1/4 時, 就顯示出整體、但不甚清晰的影像。
使用交錯圖時, 檔案大小會略增。
57
製作交錯圖 交錯圖在一般的繪圖軟體中都有支援, 而且比製作透明圖方便不少, 只需在存檔時加以設定即可, 再以 PhotoImpact 為例。
開啟圖檔後, 執行檔案 / 另存新檔命令。選擇 GIF 或 PNG 格式, 再按選項鈕：
58
製作交錯圖—GIF 格式
59
製作交錯圖—PNG 格式
60
Client Side 影像地圖 影像地圖的種類 實作 Client Side 影像地圖
61
影像地圖的種類 Server Side 影像地圖, 當使用者在影像地圖上按下滑鼠鈕時, 瀏覽器將滑鼠的座標值傳到 Server, 由 Server 根據原先設定好的 Map 檔來決定要連結到哪一個 URL, 然後將這個 URL 傳回瀏覽器, 瀏覽器再將該對應的網頁載入。 隨著 Server 的不同, 又分為 NCSA 與 CERN 兩種。
62
影像地圖的種類 Client Side 影像地圖, 是事先在網頁中指定在哪一部分按滑鼠, 就連上哪一個 URL, 所以當按下滑鼠時, 瀏覽器就能決定要連到哪一個 URL, 與 Server 完全無關。
63
實作 Client Side 影像地圖 製作對照表 設定圖片為影像地圖 實例
64
製作對照表 滑鼠在圖片上的座標位置與 URL 的對照表是用 <MAP> 標籤來定義, 這個對照表可與圖片放在同一個檔案中, 或是放在另一個檔案。在這個標籤中, 我們要先用 NAME 屬性為這個對照表設一個名稱, 其用法如下：
65
製作對照表 接下來是用 <AREA> 標籤定義圖片中每塊區域的位置、大小、及所要連結的 URL。其格式如下：
66
<AREA> 標籤的屬性 第一個屬性是 SHAPE, 用來設定此區域的形狀：
rect (或 rectangle) 矩形 circ (或 circle) 圓形 poly (或 polygon) 多邊形 第二個屬性是 COORDS, 設定該區域的位置及大小：
67
<AREA> 標籤的屬性
68
<AREA> 標籤的屬性 第三個屬性是 HREF, 用來指定該區域所要連結的 URL。例如：
若希望某個區域在按下時不會連到任何地方, 則可寫成：
69
circ 與 poly 的座標描述法 SHAPE=circ 時 COORDS 的描述需要一組圓心的座標與半徑的值, 例如：
SHAPE=poly 時則需依序填入多邊形每個頂點的座標組, 且至少要填入 3 個點：
70
設定圖片為影像地圖 在 <IMG> 標籤中加入一個 USEMAP 屬性, 指定對照表的位置就算完成：
71
外部 MAP 檔 若影像地圖很大、很複雜, 根據 HTML 規格指出, 可考慮將 MAP 的對照表放在另一個 HTML 檔, 在 <IMG> 標籤中參考這個外部檔案：
72
實例 這個例子用一個簡單、分成四部分的矩形圖片做為影像地圖：
73
實例
74
實例
75
重疊的區域
76
重疊的區域
77
網頁物件的提示說明 在 Windows 環境中, 將滑鼠移到應用程式視窗中的工具按鈕上時, 通常會出現一個黃色的方塊, 其中顯示有關此訊息的說明文字, 此小方塊稱為 Tooltips (提示說明)。 利用 TITLE 屬性則可製作網頁物件的提示說明。
78
網頁物件的提示說明
79
網頁物件的提示說明 滑鼠移到物件上時, 所出現的提示說明
Similar presentations
