在網(wǎng)頁(yè)中插入滾動(dòng)文字

1、制作網(wǎng)頁(yè)文字滾動(dòng)效果一、教學(xué)內(nèi)容分析“制作網(wǎng)頁(yè)文字滾動(dòng)效果”是中等職業(yè)教育規(guī)劃新教材Dreamweaver網(wǎng)頁(yè)制作第二章的內(nèi)容，該知識(shí)是學(xué)生掌握了在Dreamweaver網(wǎng)頁(yè)中文本的插入與編輯后的內(nèi)容。學(xué)習(xí)制作網(wǎng)頁(yè)文字滾動(dòng)效果這一課，目的在于掌握插入滾動(dòng)文字的方法，設(shè)置滾動(dòng)文字的屬性。二、教學(xué)目標(biāo)設(shè)計(jì)【知識(shí)目標(biāo)】1、認(rèn)識(shí)設(shè)置“滾動(dòng)文字”代碼。2、掌握插入滾動(dòng)文字的方法并設(shè)置滾動(dòng)文字屬?！炯寄苣繕?biāo)】通過(guò)引導(dǎo)、欣賞、學(xué)習(xí)、操作使學(xué)生掌握插入滾動(dòng)文字的方法，設(shè)置文字滾動(dòng)屬性，從而激發(fā)學(xué)生的學(xué)習(xí)興趣。并將所學(xué)的知識(shí)靈活運(yùn)用，獲得制作網(wǎng)頁(yè)的愉悅?！窘虒W(xué)重點(diǎn)】掌握滾動(dòng)文字的插入方法、認(rèn)識(shí)插入滾動(dòng)文字代碼及

2、設(shè)置滾動(dòng)文字屬性?！窘虒W(xué)難點(diǎn)】滾動(dòng)文字屬性的理解與設(shè)置方法。三、教學(xué)對(duì)象分析：本節(jié)課的教學(xué)對(duì)象是的中職二年級(jí)的學(xué)生，他們已具備計(jì)算機(jī)基本操作能力和office辦公軟件操作知識(shí)，并且掌握了在Dreamweaver網(wǎng)頁(yè)中插入文本的相關(guān)知識(shí)。對(duì)于“插入滾動(dòng)文字”這一知識(shí)，對(duì)于基礎(chǔ)好的學(xué)生，他能夠通過(guò)老師講解和演示后完成具體的操作，理解代碼屬性；但是一些基礎(chǔ)差的學(xué)生，還要在老師的引導(dǎo)、講解、示范、自己動(dòng)手操作并書(shū)寫(xiě)筆記等過(guò)程的幫助下才能夠理解掌握這部分內(nèi)容。四、教學(xué)方法設(shè)計(jì)：為了落實(shí)重難點(diǎn)，我選擇了“效果展示、提問(wèn)、對(duì)比、講解、演示”為主的教學(xué)方法，通過(guò)觀看欣賞、思考、動(dòng)手操作等方式完成本課學(xué)習(xí)任務(wù)。

3、為了完成目標(biāo)，解決教學(xué)的重難點(diǎn)，我在教學(xué)中設(shè)計(jì)了以下幾個(gè)教學(xué)環(huán)節(jié)：欣賞網(wǎng)頁(yè)、引出任務(wù)演示操作、學(xué)習(xí)新知識(shí)、學(xué)生操作、學(xué)生思考鞏固新知識(shí)知識(shí)拓展、布置作業(yè)。教學(xué)過(guò)程【引入】欣賞網(wǎng)頁(yè)，分析網(wǎng)頁(yè)。（效果展示法）【新課學(xué)習(xí)】一、 插入滾動(dòng)文字學(xué)生看學(xué)案，預(yù)習(xí)插入滾動(dòng)文字的方法。明確完成該任務(wù)需要用到代碼，代碼的作用。教師演示操作在網(wǎng)頁(yè)中插入滾動(dòng)文字“大家好”，抽學(xué)生表述步驟歸納方法：、定位插入點(diǎn) 、執(zhí)行“插入對(duì)象”“標(biāo)簽”（提示：將自動(dòng)切換到“折分”視圖） 、選擇“HTML標(biāo)簽”選取“marquee”指令代碼插入強(qiáng)調(diào)：“marquee”為滾動(dòng)文字代碼 、關(guān)閉對(duì)話框，在Dreamweaver窗口代碼視圖

