劉杰給老師的講課稿

1、制作動態(tài)網(wǎng)頁制作動態(tài)網(wǎng)頁（初中信息技術八年級模塊四第四節(jié)）信息技術教案內(nèi)容： 1 1教學設計學科名稱 2 2所在班級情況，學生特點分析 3 3教學內(nèi)容分析 4 4教學目標 5 5教學難點分析 6 6教學課時 7 7教學過程 8 8課堂練習 9 9作業(yè)安排1010 附錄（教學資料及資源）1111 自我問答第四節(jié)教學目的：1學會在預定時間更換網(wǎng)頁圖片;2掌握滾動字幕的制作；3.學會插入交互式按鈕；4.學會使用放大鏡效果；5學會飛行圖片效果；6掌握網(wǎng)頁過渡效果的實現(xiàn)。重點難點：WebWeb組件操作和動態(tài) HTMLHTML效果的制作。教學方法：講解、演示和學生上機操作課時:3 3課時教學步驟：導入新課

2、同學們，我們已經(jīng)學會了用FrontPage2003FrontPage2003制作網(wǎng)頁的一些基本的操作，通過美化網(wǎng)頁使我們的網(wǎng)頁更漂亮了。 在網(wǎng)上我們看到很多網(wǎng)頁上的元素都能動起來，那么我們是不是也想讓我們的網(wǎng)頁動起來呢？下面我們就來學習動態(tài)網(wǎng)頁的制作。板書第四節(jié)制作動態(tài)網(wǎng)頁我們看到，許多網(wǎng)站都有各種各樣、豐富多彩的圖片和文字等內(nèi)容；而且這些網(wǎng)頁上 產(chǎn)的圖片在一定的時間段內(nèi)經(jīng)常地更換，其實它的制作并不復雜。它們是通過插入“webweb組件”來實現(xiàn)的?，F(xiàn)在我們來為我們的“環(huán)保”網(wǎng)站設置更換網(wǎng)頁圖片。板書一、在預定時間里更換網(wǎng)頁圖片演示打開huanbaohuanbao網(wǎng)站中，然后打開一個名為“ ji

3、ayuanjiayuan .htm.htm ”的框架頁面，將兩幅標題的 圖片輪流顯示在頁面上。圖4-4-14-4-1在預定時間內(nèi)出現(xiàn)的畫面圖 4-4-24-4-2操作步驟：(1)(1)將光標定位于插入預定圖片的位置,4-4-34-4-3如圖所示插入 webweb組件”的對話框。單擊“插入” 菜單中的“ webweb組件”，彈出圖 4-4-34-4-3(2)(2)在“插入webweb組件”的對話框中“組件類型”中選擇“包含內(nèi)容”，在“選擇內(nèi)容 類型”中選擇“預定圖片”。在限定日期前后出現(xiàn)的畫面圖 4-4-44-4-4(4)(4)在“預定圖片屬性”對話框中，通過“瀏覽”確定“在預定的時間內(nèi)”顯示的

4、圖片及“在預定的時間之前和之后”顯示的圖片。(5)(5)在“開始時間”和“結束時間”區(qū)，指定預定時間(6)(6) 單擊“確定”按鈕。這樣，我們的“在預定時間內(nèi)更換網(wǎng)頁圖片”就做好了。下面我們來創(chuàng)建滾動的文字字幕。板書 二、制作滾動字幕演示在主頁的標題圖片下面插入滾動字幕，文本內(nèi)容為“歡迎來到我們的網(wǎng)站，共同努力 讓我們的地球更綠，讓我們的家園更美好！ ”。操作步驟:(1(1 )插入點定位于滾動字幕的位置，在“插入”菜單中選“webweb組件”對話框的“插入webweb組件”對話框中的“組件類型”中選擇“動態(tài)效果”，在“選擇一種動態(tài)效果”中選擇 “字幕”。4-4-54-4-5所示。(2)單擊“完

5、成”按鈕，彈出“字幕屬性”對話框，如圖圖 4-4-54-4-5(3)在“文本”欄中輸入字幕內(nèi)容。在“方向”區(qū)選擇字幕移動方向，(我們在這里設置為“左”)在速度區(qū)：“延遲”用來設置字幕每次移動的時間間隔，該參數(shù)越大，字幕移動越慢；“數(shù)量”用來定義字幕每次移動的距離，該參數(shù)越大，字幕移動越快；我們使用默認值。在“表現(xiàn)方式”區(qū)選擇“滾動條”可以讓文字沿設置的方向，從字幕區(qū)域的一邊出現(xiàn)，到另一邊消失。(“幻燈片”可以讓文字沿設置的方向，從字幕區(qū)域的一邊出現(xiàn)，當文字至U U達字幕區(qū)域的另一邊時停止?jié)L動并保持在屏幕上。 動。我們把“表現(xiàn)方式”設置為“滾動條”)。 景色”區(qū)選擇字幕的背景色，其余采用默認值。

