高職院校網(wǎng)頁制作課程的教學(xué)探究

李 英

（云南林業(yè)職業(yè)技術(shù)學(xué)院，昆明 650224）

目前，網(wǎng)頁的布局的經(jīng)典方法已經(jīng)被CSS+DIV的頁面布局所取代，因為CSS+DIV的頁面布局使用靈活可變，且加載界面很快，又很容易進(jìn)行維護(hù)和更新內(nèi)容，代碼的冗余小?，F(xiàn)在高等職業(yè)院校的課程中對網(wǎng)頁制作技術(shù)的教學(xué)非常重視，這門技術(shù)需要一定的動手能力，這可以增強(qiáng)學(xué)生的實踐能力，市場對于這門技術(shù)有著一定的需求。讓學(xué)生學(xué)習(xí)網(wǎng)頁制作是學(xué)校教學(xué)還有研究的方向。本文以CSS的網(wǎng)頁布局作為例，對怎樣達(dá)到學(xué)校的教學(xué)目的做了探究。

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

根據(jù)過去一段時間的教學(xué)過程，還有一些學(xué)生進(jìn)入公司實習(xí)以及就業(yè)學(xué)生的反饋數(shù)據(jù)，高職學(xué)校針對這些數(shù)據(jù)對給學(xué)生們的教學(xué)方式進(jìn)行了改革。注重跟隨市場上流行網(wǎng)站的設(shè)計風(fēng)格，先對網(wǎng)站進(jìn)行分析，老師在課堂上指導(dǎo)學(xué)生對頁面的布局進(jìn)行分析，之后老師對網(wǎng)站的頁面設(shè)計進(jìn)行講解提出學(xué)習(xí)方案，并讓學(xué)生到企業(yè)中實習(xí)提高自己的實踐能力，進(jìn)而使得學(xué)生的網(wǎng)頁設(shè)計能力有所提升。下面是教學(xué)方式的講述。

1.1 對網(wǎng)頁基礎(chǔ)知識進(jìn)行教學(xué)

對網(wǎng)頁的基本知識進(jìn)行講解，認(rèn)識HTML的基礎(chǔ)結(jié)構(gòu)。結(jié)構(gòu)、表現(xiàn)還有行為的含義是網(wǎng)頁的三個主要組成要素。網(wǎng)頁的結(jié)構(gòu)部分主要由XHTML和XML來完成；表現(xiàn)的形式是由CSS層疊樣式來實現(xiàn)的，CSS就是被用來確定網(wǎng)頁的內(nèi)容以什么樣的樣式來顯示；具體是通過鼠標(biāo)和鍵盤的操作來觸發(fā)事件，可以把DOM文檔對象模型等作為標(biāo)準(zhǔn)。

只有讓學(xué)生對網(wǎng)頁的制作原理有所了解，對HTML的基礎(chǔ)結(jié)構(gòu)有所熟悉以后，才能對網(wǎng)頁的學(xué)習(xí)更上一層樓，運(yùn)用CSS的樣式來表現(xiàn)網(wǎng)頁。與此同時，CSS的基本知識要作為教學(xué)的重點。通過以前所做過的實驗表明，把CSS基礎(chǔ)知識還有CSS頁面布局相結(jié)合，本來認(rèn)為結(jié)合具有實際成果的頁面布局對學(xué)生教學(xué)能夠起到很好的效果，從而把CSS技術(shù)掌握在手中，而實踐效果并不如想象的那樣美好。學(xué)生對于這門課程的理解能力有限，而且還有時間的限制，導(dǎo)致學(xué)生對課程內(nèi)容的學(xué)習(xí)進(jìn)程有所難度。如果學(xué)生的基礎(chǔ)知識如果不扎實，就會很難理解后期講述的內(nèi)容，導(dǎo)致不能夠進(jìn)一步的學(xué)習(xí)，進(jìn)而使得教學(xué)的速度與質(zhì)量受到不利的影響。

1.2 實踐操作導(dǎo)入

之前CSS頁面布局的授課知識，是利用CSS頁面布局的實際案例來給學(xué)生教學(xué)的，在實際教學(xué)過程中才發(fā)覺學(xué)生對此知識的學(xué)習(xí)有困難，其原因是CSS+DIV技術(shù)具有很強(qiáng)的抽象性，而不是能夠看到就能學(xué)會的操作，它需要對代碼有很高的熟悉度還要對整體界面有思維輪廓。因此，教學(xué)的內(nèi)容在這個環(huán)節(jié)也做出了相應(yīng)的對策。因為表格布局相對來說比較簡單，學(xué)生通過表格的布局來了解網(wǎng)頁布局的含義是一個不錯的辦法。之后再給學(xué)生講解CSS＋DIV的布局方式就變得比較容易。

