單元7　實(shí)現(xiàn)網(wǎng)頁(yè)特效

1、單元7實(shí)現(xiàn)網(wǎng)頁(yè)特效操作演練1.2技術(shù)提升1.3操作準(zhǔn)備1.1考核評(píng)價(jià)1.4操作準(zhǔn)備1.1操作準(zhǔn)備1.1操作準(zhǔn)備1.1操作準(zhǔn)備1.1操作準(zhǔn)備7.1操作演練1.2操作演練1.2操作演練1.2操作演練1.2操作演練1.2操作演練7.2技術(shù)提升1.3技術(shù)提升1.3技術(shù)提升7.3考核評(píng)價(jià)1.4考核評(píng)價(jià)7.4 將javascript程序嵌入到HTML代碼中，對(duì)網(wǎng)頁(yè)元素進(jìn)行控制，對(duì)用戶操作進(jìn)行響應(yīng)，從而實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)交互的特殊效果，這種特殊效果通常稱為網(wǎng)頁(yè)特效。 在網(wǎng)頁(yè)中添加一些恰當(dāng)?shù)奶匦?，使?yè)面具有一定的交互性和動(dòng)態(tài)性，能吸引瀏覽者的眼球，提高頁(yè)面的觀賞性和趣味性?！窘虒W(xué)導(dǎo)航】教學(xué)目標(biāo)（1）學(xué)會(huì)編寫簡(jiǎn)單的j

2、avascript程序，能看懂較復(fù)雜的javascript程序，明確其實(shí)現(xiàn)的功能和各語(yǔ)句的含義（2）掌握在網(wǎng)頁(yè)中顯示當(dāng)前日期的實(shí)現(xiàn)方法（3）掌握不同時(shí)間段顯示不同問(wèn)候語(yǔ)的實(shí)現(xiàn)方法（4）掌握動(dòng)態(tài)改變網(wǎng)頁(yè)中文本字體大小的實(shí)現(xiàn)方法（5）掌握滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字的實(shí)現(xiàn)方法（6）掌握鼠標(biāo)指針指向不同的超級(jí)鏈接時(shí)，切換不同圖片的實(shí)現(xiàn)方法（7）了解在網(wǎng)頁(yè)中自動(dòng)切換焦點(diǎn)圖片的實(shí)現(xiàn)方法（8）了解在網(wǎng)頁(yè)中自動(dòng)滾動(dòng)圖片的實(shí)現(xiàn)方法（9）了解在網(wǎng)頁(yè)中自動(dòng)漂浮圖片的實(shí)現(xiàn)方法（10）通過(guò)對(duì)典型javascript程序代碼的分析，掌握javascript的基本語(yǔ)法，javascript程序的基本語(yǔ)法格式，能熟練鏈接外部ja

3、vascript腳本文件等教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、理論實(shí)踐一體化、講練結(jié)合課時(shí)建議8課時(shí)（包含考核評(píng)價(jià)）【 7.1操作準(zhǔn)備】 在本地硬盤（例如D盤）中創(chuàng)建一個(gè)文件夾“網(wǎng)頁(yè)設(shè)計(jì)與制作案例”，將光盤中的“單元2”（包括所有子文件夾以及文件）拷貝到該文件夾中。 使用創(chuàng)建站點(diǎn)向?qū)?chuàng)建名稱為“單元7”的本地站點(diǎn)。【7.2操作演練】【任務(wù)7-1】在網(wǎng)頁(yè)中顯示當(dāng)前日期和問(wèn)候語(yǔ)【任務(wù)描述】 在網(wǎng)頁(yè)文檔0701.html中的合適位置編寫javascript代碼實(shí)現(xiàn)以下功能： （1）在網(wǎng)頁(yè)文檔0701.html的頂部顯示當(dāng)前日期及星期數(shù)，日期格式為：年月日星期。 （2）在網(wǎng)頁(yè)文檔0701.html頂部當(dāng)前

