DIV+CSS网页布局“教与学”方式探究

王仲满

【摘要】《网页设计》是技工院校计算机应用专业的必修课，随着网页设计前端技术的不断更新，DIV+CSS布局在该课程中的重要性越来越突出。本文介绍DIV+CSS网页布局的优势，阐述教学现状，提出新的教学方式和学习方式。

【关键词】DIV+CSS 网页设计 教学方式 学习方式

【中图分类号】G71 【文献标识码】A 【文章编号】2095-3089（2018）20-0252-01

一直以来，《网页设计》是技工院校计算机应用、数字媒体等专业的必修课。在计算机相关专业毕业生的就业方向中，网页设计师是一个热门的就业岗位。在提倡工学结合的技工教育的背景下，我们可以结合网页设计师岗位的实际要求开展该课程的教学。随着互联网技术的发展，网页设计的前端技术在不断地更新，DIV+CSS网页布局成为网页设计的主流方向，因此，它已成为《网页设计》课程的核心技能要求。在多元化的教育环境下，新的教学方式和学习方式是值得我们研究的课题。

1.DIV+CSS网页布局优势

采用DIV+CSS网页布局与传统的表格布局相比，有许多的优势：

（1）页面加载速度快

传统的表格布局必须等表格加载完才显示相应的网页内容，而DIV+CSS网页布局是由一个个松散的DIV盒子组成，它可以实现边加载边显示内容。

（2）内容与外观相分离

该布局方式实现了内容和外观相分离，不仅提高了网页设计的效率，而且使网页的维护变得更加容易。

（3）有利于搜索引擎搜索

由于该布局方式内容与外观相互独立，搜索引擎在检索的时候可以避开外观部分的干扰，做好内容部分的检索。

2.DIV+CSS網页布局的教学现状

目前，很多教材把DIV+CSS网页布局作为《网页设计》课程中的一个章节，再加上技工院校的学生基础相对薄弱，对英文代码产生畏惧心理。因此，在教学中不是特别重视代码编写能力的培养。更多的是停留在利用网页设计软件（如：Dreamweaver）快速地使用表格布局进行网页设计。由于DIV+CSS网页布局的特殊性，这一章节并没有作为重点来处理，而在企业中该布局已成为主流，因此，我们所培养的学生与实际就业市场的需求存在较大的差距。如果我们继续把教学重点放在表格布局上，必然会导致教学案例无法做到与企业项目一致。因此，我们要做的第一步就是要走进企业，调查目前市场的需求，对教学内容进行改革。

另外，网页设计软件大大提高了网页设计的效率，正是因为快速、便捷，很多学生更依赖于此类软件，导致不注重代码编写能力的提升。而作为网页设计师，编写代码是必备的技能要求，因此，在教学中我们更应该注重代码编写能力的培养。

3.教学方式转变

在教学过程中，很多老师比较注重教学方法的改革，实训课比较提倡任务驱动、项目教学法等等。针对DIV+CSS网页布局的教学，我们可以在这些教学方法的基础上对教学方式做进一步的改革和创新。

（1）由设计视图向代码视图转变

传统软件的简便操作已无法满足工作的实际需要，向编写代码转变已成为必然的趋势。为了避免学生的产生抵触心理，我们可以借助Dreamweaver中的拆分视图，做好从设计视图到代码视图转变的过渡。在真正实施代码教学的过程中，让学生遇到问题可以借助拆分视图来解决，避免学生对代码的学习失去信心。另外，该软件编写代码具有智能提醒功能，大大降低了学习的难度。通过代码的编写，更有利于学生对网页设计原理的理解，尤其是CSS样式的构成。

（2）课程结构的转变

往往我们在教学中受教材的影响，形成固有的课程结构：从单一的知识点的讲解，再到最后综合应用。一般在了解HTML的基础上，从CSS基础到盒子模型，再介绍各种样式类型。在前期的教学中，过多的时间用于讲解单一的知识点，不利于学生形成综合应用的意识，并会降低学生学习的兴趣。我们可以尝试对一个完整的案例进行任务分解，再通过子任务的技能要求对知识点进行讲解。这不仅使学生有明确的学习目标，更重要的是理解新知识点的应用。在掌握各知识点的基础上，最终又回归到综合案例的应用上，提高学生的综合应用能力。

（3）从单一课程到综合课程转变

在传统的教学计划中，我们都以课程为单位进行设计，或者针对一个工作岗位开设几门相关的课程。往往一门课程的独立教学无法达到我们预想的与工作岗位相匹配的效果。DIV+CSS网页布局，可以借助前期所学的Photoshop或者Fireworks相关技能，做好页面设计、切图、取色等等。这不仅能让学生了解DIV+CSS网页布局在真正网页设计流程中的作用，同时能将该课程与其它课程做好实际应用的衔接。

4.学习方式转变

在教学过程中，我们更加注重学习能力的培养，良好的学习习惯和恰当的学习方式可以达到事半功倍的效果。随着互联网的普及，新型的学习方式可以辅助课堂教学，同时，学生可以根据自己的基础进行选择性的学习。

（1）课堂学习向网络学习转变

随着互联网的发展和广泛的应用，网络学习成为新的学习平台。目前，较多网络课堂对外开放，尤其是计算机应用技术的迅速更新，相关的教学视频也不断地出现。通过网络平台的学习，可以补充课堂学习的内容，拓展学生的知识面。很多平台也提供了某个课程或者是完整的岗位技能培训视频，通过该途径的学习，不仅可以打破课堂教学的约束，而且可以让学生养成主动学习的习惯，激发学生的求知欲望。

（2）课本学习向工具学习转变

一直以来，我们的学习都借助于课本，课本的学习是有限，更多的是理论的学习。作为操作性强的实训课，我们必须借助实际的案例进行讲解。DIV+CSS网页布局的教学，我们可以利用网络上现成的网页，再结合浏览器的调试功能（如：Firefox浏览器的Firebug插件）开展学习。该插件可以对Web页面的内部细节进行剖析，是一个好的调试工具，我们可以借助此插件查看某一个区块的CSS样式。一方面我们可以通过网络找到实际的案例，另外一方面，我们通过该插件学习或模仿优秀的DIV+CSS网页布局，提升学生对Web页面的分析能力。通过该方式，我们的学习就不受时间和场所的限制。

5.结束语

DIV+CSS网页布局已成为网页设计的核心技术，这也是计算机相关专业学生的必备技能。在互联网的快速发展和新的教育环境下，我们的教学方式和学习方式，应结合实际情况做适当的改革和创新，进一步提升教学和学习效果。在后续的教学中，我们更应探索不同的教学方式，指导学生学习，使“教与学”有效的结合。

参考文献：

[1]王爱菊， 杨金川. DIV+CSS布局在《网页制作》课程中的教学改革探究[J]. 无线互联科技， 2015， （9）： 116-117.

[2]温谦，周建国，练源.网页设计与布局项目化教程（HTML+CSS+DIV）[M].北京：人民邮电出版社， 2013.