制作網(wǎng)頁特效
16（11）班
網(wǎng)站建設與管理
2016年10月26號
1、掌握運用onMouseOver事件制作樣式特效。
2、掌握運用onMouseOut事件制作樣式特效。
二、過程與方法目標
1、讓學生掌握常見的網(wǎng)頁樣式屬性
2、讓學生掌握給事件添加代碼的格式
三、情感、態(tài)度、價值觀目標
1、讓學生網(wǎng)絡在我們生活中巨大作用。
2、培養(yǎng)學生主動學習、大膽創(chuàng)新、認真細致的學習習慣。
新授課
1課時
onMouseOver和onMouseOut事件在網(wǎng)頁中的應用。
事件代碼的編寫。
如何將網(wǎng)頁樣式特效和事件聯(lián)系起來。
直觀演示法、活動探究法、小組合作學習法。
多媒體教學設備。
一、復習提問：
1、如何在頁面中添加JavaScript腳本？
<SCRIPT language=“JavaScript” type=“text/JavaScript”>
……編寫的腳本代碼…..
</SCRIPT>
JavaScript<head>
二、
(javascript)
三、
1、
2、onMouseOveronMouseOut
onMouseOver
onMouseOut
31—
（1）效果展示：
制作隨鼠標移動而變化文字背景的頁面
（2）案例分析：
當前對象：文字。
觸發(fā)事件：onMouseOver事件和onMouseOut事件。
網(wǎng)頁特效：文字背景發(fā)生改變。
老師先演示任務效果，引導學生分析：當前對象是什么？觸發(fā)哪些事件？對象的什么樣式發(fā)生的改變？
頁面代碼…
<TR>
<TD width="444" height="23" align="right">會員名： </TD>
<TD width="454"><INPUT type="text" class="txtBorder" size="19"
onMouseOver="this.style.borderColor='blue'" onMouseOut="this.style.borderColor='' "></TD>
</TR>…頁面代碼…
43—（老師引導、學生自主學習）
1
2
l如何在頁面添加圖片?
<IMG src=“images/pic1.jpg”>
l如何在腳本中指定圖片路徑?
<IMG src=“images/pic1.jpg”
onMouseOver=“this.src=‘images/pic2.jpg’”
onMouseOut=”this.src=’images/pic1.jpg’”>
頁面代碼
–<TR>
– <TD width="27%"><IMG src="images/bg2.jpg"></TD>
– <TD width="36%">
–<IMG src="images/p1.jpg" onMouseOver="this.src='images/p2.jpg'" onMouseOut="this.src='images/p1.jpg'" >
–</TD>
– <TD width="37%"><IMG src="images/bg3.jpg"></TD>
– </TR>
–…頁面代碼…
四、
1
2
3
1
2
