金璐鈺

摘要：網(wǎng)頁制作是高職院校重要的理論實(shí)踐結(jié)合的課程。網(wǎng)頁制作教學(xué)中，CSS+DIV頁面布局技術(shù)不僅是重點(diǎn)也是難點(diǎn)，本文結(jié)合CSS布局技術(shù)教學(xué)環(huán)節(jié)的內(nèi)容及學(xué)生的特點(diǎn)，從教學(xué)內(nèi)容及教學(xué)方法方面進(jìn)行了研究，以期推動(dòng)高職院校理論實(shí)踐的進(jìn)步。

關(guān)鍵詞：CSS+DIV；網(wǎng)頁制作；高職教學(xué)；頁面布局

中圖分類號(hào)：G718.5 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2016）17-0226-02

一、引言

隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁布局的經(jīng)典模式表格布局，已逐漸被靈活、加載快速、便于維護(hù)更新、代碼冗余小的CSS+DIV布局方式所代替?！毒W(wǎng)頁制作》是高職院校計(jì)算機(jī)專業(yè)的必修課程，也是實(shí)踐性強(qiáng)、有市場需求潛力的工具科目，作為高職院校的教師，讓學(xué)生掌握網(wǎng)頁設(shè)計(jì)的前沿技術(shù)，培養(yǎng)高水平學(xué)以致用的網(wǎng)頁編寫人才，是教學(xué)和研究的主要目標(biāo)和方向。本文以CSS頁面布局為例，研究了如何安排教學(xué)內(nèi)容以及使用怎樣的教學(xué)方法才能達(dá)到更好的教學(xué)效果。

根據(jù)幾個(gè)學(xué)期的教學(xué)和企業(yè)反饋，我們發(fā)現(xiàn)傳統(tǒng)的教學(xué)模式存在不足。以往教學(xué)使用的是理論結(jié)合案例的經(jīng)典教學(xué)模式，以書本為中心，著重講解書中案例。雖然此種教學(xué)模式有一定的優(yōu)點(diǎn)，即學(xué)生可以模仿書本案例步驟進(jìn)行練習(xí)。但由于CSS代碼讀起來有點(diǎn)枯燥，CSS+DIV技術(shù)復(fù)雜度也比較高，和表格布局相比較，CSS+DIV布局上手相對困難，尤其對于網(wǎng)頁設(shè)計(jì)初學(xué)者，繁雜的代碼往往讓人焦頭爛額。對普通的高職學(xué)生而言，往往更沒有耐心去學(xué)習(xí)這些乏味的代碼，即使有些學(xué)生按照書中步驟完成了案例，一旦脫離書本，對于新的案例將不知從何做起。所以，傳統(tǒng)的教學(xué)模式往往事倍功半、難以培養(yǎng)成功。

二、從網(wǎng)站分析入手，師生互動(dòng)、結(jié)合實(shí)踐的教學(xué)模式探究

在幾個(gè)學(xué)期教學(xué)實(shí)踐、學(xué)生在企業(yè)實(shí)習(xí)以及就業(yè)學(xué)生的反饋基礎(chǔ)上，我們改造了給高職學(xué)生講授網(wǎng)頁制作技術(shù)的模式，強(qiáng)調(diào)跟蹤主流的網(wǎng)站設(shè)計(jì)風(fēng)格，從網(wǎng)站分析入手，先由學(xué)生主導(dǎo)剖析網(wǎng)頁布局模型，再由老師點(diǎn)評(píng)講解技術(shù)解決方案，并在企業(yè)實(shí)習(xí)和實(shí)踐中鞏固提高學(xué)生的網(wǎng)頁制作能力。具體教學(xué)模式講解如下。

（一）基礎(chǔ)知識(shí)

了解Web頁面基礎(chǔ)知識(shí)，熟悉HTML的基本結(jié)構(gòu)，了解網(wǎng)頁三個(gè)主要的組成部分：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）的含義。網(wǎng)頁的結(jié)構(gòu)主要由XHTML和XML來實(shí)現(xiàn)；通過CSS層疊樣式表實(shí)現(xiàn)表現(xiàn)目的，CSS即用來定義網(wǎng)頁內(nèi)容的顯示樣式；具體行為是由鼠標(biāo)、鍵盤等動(dòng)作所觸發(fā)的事件，標(biāo)準(zhǔn)主要有DOM文檔對象模型和ECMAScript等。

學(xué)生了解了網(wǎng)頁的原理，熟悉了HTML的基本結(jié)構(gòu)后，才能更進(jìn)一步學(xué)習(xí)頁面的修飾，即使用CSS來表現(xiàn)網(wǎng)頁。與此同時(shí)，CSS基礎(chǔ)知識(shí)要重點(diǎn)講授。以往做過實(shí)驗(yàn)，將CSS基礎(chǔ)知識(shí)融入在CSS頁面布局中來講，本以為通過有實(shí)際成果的頁面布局操作能讓學(xué)生更容易掌握CSS基本技術(shù)，但是實(shí)踐過后發(fā)現(xiàn)效果并不理想。因?yàn)槭艿綄W(xué)生理解能力和投入時(shí)間的限制，學(xué)生對授課內(nèi)容的領(lǐng)悟以及預(yù)習(xí)、復(fù)習(xí)和練習(xí)不足，省略基礎(chǔ)，會(huì)讓他們不太容易接受，理解較有困難，從而直接影響了教學(xué)速度和質(zhì)量。

