網頁制作教學設計范文第1篇
摘要：DIV+CSS是目前最流行的網頁制作技術，但學習起來枯燥，不宜熟練掌握。為了提高教學質量，提升學習效果，進而使學生由淺入深、循序漸進地掌握這門技術，本論文通過教學方法的選用、知識點、技能點實踐環節的設計和考核方式的設計等方面的探索，經過教學實踐，總結出一些經驗。
關鍵詞：DIV+CSS教學設計
引言：
網頁設計課程是一門實踐技能很強、技術手段不斷更新的技能課，隨著網絡技術的飛速發展，在XHTML網站設計標準中，已不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。最直接的特點就是，代碼冗余小，網頁打開速度快。結構和表現分離了，只需改變css就可改變網頁的風格，而內容不變，這樣維護和升級的成本降低了。對于初學者，常常被枯燥的代碼和編寫語言搞得焦頭爛額，要收到顯著的教學效果，教學方法尤其顯得重要。
一、教學方法設計
教學方法是一門課程的教學中，教師為了完成既定的教學任務，實現教學目標，而在教學過程中運用的教學方式和手段。面對課程知識點和實操強的特點，可突出以下幾種教學方式。
強調記筆記。記筆記有助于對學習內容的理解。記筆記的過程也是一個積極思考的過程，可調動眼、耳、腦、手一齊活動，促進了對課堂講授內容的理解。尤其越是邏輯性強的課程越需要一個良好的學習習慣，而這正是高職學生所欠缺的。因此，面對這種特點的學生，教學方法中一定要注重有意識讓學生建立良好的學習習慣。從第一節課就開始提出記筆記的明確要求，并納入到平時作業成績考核中，讓學生不得不先重視起來。不定期地在課上練習和課后作業中引入筆記的內容，讓學生明顯意識到課上記了筆記，平時注重積累，做練習就會提高效率，事半功倍，否則，按時完成作業都相對費勁。有一個現象叫“飛輪效應”.為了使靜止的飛輪轉動起來，一開始我們必須使很大的力氣，一圈一圈反復地推，每轉一圈都很費力，但是每一圈的努力都不會白費，飛輪會轉動得越來越快.達到某一臨界點后，便無須再費更大的力氣，飛輪依舊會不停地快速轉動。因此，培養學生好的學習習慣也是一樣，開始教師和學生可能都會很累，但只要堅持不懈，學生就會逐漸養成穩定良好的學習習慣，看上去很累的學習就會變得自然輕松。老師也會越教越輕松。
鼓勵原則。美國作家馬克·吐溫說過：“一句好聽的贊辭能使我不吃不喝活上三個月?！边@句話夸張地描述了表揚的魅力所在。有時，一個贊許的目光能使人鼓起勇氣，信心百倍。對于這個觀點，在多年的教學生涯中，相信許多老師都受益匪淺。當前，DIV+CSS已經成為制作網頁的一種技術潮流和趨勢，學習者也必須不斷提高自己的技能來適應這種變化。各種XHTML標簽和CSS屬性在實際的操作中，往往問題層出不窮，令學生頭疼不已，如果在這個時候，不及時加以鼓勵，就會導致教學效果半途而廢。因此，一定要在學生面對問題時，主動與其一起思考，提出解決該問題的關鍵點，讓學生自己嘗試，而不是直接告訴答案，教學效果不言而喻。學生會認為是自己經過艱苦思考而最終戰勝了困難，自信心增強，也就有了繼續學習下去的動力。
循序漸進。面對高職學生，想要取得好的教學效果，循序漸進的教學方法必不可少。在課堂教學中，不要放過任何一個看上去非常簡單的問題，有些小問題往往不簡單，可以延伸出許多知識點，只有熟練掌握學會舉一反三才能更加自如地運用該門技術。要選定一個難易度適中的網站，既不能太難模仿，使學生產生畏難抵觸心理，又不能太簡單，而達不到鞏固教學內容的目的。學生在“模仿”課環節，對指定的網站首頁和其他主要網頁進行模仿還原，該網站的各類素材可以直接使用，對于頁面在尺寸、色彩、外觀上也可以相同。對于這種特定的、明確的任務，學生往往會表現出極大的熱情。
對比較學法。制作一個簡單的網頁，尤其運用以前的TABLE布局技術，上手很快，容易實現，大部分初學者一旦學習了表格布局技術，就很容易依賴，而不愿意去嘗試DIV+CSS技術了。面對這種問題，就要適時運用對比教學法，例如通過制作一個“簡單相冊”的小例子，讓學生分別運用TABLE技術和DIV+CSS技術制作，完成之后，讓學生觀察代碼有何不同?？梢悦黠@看出，table時代，一個頁面表格嵌套10個以上是非常普遍的事情，從而頁面代碼冗長，雜亂無章。然后緊接著提出迅速更新頁面的風格，讓學生繼續嘗試完成。通過實踐，學生就可以清晰得出結論，DIV+CSS技術的優勢，內容和形式分離，更新頁面風格，只需要改動CSS文件就像換件衣服一樣簡單容易。DIV+CSS技術制作“簡單相冊”代碼如下：
<style>
div，body，img，ul，li，p，a{ margin：0；padding：0}
.base{ margin：0 auto；width：530px}
ul{ list-style-type：none；width：530px}
li{ float：left；margin：0 5px；}
img{ width：150px；height：100px；border：1px solid #CCCCCC}
p{ font：\"宋體\"；font-size：9px；text-align：center}
h1{ font-size：24px；text-align：center}
</style>
<body>