1

注意事項

(1)考試過程為open book，可以觀看講義，可以上網找資料，可以問人(但要減分，一題減5分)

(2)但不可以複製別人已經做好的檔案

(3)做好了，當場改分數

Precautions

(1) The examination process is open book, you can watch the handouts, you can find information on the Internet, you can ask people (but to reduce points, 5 points for a question)

(2) but can't copy files that others have already done

(3) Do it well, Calculate the score immediately.

考試內容(Exam content)

(1).下載網頁模板(由此按右鍵，直接下載)

Download the web page template (by right click to download)

(2).打開三個網頁（index.html, travel.html, photo.html），
設定網頁的標題：學號姓名

Set the title of the web page: student name
（例如：B107101017狄力那）

1.打開首頁index.html，建立三個超連結

Create three hyperlinks to the home page index.html

(打開photo.html)

2.photo.html：製作隱藏，與顯示圖層的特效

使用dreamweaver的『行為』特效功能來製作

Make hidden, and display layer effects

Use Dreamweaver's "行為" effects to create

3. photo.html：製作4張圖片的轉場特效：

將4張圖片，每一張上面都再加一個ap-div圖層，並都匯入p_09.jpg（在images目錄內）

分別做成4種特效：

滑鼠點按則『淡出』轉場，顯示圖片

滑鼠點按則『百葉窗』轉場，顯示圖片

滑鼠點按則『縮小』轉場，顯示圖片

滑鼠點按則『滑動』轉場，顯示圖片

可使用dreamweaver的『行為』特效功能來製作

Make a transition effect for 4 images:

Add four Ap Div layers for each image and import them into p_09.jpg (in the images directory)

Make 4 special effects:

Click the mouse to fade out(淡出) the picture.

Click on the mouse to show the百葉窗effect for the picture.

Click on the mouse to zoom out(縮小) and display the picture.

Click the mouse to slide (滑動) and display the picture.

Can be made using Dreamweaver's "behavior" effects

(打開travel.html)

4.travel.html：製作Spry可收合面版

將『最新資訊，聯絡我們』做成Spry可收合面版

Making two Spry 可收合面版 for 『最新資訊，聯絡我們』

5.travel.html：播放音樂

在『聯絡我們』下方，播放音樂，使用檔案：02.wav（在images裡面）

play music

Under "聯絡我們", play music, use the file: 02.wav (in images folder)

6.travel.html：讓文字向上移動

用<marquee>…</marquee>語法，讓文字向上移動

Let the text move up

Use the <marquee>...</marquee> syntax to move the text up

7.travel.html：無法滑鼠右鍵下載圖片

使用javascript，讓圖片無法滑鼠右鍵下載

Use javascript to make the image could not be downloaded.

oncontextmenu="window.event.returnValue=false;alert('版權為李小華所有，請勿複製')"

8.travel.html：隱藏選單（make a Hide Menu）

Copy the javascript code

<STYLE>

<!--

A.ssmItems:link {color:8080ff;text-decoration:none;/*超連結文字*/}

A.ssmItems:hover {color:8080ff;text-decoration:none;/*瀏覽過的連結文字*/ }

A.ssmItems:active {color:8080ff;text-decoration:none;/*按下連結的格式*/}

A.ssmItems:visited {color:8080ff;text-decoration:none;/*滑鼠移至連結*/}

//-->

</STYLE>

<!--

NS6 = (document.getElementById&&!document.all)

IE = (document.all)

NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)

function moveOut() {

if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {

clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}

else {clearTimeout(moving);moving=setTimeout('null',1)}};

function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}

function moveBack1() {

if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {

clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}

else {clearTimeout(moving);moving=setTimeout('null',1)}}

function slideMenu(num){

if (IE) {ssm.pixelLeft += num;}

if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}

if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {

if (NS||NS6) {winY = window.pageYOffset;}

if (IE) {winY = document.body.scrollTop;}

if (NS6||IE||NS) {

if (winY!=lastY&&winY>YOffset-staticYOffset) {

smooth = .2 * (winY - lastY - YOffset + staticYOffset);}

else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {

smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}

else {smooth=0}

if(smooth > 0) smooth = Math.ceil(smooth);

else smooth = Math.floor(smooth);

if (IE) bssm.pixelTop+=smooth;

if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth

lastY = lastY+smooth;

setTimeout('makeStatic()', 1)}}

function buildBar() {

if(barText.indexOf('<IMG')>-1) {tempBar=barText}

else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}

document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {

if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;

bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}

else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style

bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";}

else if (NS) {bssm=document.layers["basessm1"];

bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];

bssm2.clip.left=0;ssm.visibility = "show";}

if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {

if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}

if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}

if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')}

document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">');

for(i=0;i<ssmItems.length;i++) {

if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}

else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);

if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}

if(!ssmItems[i][1]){

document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}

else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;

document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}

if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}

if(ssmItems[i][4]!="no"){document.write('</TR>')}}

document.write('</table>')

if (NS6){document.write('</TD></TR></TABLE>')}

if (IE||NS6) {document.write('</DIV></DIV>')}

if (NS) {document.write('</LAYER></ILAYER></LAYER>')}

theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

-->

</script>

<!--

YOffset=95;

XOffset=0;

staticYOffset=30;

slideSpeed=20

waitTime=100;

menuBGColor="#000000";

menuIsStatic="yes";

menuWidth=100;

menuCols=2;

hdrFontFamily="verdana";

hdrFontSize="2";

hdrFontColor="#FFFFFF";

hdrBGColor="#000000";

hdrAlign="center";

hdrVAlign="center";

hdrHeight="10";

linkFontFamily="Verdana";

linkFontSize="2";

linkBGColor="#FFFFFF";

linkOverBGColor="#cccccc";

linkTarget="_blank";

linkAlign="center";

barBGColor="#000000";

barFontFamily="Verdana";

barFontSize="2";

barFontColor="#FFFFFF";

barVAlign="center";

barWidth=20;

barText="★隱藏式目錄選單★";

ssmItems[0]=["+連結目錄+"]

ssmItems[1]=["連結名稱", "連結網址"]

ssmItems[2]=["連結名稱", "連結網址"]

ssmItems[3]=["連結名稱", "連結網址"]

ssmItems[4]=["連結名稱", "連結網址"]

ssmItems[5]=["連結名稱", "連結網址"]

ssmItems[6]=["連結名稱", "連結網址"]

buildMenu();

-->

</script>

貼到<head>…..</head>之間

Pasted between <head>.....</head>

修改三個超連結，Modify three hyperlinks

（建立songs.html，add a new songs.html）

9. songs.html：新增喜歡歌曲的內容與表格，Add content and tables for favorite songs

寫下你最喜歡的歌曲與歌星，Write down your favorite songs and singers

歌曲用超連結連接到youtube去播放，The song is connected to youtube with a hyperlink.

我喜歡的歌曲與歌者

姓名

學號

電話

喜歡的歌者

喜歡的歌

10. songs.html：在最上面新增一個選單，Add a menu to the top

Menu1	Menu2
首頁index	旅遊travel
喜歡的歌	相片photo