软件工程专业网页设计课程教学改革实践——以使用DIV+CSS布局网页为例

肖淑苹 西安翻译学院工程技术学院

1 引言

一场突如其来的疫情，让2020的春季课堂变得不同寻常。新冠状病毒疫情发生以来，各个学校坚决贯彻习近平总书记关于疫情防控工作的重要指示，按照党中央、国务院、教育部、省教育厅的决策部署，一手抓疫情防控，一手抓线上教学，千方百计做好“停课不停教、停课不停学”工作。

在新型冠状病毒感染的疫情形势下，作为当代青年，应该坚定信心，树立正确意识形态，切实为防控疫情做出贡献。网页设计是一门实践性特别强的专业基础课程，通过该课程的学习，能够开启学生的内在潜力和动力，提升健康的审美能力，培养有情怀、有责任、有担当的人才。

传统的教学主要采用演示法，教师提供素材，为学生演示操作步骤，然后让学生实践，这种教学方式在一定程度上激发了学生的学习兴趣，但是学生自己规划网站，自己搜集素材然后制作网页更能开启学生的内在潜力和动力。

疫情期间软件工程专业网页设计课程开展了不同形式的教学改革，同学们热情高涨，积极参与，而且做出了一个个十分优秀的网页设计作品。

2 线上授课

2.1 国家精品课程在线学习平台——中国大学mooc（慕课）

网页设计课程选用了中国大学mooc平台北京语言大学赵慧周老师主讲的网页设计基础，课程中每个章节中提供章节测验和讨论，整门课程还提供了3次大作业，帮助学习者突破基本概念学习瓶颈、理清网页设计学习思路、掌握相关技术学习方法，指导学习者使用互联网资料支持学习，为持续学习奠定基础。

2.2 QQ群

建立班级QQ群，课前使用中国大学mooc平台或QQ群分享课程资源，布置课前学习任务，课堂中使用分享屏幕讲解重点难点知识。对于中国大学mooc平台外的课后作业，使用QQ接收学生作业。

2.3 腾讯课堂

由于腾讯课堂有回放功能，且画面清晰流畅，学习者遇到不懂的地方还可以观看教师直播内容的回放，这样不但可以加深学生的理解，还可以提高学生的学习积极性。所以将QQ分享屏幕改为腾讯课堂直播，学生反映效果良好。

3 线下教学

2020年5月，我省高校迎来了学生返校高峰，寂静了数月的校园再次迎来欢声笑语。操场上晨练的身影，图书馆内久违的灯光，餐厅里的美味……开学了，在常态化防疫的情况下，我省高校防疫、教学两手抓，确保教学质量不下降。

返校后，网页设计课程采用线下授课为主，线上学习为辅，实际操作，当面解决疑难问题，直接且高效。

4 知识的灵活应用——以使用DIV+CSS布局网页为例

学习了DIV+CSS基本知识后，学生会用DIV+CSS布局网页的基本结构，会用提供的素材制作导航栏，会用提供的素材制作信息展示部分，但学生没有自己搜集素材、规划完整的网页、制作完整的网页。

我们的伟大领袖毛泽东同志曾经说过：“获得知识的途径就是要努力学习”。“最重要的，是善于将这些知识应用到生活和实践中去”。

无论是线上教学还是线下教学，网页设计的教学目的都是希望学生们都够灵活应用所学知识做出满足需求的静态网站。围绕这个教学宗旨，网页设计课程一学期开展了3次大作业，激发学生应用所学知识解决实际问题的能力。

4.1 教学过程

4.1.1 教师布置任务

(1）确定网站主题——网站主题以围绕疫情防控知识、社会主义核心价值观为主。

选择理由：有国才有家，培养有情怀、有责任、有担当的人才。

(2）规划网站

网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字、图片的运用等。

(3）搜集素材并对素材进行相应的处理

(4）制作网页——按照先大后小、先简单后复杂来进行制作。

这里要注意以下两个问题：

色彩搭配

margin和padding的灵活应用

(5）设置超链接

(6）测试网站（重点测试图片和超链接

4.1.2 学生动手实践

(1）在动手实践的过程中，学生成为课堂的主体，学生将自己规划的网站用所学知识去具体实现，遇到具体问题就会想办法去解决。

(2）解决问题的方法和具体操作尽量由学生自己来完成，教师只是在学生遇到困难时加以引导、点拨，起到为学生“导航”的作用。

4.2 教学重点和难点

4.2.1 教学重点

规划网站，制作网页。

4.2.2 教学难点

margin和padding的灵活应用。

4.3 教学效果

传统的教学大多是教师提供素材，给出网页效果图，让学生用所学知识做出效果图来，这种教学方式也可以在一定程度上激发学生的学习兴趣，但是学生自己规划网站，自己找素材处理素材然后制作网页更能开启学生的内在潜力和动力。

4.3.1 通过本次教学改革实践，学生在以下3方面得到了很大的提升。

(1）知识方面——掌握DIV+CSS布局网页的基本方法。

(2）能力方面——培养学生的知识迁移能力；促进学生的实际应用能力；提高审美能力与鉴赏能力。

(3）情感方面——激励学生珍惜当下的学习时光；增强自学意识和自律能力；不畏困难、勇于创新；培养有情怀、有责任、有担当的人才。

4.3.2 学生作品展示

5 教学评价

经过DIV+CSS的综合应用，学生们做出来的作品大部分都很好，个别同学的效果超乎老师的想象，因为有些效果是课堂上没有教过，学生想要这个效果，然后自学做出来的，针对这些案例在课堂上给其他同学进行了分享，希望同学们能够不断学习，不断提高！

但是也有个别同学做出来的效果不是特别好，有些同学的色彩搭配的不是很好，有些同学的结构布局的不是很好等等，针对这些问题老师对其指出并进行有效沟通，希望他们今后多欣赏网上已有的经典网站，多学习有关色彩搭配的知识、布局网页的时候多注意细节。

6 总结

通过网页设计课程的学习，学生们能够灵活应用所学知识，将自己的想法用网页的形式表现出来，能够制作出满足需求的个性化网页。