淺談技校CSS+DIV網(wǎng)頁樣式與布局課程教學(xué)

胡麗娜

隨著時代的發(fā)展，網(wǎng)絡(luò)信息技術(shù)的廣泛應(yīng)用使得信息共享成為現(xiàn)實(shí)，而網(wǎng)頁作為當(dāng)前網(wǎng)絡(luò)信息發(fā)布的主要方式，正充分參與到通信、娛樂、商業(yè)貿(mào)易、辦公等各個方面。一個好的網(wǎng)站不僅要有大量的信息內(nèi)容，更要注重創(chuàng)意性和視覺化的不斷更新。CSS+DIV布局以其結(jié)構(gòu)、樣式分離和便于被搜索引擎搜索到等特點(diǎn)，被廣泛應(yīng)用到網(wǎng)站設(shè)計(jì)中。以工學(xué)結(jié)合為辦學(xué)理念的技工院校，正是看準(zhǔn)CSS+DIV技術(shù)的優(yōu)越性及重要性，將CSS+DIV網(wǎng)頁樣式與布局課程設(shè)定為計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)一門必修課，并依據(jù)“實(shí)用型”人才培養(yǎng)方針，緊跟市場動態(tài)和社會需求，合理選擇教學(xué)內(nèi)容，使學(xué)生用最短的時間實(shí)現(xiàn)與市場的快速接軌。

一、技術(shù)特性決定課程地位

1.技術(shù)特性及優(yōu)勢

CSS+DIV是Web標(biāo)準(zhǔn)中常用的術(shù)語之一。DIV+CSS布局是一種標(biāo)準(zhǔn)代碼式頁面布局，是網(wǎng)絡(luò)通訊行業(yè)對網(wǎng)頁設(shè)計(jì)師的一個基本要求，也是今后網(wǎng)頁設(shè)計(jì)行業(yè)的需求和標(biāo)準(zhǔn)。其中，CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，是一種用來表現(xiàn)HTML或者XHTML等文件式樣的計(jì)算機(jī)語言。DIV是用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素。使用DIV+CSS制作網(wǎng)頁，已經(jīng)是大勢所趨，這不僅得益于CSS+DIV美化頁面的靈活性，更因?yàn)樗怯蒞3C組織負(fù)責(zé)定制和發(fā)布的Web標(biāo)準(zhǔn)之一，并且擁有令企業(yè)無法忽視的優(yōu)勢，如：結(jié)構(gòu)與表現(xiàn)分離，有利于網(wǎng)頁重構(gòu)；表現(xiàn)的統(tǒng)一，有利于網(wǎng)站維護(hù)和管理；節(jié)約網(wǎng)絡(luò)帶寬，為企業(yè)節(jié)省支出等。

2.課程定位

技工院校計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)是一個連貫的課程體系，學(xué)生前期必須掌握熟練使用Photoshop設(shè)計(jì)網(wǎng)頁前臺效果，使用Flash設(shè)計(jì)網(wǎng)頁中動態(tài)Banner效果，中期掌握使用Dreamweaver制作網(wǎng)頁效果。而CSS+DIV網(wǎng)頁樣式與布局課程正是在掌握基本Dreamweaver操作基礎(chǔ)上進(jìn)行網(wǎng)頁布局的主要技術(shù)，是計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)一門重要的核心主干課。這一技術(shù)的應(yīng)用主要為網(wǎng)頁前臺設(shè)計(jì)提供基礎(chǔ)知識和技術(shù)支撐。它會直接影響到網(wǎng)頁的顯示效果和后期網(wǎng)站維護(hù)的效率。同時，使用CSS+DIV進(jìn)行網(wǎng)頁布局與傳統(tǒng)的通過表格（table）布局定位的方式不同，它不僅可以輕松實(shí)現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)形式相分離，而且可以對網(wǎng)頁進(jìn)行統(tǒng)一管理，即通過修改一個樣式表，牽一發(fā)而動全身，實(shí)現(xiàn)網(wǎng)頁風(fēng)格的改變。因此，CSS+DIV網(wǎng)頁樣式與布局課程是網(wǎng)頁設(shè)計(jì)的重點(diǎn)課程，在培養(yǎng)學(xué)生專業(yè)技能和提高就業(yè)率方面均有十分重要的作用。

二、教學(xué)現(xiàn)狀及改革措施

