第10課左右逢源-滾動(dòng)字幕與層的使用

《第10課左右逢源-滾動(dòng)字幕與層的使用》由會(huì)員分享，可在線閱讀，更多相關(guān)《第10課左右逢源-滾動(dòng)字幕與層的使用（2頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、第10課左右逢源 -滾動(dòng)字幕與層的使用 （一）本課教學(xué)目標(biāo) 知識(shí)與技能： 1．掌握綜合運(yùn)用多種軟件制作導(dǎo)航欄的方法。 2. 學(xué)會(huì)使用marquee標(biāo)簽制作滾動(dòng)字幕。 3. 初步掌握使用層來(lái)進(jìn)行布局。 過(guò)程與方法：通過(guò)使用滾動(dòng)字幕，標(biāo)簽屬性的認(rèn)識(shí)來(lái)設(shè)置網(wǎng)頁(yè)的特效。 情感態(tài)度與價(jià)值觀：1.培養(yǎng)學(xué)生的自主學(xué)習(xí)能力和創(chuàng)新能力. 2.提高學(xué)生對(duì)處理信息，應(yīng)用信息的能力。 （二）．教學(xué)重，難點(diǎn) 重點(diǎn)：制作動(dòng)態(tài)頁(yè)面 難點(diǎn)：會(huì)熟練的運(yùn)用marquee標(biāo)簽屬性。 （三）教學(xué)課時(shí) 2課時(shí) （四）教學(xué)方法 任務(wù)驅(qū)動(dòng)，教授加演示 （五）

2、教學(xué)過(guò)程 1．課堂引入分析 從本課開(kāi)始制作網(wǎng)站的“校園內(nèi)外”篇，共包含欄目介紹頁(yè)面、“體育健身”、“集體活動(dòng)”、“校內(nèi)實(shí)踐”和“野外拓展”5個(gè)頁(yè)面。 在標(biāo)題部分，我們將會(huì)學(xué)習(xí)用滾動(dòng)字幕來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果，同時(shí)為了更好的控制頁(yè)面的布局，學(xué)習(xí)使用層來(lái)作為容器精確定位多種對(duì)象。 教授新課： 1.背景圖像的更改 拆分background…………jpg” 2.標(biāo)題文本的設(shè)置 通過(guò)CSS樣式進(jìn)行設(shè)置，目標(biāo)規(guī)則：style1，字體：黑體，大小：24，顏色：#0000FF 3.滾動(dòng)字幕-活動(dòng)字幕 使用marquee標(biāo)簽制作滾動(dòng)字幕 教材中已經(jīng)詳盡的介紹了ma

3、rquee標(biāo)簽制作滾動(dòng)字幕的方法，插入marquee標(biāo)簽后，要在“標(biāo)簽檢查器”中設(shè)置好屬性，那么不論是文字還是圖像（包括多張）的滾動(dòng)就不在話下了。 設(shè)置好屬性后，注意觀察代碼視圖，此時(shí)字幕部分的代碼如下圖10.2所示，對(duì)照“標(biāo)簽檢查器”中的屬性和教材提供的屬性列表，我們可以輕松看懂這些代碼，它表示字幕將先向右再向左以兩個(gè)方向滾來(lái)滾去，滾動(dòng)速度是3，滾動(dòng)停頓時(shí)間是1毫秒。標(biāo)題文字應(yīng)用的樣式是ys02（關(guān)于樣式的內(nèi)容我們?cè)谙鹿?jié)課集中介紹）。 圖10.2 設(shè)置滾動(dòng)字幕后的代碼視圖 圖10.3 設(shè)置圖片滾動(dòng)后的代碼視圖 使用AP Div 元素布局網(wǎng)頁(yè)

4、 教材中我們使用“布局工具欄中”的“繪制AP Div”工具創(chuàng)建新的絕對(duì)定位層元素，另外還有一種比較常用的方法，是通過(guò)執(zhí)行“插入” →“布局對(duì)象” →AP Div命令插入層。 （三）教學(xué)補(bǔ)充 插入日期、時(shí)間 我們經(jīng)常在網(wǎng)頁(yè)上看到最近一次修改網(wǎng)頁(yè)的時(shí)間，這說(shuō)明網(wǎng)頁(yè)是在不斷更新的，從而吸引訪問(wèn)者再次光顧。Dreamweaver 提供了一個(gè)方便的日期對(duì)象，可以以多種格式插入當(dāng)前日期。其具體操作步驟如下： （1）打開(kāi)網(wǎng)頁(yè)，將插入點(diǎn)設(shè)置在要插入時(shí)間的位置上。 （2） 執(zhí)行“插入” → “日期”命令，打開(kāi)如圖10.4所示的“插入日期”對(duì)話框。 （3） 在此對(duì)話框中，分別設(shè)置星期格式、日期格式和時(shí)間格式，并且注意要選中“儲(chǔ)存時(shí)自動(dòng)更新”復(fù)選框，這樣才會(huì)不斷更新時(shí)間、日期。 （4）切換到代碼窗口，可以看出在body標(biāo)簽內(nèi)，增加了一句代碼，它的含義就是按照指定格式顯示并更新當(dāng)前系統(tǒng)日期和時(shí)間。 （5）調(diào)整日期時(shí)間的文字顯示格式 刪除插入的“日期時(shí)間”：?jiǎn)螕粼O(shè)計(jì)窗口中的日期時(shí)間顯示部分，會(huì)發(fā)現(xiàn)整個(gè)區(qū)域一起被選中，而不是普通字符的閃爍插入點(diǎn)狀態(tài)，此時(shí)直接單擊鍵盤上的Delete刪除即可，相應(yīng)的代碼窗口內(nèi)容也會(huì)自動(dòng)刪除。