4、日期及星期數(shù)的右側(cè)根據(jù)不同時(shí)間段（采用24小時(shí)制）顯示相應(yīng)的問(wèn)候語(yǔ)。 （3）關(guān)閉網(wǎng)頁(yè)0701.html時(shí)自動(dòng)彈出對(duì)話框。 網(wǎng)頁(yè)0701.html的瀏覽效果如圖7-1所示。圖7-1網(wǎng)頁(yè)0701.html的瀏覽效果【任務(wù)實(shí)施】 1編寫javascript代碼在網(wǎng)頁(yè)中顯示當(dāng)前日期 打開網(wǎng)頁(yè)文檔0701.html，在網(wǎng)頁(yè)頭部輸入表7-1所示的javascript代碼。 在網(wǎng)頁(yè)0701.html主體部分的合適位置 輸入HTML代碼 dateweek()，調(diào)用自定義函數(shù)dateweek()，顯示當(dāng)前日期。 2編寫javascript代碼在網(wǎng)頁(yè)中顯示問(wèn)候語(yǔ) 在網(wǎng)頁(yè)的【代碼】視圖中，將光標(biāo)置于顯示當(dāng)前日期的j

5、avascript代碼之后，然后輸入表7-2所示的javascript代碼。 3編寫javascript代碼實(shí)現(xiàn)關(guān)閉網(wǎng)頁(yè)時(shí)自動(dòng)彈出對(duì)話框 在網(wǎng)頁(yè)0701.html的頭部的輸入表7-3所示的javascript代碼。 4分析具有類似功能的javascript代碼的作用與含義 表7-4也是顯示當(dāng)前日期的javascript代碼，請(qǐng)分析這些代碼的作用與含義，應(yīng)用了哪些javascript知識(shí)?！救蝿?wù)7-2】動(dòng)態(tài)改變網(wǎng)頁(yè)中文本字體大小【任務(wù)描述】 在網(wǎng)頁(yè)文檔0702.html中的合適位置編寫javascript代碼，實(shí)現(xiàn)動(dòng)態(tài)改變網(wǎng)頁(yè)中文本字 體大小的功能。 網(wǎng)頁(yè)文檔0702.html的瀏覽效果如圖7-

6、3所示，單擊“大”、“中”或“小”可以動(dòng)態(tài)改變?cè)搮^(qū)域的字體大小，單擊“在線打印”會(huì)彈出【打印】對(duì)話框，單擊“關(guān)閉”可以關(guān)閉該頁(yè)面。圖7-3網(wǎng)頁(yè)文檔0702.html的瀏覽效果【任務(wù)實(shí)施】 1編寫改變文本字體大小的代碼 在網(wǎng)頁(yè)的【代碼】視圖中，將光標(biāo)置于“”之前，然后輸入表7-6所示的javascript代碼。 2設(shè)置超級(jí)鏈接，調(diào)用改變字體大小的函數(shù) 切換到【設(shè)計(jì)】視圖，在“友情鏈接”所在的區(qū) 塊，選中文字“大”，然后在【屬性】面板的“鏈接”列表框中輸入代碼“javascript:setFontSize(16)” 。 調(diào)用改變字體大小的函數(shù)，如圖7-4所示。 調(diào)用函數(shù)時(shí)傳遞的參數(shù)為“16”，即文

7、本的字體大小為“16像素”?！救蝿?wù)7-3】在網(wǎng)頁(yè)中自動(dòng)滾動(dòng)圖片【任務(wù)描述】 在網(wǎng)頁(yè)文檔0703.html中的合適位置編寫javascript代碼，實(shí)現(xiàn)自右向左的橫向滾動(dòng)圖片和自下向上的縱向滾動(dòng)圖片效果。 自右向左橫向滾動(dòng)圖片的瀏覽效果如圖7-5所示，圖片以一定速度向左滾動(dòng)，自下向上縱向滾動(dòng)圖片的 游覽效果如圖7-6所示，圖片以一定速度向上滾動(dòng)。圖7-5自右向左橫向滾動(dòng)圖片的瀏覽效果圖7-6自下向上縱向滾動(dòng)圖片的游覽效果【任務(wù)實(shí)施】 1實(shí)現(xiàn)自右向左的橫向滾動(dòng)圖片效果 打開網(wǎng)頁(yè)文檔0703.html，切換到【代碼】視圖，在與之間分別輸入HTML代碼和javascript代碼，實(shí)現(xiàn)自右向左的橫向滾動(dòng)

