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

授課日期

班級名稱

授課地點

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

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

點（1）標簽樣式、高級樣式、類樣式的定義與應(yīng)用難

點（1）使用CSS樣式表美化頁面課

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

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

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