4、中“”代碼插入點(diǎn)處輸入文字提示：1、輸入文字后，不按回車(chē)鍵結(jié)束，鼠標(biāo)在設(shè)計(jì)視圖中任意位置單擊 2、在網(wǎng)頁(yè)編輯窗口中無(wú)法顯示滾動(dòng)效果，需要按F12鍵在瀏覽器中查看。討論：文字滾動(dòng)的方向是從右向左，而同學(xué)們平時(shí)欣賞的網(wǎng)頁(yè)文字滾動(dòng)方向還有其它方式嗎？（提問(wèn)討論法）二、設(shè)置滾動(dòng)文字屬性 1、改變滾動(dòng)文字運(yùn)動(dòng)方向 告訴學(xué)生，因?yàn)槲覀兪浅鯇W(xué)者，所以我們將學(xué)習(xí)最方便，最簡(jiǎn)單的方法?！癲irection”屬性設(shè)置字幕內(nèi)容的滾動(dòng)方向。方法：、切換到“拆分”視圖 、光標(biāo)定位到“”代碼右側(cè)，按下“空格”鍵，打開(kāi)標(biāo)簽列表框空格 、雙擊“direction”，雙擊選擇方向標(biāo)簽 down：向下滾動(dòng) left：向左滾動(dòng) r

5、ight：向右滾動(dòng) up：向上滾動(dòng)老師演示操作：“大家好”文字向下滾學(xué)生完成操作：更改“index.html”網(wǎng)頁(yè)中已有滾動(dòng)文字“溫馨之家”滾動(dòng)方向向上 展示網(wǎng)頁(yè)，比較網(wǎng)頁(yè)（比較法）2、改變文字滾動(dòng)速度“scrolldelay”屬性設(shè)置文字滾動(dòng)速度。方法同與設(shè)置文字滾動(dòng)方向，參數(shù)只需要輸入數(shù)值提示：參數(shù)值單位為“毫秒”，數(shù)值越大，速度越慢，反之越快操作：將“index.html”網(wǎng)頁(yè)中滾動(dòng)文字“溫馨之家”參數(shù)值分別設(shè)置為“50”和“500”，觀看其效果?！菊n堂小結(jié)】先抽學(xué)生總結(jié)，后歸納總結(jié)1、掌握在Dreamweaver中掌握插入滾動(dòng)文字的方法，認(rèn)識(shí)滾動(dòng)文字代碼2、理解并掌握設(shè)置文字滾動(dòng)方向改變文字滾動(dòng)速度的方法【作業(yè)布置】思考：如果我希望設(shè)置滾動(dòng)文字效果為鼠標(biāo)指向時(shí)停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)時(shí)繼續(xù)滾動(dòng)，將如何設(shè)置？上機(jī)完成：1、插入滾動(dòng)文字“德陽(yáng)通用電子科技學(xué)校歡迎您”，設(shè)置滾動(dòng)方向向上，滾動(dòng)速度為150毫秒。【板書(shū)設(shè)計(jì)】制作網(wǎng)頁(yè)文字滾動(dòng)效果一、 插入滾動(dòng)文字“marquee”為滾動(dòng)文字代碼關(guān)鍵詞：插入標(biāo)簽HTMLmarquee二、 設(shè)置滾動(dòng)文字屬性1、改變滾動(dòng)文字運(yùn)動(dòng)方向“direction”屬性設(shè)置滾動(dòng)方向down：向