基于Web2.0标准化布局的《网页制作》课程教学探讨

陈孟臻 罗 杰 苏 广

摘要自从W3C组织发布Web2.0标准以来,国内外许多网站依照DIV+CSS的布局标准重新构建网站,然而在《网页制作》课程的教学中,许多教师依然使用表格布局模式进行教学,这显然不适应网页技术发展的趋势。本文就如何更好按照Web2.0标准化布局进行《网页制作》课程教学进行探讨。

关键字Web2.0网页制作标准化布局

中图分类号:G633.67文献标识码:A

1 引言

在早期网页设计中,HTML的表格(Table)仅用来列举数据,随着互联网的发展,HTML为了表现页面,表格成为了一种布局工具。网页失去了文档加结构的意义而变得越来越复杂,代码变得几乎不可理解。设计者不得不借助“所见即所得”(WYSIWYG)的软件工具来处理大量无意义的标签。

Web2.0标准的内容之一就是要将网页的内容与表现分离,同时要求HTML文档要具有良好的结构。采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面外观的定义。这就是目前流行的DIV+CSS标准化布局。

2 使用标准化布局的好处

对网站设计者有以下好处:符合W3C标准,保证所设计的网站不会因为将来网络应用的升级而被淘汰;内容与表现的分离,使页面和样式的调整变得更加方便;提高网站易用性,支持浏览器的向后兼容;代码简洁,更容易被搜索引擎搜索。

对网站浏览者有以下好处:基于标准构建的网站文件下载与页面显示速度更快;内容能被更多的用户和更广泛的设备所访问;用户能够通过样式选择定制自己的表现界面;所有页面都能提供适于打印的版本。

3 如何有效根据标准化布局进行网页制作教学活动

3.1 不采用表格布局模式教学

基于Web2.0的标准化布局就是要改善表格布局带来代码混乱的局面,因此在教学中,应该在学生惯用表格布局之前,强调表格布局的不合理性,通过简单的实例,对比表格布局和DIV+CSS标准布局的区别,使学生理解内容和表现分离的真正含义。

在教学中,教师应从简单的设计图入手,通过分析、拆分、组装设计图,整理CSS文档,让学生从中了解标准化布局的整个过程,认识到定位和样式在标准化布局中的重要地位,理解CSS盒模型 (Box Model) 中处理元素内容、内边距、边框和外边距的方法;向展示学生正确的网页布局方法。

3.2 脱离“所见即所得”的软件进行网页制作教学

Dreamweaver、Frontpage等 “所见即所得”的可视化软件大大降低了学生学习网页制作的难度,但也带来不利的影响:学生对网页布局的认识停留在网页界面这个表层,而对底层的代码并不了解。这意味着他们将难于理解Web2.0标准化布局中提出的内容和表现分离的思想。即使能用使用DIV+CSS手段进行网页布局,也会陷入滥用层与类的误区,重返表格布局中内容和表现混乱的局面。

在教学中,使用记事本和EditPlus等文本编辑软件引导学生进行代码编辑。通过教学实践了解到,学生在直接面对代码时,对CSS 中的“普通流”、“浮动”和“绝对定位”等基本定位机制的理解,要比在使用“所见即所得”的软件时更为容易接受。

3.3 引入“任务驱动”思想提高学生学习代码兴趣

“任务驱动”是一种建立在建构主义教学理论基础上的教学法。它强调学生的学习活动必须与任务或问题相结合,用探索问题的形式来引动和维持学生学习兴趣和动机。教师让学生在一序列任务的驱动下展开活动,引导学生循序渐进地完成网页制作,从中了解HTML代码的规则,CSS表示页面的方法,克服对代码的恐惧心理,提高学习代码的兴趣。

(1)设计任务,创造情景。教师先创设尽可能真实的学习情境,以学习者为中心,让学生自主学习。学生根据教师给定的网页模版(部分代码)和要求(补充代码),用记事本逐行编写代码来完成任务。从而习得代码编写的经验,养成自主学习HTML代码的习惯。

(2)观察思考,小组协作。教师采用小组协作学习的模式,将网页布局的各种变式呈现在学生面前,要求学生分小组讨论和分析,用以解决不同浏览器布局的差异。这种模式的优点在于,可以通过小组讨论、协商,促进知识的社会性建构和集体智慧的形成,培养学生的协作创新能力。在软件的使用上由记事本转为EditPlus等功能更为强大的文本编辑软件,减少代码的输入量,同时进一步强化学生对代码编写的认知。

(3)完成任务,共同评价。通过学生自评、同学互评、教师评价等方法对学生完成的作品进行评价,从而去发现作品中的闪光点或者是指出其中存在的问题,使学生能(下转第103页)(上接第94页)互相交流,互相激励,取长补短,从而得到更为清晰的思路、方法和知识结构。在任务评价环节中,能使学生页面设计的能力得到进一步提高。

4 结语

2005年来,国内各大网站掀起推广Web2.0标准化布局的热潮,在此环境下要求从事网页设计的设计师必须掌握并正确使用DIV+CSS标准化布局。在具体教学中,由于教师理念,DIV布局视角的新颖性,CSS代码的复杂性和浏览器的兼容性等问题,使得在推行网页设计标准化布局的路上遇到了一些困难。但作为教师,应当有责任调整自己的教学思路,改变观念,及时更新自身知识结构,用新的设计视角和教学方式来指导学生掌握最新的网页设计与制作的技巧。