《Html5网页设计》教学实施报告

《Html5网页设计》教学实施报告

作者：刘青玲

来源：《神州·下旬刊》2020年第10期

摘要：《Html5网页设计》课程是高校计算机类专业开设的一门专业课程，本文从该课程

内容中选取其中两个模块的教学内容，从教学分析、教学策略、教学实施、成效与特色、反思

与改进等方面进行剖析。

关键词：教学实施;课程思政;双项目并行

《HTML5网页设计》是我院移动互联应用技术专业的一门专业核心课程，本次教学面向

的是移动互联应用技术专业大二年级的学生，本专业主要面向软件和信息技术服务业的嵌入式

系统设计工程技术人员、计算机程序设计员等职业群，培养能够从事移动互联应用程序开发、

移动互联应用硬件开发、web前端开发、移动互联应用技术支持等工作的高素质技术技能型人

才。

一、教学分析

（一）课程定位

《HTML5网页设计》课程是移动互联应用技术专业必修的一门专业核心课程，其前导课

程为《移动应用UI设计》课程，学生基本具备用户界面相关元素的设计、整体风格设计及用

户体验设计能力。本课程对接专业人才培养目标，面向Web前端开发工作岗位，通过对

HTML5、CSS3 等内容的学习，培养学生网页设计与制作能力，为后续《JavaScript语言程序

设计》、《Web前端开发》等课程学习奠定基础（见图1）。

（二）教学内容

依据移动互联应用技术专业人才培养方案、《Html5网页设计》课程标准，根据Web前端

开发工程师岗位需求，按照国家1+X证书政策要求，校企共同探讨，坚持“理论知识够用为

度、注重学生技能培养”的教学原则，遵循学生认知规律，由易到难，层层递进，将课程教学

内容整合为“HTML基础”、“CSS基础”、“网页布局”、“CSS3高级”、“JavaScript特效”等5大

模块，共计 64 学时（见图2）。

本次教学实施主要选取了选自课程五大模块中的模块三网页布局和模块四CSS3高级的教

学内容，共计16学时，采取课内、课外项目并行的双项目驱动教学模式。课内项目选择在线

真实网站——“猫先生”社区环境管家官网，课外项目则由学生自主选题，分组实施完成项目开

发（见图3）。

（三）教学目标

通过模块三和模块四的学习，突破教学重、难点，实现相应的知识目标、能力目标和素质

目标（见表1）。

（四）教学背景

1.响应教育部关于疫情期间“停课不停教、不停学”号召，充分利用在线教育平台和资源开

展线上课程教学。

2.《中国移动互联网发展报告（2019）》指出我国宽带移动通信网络、用户、业务继续保

持高速增长态势，移动端网页访问流量超过PC端，并逐年上升。

3. 2020年是生活垃圾分类工作推进的关键一年，全面渗透绿色环保的生活理念，健康生

活。

4. 2020年是脱贫攻坚年，疫情期间，严重影响各地农产品销售，利用专业知识爱心助

农，帮助农民走出困境，摆脱贫困。

（五）学情分析

本课程授课对象为移动互联应用技术专业二年级学生，学生具有以下特点：

（1）通过本课程前期的学习，掌握了HTML和CSS基础知识。

（2）对Web前端开发具有较强的职业认同感，动手能力强、善于接受信息化教学手段、

思维活跃。

（3）英语水平偏低，部分学生没有电脑，编码难度偏大。

（4）页面美观性及代码规范性方面仍有所欠缺。

二、教学策略

（一）教学设计思路

以Web前端开发综合应用能力培养为主线，针对高职教育特点，在课程体系上以“应用”

为主旨，在课程内容上以“必须、够用”为度，采用“理实一体化”、“课内、课外双项目并行”的

教学模式，将思政教育融入到专业课程教学过程中，注重学生职业素养、专业技能及学生德育

能力的提升。

在课内教学实施过程中，引入真实的项目案例，以仿“猫先生”社区环境管家官网首页为典

型工作任务，有机融合信息化手段、教学资源、教学方法，将整个项目进行任务分解，由易到

