计算思维导向的《网页设计与制作》课程设计研究

叶 嫣，李培国

(1. 广州商学院 信息技术与工程学院，广州 511363； 2. 暨南大学 信息科学技术学院，广州 510632)

《网页设计与制作》课程，作为大学计算机基础课程的重要组成部分，逐渐成为各个专业的公共必修课程；同时，在计算机二级考试-WEB程序设计部分中，有相当比例的知识点都与《网页设计与制作》课程有关。首届“九校联盟(C9)计算机基础课程研讨会”，旗帜鲜明的把“计算思维能力的培养”作为计算机基础教育的核心任务【1-3】。大学计算机教育，必须加强以计算思维能力培养为核心的计算机基础课程体系建设和教学内容的研究[4]。

《网页设计与制作》课程，主要以教授网页基础知识，网页制作工具的使用，以及网页制作的其他相关技术等内容。笔者认为，该课程的传统课程设计，很难能够培养学生的计算思维能力，因此需要根据新的教学理念，进行课程设计的改革更新。

1 课程学习目标

通过《网页设计与制作》课程的学习，学生能够掌握网页制作的基础知识，能够使用网页开发工具，制作简单的网页；熟练掌握WEB程序设计中的基本知识点；了解和熟悉网站管理的基本知识，为今后的学习和工作中有关网页制作和使用打下良好的基础。

通过“项目制”的课程内容编排，让学生通过本课程的学习，能够了解和掌握一个完整的网站制作项目流程，为将来的实际工作提供良好的经验和指导。

课程内容的设计，以“培养计算思维”为核心，使学生在学习课程内容的同时，初步了解计算思维的基本含义，并且能够在今后的学习和工作中，有意识地使用计算思维解决实际问题，达到培养学生计算思维的目的。

2 课程教学内容

1.1 课程内容

根据课程的学习目标，本课程需要教授以下几部分内容：

表1 课程授课内容

1.2 课程单元内容设计

在课程内容单元的设计上，依据计算思维能力培养的核心目标，将大部分的课程内容单元都设计成为符合计算思维过程的单元小节，下面以“DIV+CSS的布局”这一课程单元为例，详细阐明课程单元的设计方法。

(1)基本问题定义。经过前面的学习，学生已经掌握了使用表格来布局一个网页；对于简单页面，以及内容元素相对固定的页面，这种方式能够很好的胜任。示例中的网页，包含很多层级的页面元素，以及多样化的显示效果；同时，包括一些可以自由隐藏和显示的元素。在这种情况下，试想一下，如果使用传统的表格布局方式，可以想象表格的嵌套层级会非常多，页面代码会非常复杂和凌乱；另外，对于那些动态的元素，也很难通过表格来进行布局和显示。

(2)分析和简化问题。学生可以分析一下，那么为什么会出现上述的那些问题呢？首先，是由于表格布局的“刻板性”导致的。采用表格布局，把整个页面划分为不同的行列形式，这就导致了不能够灵活的将元素随意定义在希望的位置。通过这样的分析，表格布局的主要问题就是：布局不具备灵活性，元素布局与显示样式的绑定过于紧密。

(3)问题解决方案。通过分析，学生了解到表格布局存在主要问题，那么如何解决这些问题呢？教师需要引入更为灵活的布局方法，同时，布局与样式的设置之间，耦合性不能过于紧密，以便可以进行灵活地样式设置。所以，才有了DIV+CSS的布局方式。

(4)回顾与总结。通过这一节的学习，学生首先了解了表格布局的局限性和存在的问题；通过分析这些局限性出现的原因，然后引入布局更为灵活的DIV+CSS的布局方式，来实现更好的布局效果。同学们也可以思考一下，通过学习DIV+CSS布局方法，能否对比一下两种布局方式存在哪些不同点，以及各自适合什么样的场景。

3 课程教学设计

在《网页设计与制作》传统的课程教学设计中，主要是将整个课程所有的知识点，按照一定的顺序，分配到各个课程单元中去；在知识点的分布过程中，并没有太多考虑学生在实际学习过程中，是否能够契合到实际的网站的设计和制作的实践顺序，从而更好地在实际中运用所学的知识；同时，这样单纯的按照顺序来组织知识点，也会忽略掉知识点之间的有机结合，学生不能够更深入地理解知识点之间的关联性，从而形成有效的知识网状结构，降低学习效率。

在本文中，引入“项目教学法”[5]进行设计，以一个主题网站制作项目作为教学目标，各个单元的知识点讲解完运用到主题网站上，依次包括需求调研、需求分析、详细设计、网页制作、网站管理、测试、发布等项目过程，并分别对应到各个课程单元中；整个教学任务完成的同时，学生也跟着完成了一个主题网站制作的项目过程，把原本离散的知识点融合成了一个整体，并运用到实际的项目中去。通过这样的教学和实践方式，学生能够更好地掌握知识点之间更为立体的关系，从而形成很好的知识网，能够更为灵活地将所学知识运用到实践当中去。

具体的课程单元与相应的项目阶段的对应关系(见图1)。

图1 课程教学设计

4 计算思维培养

本课程作为大学生计算机基础课程之一，也需要承担培养大学生计算思维的责任。本文主要在两个方面进行学生计算思维的引导和培养：课程结构设计，课程内容的讲解。