（二）實(shí)踐操作導(dǎo)入

原先CSS頁面布局環(huán)節(jié)的教學(xué)內(nèi)容，是直接通過CSS頁面布局的案例來講解，但實(shí)踐過后，發(fā)現(xiàn)學(xué)生學(xué)起來有難度，因?yàn)镃SS+DIV技術(shù)比較抽象，并非是完全所見即所得的操作，它主要還是依靠代碼的熟悉度和對整個(gè)頁面布局的思維輪廓。

因此，對這一環(huán)節(jié)的教學(xué)內(nèi)容作了調(diào)整：加入表格布局的介紹。因?yàn)楸砀癫季窒鄬唵危菀桌斫馇乙渍莆?，雖然表格布局不再是主流，但學(xué)生可以通過表格布局來了解什么是網(wǎng)頁布局。在學(xué)生熟練了表格布局后，再介紹CSS+DIV的布局方式，并讓學(xué)生分別使用表格布局和CSS+DIV布局來實(shí)現(xiàn)同一風(fēng)格的頁面，比如一個(gè)左右結(jié)構(gòu)的頁面，左側(cè)為豎排導(dǎo)航，右側(cè)為主體內(nèi)容，如圖所示：

要求學(xué)生通過實(shí)驗(yàn)，比較表格布局與CSS布局的區(qū)別，學(xué)生實(shí)驗(yàn)后會(huì)很容易發(fā)現(xiàn)表格布局頁面代碼冗長。接下來，老師提出更換頁面的風(fēng)格，要求學(xué)生將左右內(nèi)容進(jìn)行交換。學(xué)生實(shí)踐后，發(fā)現(xiàn)表格布局模式下，需要將左右兩列的所有代碼進(jìn)行交換，而CSS+DIV布局模式下，只需將兩側(cè)div模塊的浮動(dòng)屬性由左浮動(dòng)改為右浮動(dòng)即可，即將CSS樣式“float：left；”改為“float：right；”。對比之下，可以發(fā)現(xiàn)CSS頁面布局技術(shù)的優(yōu)勢：內(nèi)容和形式分離。CSS對于網(wǎng)頁就像外衣，穿上和脫去極為方便，而更新頁面風(fēng)格只需改動(dòng)CSS樣式即可達(dá)到效果，并且CSS樣式可以獨(dú)立于網(wǎng)頁進(jìn)行存儲(chǔ)，即保存為單獨(dú)的CSS文件，一個(gè)CSS文件可以用于多個(gè)網(wǎng)頁。當(dāng)一個(gè)大型網(wǎng)站內(nèi)有多個(gè)子網(wǎng)頁需要設(shè)置為相同的樣式時(shí)，就可以將CSS樣式存儲(chǔ)為獨(dú)立文件，每個(gè)子網(wǎng)頁鏈接該CSS文件，就可以應(yīng)用其中的樣式效果，很大程度地降低了代碼的冗余度。

經(jīng)過一次完整的教學(xué)實(shí)踐周期后，發(fā)現(xiàn)通過這樣的教學(xué)內(nèi)容調(diào)整，學(xué)生能更清楚地了解網(wǎng)頁布局技術(shù)，在練習(xí)中體驗(yàn)了表格布局和CSS布局的區(qū)別，體會(huì)到了CSS布局的優(yōu)越性，并且更好的掌握了CSS布局技術(shù)。此實(shí)踐操作導(dǎo)入部分，講述了實(shí)踐操作初期如何更好地引入主體教學(xué)內(nèi)容。后期的教學(xué)方法及教學(xué)內(nèi)容也進(jìn)行了改革，下面將詳細(xì)闡述主體教學(xué)方法部分。

（三）主體教學(xué)方法

1.教學(xué)內(nèi)容：由原先以課本案例為中心的教學(xué)模式，改為以書中的教學(xué)內(nèi)容為主線，著重分析網(wǎng)絡(luò)上流行網(wǎng)站的布局。課本中的案例主要讓學(xué)生通過課外時(shí)間來學(xué)習(xí)，課堂可作為參考教材，但書中重點(diǎn)以及難點(diǎn)需在課堂中進(jìn)行講解。拿到課堂上進(jìn)行分析的流行網(wǎng)站的選取并非隨機(jī)，而是從簡單開始，逐步向后加深難度。比如布局模式先從左右兩個(gè)模塊布局案例講起，逐漸增加布局模塊，隨著模塊的增多，布局的方式也變得多樣，雖然頁面更精彩，但難度也相應(yīng)增加，所以基礎(chǔ)一定要打好。學(xué)習(xí)是一個(gè)循序漸進(jìn)的過程，從簡單開始，讓學(xué)生能體會(huì)到成功的喜悅，才不會(huì)一開始就積聚了問題，進(jìn)而打消他們學(xué)習(xí)的積極性。大部分學(xué)生總是愿意去學(xué)習(xí)的，越是掌握得好越想深入學(xué)習(xí)，最終才能實(shí)現(xiàn)本課程的目標(biāo)：掌握CSS頁面布局的技術(shù)。