难，层层递进最终实现整个项目的制作。通过高保真还原“猫先生”社区环境管家官网首页真实

项目，培养学生精益求精的工匠精神，同时向学生宣传垃圾分类、绿色环保的生活理念。

为了帮助学生更好地巩固和运用所学知识，熟悉项目开发流程，要求学生分组完成课外真

实项目开发，培养学生团队协作意识，提高学生知识运用能力和社会服务能力。

（二）教学方法与手段

结合学情分析，主要采用项目导向、任务驱动、实验探究、分组教学等等教学方法实施课

程教学，在教学过程中融入企业项目开发流程，以循序渐进为前提，充分发挥教师的引领作

用，强化课堂合作学习，突出以学生为主体。

教学实施过程中，引入ARCS动机模型，提升学习的积极性，通过选取真实项目，引起学

生注意，让学生感受到学有所用，提升学习自信心，从而获得满足感，同时将思政教育融入课

程教学，真正实现教书育人。

（三）教学环境与资源

选用高职高专名校名师精品“十三五”规划教材，充分利用网易云课堂、学银在线的相关课

程资源，通过超星学习通、腾讯会议等丰富的信息化教学平台，精心录制教学视频，认真准备

教学资料，将知识点的学习融入到真实项目案例效果实现中，通过超星学习通平台进行教学资

料的发放、了解学生学习进度及效果，借助腾讯会议进行课堂直播，同时自建学银慕课吸引更

多的学习者，扩大课程影响力。

（四）教学评价

为了更好地、全面地进行课程教学效果评价，教师团队与校企的Web前端工程师共同制

定评价标准，基于超星平臺，构建多元评价体系，从知识、技能、素养多维度考核评价。

考核方式主要采取过程形成性考核、项目考核、终结性考核相结合的方式，采用教师评、

学生互评、组间评、企业评等多维度评价相结合，按照权值综合各项考核结果，形成最终的课

程成绩（见表2）。

三、教学实施

本课程主要通过线上、线下相结合的授课方式，整个教学实施过程分为课前准备、课中实

施和课后巩固三个阶段（见图4）。

现以模块四中的一个子任务8——“绿色环保”响应式布局效果实现为例，阐述一次课（90

分钟）的教学实施过程，学生通过学习，掌握响应式布局这一教学内容。

（一）课前阶段

教师利用超星平台，推送学习资源，发布课前任务，学生完成课前预习及课前测，带着问

题进入课堂。

（二）课中阶段

1.环节一：复习回顾

学生代表上台进行课外综合项目实施进展汇报，分享实施过程中遇到的困难及收获，老师

对课外项目实施及课内项目完成情况进行点评，复习、回顾上次课所学内容，并进行难点讲

解。教师依据问卷调查及课前作品抽样检查，了解学情，对课前任务完成情况进行整体分析。

2.环节二：问题引入

通过“摇一摇”选人，引导学生分析“猫先生”社区环境管家首页及“绿色环保”页面在PC端

和移动端显示效果的不同，明确学习目标。

3.环节三：确定任务

教师对任务的优化完善提出明确要求，确定本次课学习内容——响应式布局，明确本次课

任务要求——修改元素尺寸单位，完成页面大、中、小屏效果。

4.环节四：新知探索

教师通过讲解相关知识、示范相关操作，学生通过学一学、试一试、想一想、练一练等方

式，掌握响应式布局的相关知识及实现方法。

5.环节五：任务实施

教师引导学生利用响应式布局相关知识完善课内项目，实施过程中，鼓励学生小组分析讨

论、小老师教、教师个别辅导等方式完成课内项目效果。对于课内共性问题及教学重、难点，

利用超星平台发起讨论，引导学生进行分析解决，并将问题及解决方案添加至课程问题库，方

便学生后续学习。

6.环节六：评价总结

引导学生依據功能实现、代码规范等评价指标，组织学生完成组间评价，老师分析组间评

价结果，对评价高的作品进行表扬，并引导学生完成得分较低作品的分析，鼓励学生分析问题