(1)计算思维。按照周以真教授的定义，计算思维就是运用计算机科学的基础概念，进行问题求解、系统设计、以及人类行为理解等涵盖计算机科学之广度的一系列思维活动[6]。作为大学生计算机基础教育的核心，所有计算机基础教育的课程，必须从各个方面潜移默化地对学生的计算思维能力进行培养。

图2 课程结构设计

(2)课程结构设计方面。本课程整体采用项目教学法，引入完整的项目过程，这本身就有利于培养学生的计算思维：在前期进行网站需求的整理，弄清需要解决的具体问题是什么，界定问题的具体范围；然后通过需求的分析过程，进行简化、抽象、转化等方法，找到最终需要实现的功能点；最后再借助计算机，完成相应的网站制作，从而解决最初的需求问题。

(3)课程内容讲解方面。在实际知识点讲解的过程中，本文主要采用“案例教学法”进行大部分知识点的讲解和演示。在课程的开始阶段，可以让学生浏览大量的成功网站案例，通过参看不同类型的网站，多样而又绚丽地设计让学生对网站设计产生浓烈的兴趣；在兴趣的驱动下，展开各个学习单元的教学。

在各个学习单元内，同样提供相关内容的成功示例；让学生带着分析、总结的方式，从成功的实例中去总结设计的要求，例如网站的布局结构、网站的配色设计、网站的菜单类型、网站的跳转方式等，以及相应的实现方式；在这个过程中通过参考、总结的方式，学习相关的知识，并提高分析和解决问题的能力。

在使用案例教学法讲解知识点的同时，也要注重引导学生采用计算思维的方式。例如，在讲解模板的定义和使用这一节，首先，描述我们当前碰到的问题，我们在制作同一个网站的二级页面时，有大量的页面元素经常是重复出现的，例如页眉、导航、页脚、版权信息等等，这往往需要大量的重复工作。这时我们可以借助于模板，把大量需要重复制作的元素提取出来，精简到一个模板中；后续相同架构的网页就可以直接通过调用该模板，直接生成相应的网页。这个过程就是一个完整的计算思维的过程：分析问题，提炼和简化问题，找到相应的解决办法，最后解决问题。

通过上述两个方面，就可以从宏观(项目整体流程)和微观(具体的知识点学习)两个角度，让学生在学习中能够更好地接受和体会计算思维的本质含义，并在今后的学习和工作中，能够更好地运用计算思维解决各种问题，从而真正建立起计算思维。

5.课程考核设计

《网页设计与制作》课程，是一门注重实践操作的课程，着重培养学生如何在今后的学习和工作中，正确的运用课堂知识和工具，制作出符合需求的网站页面的能力。基于这样的培养目标，本文在课程考核方式上，侧重于考核学生的动手能力方面；同时，也会兼顾学生的平时课堂表现，考核成绩主要分为平时成绩(20%)、项目单元成绩(30%)和课程设计(50%)三个方面。

5.1 平时考核

课程的平时成绩主要包括出勤情况、课堂表现和学习态度等，主要通过课堂点名，课上观察、课堂提问，以及课上分组讨论等方式进行考察和记录，并综合以上各个方面的表现，最终确定平时成绩。

5.2 项目单元考核

这部分成绩，主要通过检查学生在每个项目节点结束时，项目单元的完成情况来确定的。例如，在需求调研阶段结束时，检查每个学生的需求调研文档，根据相应的完成情况，给出该项目单元的成绩；最终，整个项目流程结束后，再给出整个项目单元的成绩。

5.3 课程设计

本课程采用课程设计代替传统的理论考试，通过具体的网站项目制作，考察学生对于网页制作知识的理解，以及在实际制作时的运用能力。在评定课程设计成绩时，主要从以下几个方面进行评判：①网站的功能完整性；①网站整体的风格与布局；①网站的易用性；①网站的色彩搭配和美观性；

通过上述的几个方面，基本能够评判学生在制作网站时，是否掌握了本课程的理论知识，并合理地运用到实际的网站制作中，从而给出相应合理的最终成绩。

6 结语

《网页设计与制作》是一门理论与实践结合非常紧密的课程，而且更偏重于实践操作的课程；传统的授课方式，更多是教授课本上的理论知识，学生无法直接清晰的了解如何去完整的设计制作一个网站，从而在进行课程设计，以及今后面临网站制作工作时，无法很好的完成。

采用项目教学法，模拟整个网站项目的开发制作过程，让学生参与每个过程，从而清晰的理解具体的设计开发过程；而且，在每个项目单元，学生都需要完成具体的项目任务，这也能更大地驱动学生的主观能动性，更好地将所学知识应用于实践当中。同时，有了整个课程项目的经验，学生能够更好地完成课程设计工作，独立完整地设计和制作一个网站。

在课程知识的设计和讲授方面，尽量采用有利于培养学生培养计算思维的方式，引导学生建立起计算思维；通过项目教学法，以及课程设计的过程，更有助于学生按照计算思维的方式思考和解决问题，从而慢慢建立起计算思维。计算思维不仅是计算机专业学生应该具备的能力，而是所有专业的学生都应该具有的思维方式。因此，大学计算机基础教育，就应该承担培养学生计算思维的责任。然而，培养计算思维，并不是通过一两门课程就能够完成的；而是应该将计算思维的培养，融入到计算机基础教育的所有课程中去，只有这样才能够逐步建立起学生的计算思维，并在今后的学习和工作中，能够真正地运用计算思维来思考和解决相应的问题，这才是培养计算思维的最终目标。