浅谈技校CSS+DIV网页样式与布局课程教学

胡丽娜

随着时代的发展，网络信息技术的广泛应用使得信息共享成为现实，而网页作为当前网络信息发布的主要方式，正充分参与到通信、娱乐、商业贸易、办公等各个方面。一个好的网站不仅要有大量的信息内容，更要注重创意性和视觉化的不断更新。CSS+DIV布局以其结构、样式分离和便于被搜索引擎搜索到等特点，被广泛应用到网站设计中。以工学结合为办学理念的技工院校，正是看准CSS+DIV技术的优越性及重要性，将CSS+DIV网页样式与布局课程设定为计算机网络专业一门必修课，并依据“实用型”人才培养方针，紧跟市场动态和社会需求，合理选择教学内容，使学生用最短的时间实现与市场的快速接轨。

一、技术特性决定课程地位

1.技术特性及优势

CSS+DIV是Web标准中常用的术语之一。DIV+CSS布局是一种标准代码式页面布局，是网络通讯行业对网页设计师的一个基本要求，也是今后网页设计行业的需求和标准。其中，CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，是一种用来表现HTML或者XHTML等文件式样的计算机语言。DIV是用来为HTML文档内大块的内容提供结构和背景的元素。使用DIV+CSS制作网页，已经是大势所趋，这不仅得益于CSS+DIV美化页面的灵活性，更因为它是由W3C组织负责定制和发布的Web标准之一，并且拥有令企业无法忽视的优势，如：结构与表现分离，有利于网页重构；表现的统一，有利于网站维护和管理；节约网络带宽，为企业节省支出等。

2.课程定位

技工院校计算机网络专业是一个连贯的课程体系，学生前期必须掌握熟练使用Photoshop设计网页前台效果，使用Flash设计网页中动态Banner效果，中期掌握使用Dreamweaver制作网页效果。而CSS+DIV网页样式与布局课程正是在掌握基本Dreamweaver操作基础上进行网页布局的主要技术，是计算机网络专业一门重要的核心主干课。这一技术的应用主要为网页前台设计提供基础知识和技术支撑。它会直接影响到网页的显示效果和后期网站维护的效率。同时，使用CSS+DIV进行网页布局与传统的通过表格（table）布局定位的方式不同，它不仅可以轻松实现网页内容与表现形式相分离，而且可以对网页进行统一管理，即通过修改一个样式表，牵一发而动全身，实现网页风格的改变。因此，CSS+DIV网页样式与布局课程是网页设计的重点课程，在培养学生专业技能和提高就业率方面均有十分重要的作用。

二、教学现状及改革措施

目前，笔者所在学院计算机网络专业的学生生源参差不齐，年龄普遍偏小，大多数学生的基础知识储备较少，只习惯于窗口式软件操作，对英语有较强的厌学情绪，这就导致在CSS+DIV网页样式与布局课程教学过程中，在语法及代码的记忆和理解上难度大，学生学习兴趣不高，受挫感较强，能够坚持下来的学生少之又少。所以，改变现有的教学模式，不断创新出适合当代中技学生特征，并游刃有余地实现基本理论与实践相结合的新的教学方法是教师首先要解决的问题。笔者有多年的网页设计教学经验，现浅谈几点体会。

1.基础知识的讲授要实现由抽象到具象的转变

CSS+DIV网页样式与布局这门课程的基础部分是基本语法及书写规范，难点在于深入理解布局的精髓——盒子模型，以及如何灵活、简练地应用。在实际教学过程中，笔者本着“实用、够用、必需”原则，结合中技学生基础差、耐心不足等特征，将基本知识理论的抽象术语转化为具体实物来进行描述，不仅解决了学生理解困难的问题，而且更大地激发了学生学习兴趣。如在讲DIV盒子原理时，教师应该摒弃讲边框，填充，外边距、文档流等枯燥的文字定义，而是引用日常生活中常见的实物模型，即将虚拟的抽象的专业术语，转化为具象的名词。教师可以将一个装有化妆品的盒子作为讲解对象，将化妆品盒子作为边框，化妆品与盒子之间的空隙可以定义为“填充”，将化妆品盒子外围的空间定义为“外边距”。这样不仅使学生易于理解，而且也会大大提高教师的授课水平和工作效率，能够达到师生共益的和谐局面。

