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

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

2、实现与市场的快速接轨。 一、技术特性决定课程地位 1.技术特性及优势 CSS+DIV 是 Web 标准中常用的术语之一。DIV+CSS 布局是一种标准代码式页面布局，是网络通讯行业对网页设计师的一个基本要求，也是今后网页设计行业的需求和标准。其中，CSS 是英语 Cascading Style Sheets（层叠样式表单）的缩写，是一种用来表现 HTML 或者 XHTML 等文件式样的计算机语言。DIV 是用来为 HTML 文档内大块的内容提供结构和背景的元素。使用 DIV+CSS 制作网页，已经是大势所趋，这不仅得益于CSS+DIV 美化页面的灵活性，更因为它是由 W3C 组织负责定制和发布

3、的Web 标准之一，并且拥有令企业无法忽视的优势，如：结构与表现分离，2有利于网页重构；表现的统一，有利于网站维护和管理；节约网络带宽，为企业节省支出等。 2.课程定位 技工院校计算机网络专业是一个连贯的课程体系，学生前期必须掌握熟练使用 Photoshop 设计网页前台效果，使用 Flash 设计网页中动态Banner 效果，中期掌握使用 Dreamweaver 制作网页效果。而 CSS+DIV 网页样式与布局课程正是在掌握基本 Dreamweaver 操作基础上进行网页布局的主要技术，是计算机网络专业一门重要的核心主干课。这一技术的应用主要为网页前台设计提供基础知识和技术支撑。它会直接影响

4、到网页的显示效果和后期网站维护的效率。同时，使用 CSS+DIV 进行网页布局与传统的通过表格（table）布局定位的方式不同，它不仅可以轻松实现网页内容与表现形式相分离，而且可以对网页进行统一管理，即通过修改一个样式表，牵一发而动全身，实现网页风格的改变。因此，CSS+DIV 网页样式与布局课程是网页设计的重点课程，在培养学生专业技能和提高就业率方面均有十分重要的作用。 二、教学现状及改革措施 目前，笔者所在学院计算机网络专业的学生生源参差不齐，年龄普遍偏小，大多数学生的基础知识储备较少，只习惯于窗口式软件操作，对英语有较强的厌学情绪，这就导致在 CSS+DIV 网页样式与布局课程教学过程中

5、，在语法及代码的记忆和理解上难度大，学生学习兴趣不高，受挫感较强，能够坚持下来的学生少之又少。所以，改变现有的教学模式，不断创新出适合当代中技学生特征，并游刃有余地实现基本理论与3实践相结合的新的教学方法是教师首先要解决的问题。笔者有多年的网页设计教学经验，现浅谈几点体会。 1.基础知识的讲授要实现由抽象到具象的转变 CSS+DIV 网页样式与布局这门课程的基础部分是基本语法及书写规范，难点在于深入理解布局的精髓盒子模型，以及如何灵活、简练地应用。在实际教学过程中，笔者本着“实用、够用、必需”原则，结合中技学生基础差、耐心不足等特征，将基本知识理论的抽象术语转化为具体实物来进行描述，不仅解决了

6、学生理解困难的问题，而且更大地激发了学生学习兴趣。如在讲 DIV 盒子原理时，教师应该摒弃讲边框，填充，外边距、文档流等枯燥的文字定义，而是引用日常生活中常见的实物模型，即将虚拟的抽象的专业术语，转化为具象的名词。教师可以将一个装有化妆品的盒子作为讲解对象，将化妆品盒子作为边框，化妆品与盒子之间的空隙可以定义为“填充” ，将化妆品盒子外围的空间定义为“外边距” 。这样不仅使学生易于理解，而且也会大大提高教师的授课水平和工作效率，能够达到师生共益的和谐局面。 2.采用基于工作过程的项目一体化教学模式 为了充分调动学生的积极性，培养学生网站美工设计与布局网页的能力，突出实践教学的重要性，最终实现与

7、市场的零对接，对中技学生讲授 CSS+DIV 网页样式与布局课程时，笔者采用基于工作过程的项目一体化教学模式。采用这种新式的教学方法，可以使学生在充分了解 CSS+DIV 在网页设计中的地位和应用的前提下，熟练掌握主流网页开发技术，使学生在审美、布局、技能等多个领域得到均衡锻炼，进而4达到学有所长、快速就业，服务社会、和谐发展的优秀的实用复合型网页设计人才标准。下面是笔者的一些体会。 一切从实际出发，一切为了学生，整个项目化教学过程要遵循工学结合的理念。如在制定 CSS+DIV 网页样式与布局课程目标时，要确保符合中职学生的年龄特点和认知能力；课程实施要采用基于工作?程的项目一体化教学模式；在

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

9、位职业能力，提升就业创业能力 “职业教育就是就业教育。 ”就业，是职业教育的立足之本。现在网页设计用人单位急需的人才不仅要求具备使用 Photoshop 制作网页效果图及使用 CSS+DIV 进行网页布局的专业技能，更侧重要求具备相应的团队合作精神、自我更新知识能力、勇于拼搏和创新能力等岗位职业能力，从而提升就业、创业能力。笔者认为通过以下途径能够有效增强中技生的岗位职业能力。 5第一，增加社会实践活动，特别是深入企业参观学习、调研以及下场实习，可以更明确地将专业技能与岗位需求有机结合，为将来顺利就业打下坚实基础。 第二，培养学生敏锐的创新素质。要鼓励学生从课内走到课外，选修更多的网页相关课程

10、来激发灵感和创造力，如可选修色彩构成、素描、平面等课程，为界面设计及网页配色做知识储备。 第三，不断研究新的教学方法，继续和完善基于工作过程的项目教学，通过分组完成项目及在组内营造自助与互助的良好氛围，促进学生形成团队协作精神，稳步提升交流合作的能力。 第四，加强校园文化建设，丰富学生课余生活，发挥各种载体的潜在作用，使学生发挥主观能动性，自觉行动，形成健康向上的人生观、价值观，逐步增强坚持不懈、抗挫折能力。 综上所述，在网络技术和行业急速发展的环境下，社会对网页美工人才需求量还在日益增大，更加急需掌握 CSS+DIV 布局网页的设计师。技工院校要抓住这一契机，以就业为导向，不断深入教学改革，强化基本专业理论和职业技能训练，培养学生不断探索和自我开拓的精神，进而为社会输送更多的高素质网页设计实用复合型人才。 （作者单位：秦皇岛技师学院）