郝靜靜++曹萌萌

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

關(guān)鍵詞 網(wǎng)頁制作；實踐教學(xué)；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 引言

網(wǎng)頁制作課程作為一門計算機和平面設(shè)計的交叉課程，有著實用性和特殊性[1]。網(wǎng)頁制作課程是高職教育中計算機相關(guān)專業(yè)的一門重要的專業(yè)核心課程，通過學(xué)習(xí)，學(xué)生應(yīng)能夠熟練運用HTML語言編寫靜態(tài)網(wǎng)頁，利用Dreamweaver

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

2 課題的核心概念

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

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

3 網(wǎng)頁制作案例開發(fā)與研究要點

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

1）在學(xué)習(xí)HTML語言的同時學(xué)習(xí)Dreamweaver開發(fā)工具，造成學(xué)生在學(xué)習(xí)過程中分不清主次，將HTML和Dreamweaver

混為一談；

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

3）用Dreamweaver開發(fā)的網(wǎng)頁代碼過于復(fù)雜，容易挫敗學(xué)生信心；

4）實踐案例的業(yè)務(wù)需求簡單、不真實，難以激發(fā)學(xué)生興趣；

5）各案例模塊耦合度高、學(xué)習(xí)難度高，不利于學(xué)習(xí)；

6）案例過大，網(wǎng)站系統(tǒng)開發(fā)周期長，學(xué)生難以理解整個系統(tǒng)。

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

4 教學(xué)案例開發(fā)與研究范例

在學(xué)習(xí)“框架集”時，為了更好地展示框架集相關(guān)標簽及屬性的用法，設(shè)計“框架集的使用”教學(xué)案例。

1）網(wǎng)頁主題：美食宣傳網(wǎng)站主頁。

2）情境描述：在制作美食宣傳網(wǎng)站主頁時，要求有橫向?qū)Ш胶拓Q向?qū)Ш?，網(wǎng)頁整體左半部分有美食攻略和美食排行豎向?qū)Ш?，右半部分為頁面主顯示區(qū)。網(wǎng)頁效果如圖1所示。

3）問題討論：

①將網(wǎng)頁劃分為“上—左—右”結(jié)構(gòu)，如何實現(xiàn)此布局？

②如何實現(xiàn)當點擊左側(cè)導(dǎo)航時，右側(cè)顯示相應(yīng)內(nèi)容？

③在此網(wǎng)頁中用到了哪些基礎(chǔ)元素（基礎(chǔ)標簽）？

4）主要參考代碼：

framespacing=″0″>

″no″ border=″0″>

″noresize″/>

5）案例分析。

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

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

左框架name=“l(fā)eft Frame”，右框架name=“main Frame”。

命名的目的是為了將相應(yīng)的網(wǎng)頁顯示在框架中。

③制作各個框架中相應(yīng)的網(wǎng)頁：top.html、left.html、main.html。在各個網(wǎng)頁中注意基礎(chǔ)標簽的使用。

5 創(chuàng)新點

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

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

6 結(jié)束語

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

優(yōu)質(zhì)的實踐教學(xué)案例的開發(fā)，不僅使培養(yǎng)出來的學(xué)生能夠符合社會對網(wǎng)頁制作人才的實際需要，而且對課題組教師的專業(yè)發(fā)展起到重要作用?！?/p>

參考文獻

[1]陶亮.《網(wǎng)頁制作》課程優(yōu)化與教學(xué)方法探索[J].信息通信，2011（6）：104-105.

[2]王英.網(wǎng)頁制作課程的教學(xué)探討[J].電腦知識與技術(shù)，

2008（25）：1492-1494.

[3]李森，李巧君.網(wǎng)頁制作課程教學(xué)研究與探討[J].技術(shù)與市場，2013（12）：340-341.