随着计算机互联网技术的飞跃发展,网页已成为人们交流和获取信息不可或缺的一个工具。网站制作的技术和网页界面的好坏直接影响到浏览者数量,而DIV＋CSS这种布局标准由于加载速度快、方便搜索、便于维护和更新,在网页制作中已成为设计的主流。作为高职院校教师如何使学生在网页设计的技术和方法上跟上时代的步伐,培养出实用的网页设计人才,是我们要研究的重要课题。

一、 DIV ＋ CSS 的优势

在网站建设的Table表格和DIV＋CSS两大布局的方式中,随着浏览器的增多,手机上网速度的加快,人们需求的增加,Table表格这种布局方式越来越暴露了它的弊病,而DIV＋CSS这种布局方式逐渐被业内各大站所认可和应用,显示了它的优势。

1 . 1 内容与样式分离, 保持网站风格一致DIV＋CSS这种布局方式的Html文件中只存放网页要展示的元素,比如文字,而网页文字所表现的样式,比如,字体、颜色、大小及对齐方式等完全由CSS样式这样一个单独文件给出,并且这个样式文件能链接到其它的网页,从而使网站的整体风格保持一致。

1 . 2 浏览器兼容性强, 便于维护和更新DIV＋CSS这种布局方式几乎所有的浏览器都可以使用,而且若要重新布局页面或更改网页风格,不用修改网站中的Html文件,几乎不用考虑浏览器兼容性问题,直接修改CSS样式文件即可。

1 . 3 加载速度快, 方便搜索

DIV＋CSS这种布局方式由于将网页表现的样式写在一个独立的CSS文件中,这样Html文件的体积小,代码少,加载速度快。由于Html文件中只是文件的内容,所以搜索引擎不用访问CSS样式文件,在很短的时间内就能检索并抓到Html文件整个页面中的内容,方便搜索。

二、 网页设计课程现状

目前,高职院校的网页设计课程采用Dreamweaver软件进行网页制作,学生习惯了那种窗口式的控件操作。而对抽象和复杂的代码缺乏学习兴趣,学习难度也比较大。况且,学生学习的内容主要依赖于教材这个载体,而现在的教材重点还是以Table表格这种页面布局方式为主,大量的实例采用的还是表格这种布局方式。而对DIV＋CSS这种布局方式介绍的少之又少,也没有系统的完整的实例进行学习参考。为了让学生真正学会用DIV＋CSS制作网页,需要教师在教学过程中调整教学思路,从教材整体出发进行教学内容改革,结合Dreamweaver软件改进教学方法,通过实例达到教学目的。

三、DIV ＋ CSS技术的教学实施

3.1 基础加强 Html 代码训练

要学会DIV＋CSS技术,学会熟练地用代码编写网页是必不可少的。而对于习惯了用软件控件制作网页的网站建设学生来说是比较难的,在学习中很容易厌烦。为了解决这个问题,我们结合网页设计教材,在网页元素输入之初,就结合Dreamweaver软件通过实例学习代码的编写。比如,制作电影介绍网页,先通过Dreamweaver软件控件制作此网页,然后让同学们分析网页中各代码的含义,各参数的作用,再通过代码的方式重新完成此网页的制作。同学们会做了之后,再让同学们制作自己喜欢的明星介绍网页。经过反复的训练,学生看到自己创作的喜欢的明星网页,不仅提高学习兴趣,而且还学会了代码的编写。

3 . 2 由简单到复杂, 从部分到整体对于初学者来说,首先让学生了解DIV＋CSS这种布局方式,如何分块,各个块之间的关系。但在学习制作过程中不能先学习如何通过代码分块,过多的这种DIV标签嵌套,学生在网页制作中会找不到位置,他们会失去学会的信心。所以要从简单的通过DIV标签实现一个小的栏目块开始,了解DIV的含义、各参数的作用、注意事项及与CSS之间的关系。当学会了各种样式的栏目编写之后,再从DIV标签的简单嵌套到整个网页的布局。这样学生在学习的过程中会很轻松,学习效果较好。

3 . 3 采用任务驱动, 项目教学的方法来加强考 核要想真正学会DIV＋CSS技术,单靠课堂这点时间是不够的,必须培养学生积极主动的学习习惯,那么适当的教学方法和考核方式是必不可少的。为此采用项目教学分组考核的方式。学生在学习过程中由老师提出任务,同学们分组讨论,老师再根

据同学们的讨论结果进行总结,讲授应掌握的知识点。然后再提出项目要求,以小组为单位利用业余时间完成项目,每个小组的组长组织项目的实施,掌握小组成员的完成情况,并由小组的组长给出组员的成绩。各个组之间再通过项目的完成情况进行比较,分出等级,给出相应的分数差。这样每个小组成员在学习过程中不仅要认真学习与讨论,而且还要加强合作,积极参与到网站建设项目的制作中,充分发挥创新精神,使整个组的能力得到提高。