資源描述：
《層疊樣式表設(shè)計(jì)教學(xué)教案》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、層疊樣式表的應(yīng)用設(shè)計(jì)教學(xué)教案模塊：網(wǎng)頁制作:HTML和JavaScript第七章學(xué)生：高中二年級課時(shí)：1課時(shí)一、教材分析CSS層疊樣式表這一教學(xué)內(nèi)容是網(wǎng)頁制作:HTML和JavaScript第七章中的內(nèi)容。樣式表在學(xué)生學(xué)習(xí)DW軟件時(shí)就是一個(gè)重點(diǎn)、難點(diǎn)。在前一課時(shí)教學(xué)過程屮已經(jīng)介紹了樣式表的基本概念、功能與優(yōu)點(diǎn)，討論了樣式表的規(guī)則及不同類型的選擇器。在這一課時(shí)中主要介紹如何在網(wǎng)頁中使用嵌入樣式表和使用外部樣式表。二、教學(xué)對象分析通過之前的學(xué)習(xí)和實(shí)踐活動，學(xué)生已經(jīng)掌握了利用DW設(shè)計(jì)網(wǎng)頁的基本方法和操作，并且對網(wǎng)頁設(shè)
2、計(jì)中的I1TML的基本代碼也已經(jīng)較為熟悉。但正因?yàn)閷W的熟悉，學(xué)生更習(xí)慣用DW中的設(shè)計(jì)窗口來制作網(wǎng)頁，而不愿用代碼窗口，所以要求學(xué)生在記事本中完成代碼的編寫任務(wù)。三、教學(xué)目標(biāo)（1）熟練掌握CSS的基本應(yīng)用：內(nèi)聯(lián)式樣式表、行內(nèi)樣式表；（2）掌握CSS的價(jià)值體現(xiàn)：外聯(lián)式樣式表應(yīng)用四、教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：內(nèi)聯(lián)式樣式表、行內(nèi)樣式表；css的價(jià)值體現(xiàn)：外聯(lián)式樣式表的應(yīng)用對于網(wǎng)站頁面風(fēng)格統(tǒng)一的作用。css產(chǎn)生的特殊效果一一超鏈接不同的狀態(tài)效果教學(xué)難點(diǎn)：外聯(lián)式樣式表的應(yīng)用；鏈接式與導(dǎo)入式css產(chǎn)生的特殊效果一一超鏈接不
3、同的狀態(tài)效果五、教學(xué)準(zhǔn)備1、軟件：記事本、；2、資源：相關(guān)活動的自主學(xué)習(xí)網(wǎng)頁、教學(xué)演示文稿；3、環(huán)境：多媒體電子教室、投影儀、電子教學(xué)軟件；六、教學(xué)過程1、復(fù)習(xí)引入任務(wù)：制作岀如下式樣的文字效果標(biāo)題一示例段落一段落二制作要點(diǎn)：1、定義標(biāo)題一H1樣式效果為：字體Arial；字號45PX；顏色紅色；2、用CLASS選擇器定義＜P＞以兩種不同的顏色效果顯示?；顒用枋?學(xué)生在記事本中完成三個(gè)樣式規(guī)則的書寫后，舉手示意。學(xué)生活動：上機(jī)完成后，電子教室舉手示意。教師活動：電子教室屏幕監(jiān)控，在大部分學(xué)生完成后，切出個(gè)別學(xué)生代
4、碼進(jìn)行分析。小結(jié)：CSS的基本概念、書寫格式、應(yīng)用方法；CSS與文字格式的區(qū)別；CSS的基本應(yīng)用：2、新課內(nèi)容總?cè)蝿?wù)：應(yīng)用樣式表完成一個(gè)歌詞頁面的制作。3件新建文件l.htBl-licrosoftInter文件（1）輜5②査看⑦收慈⑷工具（I）祜助QPJniPO?圍Q素：收孤夾?u止@）
5、e]E：課件詡建文件夾i.ihwi北京歡迎您迎接另一個(gè)晨曦帶來全新空氣氣息改變惰味不變茶香飄滿惰誼我家大門常打開開放懷抱等你擁抱過就有了默契你會愛上這里任務(wù)一：制作出如下效果：教師活動：分析析案例屮的所用到的兩個(gè)樣式，?
6、boy{color:red;font-family:Arial;}.girl{color:green;fdnt-family:Arial;}學(xué)生活動：編寫代碼完成一組男女對唱歌詞。（舉手）繼續(xù)完成頁面的下面部分一一歌詞屮的男女聲合唱部分用另一種樣式（不同的大小與顏色）顯示。不管遠(yuǎn)近都是客人請不用客氣相約好了在一起我們歡迎你任務(wù)二：行內(nèi)樣式的應(yīng)用教師活動：先向同學(xué)們提問：我如果想對這一網(wǎng)頁中的一段文字（演唱者）應(yīng)用一個(gè)樣式。只應(yīng)用一次，這樣的方法有沒有更加方便？（應(yīng)該是沒有的）一一可以應(yīng)用的是行內(nèi)樣式。7、le=text-align:center;font-style:italic;font-family:u華文彩云”〉演唱者:群星v/p>北京歡迎您迎接另一個(gè)晨曦帶來全新空氣1-^—9—0亠■■?——A—■——I亠學(xué)生活動：在原有網(wǎng)頁中用行內(nèi)樣式的方法填加上“演唱者：群星”任務(wù)三：外聯(lián)樣式表的應(yīng)用教師活動：提問學(xué)生如果在你的站點(diǎn)中多次應(yīng)用用這一種樣式，需要不需要在每個(gè)頁面的頭部文件中寫出樣式規(guī)則呢？（如果一定要寫的話，就體現(xiàn)不岀樣式表的優(yōu)越性）一一外聯(lián)樣式表的調(diào)用：第一種方法鏈接：〈HEAD〉〈LINKREL=s
8、tylesheetHREF=”my.css”TYPE=Htext/cssn)(/HEAD)rekstylesheetrel是關(guān)聯(lián)的總思，關(guān)聯(lián)的是一個(gè)樣式表（stylesheet）文檔，它表示這個(gè)link在文檔初始化時(shí)將被使用。一般這里是不需要改動的。第二種方法導(dǎo)入：
(styletype=Mtext/cssH)@importurl(my.css);(/style)9、Arial;Font-size:45PX;color:red;}p.man{color:red;}p.woman{color:green;}p.total{color:yellow;}Ln1,Col□回區(qū)］在歌詞頁面屮調(diào)用樣式表:B1.3.htMl-記事本文件0）編輯格式?）查看◎）幫助
10、
