第10課左右逢源-滾動字幕與層的使用

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

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

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

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

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