資源簡介

中小學教育資源及組卷應用平臺
信息技術《設置網頁的動態效果》教學設計
課題 《設置網頁的動態效果》 單元 一單元 學科 信息技術 年級 八年級
教材分析 《設置網頁的動態效果》這一課旨在讓學生增進對網頁動態效果的設置和掌握使用，以及學會使用各種字幕的方法和步驟，教材編排了“學習任務-任務分析-操作指南-任務小結-知識鏈接-練習與思考”的系列學習活動，引導學生學會設置字體的各種動態效果，背景音樂和視頻，促進對網頁內容優化的制作。這些學習對于初中學生來說是非常有必要的，不僅可以增加學生知識，同時也能增強學生對信息的感受力、注意力，以及對信息價值的判斷力和洞察力，提高學生信息素養。教材編排合理，貼近學生生活實際，符合七年級學生認知特點。
學習目標 1.信息意識：具有將創新理念運用到設置網頁動態效果的學習中去的意識；2.計算思維：能夠對學習中產生的問題，進行分解、計算，得出解決辦法；3.數字化學習與創新：具有創新、創造能力，將這種能力運用到網頁動態效果的學習中；4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則。
重點 掌握制作網頁動態效果的方法和步驟
難點 增加網頁動態效果，吸引瀏覽者
教學過程
教學環節 教師活動 學生活動 設計意圖
導入新課 導入：師：網頁的制作完成，為了吸引客戶瀏覽、選擇我們制作的網頁還需要在網頁上增加一點動態效果，可以在一定程度上吸引顧客。 學生初步了解本節課的學習內容 引出今天的學習內容
講授新課 在網頁中適當加入一些動態元素可以增強網頁的吸引力和表現力，但原則是不能影響用戶瀏覽，否則會適得其反。學習任務根據內容特點和展示需要，給網頁添加適當的動態效果。拓展延伸網頁動態效果有哪些：一、導航欄動態效果二、滾動效果三、圖像動態效果四、彈窗效果五、動態按鈕效果網頁動態效果設計的作用：總的來說，動態效果是網站設計的重要組成部分之一，通過合理運用動態效果，可以為用戶提供更好的用戶體驗。在網站建設過程中，設計師需要根據網站定位和目標用戶的需求來選擇合適的動態效果，并注意合理控制動態效果的使用，以充分展示網站的專業性和創新性，提升用戶對網站的好感度和留存度。任務分析首先，明確哪些網頁需要添加動態效果。一個頁面中的動態效果不宜過多，而且要跟網站主題、網頁內容等相配合，起到襯托、加深印象的作用。然后，要知道FrontPage提供了哪些效果及如何添加。FrontPage提供的動態效果有滾動字幕、懸停按鈕、橫幅廣告管理器、動態HTML效果、網頁過渡等。這些動態效果的具體形式是：①滾動字幕。一行文字在屏幕上滾動。②懸停按鈕。當光標移動到該按鈕上時，它的顏色或背景會發生改變，而光標移開時又能恢復原樣。③橫幅廣告管理器。將一系列的圖像按照設置好的順序和時間間隔在屏幕上顯示出來。④動態HTML(DHTML)效果。對網頁中選定的文本或圖片進行各種動畫效果的設置?？梢宰屢粡垐D片從網頁中飛出去，也可以產生讓文本逐字移出網頁的效果。⑤網頁過渡。具有多種網頁過渡效果，如混合、盒狀收縮、盒狀放射等。操作指南1.插入滾動字幕(以“自然之旅”頁面為例)（1）將光標移到設置滾動字幕處，執行“插入”“Web組件”命令，選擇“動態效果”類型中的“字幕”效果，單擊“完成”按鈕后，打開“字幕屬性”對話框。（2）在“文本”文本框中輸入“大美河北歡迎您！“。（3）在“背景色”的下拉列表框中選擇“黃色”。（4)“方向”“表現方式”等選項區域為默認值，如圖所示。（5）單擊“樣式”按鈕，打開“修改樣式”對話框，如圖所示。（6）單擊“格式”按鈕，在下拉列表中對字體、段落等進行設置。（7）逐級單擊“確定”按鈕后，插入滾動字幕。（8）預覽滾動字幕的效果。2.使用“橫幅廣告管理器”插入動態橫幅(以“自然之旅”頁面中的圖片呈現為例)（1）執行“工具”→“自定義”命令，在“自定義”對話框中選擇“命令”選項卡，在“類別”列表中選擇“插入”命令，在右側“命令”列表中選擇“橫幅廣告管理器”命令。按住鼠標，將其拖動到“插入”菜單中，釋放鼠標。此時，插入菜單中包含“廣告管理器”命令，如圖所示。（2）在網頁中指定位置處，執行“插入”→“橫幅廣告管理器屬性”對話框。單擊“添加”按鈕，如圖所示。（3)在“橫幅廣告管理器屬性”對話框中示，打開“添加橫幅廣告圖片”對話框，將預先準備好的圖片添加進來，并進行適當的設置，如圖所示，單擊“確定”按鈕。因為圖片是從站外添加進來的，所以一定要注意把圖片的存儲位置更改到本站的“images文件夾中”。（4）預覽并觀察效果，修改至滿意為止。3.設置文字的動態效果(以“自然之旅”頁面中的介紹文字為例)（1）選擇文字。（2)執行“工具”→“自定義”命令，在“自定義”對話框中選擇“命令”選項卡，在“類別”列表中選擇“格式”命令，在右側“命令”列表中選擇“動態HTML效果”命令。按住鼠標，將其拖動到“格式”菜單中，釋放鼠標，則“格式”菜單中包含了“動態HTML效果”命令。（3）執行“格式”→“動態HTML效果”命令，打開如圖所示的“DHTML效果”工具欄。（4）單擊“在”下拉按鈕，選擇“鼠標懸停”選項。（5)單擊“應用”下拉按鈕，選擇“格式”選項。（6）單擊“效果”下拉按鈕，選擇“選擇字體”命令，在“字體”對話框中設置字體格式為“加粗”。（7）預覽網頁，當鼠標懸停到該段文字時，文字變為粗體。任務小結在本節，實現了在網頁中插入滾動字幕、橫幅廣告管理器和設置文字的動態效果。組件是插入網頁的一個對象，而動態效果的設置是對網頁中原有的文字、圖片進行動畫效果的設置。所以，插入組件時，要先確定光標的位置；設置動態效果時，要先選定文字或圖片。知識鏈接1.修改組件的屬性用鼠標雙擊組件，打開對應的組件屬性對話框，進行重新設置。2.刪除動態效果要刪除已設置好的動態效果，需在選中動態效果后，打開“DHTML效果”工具欄，單擊“刪除效果”按鈕。3.設置網頁過渡效果（1）執行“格式”，“網頁過渡”命令，打開如圖所示的“網頁過渡”對話框。（2）在“事件”下拉列表中選擇相應的事件，在“過渡效果”列表中選擇相應的過渡效果，單擊“確定”按鈕。4.添加視頻（1）在網頁視圖模式下，將插入點放置到要插入視頻的位置。（2)執行“插入”→“圖片”→“視頻”命令。（3）瀏覽到需要插入的視頻文件，選定后打開，然后保存到網站文件夾。5.添加網頁背景音樂（1)在網頁中單擊鼠標右鍵，在快捷菜單中選擇“網頁屬性”命令，打開“網頁屬性”對話框。（2）在“常規”選項卡的“背景音樂”選項區域，單擊“瀏覽”按鈕，選擇背景音樂。（3）取消“不限次數”單選框的勾選，在“循環次數”框中輸入或通過微調按鈕選擇一個數字，以便指定該樂曲播放的次數。注：背景音樂文件要保存到網站文件中。最后，我們一起觀看視頻再次學習一下，設置網頁的滾動字幕制作的方法。練習與思考嘗試在網頁中插入其他動態組件，如“懸停按鈕”等。1.首先執行“插入”菜單中的“Web組件”命令，如圖所示。2.在彈出對話框左邊列表中選擇“ 動態效果”，右邊列表中選擇“懸停按鈕”，單擊“確定”，如圖所示。3.系統彈出“懸停按鈕屬性”對話框，在鏈接到框中輸入在按鈕被點擊時顯示的頁面URL或文件；4.在按鈕文本框中輸入懸停按鈕的文本標簽。如果所創建的圖形已經包含一個文本標簽，則保留該框的空白狀態；5.在寬度和高度框中分別輸入以像素計的圖片寬度和高度，然后單擊確定。6.懸停按鈕的大小必須與為懸停效果使用的圖片相匹配。完成以后單擊“自定義”， 如圖所示。7.在“自定義圖片”的“按鈕”輸入框中輸入初次打開該頁面時看到的圖片的URL；8.在“懸停時”框中輸入的鼠標懸停在該按鈕上時顯示的圖片。然后單擊“確定”，如圖所示。閱讀材料網頁中的色彩搭配1.色彩知識自然界中有多種自然色彩，比如玫瑰是紅色的，大海是藍色的，橘子是橙色的……現實生活中的顏色可以分為彩色和非彩色。黑、白、灰屬于非彩色，其他的顏色都屬于彩色。任何一種彩色都具備三個屬性：色相、明度和純度。其中，非彩色只有明度屬性。在光學中，有三種不能再分解的基本顏色，即紅、綠、藍，它們被稱為光學三原色。光學三原色按不同的比例混合后，可以得到各種顏色。遵循“總體協調，局部對比”的原則，通常一個網站的顏色取色環中相同色系的2~3種色。如圖所示。拓展延伸1.同類色：指色相性質相同，但色度有深淺之分。（是色相環中15°夾角內的顏色）2.近似色：指相性質相同，色度深淺比較明顯（是指色相環中夾角50°左右的兩種近似色）3.對比色：是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在24色相環上相距120°-180°之間的兩種顏色，稱為對比色。4.補色：又稱互補色，余色，亦稱強度比色，就是兩種顏色（等量）混合后呈黑灰色，那么這兩種顏色一定互為補色。色環的任何直徑兩端相對之色都稱為互補色。2.顏色對人的心理影響人們對某種顏色會產生某種普遍的情緒反應，所以，在設計中常常使用不同的顏色來表達不同的意義。下表簡單介紹了不同顏色可表達的意義及搭配的注意事項。作業布置請同學們回去制作一個“導航欄”的動態效果，在瀏覽者看到網頁的導航欄時就被吸引，下節課，我們一起看看誰的制作最有創意！ 學生了解網頁的動態效果種類學生了解動態網頁的作用學生明確實踐操作的具體內容學生掌握制作網頁動態效果的方法和步驟學生掌握“任務小結”跟“知識鏈接”的學習內容學生完成課堂練習學生認真閱讀“閱讀材料”內容，了解顏色一些基本的知識學生了解學習一些基礎的色彩知識 拓展延伸學生知識技能增加學生知識技能鋪墊后續操作學習提高學生動手實踐技能增加學生的知識技能同時也是對本節課的知識點進行總結和概括鞏固本節課的學習知識拓展延伸學生知識技能拓展延伸學生知識，增加學生課外知識的學習
課堂練習 同學們一起嘗試使用三原色混搭出的其他顏色，并說說其中的小規律。 學生完成課堂練習 鞏固所學知識
課堂小結 學習制作網頁動態效果的方法與步驟；網頁動態效果的類型認識；認識色彩知識。 學生總結本節課的學習內容 總結概括本節課的學習內容
板書 網頁動態效果制作方法和步驟認識色彩
21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(www.21cnjy.com)(共40張PPT)
《設置網頁的動態效果》
河北大學版 初中版第二冊
內容總覽
學習目標
01
學習任務
02
任務分析
03
操作指南
04
任務小結
05
知識鏈接
06
目錄
07
08
課堂練習
課堂總結
09
10
板書設計
課后作業
教學目標
1.信息意識：具有將創新理念運用到設置網頁動態效果的學習中去的意識；
2.計算思維：能夠對學習中產生的問題，進行分解、計算，得出解決辦法；
3.數字化學習與創新：具有創新、創造能力，將這種能力運用到網頁動態效果的學習中；
4.信息社會責任：規范使用網絡技術解決問題，形成良好道德準則。
新知導入
網頁的制作完成，為了吸引客戶瀏覽、選擇，我們制作的網頁還需要在網頁上增加一點動態效果，可以在一定程度上吸引顧客。
新知講解
在網頁中適當加入一些動態元素可以增強網頁的吸引力和表現力，但原則是不能影響用戶瀏覽，否則會適得其反。
學習任務
根據內容特點和展示需要，給網頁添加適當的動態效果。
新知講解
拓展延伸
網頁動態效果有哪些：
一、導航欄動態效果
二、滾動效果
三、圖像動態效果
四、彈窗效果
五、動態按鈕效果
新知講解
網頁動態效果設計的作用：
總的來說，動態效果是網站設計的重要組成部分之一，通過合理運用動態效果，可以為用戶提供更好的用戶體驗。在網站建設過程中，設計師需要根據網站定位和目標用戶的需求來選擇合適的動態效果，并注意合理控制動態效果的使用，以充分展示網站的專業性和創新性，提升用戶對網站的好感度和留存度。
拓展延伸
新知講解
任務分析
首先，明確哪些網頁需要添加動態效果。一個頁面中的動態效果不宜過多，而且要跟網站主題、網頁內容等相配合，起到襯托、加深印象的作用。然后，要知道FrontPage提供了哪些效果及如何添加。FrontPage提供的動態效果有滾動字幕、懸停按鈕、橫幅廣告管理器、動態HTML效果、網頁過渡等。這些動態效果的具體形式是：
新知講解
①滾動字幕。一行文字在屏幕上滾動。
②懸停按鈕。當光標移動到該按鈕上時，它的顏色或背景會發生改變，而光標移開時又能恢復原樣。
③橫幅廣告管理器。將一系列的圖像按照設置好的順序和時間間隔在屏幕上顯示出來。
④動態HTML(DHTML)效果。對網頁中選定的文本或圖片進行各種動畫效果的設置。可以讓一張圖片從網頁中飛出去，也可以產生讓文本逐字移出網頁的效果。
⑤網頁過渡。具有多種網頁過渡效果，如混合、盒狀收縮、盒狀放射等。
新知講解
操作指南
1.插入滾動字幕(以“自然之旅”頁面為例)
（1）將光標移到設置滾動字幕處，執行“插入”“Web組件”命令，選擇“動態效果”類型中的“字幕”效果，單擊“完成”按鈕后，打開“字幕屬性”對話框。
（2）在“文本”文本框中輸入“大美河北歡迎您！“。
（3）在“背景色”的下拉列表框中選擇“黃色”。
新知講解
（4)“方向”“表現方式”等選項區域為默認值，如圖所示。
（5）單擊“樣式”按鈕，打開“修改樣式”對話框，如圖所示。
（6）單擊“格式”按鈕，在下拉列表中對字體、段落等進行設置。
新知講解
（7）逐級單擊“確定”按鈕后，插入滾動字幕。
（8）預覽滾動字幕的效果。
新知講解
2.使用“橫幅廣告管理器”插入動態橫幅(以“自然之旅”頁面中的圖片呈現為例)
（1）執行“工具”→“自定義”命令，在“自定義”對話框中選擇“命令”選項卡，在“類別”列表中選擇“插入”命令，在右側“命令”列表中選擇“橫幅廣告管理器”命令。按住鼠標，將其拖動到“插入”菜單中，釋放鼠標。此時，插入菜單中包含“廣告管理器”命令，如圖所示。
新知講解
（2）在網頁中指定位置處，執行“插入”→“橫幅廣告管理器屬性”對話框。單擊“添加“按鈕，如圖所示。
（3)在“橫幅廣告管理器屬性”對話框中示，打開“添加橫幅廣告圖片”對話框，將預先準備好的圖片添加進來，并進行適當的設置，如圖所示，單擊“確定”按鈕。
設置圖片的大小以及圖片交替的效果和顯示時間
添加和調整圖片順序
新知講解
因為圖片是從站外添加進來的，所以一定要注意把圖片的存儲位置更改到本站的“images文件夾中“。
（4）預覽并觀察效果，修改至滿意為止。
新知講解
3.設置文字的動態效果(以“自然之旅”頁面中的介紹文字為例)
（1）選擇文字。
（2)執行“工具”→“自定義”命令，在“自定義"對話框中選擇“命令”選項卡，在“類別”列表中選擇“格式”命令，在右側“命令”列表中選擇“動態HTML效果”命令。按住鼠標，將其拖動到“格式”菜單中，釋放鼠標，則“格式”菜單中包含了“動態HTML效果”命令。
（3）執行“格式”→“動態HTML效果”命令，打開如圖所示的“DHTML效果”工具欄。
新知講解
（4）單擊“在”下拉按鈕，選擇“鼠標懸?！边x項。
（5)單擊“應用”下拉按鈕，選擇“格式”選項。
（6）單擊“效果”下拉按鈕，選擇“選擇字體”命令，在“字體”對話框中設置字體格式為“加粗”。
（7）預覽網頁，當鼠標懸停到該段文字時，文字變為粗體。
新知講解
任務小結
在本節，實現了在網頁中插入滾動字幕、橫幅廣告管理器和設置文字的動態效果。組件是插入網頁的一個對象，而動態效果的設置是對網頁中原有的文字、圖片進行動畫效果的設置。所以，插入組件時，要先確定光標的位置；設置動態效果時，要先選定文字或圖片。
新知講解
知識鏈接
1.修改組件的屬性
用鼠標雙擊組件，打開對應的組件屬性對話框，進行重新設置。
2.刪除動態效果
要刪除已設置好的動態效果，需在選中動態效果后，打開“DHTML效果”工具欄，單擊“刪除效果”按鈕。
新知講解
3.設置網頁過渡效果
（1）執行“格式”，“網頁過渡”命令，打開如圖所示的“網頁過渡”對話框。
（2）在“事件”下拉列表中選擇相應的事件，在“過渡效果”列表中選擇相應的過渡效果，單擊“確定”按鈕。
新知講解
4.添加視頻
（1）在網頁視圖模式下，將插入點放置到要插入視頻的位置。
（2)執行“插入”→“圖片”→“視頻”命令。
（3）瀏覽到需要插入的視頻文件，選定后打開，然后保存到網站文件夾。
新知講解
5.添加網頁背景音樂
（1)在網頁中單擊鼠標右鍵，在快捷菜單中選擇“網頁屬性”命令，打開“網頁屬性”對話框。
（2）在“常規”選項卡的“背景音樂”選項區域，單擊“瀏覽”按鈕，選擇背景音樂。
（3）取消“不限次數”單選框的勾選，在“循環次數”框中輸入或通過微調按鈕選擇一個數字，以便指定該樂曲播放的次數。
注：背景音樂文件要保存到網站文件夾中。
新知講解
最后，我們一起觀看視頻再次學習一下，設置網頁的滾動字幕制作的方法。
新知講解
練習與思考
嘗試在網頁中插入其他動態組件，如“懸停按鈕”等。
新知講解
1.首先執行“插入”菜單中的“Web組件”命令，如圖所示。
2.在彈出對話框左邊列表中選擇“ 動態效果”，右邊列表中選擇“懸停按鈕”，單擊“確定”，如圖所示。
新知講解
3.系統彈出“懸停按鈕屬性”對話框，在鏈接到框中輸入在按鈕被點擊時顯示的頁面URL或文件；
4.在按鈕文本框中輸入懸停按鈕的文本標簽。如果所創建的圖形已經包含一個文本標簽，則保留該框的空白狀態；
5.在寬度和高度框中分別輸入以像素計的圖片寬度和高度，然后單擊確定。
6.懸停按鈕的大小必須與為懸停效果使用的圖片相匹配。完成以后單擊“自定義”， 如圖所示。
新知講解
7.在“自定義圖片”的“按鈕”輸入框中輸入初次打開該頁面時看到的圖片的URL；
8.在“懸停時”框中輸入的鼠標懸停在該按鈕上時顯示的圖片。然后單擊“確定”，如圖所示。
新知講解
閱讀材料
網頁中的色彩搭配
1.色彩知識
自然界中有多種自然色彩，比如玫瑰是紅色的，大海是藍色的，橘子是橙色的……現實生活中的顏色可以分為彩色和非彩色。黑、白、灰屬于非彩色，其他的顏色都屬于彩色。任何一種彩色都具備三個屬性：色相、明度和純度。其中，非彩色只有明度屬性。
新知講解
在光學中，有三種不能再分解的基本顏色，即紅、綠、藍，它們被稱為光學三原色。光學三原色按不同的比例混合后，可以得到各種顏色。遵循“總體協調，局部對比”的原則，通常一個網站的顏色取色環中相同色系的2~3種色。如圖所示。
新知講解
拓展延伸
①同類色：指色相性質相同，但色度有深淺之分。（是色相環中15°夾角內的顏色）
②近似色：指相性質相同，色度深淺比較明顯（是指色相環中夾角50°左右的兩種近似色）
新知講解
③對比色：是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。
指在24色相環上相距120°-180°之間的兩種顏色，稱為對比色。
拓展延伸
新知講解
④補色：又稱互補色，余色，亦稱強度比色，就是兩種顏色（等量）混合后呈黑灰色，那么這兩種顏色一定互為補色。色環的任何直徑兩端相對之色都稱為互補色。
新知講解
2.顏色對人的心理影響
人們對某種顏色會產生某種普遍的情緒反應，所以，在設計中常常使用不同的顏色來表達不同的意義。下表簡單介紹了不同顏色可表達的意義及搭配的注意事項。
新知講解
課堂練習
同學們一起嘗試使用三原色混搭出的其他顏色，并說說其中的小規律。
課堂總結
1.學習制作網頁動態效果的方法與步驟；
2.網頁動態效果的類型認識；
3.認識色彩知識。
板書設計
網頁動態效果制作方法和步驟
認識色彩
作業布置
請同學們回去制作一個“導航欄”的動態效果，在瀏覽者看到網頁的導航欄時就被吸引，下節課，我們一起看看誰的制作最有創意！
謝謝
21世紀教育網（www.21cnjy.com)
中小學教育資源網站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin

展開更多......

收起↑