并解决问题，攻克教学难点，并安排学生完善课程问题库。

教师通过平台发布课堂测试，了解学习效果，对测试结果及测试难点进行分析，总结教学

重、难点。

（三）课后阶段

学生完善课内项目，严格按照企业项目开发流程同步分组实施，企业讲师、教师、学生、

辅导员各司其职共同完成课外项目开发，通过课外项目的开发提高学生团队协作意识，培养学

生精益求精的工匠精神以及学以致用的能力（见图5）。

四、教学成效与特色

（一）教学成效

通过课程学习，学生的专业知识、专业技能、职业素养都有明显提高，有效达成课程教学

目标。

1.专业知识日渐丰富

（1）知识结构逐步完善

学生在原有HTML基础、CSS基础上，掌握了网页布局及CSS3高级等相关知识，网页设

计相关知识渐渐丰富。

（2）学习前、后测成绩差异大

学生模块学习前、后测试结果显示学生网页设计知识有较大突破，后测相比前测有很大进

步。

2.专业技能显著提高

（1）学生作品日趋完善

通过课程学习，学生的技能水平提升，课内项目和“猫先生”社区环境管家官网首页效果重

合度提高，课外项目效果与客户需求逐渐契合。

（2）各类竞赛成绩逐步提升

教师教学能力稳步提高，学生竞赛成绩喜人，教师在省级教师教学能力比赛中荣获二等

奖，学生在省级技能竞赛“移动融媒体应用技术”赛项中荣获二等奖一项，三等奖一项。

3.职业素养得到提升

（1）沟通表达力改善

通过课前课外项目分享、讨论、项目汇报等方式，学生沟通表达能力日益改善，自信心提

升。

（2）团队协作能力增强

通过分组学习及课外项目实施，增强了学生团结协作意识，团队协作能力提升。

（3）编码逐渐规范

通过教学熏陶、作品评价等方式，让学生命名、编码逐步规范，养成精益求精的工匠精

神。

（二）特色

特色一：引入真实项目，实施双项目并行

选用真实项目“猫先生”社区环境管家官网作为课内项目载体，贴近生活，教学活动更有温

度和力度。突破传统的教育范式，实施课内、课外双项目并行，结合互联网+创新创业大赛、

威客接单平台等等进行自主选题，分组实施，提升学生的团队协作意识和知识运用能力。

特色二：融入思政教育，践行爱心助农

科学选用项目载体，渗透正确的生活理念，帮助学生树立正确的人生观、价值观和世界观;

课程教学过程中，通过“高保真”还原和不断完善作品，培养学生精益求精的工匠精神。同时将

思政教育融入教学实施全过程，将湖南省贫困村——邵阳市新宁马头桥镇六合村网站开发作为

课外项目之一，进行农产品宣传及销售，帮助农民走出困境，真正实现教书、育人并行。

特色三：强化校企共建，共育专业人才

遵循“校企合作、优势互补”原则组建课程教学团队，按照岗位需求，校企共同制定人才培

养方案、课程标准，将企业项目开发流程及评价标准融入课程教学实施过程。

五、教学反思与改进

（一）教学反思

受疫情影响，前期线上教学实施过程中，部分学生所在地区网络信号差，同时该班10%的

同学无电脑，课程教学操作性强，教学实施难度大，教学进展缓慢，教师对学生实时督学难以

实现，教学效果不够理想。

（二）改进方向

学生复学返校后，针对没有电脑、课程学习有困难的学生，及时了解学生状态，加大督学

力度，给予鼓励、帮扶，采取开放实训室、义务补课等方式，帮助学生提高学习积极性，迎头

赶上，确保学生不掉队。

参考文献：

[1]白洁.高职《化工仪表及自动化》课程信息化教学实施报告.广东化工.2020（14）：236-

237.

[2]秦颖.赏景、悦情、悟人——《绵远的诗韵》教学实施报告.中国多媒体与网络教学学

报.2020：178-179.

注：本文系湖南安全技术职业学院2019年院级“课程思政”教育教学改革精品项目——

《网页设计与制作》课程思政教学探讨的项目成果。