目前，筆者所在學(xué)院計(jì)算機(jī)網(wǎng)絡(luò)專業(yè)的學(xué)生生源參差不齊，年齡普遍偏小，大多數(shù)學(xué)生的基礎(chǔ)知識儲備較少，只習(xí)慣于窗口式軟件操作，對英語有較強(qiáng)的厭學(xué)情緒，這就導(dǎo)致在CSS+DIV網(wǎng)頁樣式與布局課程教學(xué)過程中，在語法及代碼的記憶和理解上難度大，學(xué)生學(xué)習(xí)興趣不高，受挫感較強(qiáng)，能夠堅(jiān)持下來的學(xué)生少之又少。所以，改變現(xiàn)有的教學(xué)模式，不斷創(chuàng)新出適合當(dāng)代中技學(xué)生特征，并游刃有余地實(shí)現(xiàn)基本理論與實(shí)踐相結(jié)合的新的教學(xué)方法是教師首先要解決的問題。筆者有多年的網(wǎng)頁設(shè)計(jì)教學(xué)經(jīng)驗(yàn)，現(xiàn)淺談幾點(diǎn)體會。

1.基礎(chǔ)知識的講授要實(shí)現(xiàn)由抽象到具象的轉(zhuǎn)變

CSS+DIV網(wǎng)頁樣式與布局這門課程的基礎(chǔ)部分是基本語法及書寫規(guī)范，難點(diǎn)在于深入理解布局的精髓——盒子模型，以及如何靈活、簡練地應(yīng)用。在實(shí)際教學(xué)過程中，筆者本著“實(shí)用、夠用、必需”原則，結(jié)合中技學(xué)生基礎(chǔ)差、耐心不足等特征，將基本知識理論的抽象術(shù)語轉(zhuǎn)化為具體實(shí)物來進(jìn)行描述，不僅解決了學(xué)生理解困難的問題，而且更大地激發(fā)了學(xué)生學(xué)習(xí)興趣。如在講DIV盒子原理時，教師應(yīng)該摒棄講邊框，填充，外邊距、文檔流等枯燥的文字定義，而是引用日常生活中常見的實(shí)物模型，即將虛擬的抽象的專業(yè)術(shù)語，轉(zhuǎn)化為具象的名詞。教師可以將一個裝有化妝品的盒子作為講解對象，將化妝品盒子作為邊框，化妝品與盒子之間的空隙可以定義為“填充”，將化妝品盒子外圍的空間定義為“外邊距”。這樣不僅使學(xué)生易于理解，而且也會大大提高教師的授課水平和工作效率，能夠達(dá)到師生共益的和諧局面。

2.采用基于工作過程的項(xiàng)目——一體化教學(xué)模式

為了充分調(diào)動學(xué)生的積極性，培養(yǎng)學(xué)生網(wǎng)站美工設(shè)計(jì)與布局網(wǎng)頁的能力，突出實(shí)踐教學(xué)的重要性，最終實(shí)現(xiàn)與市場的零對接，對中技學(xué)生講授CSS+DIV網(wǎng)頁樣式與布局課程時，筆者采用基于工作過程的項(xiàng)目——一體化教學(xué)模式。采用這種新式的教學(xué)方法，可以使學(xué)生在充分了解CSS+DIV在網(wǎng)頁設(shè)計(jì)中的地位和應(yīng)用的前提下，熟練掌握主流網(wǎng)頁開發(fā)技術(shù)，使學(xué)生在審美、布局、技能等多個領(lǐng)域得到均衡鍛煉，進(jìn)而達(dá)到學(xué)有所長、快速就業(yè)，服務(wù)社會、和諧發(fā)展的優(yōu)秀的實(shí)用復(fù)合型網(wǎng)頁設(shè)計(jì)人才標(biāo)準(zhǔn)。下面是筆者的一些體會。