6、(4)單擊“確定”按鈕。我們切換到“預覽”來看一下其效果。下面我們來學習交互式按鈕的插入。板書 三、插入交互式按鈕“交替”可以讓文字在字幕區(qū)域來回移在“大小”區(qū)域設置字幕的大小。在“背環(huán)境臧制作如圖4-4-64-4-6所示按鈕。圖4-4-64-4-6交互式按鈕(1(1 )把插入點定位于插入交互式按鈕位置，在“插入webweb組件”對話框的“組件類型” 中選擇“動態(tài)效果”，在“選擇一種效果中”選擇“交互式按鈕”。(2)單擊“完成”按鈕，彈出如圖4-4-74-4-7所示“交互式按鈕”對話框。圖 4-4-74-4-7(3)在“按鈕”選項卡上的“文本”欄輸入按鈕文字“環(huán)境保護”，按鈕類型選擇“浮雕標簽

7、1 1 ”，在“鏈接”欄指定鏈接網(wǎng)頁文件名“hj-1.htmhj-1.htm ”。(4) 在“字體”選項卡中，設置按鈕文字的字體為宋體，字形為常規(guī)，字號為2020，初 始字體為綠色，懸停時字體顏色為藍色，單擊時字體顏色為紅色。(5) 在“圖像”選項卡的寬度欄輸入120120，高度欄輸入4040，并選取“按鈕為 GIFGIF圖像并 具有透明背景色”選項，單擊“確定”按鈕。我們切換到“預覽”來看一下其效果。下面我們來學習HTMLHTML動態(tài)效果。板書四、動態(tài) HTMLHTML效果-放大鏡效果動態(tài)HTMHTM( DHTMLDHTML又稱動態(tài)超文本標識語言，它是MicrosoftMicrosoft 公

8、司對HTML4.0HTML4.0的增強，使用它可以在網(wǎng)頁中產(chǎn)生動畫效果，即設置一個觸發(fā)事件。FronFron tPagetPage 20032003中的觸發(fā)事件有單擊、雙擊、鼠標懸停、網(wǎng)頁加載等。用戶可以根據(jù)自己的需要設置相應的動畫效果。我們在jiayuan.htmjiayuan.htm網(wǎng)頁的下框中輸入有關地球日的資料，將其定義為在網(wǎng)頁加載時“ 從右下部” “飛入”頁面的動態(tài)效果。演示操作步驟:(1)將鼠標定位于要添加放大鏡效果的段落，選定上述文字，然后單擊“視圖”菜單 中的“工具欄”，選中“ DHTMDHTM效果”，彈出“ DHTMLDHTML效果”工具欄。(2)在“動態(tài)HTMLHTML效果

9、”工具欄中選擇“鼠標懸?！保瑧脼椤案袷健?，選擇設置區(qū)為“選擇字體”，彈出如圖4-4-84-4-8所示“字體”對話框。圖 4-4-84-4-8(3)在對話框中選擇放大后的字體、字號和顏色等，單擊“確定”按鈕。接下來我們來學習“動態(tài)HTMIHTMI效果”中飛行圖片效果的制作。板書五、動態(tài)HTMLHTML效果-飛行圖片效果操作步驟：(1)(1)選定要添加飛行效果的圖片，然后單擊“視圖”菜單中的“工具欄”，選中DHTMLDHTML效果”，彈出“ DHTMIDHTMI效果”工具欄。圖 4-4-94-4-9在網(wǎng)頁中添加了動態(tài) HTMLHTML效果后，會出現(xiàn)淡藍色背景方框。如取消HTMLHTML效果，可選

10、定 段落和圖片，單擊“ DHTMLDHTML效果”工具欄上的“刪除效果”按鈕。最后，我們來共同學習設置網(wǎng)頁過渡效果板書 六、設置網(wǎng)頁過渡效果什么是網(wǎng)頁過渡呢？在網(wǎng)頁中加入超鏈接，可方便地從一個網(wǎng)頁切換到另一個網(wǎng)頁。 為加強視覺的效果，使整個瀏覽過程變得更加美妙，可通過設置動態(tài)的網(wǎng)頁過渡來實現(xiàn)。演示操作步驟：（1 1）. .打開要設置過渡效果的網(wǎng)頁。（2 2） . .單擊“格式” 菜單中的“網(wǎng)頁過渡”，彈出如圖4-4-104-4-10所示“網(wǎng)頁過渡”對話 框。圖 4-4-104-4-10（3 3）. .在對話框“事件”選擇框中選擇“進入網(wǎng)頁”，“過渡效果”選擇“圓形放射”， 在“周期”框內(nèi)輸入持續(xù)的時間。（4 4）單擊“確定”按鈕即可?？偨Y今天我們學習了六種動態(tài)網(wǎng)頁效果的制作。其中，前三種是 webweb 組件的使用，利用“插 入”菜單里的“ webweb組件”子菜單。而第四和第五種“動態(tài)HTMLHTML效果”，是使用“視圖” /“工具欄” / “動態(tài)HTMLHTML效果”。第六種設置網(wǎng)頁過渡效果，是使用“格式”/ / “網(wǎng)頁過渡”。請同學們在