2.采用基于工作过程的项目——一体化教学模式

为了充分调动学生的积极性，培养学生网站美工设计与布局网页的能力，突出实践教学的重要性，最终实现与市场的零对接，对中技学生讲授CSS+DIV网页样式与布局课程时，笔者采用基于工作过程的项目——一体化教学模式。采用这种新式的教学方法，可以使学生在充分了解CSS+DIV在网页设计中的地位和应用的前提下，熟练掌握主流网页开发技术，使学生在审美、布局、技能等多个领域得到均衡锻炼，进而达到学有所长、快速就业，服务社会、和谐发展的优秀的实用复合型网页设计人才标准。下面是笔者的一些体会。

一切从实际出发，一切为了学生，整个项目化教学过程要遵循工学结合的理念。如在制定CSS+DIV网页样式与布局课程目标时，要确保符合中职学生的年龄特点和认知能力；课程实施要采用基于工作過程的项目——一体化教学模式；在教学实施过程，要体现以学生为主、教师为辅的原则。教师要充分整合现有教学资源，大胆创新，鼓励学生参与到市场调研过程中，并设立多个基于工作任务的项目。教师将学生分成若干网建小组，以公司化运营，以项目方式运作。从项目调研到具体实施网页设计，同学们要细化分工，各负其责，不仅使学生经历真实的工作任务与完整的工作过程，还可以通过企业的项目检验学生的设计能力。在工作过程中要充分体现分层教学，恰当地实现难易结合。通过任务实施，学生在自学与互相帮助的学习中探究使用CSS+DIV进行网页布局的技术魅力。最后教师评价学生要体现“灵活、合理、公平、多样”的原则，不是看“知不知道”而是看“会不会干”。

三、强化岗位职业能力，提升就业创业能力

“职业教育就是就业教育。”就业，是职业教育的立足之本。现在网页设计用人单位急需的人才不仅要求具备使用Photoshop制作网页效果图及使用CSS+DIV进行网页布局的专业技能，更侧重要求具备相应的团队合作精神、自我更新知识能力、勇于拼搏和创新能力等岗位职业能力，从而提升就业、创业能力。笔者认为通过以下途径能够有效增强中技生的岗位职业能力。

第一，增加社会实践活动，特别是深入企业参观学习、调研以及下场实习，可以更明确地将专业技能与岗位需求有机结合，为将来顺利就业打下坚实基础。

第二，培养学生敏锐的创新素质。要鼓励学生从课内走到课外，选修更多的网页相关课程来激发灵感和创造力，如可选修色彩构成、素描、平面等课程，为界面设计及网页配色做知识储备。

第三，不断研究新的教学方法，继续和完善基于工作过程的项目教学，通过分组完成项目及在组内营造自助与互助的良好氛围，促进学生形成团队协作精神，稳步提升交流合作的能力。

第四，加强校园文化建设，丰富学生课余生活，发挥各种载体的潜在作用，使学生发挥主观能动性，自觉行动，形成健康向上的人生观、价值观，逐步增强坚持不懈、抗挫折能力。

综上所述，在网络技术和行业急速发展的环境下，社会对网页美工人才需求量还在日益增大，更加急需掌握CSS+DIV布局网页的设计师。技工院校要抓住这一契机，以就业为导向，不断深入教学改革，强化基本专业理论和职业技能训练，培养学生不断探索和自我开拓的精神，进而为社会输送更多的高素质网页设计实用复合型人才。

（作者单位：秦皇岛技师学院）