Microsoft PowerPoint - ch08_1.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint - ch08_1.ppt"

笑致汤
5 years ago
Views:

1 網頁上的特殊效果與元件

2 8-1 網頁上的聲音與視訊 <OBJECT>...</OBJECT> 標籤標籤解說 : 在 HTML 文件中插入物件屬性解說 : ALIGN="{LEFT,RIGHT,CENTER,TEXTTOP,MIDDLE,TEXTMIDDLE, BASELINE, TEXTBOTTOM, BASELINE}" BORDER="n" CODEBASE="..." CODETYPE=" " CLASSID=" "

3 DATA="URL" DECLARE HEIGHT="n" HSPACE="n" NAME=" " SHAPES: STANDBY=" " TABINDEX="n" TYPE=" " VSPACE="n WIDTH="n"

4 <HTML> <HEAD> <TITLE> 加入音樂 - 使用 OBJECT 標籤 </TITLE> </HEAD> <BODY BACKGROUND="images/bg_10.gif"> <OBJECT DATA="sound/NaNaNa.wav" TYPE="audio/wav" WIDTH="200" HEIGHT="200"></OBJECT> </BODY> </HTML>

5 8-1-2 加入背景音樂 <BGSOUND> 標籤標籤解說 : 這是 Internet Explorer 瀏覽器專用的標籤, 用來插入背景音樂屬性解說 : SRC= URL LOOP="n"

6 <HTML> <HEAD> <TITLE> 加入背景音樂 - 使用 BGSOUND 標籤 </TITLE> <BGSOUND SRC="sound/ 就是愛.mid" LOOP="-1"> <BGSOUND> </HEAD> <BODY BACKGROUND="images/bg_05.gif"> </BODY> </HTML>

7 8-1-3 加入視訊檔 <body background="images/bg_07.gif"> <object data="video/butterfly.wmv"></object> </body>

8 8-2 網頁切換效果 <META HTTP-EQUIV=" 事件 ", CONTENT="revealTrans(Duration revealtrans(duration= 持續秒數, Transition= 效果代碼 )"> 切換效果代碼切換效果代碼切換效果代碼盒狀收縮 0 垂直隱蔽 8 由中向上下擴展 16 盒狀放射 1 水平隱蔽 9 由右上抽出 17 圖入 2 橫向棋盤式 10 由右下抽出 18 圖出 3 縱向棋盤式 11 由左上抽出 19 往上擦去 4 隨機溶解 12 由左下抽出 20 往下擦去 5 左右向中夾縮 13 隨機水平線條 21 往右擦去 6 由中向左右擴展 14 隨機垂直線修 22 往左擦去 7 上下向中夾縮 15 隨機 23

9 <META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=5.0,Transition=18)">

10 8-3 網頁自動更新與切換 <META HTTP-EQUIV="refresh" CONTENT=" 秒數 ; URL= 欲連結的網址 "> 例如 <META HTTP-EQUIV="refresh CONTENT="5;URL=

8-4 加入 ActiveX 控制項 8-4-1 加入 ActiveMovie 控制項 <BODY BACKGROUND="images/fukada_1.

11 8-4 加入 ActiveX 控制項加入 ActiveMovie 控制項 <BODY BACKGROUND="images/fukada_1.jpg"> <OBJECT CLASSID="clsid:05589FA1-C356-11CE-BF01-00AA A ID="ActiveMovie1" WIDTH="239" HEIGHT="251"> <PARAM NAME="Appearance" VALUE="0"> <PARAM NAME="AutoStart" VALUE="1"> <PARAM NAME="AllowChangeDisplayMode" VALUE="-1"> </OBJECT>

12 8-5 加入 Java Applets <APPLET> </APPLET> 標籤標籤解說 : 在 HTML 文件中加入 Java Applets 屬性解說 : ALIGN="{LEFT,RIGHT,CENTER}" ALT="..." CODE="URL" CODEBASE="URL HEIGHT="n" HSPACE="n" NAME="..." PARAM NAME="..." VSPACE="n" WIDTH="n"

13 06: <APPLET CODE="fphover.class" CODEBASE="applet/" WIDTH="170" HEIGHT="24"> 07: <PARAM NAME="text" VALUE=" 趴趴熊官方站 ( 英文版 )"> 08: <PARAM NAME="url" VALUETYPE="ref" VALUE=" 09: <PARAM NAME="font" VALUE="Helvetica"> 16: </APPLET>

14 8-5-2 橫幅廣告 01:<BODY> 02: <APPLET CODE="fprotate.class" CODEBASE="applet/" WIDTH="462" HEIGHT="60"> 03: <PARAM NAME="image1" VALUETYPE="ref" VALUE="images/advert_1.gif"> 12: </APPLET> 13:</BODY>

15 8-6 加入 JavaScript 程式 <SCRIPT> </SCRIPT> 標籤標籤解說 : 在 HTML 文件中加入瀏覽器端 Script 屬性解說 : LANGUAGE=" " SRC="URL" TYPE=" <NOSCRIPT> </NOSCRIPT> 標籤標籤解說 : 若瀏覽器不支援 script, 則顯示 <NOSCRIPT> </NOSCRIPT> 標籤之間的內容

