高職院校網頁制作課程的教學探究

李 英

（云南林業職業技術學院，昆明 650224）

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

1 從網站分析入手，師生互動、結合實踐的教學模式探究

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

1.1 對網頁基礎知識進行教學

對網頁的基本知識進行講解，認識HTML的基礎結構。結構、表現還有行為的含義是網頁的三個主要組成要素。網頁的結構部分主要由XHTML和XML來完成；表現的形式是由CSS層疊樣式來實現的，CSS就是被用來確定網頁的內容以什么樣的樣式來顯示；具體是通過鼠標和鍵盤的操作來觸發事件，可以把DOM文檔對象模型等作為標準。

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

1.2 實踐操作導入

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

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

2 主體教學方法

2.1 在教學內容方面

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

2.2 教學方法

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

3 結束語

經過這些學期的教學經驗，還有根據校企合作過程中的經驗，對于CSS頁面布局技術的教學有了一些成效，學生對學習這門技術的興趣有所提升，同時也做出了很多優秀的頁面布局的作品，隨著網絡技術的發展，教學方式也要隨之改進。所以要針對學生的素質來制定適合他們的教學方法，使得他們學有所得，利用優秀的網頁制作技術立足于社會之中。