2.教學(xué)方法：在教學(xué)過程中，要降低教師的主導(dǎo)地位，讓學(xué)生參與講課，分析案例的結(jié)構(gòu)模型，談?wù)勛约涸撊绾巫龀霾季衷O(shè)計(jì)。老師每次課下課前布置下節(jié)課需要學(xué)生分析的網(wǎng)站案例，課堂上，先請學(xué)生針對案例分析自己認(rèn)為可行的布局方法，老師對學(xué)生的回答進(jìn)行評(píng)價(jià)，然后以學(xué)生提出的設(shè)計(jì)方案進(jìn)行布局演示，如果可行，將能正確顯示出布局結(jié)果；如果不可行，再由其他學(xué)生指出問題所在，并提出自己新的布局方案。這樣既可提高學(xué)生注意力，又能增加學(xué)生學(xué)習(xí)的動(dòng)力。當(dāng)然，并不是每次的學(xué)生參與都那么理想，對于難度較高的布局案例，可能沒有學(xué)生能分析出可行的設(shè)計(jì)，這時(shí)老師又恢復(fù)到主導(dǎo)地位，通過相似的更簡單的案例來引導(dǎo)學(xué)生找到解決方法。

另外，如果校企合作單位中有網(wǎng)站建設(shè)方面的項(xiàng)目，就申請讓學(xué)生去參觀和學(xué)習(xí)，請教相關(guān)的網(wǎng)頁設(shè)計(jì)與制作人員給學(xué)生們講一講做一個(gè)完整項(xiàng)目的流程以及所需使用的技術(shù)，讓學(xué)生體會(huì)企業(yè)對實(shí)踐人才的要求。如果有可能的話，就讓學(xué)生參與到企業(yè)的網(wǎng)頁設(shè)計(jì)項(xiàng)目中，更直觀地加強(qiáng)對網(wǎng)站建設(shè)業(yè)務(wù)的了解，做到學(xué)校教學(xué)和企業(yè)實(shí)踐的零距離接觸。

實(shí)踐證明，改變了教學(xué)方法后，教學(xué)效果取得了較大的進(jìn)步：一是大部分學(xué)生積極性的提高，為了課堂內(nèi)能正確分析案例，提出設(shè)計(jì)方案，他們在課前仔細(xì)預(yù)習(xí)教材內(nèi)容，或翻閱參考書來尋找解決方案；二是學(xué)生的學(xué)習(xí)效果得到提升，因?yàn)閰⑴c講課，加深了印象，從而更好地掌握了CSS頁面布局的方法；三是學(xué)生整體學(xué)習(xí)態(tài)度的改善，一些學(xué)習(xí)積極性高、能力也比較強(qiáng)的學(xué)生，將自己的學(xué)習(xí)心得和設(shè)計(jì)技巧向同學(xué)們展示講解，他們就像老師的助手，也像同學(xué)學(xué)習(xí)的參謀，讓整個(gè)教學(xué)環(huán)節(jié)充滿了樂趣，學(xué)習(xí)整體效果得到極大的提高。

三、結(jié)語

經(jīng)過多學(xué)期的實(shí)踐、教學(xué)互動(dòng)、校企合作以及經(jīng)驗(yàn)的總結(jié)，在講授CSS頁面布局技術(shù)方面取得了一定的成效，學(xué)生的掌握情況總體呈現(xiàn)提升的趨勢，學(xué)生完成的布局設(shè)計(jì)中優(yōu)秀作品也不斷增多。網(wǎng)絡(luò)技術(shù)在發(fā)展，課程教學(xué)也不能一成不變，因此要適時(shí)地結(jié)合課程內(nèi)容及學(xué)生的素質(zhì)更新教學(xué)內(nèi)容和教學(xué)方法，真正做到讓學(xué)生學(xué)有所得，學(xué)有所成，憑著熟練的網(wǎng)頁制作技術(shù)走向社會(huì)。

參考文獻(xiàn)：

[1]溫謙.CSS網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)教程[M].人民郵電出版社，2009.

[2]劉顯麗.高職網(wǎng)頁設(shè)計(jì)教學(xué)中DIV+CSS的探究[J].科技資訊，2013，（33）.

[3]張英.DIV+CSS網(wǎng)站設(shè)計(jì)的研究和探討[J].電子技術(shù)與軟件工程，2013，（24）.