聞立鷗

摘要：DIV+CSS是目前最流行的網(wǎng)頁(yè)制作技術(shù)，但學(xué)習(xí)起來(lái)枯燥，不宜熟練掌握。為了提高教學(xué)質(zhì)量，提升學(xué)習(xí)效果，進(jìn)而使學(xué)生由淺入深、循序漸進(jìn)地掌握這門技術(shù)，本論文通過(guò)教學(xué)方法的選用、知識(shí)點(diǎn)、技能點(diǎn)實(shí)踐環(huán)節(jié)的設(shè)計(jì)和考核方式的設(shè)計(jì)等方面的探索，經(jīng)過(guò)教學(xué)實(shí)踐，總結(jié)出一些經(jīng)驗(yàn)。

關(guān)鍵詞：DIV+CSS教學(xué)設(shè)計(jì)

中圖分類號(hào)：G642.0 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2015）30-0117-02

引言：

網(wǎng)頁(yè)設(shè)計(jì)課程是一門實(shí)踐技能很強(qiáng)、技術(shù)手段不斷更新的技能課，隨著網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，已不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。最直接的特點(diǎn)就是，代碼冗余小，網(wǎng)頁(yè)打開速度快。結(jié)構(gòu)和表現(xiàn)分離了，只需改變css就可改變網(wǎng)頁(yè)的風(fēng)格，而內(nèi)容不變，這樣維護(hù)和升級(jí)的成本降低了。對(duì)于初學(xué)者，常常被枯燥的代碼和編寫語(yǔ)言搞得焦頭爛額，要收到顯著的教學(xué)效果，教學(xué)方法尤其顯得重要。

一、教學(xué)方法設(shè)計(jì)

教學(xué)方法是一門課程的教學(xué)中，教師為了完成既定的教學(xué)任務(wù)，實(shí)現(xiàn)教學(xué)目標(biāo)，而在教學(xué)過(guò)程中運(yùn)用的教學(xué)方式和手段。面對(duì)課程知識(shí)點(diǎn)和實(shí)操?gòu)?qiáng)的特點(diǎn)，可突出以下幾種教學(xué)方式。

強(qiáng)調(diào)記筆記。記筆記有助于對(duì)學(xué)習(xí)內(nèi)容的理解。記筆記的過(guò)程也是一個(gè)積極思考的過(guò)程，可調(diào)動(dòng)眼、耳、腦、手一齊活動(dòng)，促進(jìn)了對(duì)課堂講授內(nèi)容的理解。尤其越是邏輯性強(qiáng)的課程越需要一個(gè)良好的學(xué)習(xí)習(xí)慣，而這正是高職學(xué)生所欠缺的。因此，面對(duì)這種特點(diǎn)的學(xué)生，教學(xué)方法中一定要注重有意識(shí)讓學(xué)生建立良好的學(xué)習(xí)習(xí)慣。從第一節(jié)課就開始提出記筆記的明確要求，并納入到平時(shí)作業(yè)成績(jī)考核中，讓學(xué)生不得不先重視起來(lái)。不定期地在課上練習(xí)和課后作業(yè)中引入筆記的內(nèi)容，讓學(xué)生明顯意識(shí)到課上記了筆記，平時(shí)注重積累，做練習(xí)就會(huì)提高效率，事半功倍，否則，按時(shí)完成作業(yè)都相對(duì)費(fèi)勁。有一個(gè)現(xiàn)象叫“飛輪效應(yīng)”.為了使靜止的飛輪轉(zhuǎn)動(dòng)起來(lái)，一開始我們必須使很大的力氣，一圈一圈反復(fù)地推，每轉(zhuǎn)一圈都很費(fèi)力，但是每一圈的努力都不會(huì)白費(fèi)，飛輪會(huì)轉(zhuǎn)動(dòng)得越來(lái)越快.達(dá)到某一臨界點(diǎn)后，便無(wú)須再費(fèi)更大的力氣，飛輪依舊會(huì)不停地快速轉(zhuǎn)動(dòng)。因此，培養(yǎng)學(xué)生好的學(xué)習(xí)習(xí)慣也是一樣，開始教師和學(xué)生可能都會(huì)很累，但只要堅(jiān)持不懈，學(xué)生就會(huì)逐漸養(yǎng)成穩(wěn)定良好的學(xué)習(xí)習(xí)慣，看上去很累的學(xué)習(xí)就會(huì)變得自然輕松。老師也會(huì)越教越輕松。

