第十四講-使用CSS美化網(wǎng)頁(yè)

授課日期

班級(jí)名稱(chēng)

授課地點(diǎn)

教學(xué)課題第十四講使用CSS美化網(wǎng)頁(yè)課

時(shí)6學(xué)時(shí)教學(xué)目的（1）掌握CSS樣式表的基本語(yǔ)法和定義位置。（2）掌握標(biāo)簽樣式、高級(jí)樣式、類(lèi)樣式的定義方法。（3）掌握樣式的編輯方法。（4）掌握如何使用CSS樣式表美化頁(yè)面。知識(shí)目標(biāo)（1）CSS樣式表的基本語(yǔ)法和定義位置。（2）標(biāo)簽樣式、高級(jí)樣式、類(lèi)樣式的定義方法。（3）樣式的編輯方法。（4）使用CSS樣式表美化頁(yè)面。能力目標(biāo)（1）利用CSS更好來(lái)美化頁(yè)面素質(zhì)目標(biāo)培養(yǎng)學(xué)生的創(chuàng)新能力與獨(dú)立思考能力，并使其具有分析問(wèn)題、解決問(wèn)題的能力。重

點(diǎn)（1）標(biāo)簽樣式、高級(jí)樣式、類(lèi)樣式的定義與應(yīng)用難

點(diǎn)（1）使用CSS樣式表美化頁(yè)面課

型講授型＋操作型教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、理論實(shí)踐一體化教學(xué)手段多媒體教學(xué)教

參中國(guó)青年出版社《DreamweaverMX2004完美網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)環(huán)節(jié)

時(shí)間安排復(fù)習(xí)提問(wèn)：常用表單對(duì)象有哪些？分別實(shí)現(xiàn)什么功能？52.情境設(shè)置，項(xiàng)目引入情境設(shè)置：BZ旅行社新推出了“山岳游”的旅游項(xiàng)目，請(qǐng)你為其設(shè)計(jì)制作一個(gè)宣傳“山岳游”的網(wǎng)頁(yè)，并使用CSS布局與美化。通過(guò)具體情境引入本次課要學(xué)的“使用CSS美化網(wǎng)頁(yè)”，并展示項(xiàng)目最終效果網(wǎng)頁(yè)。53.教學(xué)目標(biāo)說(shuō)明：介紹本次課的項(xiàng)目要求、項(xiàng)目目標(biāo)、項(xiàng)目重點(diǎn)難點(diǎn)。104.項(xiàng)目資訊，發(fā)放資料簡(jiǎn)要介紹項(xiàng)目制作所需的主要知識(shí)及操作方法；將學(xué)習(xí)資料以PPT及視頻動(dòng)畫(huà)的形式發(fā)給學(xué)生。205.角色扮演，形成方案每組學(xué)生既模擬客戶(hù)又模擬網(wǎng)站設(shè)計(jì)公司，既負(fù)責(zé)向下一組提出客戶(hù)需求，又負(fù)責(zé)為上一組設(shè)計(jì)制作網(wǎng)頁(yè)；組長(zhǎng)（項(xiàng)目經(jīng)理）負(fù)責(zé)向組員（網(wǎng)頁(yè)設(shè)計(jì)師）講述客戶(hù)需求，組員集思廣益，產(chǎn)生完成項(xiàng)目的初步方案。306.方案展示，確定目標(biāo)各項(xiàng)目經(jīng)理將討論后的方案進(jìn)行展示，各組組員可做補(bǔ)充說(shuō)明；教師與其他組成員點(diǎn)評(píng)，經(jīng)改進(jìn)后最終確定可實(shí)施的、能夠達(dá)成知識(shí)和技能目標(biāo)的工作方案。307.任務(wù)分解，實(shí)戰(zhàn)操練教師將項(xiàng)目分解為多個(gè)任務(wù)：任務(wù)1：使用Div+CSS布局網(wǎng)頁(yè)任務(wù)2：創(chuàng)建頁(yè)面布局樣式任務(wù)3：美化頁(yè)面元素任務(wù)4：插入Div標(biāo)簽對(duì)頁(yè)面進(jìn)行布局任務(wù)5：新建導(dǎo)航欄代碼片段、表單代碼片段和表格代碼片段任務(wù)6：在頁(yè)面各個(gè)區(qū)塊中輸入文字或插入頁(yè)面元素每組成員按照客戶(hù)需求分步進(jìn)行設(shè)計(jì)制作，教師巡視指導(dǎo)。針對(duì)學(xué)生中普遍存在的問(wèn)題利用教學(xué)廣播講解演示；針對(duì)個(gè)別問(wèn)題，進(jìn)行個(gè)別指導(dǎo)。1108.成果展示，考核評(píng)價(jià)由小組觀摩評(píng)選出一個(gè)優(yōu)秀設(shè)計(jì)作品進(jìn)行成果展示。介紹過(guò)程中要求說(shuō)明設(shè)計(jì)思路及制作過(guò)程中遇到的問(wèn)題，如何解決問(wèn)題，同時(shí)其他組成員也可提出問(wèn)題，讓設(shè)計(jì)者解釋設(shè)計(jì)所用的相關(guān)技術(shù)及特點(diǎn)；依據(jù)項(xiàng)目評(píng)價(jià)表對(duì)作品進(jìn)行自我評(píng)價(jià)、小組評(píng)價(jià)和教師評(píng)價(jià)，挖掘作品優(yōu)點(diǎn)，并指出問(wèn)題所在，給出具體改進(jìn)及修改意見(jiàn)；評(píng)選出“最佳美工設(shè)計(jì)”、“最佳網(wǎng)頁(yè)制作”、“最佳組織協(xié)作”、“最佳員工”等獎(jiǎng)項(xiàng)。359.總結(jié)歸納，引申提高首先提問(wèn)學(xué)生總結(jié)，讓學(xué)生談本項(xiàng)目的收獲；教師對(duì)本次課的實(shí)際意義、重點(diǎn)、難點(diǎn)、容易出錯(cuò)處等及時(shí)進(jìn)行總結(jié)。并針對(duì)項(xiàng)目的不足之處，進(jìn)行引申和提高。小結(jié)：Div+CSS是當(dāng)前非常流行的符合WEB標(biāo)準(zhǔn)的布局方式，它的優(yōu)點(diǎn)很多。本章通過(guò)“泰山游”網(wǎng)頁(yè)的實(shí)際布局講述了Div+CSS布局方式的使用。重點(diǎn)要掌握各種選擇器的使用場(chǎng)合、常用的CSS規(guī)則屬性和DIV+CSS布局方法。今后還要通過(guò)不斷的實(shí)踐掌握DIV+CSS布局方式的使用技巧。201