《HTML5 CSS3 網(wǎng)頁設(shè)計與制作》教案-29 第9章 第 6-8節(jié) 書城主體制作書城底部制作文件路徑

課程教案-29課題名稱第9章DIV+CSS設(shè)計商業(yè)網(wǎng)站第6-8節(jié)書城主體制作，書城底部制作，文件路徑授課班級軟件技術(shù)等大一上學(xué)期授課班級授課學(xué)時2授課地點多媒體教室授課形式講授、演示參考教材《前端HTML+CSS修煉之道》教學(xué)資源電子課件、教案、文字材料教學(xué)目標(biāo)知識目標(biāo)：掌握常用標(biāo)簽及樣式表的應(yīng)用，可以在網(wǎng)頁布局的基礎(chǔ)上完成網(wǎng)頁具體內(nèi)容的制作；技能目標(biāo)：數(shù)量掌握HTML+CSS制作常見的網(wǎng)頁樣式，靈活運用標(biāo)簽的樣式表實現(xiàn)各種網(wǎng)頁效果。素質(zhì)目標(biāo)：培養(yǎng)學(xué)生遇到錯誤可以靜心下來找出錯誤的耐心和能力。教學(xué)重點與難點教學(xué)重點書城主體制作，書城底部制作，文件路徑教學(xué)難點書城主體制作學(xué)情分析本次課程為第9章6-8節(jié)的理論講授課程，需要老師進(jìn)行大量的代碼演示，需要注意控制授課進(jìn)度時間安排，在演示過程中的關(guān)鍵點，需要提示學(xué)生記錄筆記，為后面的上機課提供思路和輔助。教學(xué)過程課前：讓學(xué)生提前提前預(yù)習(xí)及嘗試制作網(wǎng)站的主體部分，在嘗試過程中記錄出現(xiàn)的問題，嘗試在課程中，老師的現(xiàn)場演示中找出解決問題的方案。課中：1、現(xiàn)場編碼演示網(wǎng)站主體的制作。網(wǎng)站主體部分主要用列表形式進(jìn)行圖書信息的展示，主要分為三塊內(nèi)容，一塊是網(wǎng)站廣告，銷售排行及優(yōu)惠信息；一塊是新書上架；一塊是圖書分類展示。2、現(xiàn)場編碼演示網(wǎng)站底部及快捷操作部分網(wǎng)站文件路徑在相對路徑和絕對路徑中，../表示返回上一級，因為css文件在css文件夾里，圖片在img文件夾下，那么樣式表文件就需要返回上一級找到img文件夾才能找到相應(yīng)的圖片。直接文件夾名或是./開頭表示和當(dāng)前平級。不管是帶../還是不帶，這種寫法都叫相對路徑；另一種叫相對于根目錄路徑，它的寫法必須以/開始，意思是從根目錄開始一級一級向下查找，不管在哪里，要使用x.png這個圖片，路徑都必須是/img/x.png；還有一種寫法叫做絕對路徑，是以http://域名開始的。兩種方法各有優(yōu)劣，可以根據(jù)需要采用一種合適的方法。課后：根據(jù)老師的現(xiàn)場演示，課下完成網(wǎng)站主體部分和底部的編碼。教學(xué)反思本次課程現(xiàn)場編碼內(nèi)容較多，代碼量較大，學(xué)生在課后完成任務(wù)的時候很可能在局部細(xì)節(jié)上出