一切從實(shí)際出發(fā)，一切為了學(xué)生，整個項(xiàng)目化教學(xué)過程要遵循工學(xué)結(jié)合的理念。如在制定CSS+DIV網(wǎng)頁樣式與布局課程目標(biāo)時，要確保符合中職學(xué)生的年齡特點(diǎn)和認(rèn)知能力；課程實(shí)施要采用基于工作過程的項(xiàng)目——一體化教學(xué)模式；在教學(xué)實(shí)施過程，要體現(xiàn)以學(xué)生為主、教師為輔的原則。教師要充分整合現(xiàn)有教學(xué)資源，大膽創(chuàng)新，鼓勵學(xué)生參與到市場調(diào)研過程中，并設(shè)立多個基于工作任務(wù)的項(xiàng)目。教師將學(xué)生分成若干網(wǎng)建小組，以公司化運(yùn)營，以項(xiàng)目方式運(yùn)作。從項(xiàng)目調(diào)研到具體實(shí)施網(wǎng)頁設(shè)計(jì)，同學(xué)們要細(xì)化分工，各負(fù)其責(zé)，不僅使學(xué)生經(jīng)歷真實(shí)的工作任務(wù)與完整的工作過程，還可以通過企業(yè)的項(xiàng)目檢驗(yàn)學(xué)生的設(shè)計(jì)能力。在工作過程中要充分體現(xiàn)分層教學(xué)，恰當(dāng)?shù)貙?shí)現(xiàn)難易結(jié)合。通過任務(wù)實(shí)施，學(xué)生在自學(xué)與互相幫助的學(xué)習(xí)中探究使用CSS+DIV進(jìn)行網(wǎng)頁布局的技術(shù)魅力。最后教師評價(jià)學(xué)生要體現(xiàn)“靈活、合理、公平、多樣”的原則，不是看“知不知道”而是看“會不會干”。

三、強(qiáng)化崗位職業(yè)能力，提升就業(yè)創(chuàng)業(yè)能力

“職業(yè)教育就是就業(yè)教育?！本蜆I(yè)，是職業(yè)教育的立足之本?，F(xiàn)在網(wǎng)頁設(shè)計(jì)用人單位急需的人才不僅要求具備使用Photoshop制作網(wǎng)頁效果圖及使用CSS+DIV進(jìn)行網(wǎng)頁布局的專業(yè)技能，更側(cè)重要求具備相應(yīng)的團(tuán)隊(duì)合作精神、自我更新知識能力、勇于拼搏和創(chuàng)新能力等崗位職業(yè)能力，從而提升就業(yè)、創(chuàng)業(yè)能力。筆者認(rèn)為通過以下途徑能夠有效增強(qiáng)中技生的崗位職業(yè)能力。

第一，增加社會實(shí)踐活動，特別是深入企業(yè)參觀學(xué)習(xí)、調(diào)研以及下場實(shí)習(xí)，可以更明確地將專業(yè)技能與崗位需求有機(jī)結(jié)合，為將來順利就業(yè)打下堅(jiān)實(shí)基礎(chǔ)。

第二，培養(yǎng)學(xué)生敏銳的創(chuàng)新素質(zhì)。要鼓勵學(xué)生從課內(nèi)走到課外，選修更多的網(wǎng)頁相關(guān)課程來激發(fā)靈感和創(chuàng)造力，如可選修色彩構(gòu)成、素描、平面等課程，為界面設(shè)計(jì)及網(wǎng)頁配色做知識儲備。

第三，不斷研究新的教學(xué)方法，繼續(xù)和完善基于工作過程的項(xiàng)目教學(xué)，通過分組完成項(xiàng)目及在組內(nèi)營造自助與互助的良好氛圍，促進(jìn)學(xué)生形成團(tuán)隊(duì)協(xié)作精神，穩(wěn)步提升交流合作的能力。

第四，加強(qiáng)校園文化建設(shè)，豐富學(xué)生課余生活，發(fā)揮各種載體的潛在作用，使學(xué)生發(fā)揮主觀能動性，自覺行動，形成健康向上的人生觀、價(jià)值觀，逐步增強(qiáng)堅(jiān)持不懈、抗挫折能力。

綜上所述，在網(wǎng)絡(luò)技術(shù)和行業(yè)急速發(fā)展的環(huán)境下，社會對網(wǎng)頁美工人才需求量還在日益增大，更加急需掌握CSS+DIV布局網(wǎng)頁的設(shè)計(jì)師。技工院校要抓住這一契機(jī)，以就業(yè)為導(dǎo)向，不斷深入教學(xué)改革，強(qiáng)化基本專業(yè)理論和職業(yè)技能訓(xùn)練，培養(yǎng)學(xué)生不斷探索和自我開拓的精神，進(jìn)而為社會輸送更多的高素質(zhì)網(wǎng)頁設(shè)計(jì)實(shí)用復(fù)合型人才。

（作者單位：秦皇島技師學(xué)院）