高职院校网页制作课程的教学研究

金璐钰

摘要：网页制作是高职院校重要的理论实践结合的课程。网页制作教学中，CSS+DIV页面布局技术不仅是重点也是难点，本文结合CSS布局技术教学环节的内容及学生的特点，从教学内容及教学方法方面进行了研究，以期推动高职院校理论实践的进步。

关键词：CSS+DIV；网页制作；高职教学；页面布局

中图分类号：G718.5 文献标志码：A 文章编号：1674-9324（2016）17-0226-02

一、引言

随着互联网的飞速发展，网页布局的经典模式表格布局，已逐渐被灵活、加载快速、便于维护更新、代碼冗余小的CSS+DIV布局方式所代替。《网页制作》是高职院校计算机专业的必修课程，也是实践性强、有市场需求潜力的工具科目，作为高职院校的教师，让学生掌握网页设计的前沿技术，培养高水平学以致用的网页编写人才，是教学和研究的主要目标和方向。本文以CSS页面布局为例，研究了如何安排教学内容以及使用怎样的教学方法才能达到更好的教学效果。

根据几个学期的教学和企业反馈，我们发现传统的教学模式存在不足。以往教学使用的是理论结合案例的经典教学模式，以书本为中心，着重讲解书中案例。虽然此种教学模式有一定的优点，即学生可以模仿书本案例步骤进行练习。但由于CSS代码读起来有点枯燥，CSS+DIV技术复杂度也比较高，和表格布局相比较，CSS+DIV布局上手相对困难，尤其对于网页设计初学者，繁杂的代码往往让人焦头烂额。对普通的高职学生而言，往往更没有耐心去学习这些乏味的代码，即使有些学生按照书中步骤完成了案例，一旦脱离书本，对于新的案例将不知从何做起。所以，传统的教学模式往往事倍功半、难以培养成功。

二、从网站分析入手，师生互动、结合实践的教学模式探究

在几个学期教学实践、学生在企业实习以及就业学生的反馈基础上，我们改造了给高职学生讲授网页制作技术的模式，强调跟踪主流的网站设计风格，从网站分析入手，先由学生主导剖析网页布局模型，再由老师点评讲解技术解决方案，并在企业实习和实践中巩固提高学生的网页制作能力。具体教学模式讲解如下。

（一）基础知识

了解Web页面基础知识，熟悉HTML的基本结构，了解网页三个主要的组成部分：结构（Structure）、表现（Presentation）和行为（Behavior）的含义。网页的结构主要由XHTML和XML来实现；通过CSS层叠样式表实现表现目的，CSS即用来定义网页内容的显示样式；具体行为是由鼠标、键盘等动作所触发的事件，标准主要有DOM文档对象模型和ECMAScript等。

学生了解了网页的原理，熟悉了HTML的基本结构后，才能更进一步学习页面的修饰，即使用CSS来表现网页。与此同时，CSS基础知识要重点讲授。以往做过实验，将CSS基础知识融入在CSS页面布局中来讲，本以为通过有实际成果的页面布局操作能让学生更容易掌握CSS基本技术，但是实践过后发现效果并不理想。因为受到学生理解能力和投入时间的限制，学生对授课内容的领悟以及预习、复习和练习不足，省略基础，会让他们不太容易接受，理解较有困难，从而直接影响了教学速度和质量。

（二）实践操作导入

原先CSS页面布局环节的教学内容，是直接通过CSS页面布局的案例来讲解，但实践过后，发现学生学起来有难度，因为CSS+DIV技术比较抽象，并非是完全所见即所得的操作，它主要还是依靠代码的熟悉度和对整个页面布局的思维轮廓。

因此，对这一环节的教学内容作了调整：加入表格布局的介绍。因为表格布局相对简单，容易理解且易掌握，虽然表格布局不再是主流，但学生可以通过表格布局来了解什么是网页布局。在学生熟练了表格布局后，再介绍CSS+DIV的布局方式，并让学生分别使用表格布局和CSS+DIV布局来实现同一风格的页面，比如一个左右结构的页面，左侧为竖排导航，右侧为主体内容，如图所示：