鼓勵(lì)原則。美國(guó)作家馬克·吐溫說(shuō)過(guò)：“一句好聽的贊辭能使我不吃不喝活上三個(gè)月。”這句話夸張地描述了表?yè)P(yáng)的魅力所在。有時(shí)，一個(gè)贊許的目光能使人鼓起勇氣，信心百倍。對(duì)于這個(gè)觀點(diǎn)，在多年的教學(xué)生涯中，相信許多老師都受益匪淺。當(dāng)前，DIV+CSS已經(jīng)成為制作網(wǎng)頁(yè)的一種技術(shù)潮流和趨勢(shì)，學(xué)習(xí)者也必須不斷提高自己的技能來(lái)適應(yīng)這種變化。各種XHTML標(biāo)簽和CSS屬性在實(shí)際的操作中，往往問(wèn)題層出不窮，令學(xué)生頭疼不已，如果在這個(gè)時(shí)候，不及時(shí)加以鼓勵(lì)，就會(huì)導(dǎo)致教學(xué)效果半途而廢。因此，一定要在學(xué)生面對(duì)問(wèn)題時(shí)，主動(dòng)與其一起思考，提出解決該問(wèn)題的關(guān)鍵點(diǎn)，讓學(xué)生自己嘗試，而不是直接告訴答案，教學(xué)效果不言而喻。學(xué)生會(huì)認(rèn)為是自己經(jīng)過(guò)艱苦思考而最終戰(zhàn)勝了困難，自信心增強(qiáng)，也就有了繼續(xù)學(xué)習(xí)下去的動(dòng)力。

循序漸進(jìn)。面對(duì)高職學(xué)生，想要取得好的教學(xué)效果，循序漸進(jìn)的教學(xué)方法必不可少。在課堂教學(xué)中，不要放過(guò)任何一個(gè)看上去非常簡(jiǎn)單的問(wèn)題，有些小問(wèn)題往往不簡(jiǎn)單，可以延伸出許多知識(shí)點(diǎn)，只有熟練掌握學(xué)會(huì)舉一反三才能更加自如地運(yùn)用該門技術(shù)。要選定一個(gè)難易度適中的網(wǎng)站，既不能太難模仿，使學(xué)生產(chǎn)生畏難抵觸心理，又不能太簡(jiǎn)單，而達(dá)不到鞏固教學(xué)內(nèi)容的目的。學(xué)生在“模仿”課環(huán)節(jié)，對(duì)指定的網(wǎng)站首頁(yè)和其他主要網(wǎng)頁(yè)進(jìn)行模仿還原，該網(wǎng)站的各類素材可以直接使用，對(duì)于頁(yè)面在尺寸、色彩、外觀上也可以相同。對(duì)于這種特定的、明確的任務(wù)，學(xué)生往往會(huì)表現(xiàn)出極大的熱情。

對(duì)比較學(xué)法。制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，尤其運(yùn)用以前的TABLE布局技術(shù)，上手很快，容易實(shí)現(xiàn)，大部分初學(xué)者一旦學(xué)習(xí)了表格布局技術(shù)，就很容易依賴，而不愿意去嘗試DIV+CSS技術(shù)了。面對(duì)這種問(wèn)題，就要適時(shí)運(yùn)用對(duì)比教學(xué)法，例如通過(guò)制作一個(gè)“簡(jiǎn)單相冊(cè)”的小例子，讓學(xué)生分別運(yùn)用TABLE技術(shù)和DIV+CSS技術(shù)制作，完成之后，讓學(xué)生觀察代碼有何不同?？梢悦黠@看出，table時(shí)代，一個(gè)頁(yè)面表格嵌套10個(gè)以上是非常普遍的事情，從而頁(yè)面代碼冗長(zhǎng)，雜亂無(wú)章。然后緊接著提出迅速更新頁(yè)面的風(fēng)格，讓學(xué)生繼續(xù)嘗試完成。通過(guò)實(shí)踐，學(xué)生就可以清晰得出結(jié)論，DIV+CSS技術(shù)的優(yōu)勢(shì)，內(nèi)容和形式分離，更新頁(yè)面風(fēng)格，只需要改動(dòng)CSS文件就像換件衣服一樣簡(jiǎn)單容易。DIV+CSS技術(shù)制作“簡(jiǎn)單相冊(cè)”代碼如下：

風(fēng)景相冊(cè)

風(fēng)景圖片1

風(fēng)景圖片2

風(fēng)景圖片3

風(fēng)景圖片4

風(fēng)景圖片5

風(fēng)景圖片6

風(fēng)景圖片7

風(fēng)景圖片8

風(fēng)景圖片9