高职网页制作课程实践教学案例开发与研究

郝静静++曹萌萌

摘 要 开发和研究基于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.