高職靜態網頁設計實訓的內容選取及實施

吳美英，陳海燕

（1.靖江中等專業學校，江蘇 靖江 214500；2.泰州職業技術學院，江蘇 泰州 225300）

近年來，結合社會發展的需要，我校五年制高職中的電子商務專業、計算機信息管理專業等的人才培養方案中，對一些專業課程增加了實訓環節，目的是通過相對集中和完整的一段時間讓學生做一個項目，從而達到對該課程及其相關知識有一個較全面和完整的認識和掌握。

1 網站設計與制作的一般流程

網站設計與制作的一般流程主要包括網站規劃、網站制作、測試、域名和空間申請、站點文件上傳等。其中網站規劃又包括主題定位、資料搜集、欄目結構設計、目錄結構設計、形象設計如網站的標志、色彩、字體、宣傳標語等。由此可見，要想完成一個網站的設計與制作，不僅需要培養和提升學生很多方面的能力，而且還需要有一定的時間保障。

2 實訓組織和實施

由于學生一般都是剛剛接觸網站及其相關概念，對網站的規劃設計還缺乏較深切的感性認識，在短短的一周實訓時間內，他們是很難完成設計與制作整個過程的，所以在以前帶實訓的基礎上，筆者對實訓的內容選取及過程的組織實施作了重新的思考和調整。主要以模仿為主，但也各有不同，重在培養和訓練學生規劃站點目錄結構、欄目結構、網頁制作、測試、域名和空間申請、文件上傳等知識。內容安排如圖1所示。

2.1 給定選題

在實訓周之前，是教師進行為期約13-14周、每周約6課時的該門課程基礎知識的教學。教師在教學過程中，首先需要注意兩點，一是從一開始就定位于靜態網站，而不是一個一個孤立的靜態頁面，這樣可以讓學生從始至終有一個整體的認識，更主要的是學生不會出現由于圖片等文件沒有存放到網站所對應的站點目錄中而導致上傳時內容不完整。二是采用案例教學法，即選取用于主要依據模仿制作的一個相對完整的靜態網站，引導學生一點點制作，在一個網站中再融進新的知識點。

實訓準備階段，老師通常的做法是挑選一個樣例網站，讓所有學生模仿著去做。也可以由幾個人分成一個小組，從素材收集、處理、網站規劃等所有的環節分工合作逐一完成。前一個方法大家千篇一律，容易導致學生偷懶、相互間抄襲，且一個網站所涉及到的技術也是有限的，不利于拓寬學生的視野。后一種方法盡管看上去是按部就班地進行網站的規劃、設計和制作，但是學生對網站還缺乏一個整體清晰的認識，加上實訓時間通常不會過長，這樣的實訓很難達到預期的效果。針對這些現狀，我們確定在短時間內需要達到的目標是讓學生通過模仿樣例制作網站，從而真正對網站有感性的認識。基于此，我們選擇的做法是給每個學生分配一個靜態網站樣例，當然這就需要老師花費足夠多的時間進行網站的挑選。由于靜態網站很多，所以一是學生所做練習不會重復，且每個不同的網站所用到的技術亦不會完全相同；二是考慮到利用webdup這樣的工具可以把它完全下載下來供離線瀏覽、學習和模仿制作，而且選擇的是跟我們的日常生活、地方特色盡可能貼近的各類網站，如圖2所示，從而使學生覺得它們就在自己身邊。當然事先只給他們相應網站的域名，然后帶領學生一步步來進行操作。

2.2 獲取素材

網站的主題選定后，接下來是素材的搜集。這個工作也不是學生一時半會可以完成的，有的需要拍攝，有的需要掃描，有的需要制作，加上學生在初學階段，還無法體會并實施網站規劃的任務，所以需引導學生用webdup0.93beta將樣例網站完全下載，這樣無論是網站的目錄結構還是素材就全都有了。這為后續的模仿制作提供了最直接有效的支撐。

2.3 體驗網頁新技術

在新建站點時，要求學生同時新建兩個站點，一個映射到下載下來的樣例網站目錄，一個對應于自己將要開發的網站目錄。不斷地切換兩個站點，通過在Dreamweaver中打開樣例文件，結合平時所講的方法，學生能較順利地模仿樣例中的布局進行新頁面的設計。此外，由于網站中所包含的技術很多，我們很難通過一個例子的講解來包含全部，但又希望讓學生接觸到盡可能多的新知識和技巧。所以通過學生一人一個樣例的方法，學生相互間既無法抄襲、又互相討論從而學到不少新知識，且都是實實在在的應用，這讓學生又有較好的感性認識，容易接受。同時針對一些有特色的技巧性內容和普遍性問題，通過電子教室對全班同學作集體講解。這樣的方式使得學生一直都保持在較濃厚的興趣和較高的求知欲狀態，也更加加強了他們相互間的探討和合作。如圖1中所示，將學生在操作中所遇到的典型問題、網站的典型技巧特色等作了一個簡單的記載，也為學生后續制作說明書的撰寫作了鋪墊。

2.4 確定說明書的內容

作為一個完整的實訓項目，最后還包含一個網站制作說明書的撰寫。由于學生較少有綜合性的訓練，他們不知道說明書中該寫什么。同樣為了盡快達到目標，我們給了一個樣例文章，請他們根據網站開發的流程來組織文章的內容。并強調要實事求是，實訓過程怎么做的、做了些什么就寫什么。其中需要出現的截圖可以用QQ截圖、紅蜻蜓抓圖軟件等工具來快速實現，功能框圖、流程圖等可以用visio 2003軟件來制作。從而使學生知道，要完成一件事，通常是多個軟件多個工具通力合作來實現的。并鞏固、補充了他們以前薄弱的word處理功能：強制分頁、分節符、頁碼的設置等。在word文檔結束時，又教學生在word中新建目錄樣式（跟網頁中的樣式是同樣的含義），然后通過“插入” “引用” “索引和目錄…”來自動生成目錄。學生每天都學到很多新知識。

2.5 上傳免費主頁的空間申請和站點文件

網絡對學生來說總是充滿神秘感，總想弄清上傳到底是怎么回事。所以要想實訓不留遺憾、畫一個完整的句號的話，這一環節是必不可少的。我們機房開通了公網，然后引導學生各自申請到了自己的免費主頁空間，同時讓他們記下了域名。他們明白了域名的含義，并都成功上傳了網站。學生通過域中訪問到自己的網站后，非常有成就感。同時針對自己出現的問題（更多的是有的圖片不能正確顯示），他們會更主動地查找原因進行修改，然后再上傳。

3 結語

學生在最后的實訓小結中都反饋：希望這樣的實訓多一些。我們常說：“教學有法，教無定法，貴在得法。”良好的教學方法，可以發揮教學智慧，否則就達不到預期的教學效果。然而教學又無定法，我們必須根據學情來研究和確定教學方法，結合生活，不斷嘗試和探索，充分調動學生的學習積極性和求知欲，讓學生快樂學習，并收獲累累碩果。

［1］尤鴻霞.ASP.NET實訓課程教學方法研究[J].遵義師范學院學報,2012,(2):93-94.

［2］馬海峰，李軍華.高職“ASP.NET程序設計實訓”課程教學改革探索[J].江蘇技術師范學院學報,2010,(4): 81-84.

［3］張娟,李博,楊征.談高職院校實訓周實訓方案的制訂[J].保定職業技術學院學報,2011,(2):35-37.