8-6-1 狀態列跑馬燈 <HTML> <HEAD> <TITLE> 狀態列跑馬燈 </TITLE> <SCRIPT LANGUAGE="javascript"> var info= 歡迎光臨翠墨資訊的網站! ; var interval = 200; sin = 0; function Scroll(){ len = info.length; window.

16 8-6-1 狀態列跑馬燈 <HTML> <HEAD> <TITLE> 狀態列跑馬燈 </TITLE> <SCRIPT LANGUAGE="javascript"> var info= 歡迎光臨翠墨資訊的網站! ; var interval = 200; sin = 0; function Scroll(){ len = info.length; window.status = info.substring(0, sin+1); sin++; if (sin >= len) sin = 0; 設定計時器 window.settimeout("scroll();", interval); } </SCRIPT> </HEAD> <BODY onload="javascript:scroll()"> </BODY> </HTML>

17 8-6-2 自動選擇網頁 <body> <script language= javascript > if (navigator.appname == "Netscape") window.open("netscape.htm"); else window.open("explorer.htm"); window.close(""); </script> </body>

18 8-7 加入 VBScript 程式隨機播放背景音樂 01:<body> 02: <script language="vbscript"> 03: Randomize 04: Number = Int(Rnd * 4) 05: Select Case Number 06: Case 0 07: document.write "<BGSOUND SRC=' 兩個人的下雪天.mid' LOOP='INFINITE'>"

19 8-7 加入 VBScript 程式 08: Case 1 09: document.write "<BGSOUND SRC=' 守候永恆的愛.mid' LOOP='INFINITE'>" 10: Case 2 11: document.write "<BGSOUND SRC=' 揮著翅膀的女孩.mid' LOOP='INFINITE'>" 12: Case 3 13: document.write "<BGSOUND SRC=' 七月七日晴.mid' LOOP='INFINITE'>" 14: End Select 15: </script> 16:</body>

20 8-7-2 具提示效果的文字 01:<body> 02: <script language="vbscript"> 03: Sub ShowAns(Tips) 04: document.all(tips).style.visibility=show 05: End sub 06: Sub HideAns(Tips) 07: document.all(tips).style.visibility="hidden" 08: End sub 09: </script>

10: <font onmousemove="showans('ans_1')" onmouseout="hideans('ans_1')"> 11: <u> 飲食男女 </u></font><br> 12: <font onmousemove="showans('ans_2')" onmouseout="hideans('ans_2')"> 13: <u> 臥虎藏龍

21 10: <font onmousemove="showans('ans_1')" onmouseout="hideans('ans_1')"> 11: <u> 飲食男女 </u></font><br> 12: <font onmousemove="showans('ans_2')" onmouseout="hideans('ans_2')"> 13: <u> 臥虎藏龍 </u></font><br> 14: <font onmousemove="showans('ans_3')" onmouseout="hideans('ans_3')"> 15: <u> 色戒 </u></font><br> 16: <p id="ans_1" style="position:absolute;left:250px;top:15px;visibility:hidden;"> 17: <font color="#ff0000"> 大導演李安經典作品 </font> 18: <p id="ans_2" style="position:absolute;left:180px;top:41px;visibility:hidden;"> 19: <font color="#0000ff"> 大導演李安武俠鉅獻 </font> 20: <p id="ans_3" style="position:absolute;left:170px;top:65px;visibility:hidden;"> 21: <font color="#009933"> 大導演李安問鼎威尼斯影展最新力作 </font> 22:</body>

8-8 加入 Flash 動畫 8-8-1 Flash 動畫範例 ( 一 ) 新年小孩拼圖 <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://active.macromedia.com/flash2/cabs/swflash.

22 8-8 加入 Flash 動畫 Flash 動畫範例 ( 一 ) 新年小孩拼圖 <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B " CODEBASE=" ID= 新年小孩拼圖 WIDTH=670 HEIGHT=380> <PARAM NAME="Movie" VALUE=" 新年小孩拼圖.swf"> <PARAM NAME="BGColor" VALUE="000066"> <EMBED SRC=" 新年小孩拼圖.swf" QUALITY="high" BGCOLOR="#000066" WIDTH="800" HEIGHT="500" TYPE="application/x-shockwave-flash" PLUGINSPAGE=" P1_Prod_Version=ShockwaveFlash"> </OBJECT>

8-8-2 Flash 動畫範例 ( 二 ) 抓蝴蝶比賽 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase="http://active.macromedia.com/flash2/cabs/swfla sh.

23 8-8-2 Flash 動畫範例 ( 二 ) 抓蝴蝶比賽 <object classid="clsid:d27cdb6e-ae6d-11cf-96b codebase=" sh.cab#version=4,0,0,0 id=butterflies2 width=100% height=100%> <param name="movie" value="butterflies2.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> </object>

Microsoft PowerPoint - ch15_1.ppt

Microsoft PowerPoint - ch15_1.ppt JavaScript 實用範例 15-1 視窗基本操作 15-1-1 歡迎對話方塊顯示歡迎視窗 15-1-2 告別對話方塊顯示告別視窗