高職網頁制作課程實踐教學案例開發與研究

郝靜靜++曹萌萌

摘 要 開發和研究基于HTML語言的實踐教學案例，提高學生對網頁代碼的理解程度和實踐操作技能。

關鍵詞 網頁制作；實踐教學；HTML語言

中圖分類號：G642.3 文獻標識碼：B

文章編號：1671-489X（2017）02-0142-02

Research and Development of Practice Teaching Cases of Web Page Creation Course in Higher Vocational Colleges//HAO Jing-jing， CAO Mengmeng

Abstract The aim of this paper is intended to develop and study case，

based on the practice of HTML language teaching to improve stu-

dents level of understanding of web page code and practice opera-tion skill.

Key words web page creation； practice teaching； HTML language

1 引言

網頁制作課程作為一門計算機和平面設計的交叉課程，有著實用性和特殊性[1]。網頁制作課程是高職教育中計算機相關專業的一門重要的專業核心課程，通過學習，學生應能夠熟練運用HTML語言編寫靜態網頁，利用Dreamweaver

軟件進行網站的創建、網頁的布局、網頁的編輯與維護等工作。網頁制作課程同時也是后續課程如ASP.NET、XML、Java Web技術等課程的基礎，凡是跟網站開發相關的專業課程，幾乎全部以網頁制作為基礎。因此，網頁制作課程可謂所有網站開發課程的根基。這就要求在實踐教學中將案例教學與理論教學合理有效地結合起來，最大限度地減輕學生的認知負荷，提高學習效率，以實現學生能力和職業要求的接軌。

2 課題的核心概念

教學案例是真實而又典型且含有問題的事件。簡單地說，教學案例是對教學過程中的一個實際情境的描述。教學案例是教師在教學過程中對教學重點、難點、偶發事件及有意義的、典型的教學事例處理的過程、方法和具體的教學行為與藝術的記敘，以及對該案例記錄的剖析、反思、總結。

網頁制作實踐教學案例是在長期授課過程中，對網頁制作的常用知識點和實踐技能技巧進行剖析、歸納、整理、記錄、總結出來的一系列教學案例。通過這些案例的啟發、分析和實踐操作，學生可以更好地掌握網頁制作的重點、難點，提高實踐操作技能，為后續課程的學習打下堅實的基礎，為將來的就業奠定穩固的基石。

3 網頁制作案例開發與研究要點

目前，各高職類院校的網頁制作課程實踐教學選用案例的缺點是：

1）在學習HTML語言的同時學習Dreamweaver開發工具，造成學生在學習過程中分不清主次，將HTML和Dreamweaver

混為一談；

2）以Dreamweaver開發工具為基礎，所有的案例均在此開發工具中講解和制作，大部分HTML代碼由該工具自動生成，造成學生偷懶，進而對HTML語言置之不理，忽略了最重要的HTML這個核心；

3）用Dreamweaver開發的網頁代碼過于復雜，容易挫敗學生信心；

4）實踐案例的業務需求簡單、不真實，難以激發學生興趣；

5）各案例模塊耦合度高、學習難度高，不利于學習；

6）案例過大，網站系統開發周期長，學生難以理解整個系統。

針對以上缺點，摒棄Dreamweaver開發工具與HTML語言同時進行實踐教學的教學內容，把Dreamweaver開發工具與HTML語言隔離開來，在實踐教學中讓學生先掌握HTML語言這個核心，然后引入Dreamweaver開發工具的使用。這樣，學生在實踐過程中不僅能夠很好地掌握HTML語言的核心，而且能夠避免混亂、分清主次，增強學生學習網頁制作的信心。另外，在實踐教學案例的開發和研究過程中，改進以往耦合度過高或者案例過大的實踐教學案例，將其分解成耦合度低的教學目標更為明確的小型案例，使學生理解起來更加容易，方便學習。

4 教學案例開發與研究范例

在學習“框架集”時，為了更好地展示框架集相關標簽及屬性的用法，設計“框架集的使用”教學案例。

1）網頁主題：美食宣傳網站主頁。

2）情境描述：在制作美食宣傳網站主頁時，要求有橫向導航和豎向導航，網頁整體左半部分有美食攻略和美食排行豎向導航，右半部分為頁面主顯示區。網頁效果如圖1所示。

3）問題討論：

①將網頁劃分為“上—左—右”結構，如何實現此布局？

②如何實現當點擊左側導航時，右側顯示相應內容？

③在此網頁中用到了哪些基礎元素（基礎標簽）？

4）主要參考代碼：

framespacing=″0″>

″no″ border=″0″>

″noresize″/>

5）案例分析。

①在本案例中用到了框架集的嵌套，先將框架劃分為上下框架，其中下框架是一個內嵌的框架集，分為左右框架。

②分別為每個框架命名，上框架name=“top Frame”，

左框架name=“left Frame”，右框架name=“main Frame”。

命名的目的是為了將相應的網頁顯示在框架中。

③制作各個框架中相應的網頁：top.html、left.html、main.html。在各個網頁中注意基礎標簽的使用。

5 創新點

1）打破傳統的基于Dreamweaver開發環境的實踐教學案例，開發和研究出一套完整的以HTML語言為核心的網頁制作課程實踐教學案例。在實踐教學案例的開發和研究中，以HTML語言為主要研究對象，所開發的實踐教學案例首先使學生掌握核心技術，隨后再接觸Dreamweaver開發工具。這樣就可以解決以往學生在學習網頁制作時將HTML和Dreamweaver混為一談、分不清主次的問題，并能從根本上排除學生對HTML語言和Dreamweaver開發工具之間關系的困惑，從而大大提高實踐教學質量。

2）改進以往耦合度過高或者案例過大的實踐教學案例，將其分解成耦合度低的教學目標更為明確的小型案例，并確保實踐案例需求的真實性，激發學生興趣。改變用Dreamweaver開發網頁代碼過于復雜的現狀，提高學生的學習信心。

6 結束語

網頁制作課程是計算機相關專業必開的專業技能課，有些高職院校還把該課程作為計算機的基礎課程在非計算機專業開設。如何利用有限的課堂與上機實踐時間教授好網頁制作課程，是很多高校教師在教學過程中始終在思考和研究的問題[2]。另外，與網頁制作有關的技術在不斷地更新，這就要求上機實踐的教學案例要跟上新技術的發展[3]。

優質的實踐教學案例的開發，不僅使培養出來的學生能夠符合社會對網頁制作人才的實際需要，而且對課題組教師的專業發展起到重要作用。■

參考文獻

[1]陶亮.《網頁制作》課程優化與教學方法探索[J].信息通信，2011（6）：104-105.

[2]王英.網頁制作課程的教學探討[J].電腦知識與技術，

2008（25）：1492-1494.

[3]李森，李巧君.網頁制作課程教學研究與探討[J].技術與市場，2013（12）：340-341.