之后要求學(xué)生進(jìn)行實驗，找到表格布局與CSS布局的不同之處，通過實驗學(xué)生很容易就會發(fā)現(xiàn)表格布局的代碼冗長的缺點。之后老師提出要求，讓學(xué)生把左右內(nèi)容都進(jìn)行交換，學(xué)生又會發(fā)現(xiàn)表格布局要實現(xiàn)這個操作需要替換所有的代碼，而在CSS+DIV的布局模式下只要把兩邊第二位的模塊的浮動屬性改一下就可以。兩者相互比較就能夠了解到CSS界面布局的優(yōu)勢，即其內(nèi)容與形式是分離開來的。CSS是網(wǎng)頁的樣式相當(dāng)于一個人的外套，可以隨意更換以達(dá)到預(yù)期的效果，CSS樣式的存儲空間是和網(wǎng)頁是分開的，是一個單獨(dú)的CSS文件，同時可以運(yùn)用到多個不同的網(wǎng)頁中。如果一個大型網(wǎng)站內(nèi)部存在著很多的子網(wǎng)頁需要同一個樣式，這就要在為它們設(shè)計的樣式時，把CSS樣式作為一個獨(dú)立的文件來保存，每個子網(wǎng)頁都可以鏈接到這個CSS文件，實現(xiàn)用同一個樣式來表現(xiàn)不同內(nèi)容的目的，還能夠降低代碼的冗余度。

2 主體教學(xué)方法

2.1 在教學(xué)內(nèi)容方面

之前都是利用課本案例作為教學(xué)的重點，之后以課本中的內(nèi)容為重點，對網(wǎng)絡(luò)上主流網(wǎng)站的布局進(jìn)行了重點分析。根據(jù)課本當(dāng)中的案例來教學(xué)的重點在于讓學(xué)生利用休閑時間來對課本的題材進(jìn)行學(xué)習(xí)，其重點和難點需要在課堂中進(jìn)行詳細(xì)的講解。在課堂之上對潮流的網(wǎng)站進(jìn)行分析，開始要選擇簡單的網(wǎng)站來講解，以后漸漸的對網(wǎng)站的難度進(jìn)行提升，例如布局的模式，首先要從左右兩個模塊布局開始講解，然后慢慢的增加布局的模塊伴隨著模塊的增多，頁面的布局方式也隨之多樣化，使得頁面更加的精彩，同時也伴隨著難度的提升。因此一定要把基礎(chǔ)打牢固，學(xué)習(xí)的過程是循序漸進(jìn)的，從開始的簡單到復(fù)雜，可以使學(xué)生體會到成功以后的喜悅，使其不會在一開始就積累很多的問題，不會導(dǎo)致他們積極性變低。很多的學(xué)生的初衷是愿意學(xué)習(xí)的，越是能夠適應(yīng)學(xué)習(xí)環(huán)境，學(xué)習(xí)成績就越好，從而達(dá)到課程最終要求的結(jié)果，最終能夠很好的運(yùn)用CSS頁面布局技術(shù)。

2.2 教學(xué)方法

在學(xué)校的教學(xué)過程中要逐漸實現(xiàn)學(xué)生占據(jù)主導(dǎo)地位，使教師的主導(dǎo)地位變低，讓學(xué)生主動參與到講課的過程中來，對案例的結(jié)構(gòu)進(jìn)行分析。先給學(xué)生安排任務(wù)，然后讓他們到講臺上講解自己的答題過程和見解，如果是可以實行的方案，老師可以再把其中心思想總結(jié)講述給其他學(xué)生。如果是不可取的，可以讓別的學(xué)生說出問題在哪里，并且把自己的布局方案也講述給大家聽。通過這樣的教學(xué)方式能夠提高學(xué)生的注意力，還能引發(fā)學(xué)生的學(xué)習(xí)興趣，當(dāng)然這不是適合所有的學(xué)生。如果案例的難度很高，就可能導(dǎo)致學(xué)生設(shè)計出來的方案不可行，這就要老師站出來利用類似的但是簡單的案例來引導(dǎo)學(xué)生找到合適的方案。

3 結(jié)束語

經(jīng)過這些學(xué)期的教學(xué)經(jīng)驗，還有根據(jù)校企合作過程中的經(jīng)驗，對于CSS頁面布局技術(shù)的教學(xué)有了一些成效，學(xué)生對學(xué)習(xí)這門技術(shù)的興趣有所提升，同時也做出了很多優(yōu)秀的頁面布局的作品，隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，教學(xué)方式也要隨之改進(jìn)。所以要針對學(xué)生的素質(zhì)來制定適合他們的教學(xué)方法，使得他們學(xué)有所得，利用優(yōu)秀的網(wǎng)頁制作技術(shù)立足于社會之中。