8、圖片功能，代碼如表7-7所示。 2實(shí)現(xiàn)自下向上的縱向滾動(dòng)圖片效果 在網(wǎng)頁(yè)文檔0703.html中合適位置分別輸入HTML代碼和javascript代碼，實(shí)現(xiàn)自下向上的橫向滾動(dòng)圖片功能，代碼如表7-8所示?！?.3技術(shù)提升】【任務(wù)7-4】在網(wǎng)頁(yè)中自動(dòng)切換焦點(diǎn)圖片【任務(wù)描述】 在網(wǎng)頁(yè)文檔0704.html中編寫javascript代碼實(shí) 現(xiàn)自動(dòng)切換焦點(diǎn)圖片的功能。 網(wǎng)頁(yè)中自動(dòng)切換圖片的瀏覽效果如圖7-7所示，每一段時(shí)間切換一張圖片，類似于幻燈片的功能。圖7-7網(wǎng)頁(yè)中自動(dòng)切換圖片的瀏覽效果【任務(wù)實(shí)施】1編寫javascript代碼 打開網(wǎng)頁(yè)文檔0704.html，切換到【代碼】視圖，將光標(biāo)置于“”與

9、“”之 間，然后輸入表7-9所示的javascript代碼。2分析自動(dòng)切換圖片的javascript代碼3自動(dòng)切換圖片代碼的應(yīng)用 （1）自行設(shè)置圖片地址、圖片鏈接地址和圖片標(biāo)題 （2）自行增加圖片的數(shù)量【任務(wù)7-5】在網(wǎng)頁(yè)中自動(dòng)漂浮圖片【任務(wù)描述】 在網(wǎng)頁(yè)文檔0705.html中編寫javascript代碼實(shí) 現(xiàn)自動(dòng)漂浮圖片的功能。 網(wǎng)頁(yè)中自動(dòng)漂浮圖片的瀏覽效果如圖7-8所示，可以看出網(wǎng)頁(yè)中圖片在不斷的漂浮。圖7-8網(wǎng)頁(yè)中自動(dòng)漂浮圖片的瀏覽效果 【任務(wù)實(shí)施】 打開網(wǎng)頁(yè)文檔0705.html，切換到【代碼】 視圖，將光標(biāo)置于“”之前，然后輸入 表7-10所示的javascript代碼，其中函數(shù)g

10、etPage Scroll()、getPageSize()和adMove(id)的詳細(xì)代 碼見教材配套光盤對(duì)應(yīng)的文本文件?！?.4考核評(píng)價(jià)】【考核任務(wù)描述】 教材配套光盤中已提供了考核評(píng)價(jià)項(xiàng)目所需的起點(diǎn)網(wǎng)頁(yè)文件0706.html、CSS樣式表文件07style.css和網(wǎng)頁(yè)素材，請(qǐng)完成以下操作。 （1）為函數(shù)showNowDate()編寫代碼，顯示當(dāng)前日期和星期幾。 （2）為函數(shù)showTxt()編寫代碼，根據(jù)不同時(shí)間段顯示合適的問(wèn)候語(yǔ)：上午好、中午好、下午好和晚上好。 （3）為函數(shù)changeview(x)編寫代碼，實(shí)現(xiàn)鼠標(biāo)指針指向不同的文字型超鏈接，能自動(dòng)切換圖片的功能。 （4）完善自動(dòng)切換焦點(diǎn)圖的代碼，所需圖片的存放路徑為“images/image_change”。 （5）為函數(shù)titleScroll()編寫代碼，實(shí)現(xiàn)網(wǎng)頁(yè)標(biāo)題滾動(dòng)功能。 本單元的考核任務(wù)完成后，網(wǎng)頁(yè)0706.html的最終瀏覽效果如圖7-9所示。圖7-9網(wǎng)頁(yè)0706.html的最終瀏覽效果【評(píng)價(jià)要點(diǎn)】 本單元的考核評(píng)價(jià)表如表7-12所示?！締卧〗Y(jié)】 本單元應(yīng)用javascript語(yǔ)言編寫腳本程序，實(shí)現(xiàn)多種網(wǎng)頁(yè)特效，主要包括在網(wǎng)頁(yè)中顯示當(dāng)前日期和問(wèn)候語(yǔ)、動(dòng)態(tài)改變網(wǎng)頁(yè)中文本字體大小、自動(dòng)滾動(dòng)圖片、自動(dòng)切換焦點(diǎn)圖片、自動(dòng)漂浮圖片、滾動(dòng)網(wǎng)頁(yè)標(biāo)題等網(wǎng)頁(yè)特效?？己艘c(diǎn)考核內(nèi)容標(biāo)準(zhǔn)分計(jì)分（1）編寫代碼顯示當(dāng)前日期