网页程序设计教学方法的探索

谢静波 吴亚昊

摘 要 通过教学实践，就如何提高我院高职计算机专业的学生对网页程序设计的兴趣与水平。提出了新的教学方法“对比教学法”，取得了良好的教学效果。

关键词 HTML/CSS/JavaScript 网页程序设计 对比教学法

中图分类号：G71 文献标识码：A

1对比教学法的引入

网页程序设计是页面前端技术的开发，即常说“HTML+CSS+JavaScript”。现在的Web标准设计就是DIV+CSS，JavaScript是目前最流行的页面脚本语言。学好这些语言不仅是着眼于今天最流行、最成熟的技术，更是把握明天页面开发的趋势。这几门语言程序代码多、语法容易混淆，过久了容易忘，学生看到代码比较头痛。针对这些问题本人在多年的教学实践中除采用了案例教学法、项目驱动教学外，摸索出了一种新的教学方法“对比教学法”，取得了良好的教学效果。

2对比教学法的具体几种对比方法

2.1 HTML、CSS与DW的对比

HTML语言是网页程序设计最基本的语言，有100多个标识符，每个标识符又有很多的属性，CSS语言的语法有100多项属性，死记不仅记不牢而且是没有意义的。为了提高学生的学习兴趣，让学生看到自己的成果，采用Dreamweaver网页开发工具，先将书上的例题与习题教学生用DW中做一个页面出来，然后教学生在代码窗口中读懂代码。然后再让教学生自己手写代码。这样一对比，学生所见之所得，有非常大的成就感，兴趣也就提高了。长期通过这种基本功的锻炼，学生不仅不害怕写代码了而且喜欢上了写代码。语法自然就掌握好了。

2.2 HTML与CSS语法的对比

在描术一个网页元素的特性时可以用html来写也可以用CSS来写，但有的代码是有区别。例如：在HTML中描述一个文本的格式：长沙民政学院，在CSS中嵌入式样式表中就是：

长沙民政学院

。另外在HTML中： bgcolor 表示背景颜色background表示背景图片。在CSS中： Background-color背景颜色Background-image背景图片。这样的区别在这两门语言中还有很多，老师讲完课后都要学生自己找出区别，归纳总结，不至于混淆语法。

2.3 CSS中选择器用法对比

CSS基本语法： selector {property： value； property： value ……property： value }看起来很简单，用起来千变万化，因为选择器太多，调用方法也不尽相同。

（1）类选择符语法：标记名.类名{样式属性：取值；样式属性：取值；…}

（2）id选择符语法：标记名#标识名{样式属性：取值；样式属性：取值；…}

（3）包含选择符语法：#menu ul { color：#fff；}

（4）伪类选择符语法： a：link a：visited a：hover a：active

（5）标识选择符语法： 标识符{样式属性：取值；样式属性：取值；…}

第一种调用方法：；第二种调用方法：；第三种调用方法：用到无序列表时时自动调用了；第四种调用方法：链接状态就自动调用了；第五种调用方法：直接用标识符就自动调用了。一个网站设计关键是首页设计，而首页设计的关键是导航栏设计，因此我教学生用代码写出各种导航菜单的代码，对比修改这样学生理解起来就容易多了，学生自己设计出了很多优秀的导航菜单，效果非常好。比如一个导航菜单#menu{} –>#menu ul {}–>#menu ul li {} –>#menu ul li a {} –>#menu ul li a：hover {}花括弧里的属性要学生自己写。菜单用到了id选择符、伪类选择符、伪类选择符，在网页主体中只要调用就行了。

2.4 CSS属性设置中边框、边界、填充的对比

在CSS属性设置中最难设置的是边框、边界、填充属性的设置。因为它们都有上、下、左、右四边要设置。首先要搞清楚这几个概念的区别。本人将它们用了一个CSS盒模型来对比：边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。这样就很容易理解盒模型了。边框中有三项style width corlor要设置；style中有九种属性供你用。然后再教学生设置它们的属性。通过反复的练习，学生对CSS的属性设置掌握得相当好。

2.5 JAVASCRIPT与C语言与JAVA的对比

JavaScript程序是由若干语句组成的，语句是编写程序的指令。JavaScript提供了完整的基本编程语句，基本语句、变量、函数与C语言基本相同；而对象与事件与JAVA比较接近。这些相同或相近的知识对比起来讲解，学生理解起来容易，本人用了很少的时间就讲清楚这些语法。对于一个高职学生，学JavaScript，重点不要于编写程序，而在于看懂程序，应用程序。给学生提供了很多优秀的网页制作的网站，比如：《网页制作大宝库》与《懒人图库》《加网》提供了大量优秀的JS代码，在这样一个信息社会，资源共享，是作好网站一个非常好的方法。看懂它，然后为自己的网站所用。这样一来，学生上网查资料的兴趣浓了，学习较果非常好。学生自己的网站用了大量的优秀的JS代码（图片特效、菜单特效、联动特效……）对我都是一个大的促进。

3对比教学法的教学成果

有对比才有区别，对比教学法的成功在于将各种网页编程知识起来对比起来，掌握它们的基本用法，精通它们的语法，达到在快乐中记住这些代码。通过这几年的教学方法的改进，学生对网页代码的编写不再感到困难，而且对网页设计、上网查资料、下载代码都产生了浓厚的兴趣，学生们设计出的网站越来越优秀。在民政学院、软件学院的空间网页比赛中取得一等奖、二等奖的好成绩。学生毕业后很多从事网站设计、网站维护等工作并在工作中取得很好的成绩与经济效益。