要求学生通过实验，比较表格布局与CSS布局的区别，学生实验后会很容易发现表格布局页面代码冗长。接下来，老师提出更换页面的风格，要求学生将左右内容进行交换。学生实践后，发现表格布局模式下，需要将左右两列的所有代码进行交换，而CSS+DIV布局模式下，只需将两侧div模块的浮动属性由左浮动改为右浮动即可，即将CSS样式“float：left；”改为“float：right；”。对比之下，可以发现CSS页面布局技术的优势：内容和形式分离。CSS对于网页就像外衣，穿上和脱去极为方便，而更新页面风格只需改动CSS样式即可达到效果，并且CSS样式可以独立于网页进行存储，即保存为单独的CSS文件，一个CSS文件可以用于多个网页。当一个大型网站内有多个子网页需要设置为相同的样式时，就可以将CSS样式存储为独立文件，每个子网页链接该CSS文件，就可以应用其中的样式效果，很大程度地降低了代码的冗余度。

经过一次完整的教学实践周期后，发现通过这样的教学内容调整，学生能更清楚地了解网页布局技术，在练习中体验了表格布局和CSS布局的区别，体会到了CSS布局的优越性，并且更好的掌握了CSS布局技术。此实践操作导入部分，讲述了实践操作初期如何更好地引入主体教学内容。后期的教学方法及教学内容也进行了改革，下面将详细阐述主体教学方法部分。

（三）主体教学方法

1.教学内容：由原先以课本案例为中心的教学模式，改为以书中的教学内容为主线，着重分析网络上流行网站的布局。课本中的案例主要让学生通过课外时间来学习，课堂可作为参考教材，但书中重点以及难点需在课堂中进行讲解。拿到课堂上进行分析的流行网站的选取并非随机，而是从简单开始，逐步向后加深难度。比如布局模式先从左右两个模块布局案例讲起，逐渐增加布局模块，随着模块的增多，布局的方式也变得多样，虽然页面更精彩，但难度也相应增加，所以基础一定要打好。学习是一个循序渐进的过程，从简单开始，让学生能体会到成功的喜悦，才不会一开始就积聚了问题，进而打消他们学习的积极性。大部分学生总是愿意去学习的，越是掌握得好越想深入学习，最终才能实现本课程的目标：掌握CSS页面布局的技术。

2.教学方法：在教学过程中，要降低教师的主导地位，让学生参与讲课，分析案例的结构模型，谈谈自己该如何做出布局设计。老师每次课下课前布置下节课需要学生分析的网站案例，课堂上，先请学生针对案例分析自己认为可行的布局方法，老师对学生的回答进行评价，然后以学生提出的设计方案进行布局演示，如果可行，将能正确显示出布局结果；如果不可行，再由其他学生指出问题所在，并提出自己新的布局方案。这样既可提高学生注意力，又能增加学生学习的动力。当然，并不是每次的学生参与都那么理想，对于难度较高的布局案例，可能没有学生能分析出可行的设计，这时老师又恢复到主导地位，通过相似的更简单的案例来引导学生找到解决方法。

另外，如果校企合作单位中有网站建设方面的项目，就申请让学生去参观和学习，请教相关的网页设计与制作人员给学生们讲一讲做一个完整项目的流程以及所需使用的技术，让学生体会企业对实践人才的要求。如果有可能的话，就让学生参与到企业的网页设计项目中，更直观地加强对网站建设业务的了解，做到学校教学和企业实践的零距离接触。

实践证明，改变了教学方法后，教学效果取得了较大的进步：一是大部分学生积极性的提高，为了课堂内能正确分析案例，提出设计方案，他们在课前仔细预习教材内容，或翻阅参考书来寻找解决方案；二是学生的学习效果得到提升，因为参与讲课，加深了印象，从而更好地掌握了CSS页面布局的方法；三是学生整体学习态度的改善，一些学习积极性高、能力也比较强的学生，将自己的学习心得和设计技巧向同学们展示讲解，他们就像老师的助手，也像同学学习的参谋，让整个教学环节充满了乐趣，学习整体效果得到极大的提高。

三、结语

经过多学期的实践、教学互动、校企合作以及经验的总结，在讲授CSS页面布局技术方面取得了一定的成效，学生的掌握情况总体呈现提升的趋势，学生完成的布局设计中优秀作品也不断增多。网络技术在发展，课程教学也不能一成不变，因此要适时地结合课程内容及学生的素质更新教学内容和教学方法，真正做到让学生学有所得，学有所成，凭着熟练的网页制作技术走向社会。

参考文献：

[1]温谦.CSS网页设计标准教程[M].人民邮电出版社，2009.

[2]刘显丽.高职网页设计教学中DIV+CSS的探究[J].科技资讯，2013，（33）.

[3]張英.DIV+CSS网站设计的研究和探讨[J].电子技术与软件工程，2013，（24）.