《网页设计基础》移动混合式教学模式实践与探索_周晓磊.pdf

产业与科技论坛2023年第22卷 第1期Industrial&Science Tribune2023（22）1网页设计基础移动混合式教学模式实践与探索周晓磊【内容摘要】网页设计基础是一门强调理论与实践并重的课程。针对该门课程存在的标记和属性繁杂、记忆困难、课程考核评价方式单一等问题，本研究充分利用现代移动通讯工具和教学管理平台的即时交互性和便捷性，尝试了在教学活动过程中引入超星泛雅在线教学管理工具，方便学生进行知识点记忆和复习，方便教师实时把握学生学习进展，实现“线上 线下”的移动混合式教学模式改革实践。【关键词】网页设计基础；移动平台；混合式教学模式；评价体系【基金项目】本文为 年度首都经济贸易大学校级重点教改项目“基于微信公众平台的移动混合式教学模式实践 以网页设计基础课程为例”研究成果。【作者简介】周晓磊（），女，河北石家庄人，首都经济贸易大学管理工程学院副教授，博士；研究方向：界面交互设计 一、引言随着互联网技术的迅速发展和普及，“前端工程师”这一岗位正在上升到技术层面，成为互联网软件产品研发中不可或缺的专业研发角色。特别是近些年互联网 电子商务项目的成熟壮大（如淘宝、京东、拼多多等），各大互联网公司之间激烈的竞争使得这些软件产品的用户对于用户体验提出了更高的要求，产品界面是否拥有极致的用户体验甚至成为了胜负的关键，因此也让前端开发受到了前所未有的重视，成为各大互联网公司必需的 岗位之一。在 直聘官网，将“岗位城市”设置为“北京”，在关键词中搜索“前端工程师”，仅通过查看前 页（条招聘信息）就可以了解到该岗位的待遇大都在 月，有的甚至更高。在任职要求中几乎都有写明“熟练使用，根据 设计图快速实现兼容可维护的页面；熟悉 语言及，代码规范、易读、易维护；深入理解 标准与 规范，熟悉 语义化，掌握 盒模型、常用布局以及浏览器兼容性；熟练掌握 中的至少一种框架”。岗位的任职要求中最根本的内容正是网页设计基础这门课程要讲授的内容，而且本课程也是 前端框架、微信小程序应用开发以及 混合移动 开发课程的先修课。因此，本课程的开设完全符合当前互联网时代社会对人才的迫切需求。在当前互联网时代的浪潮下，网页设计基础课程的建设既可以为计算机专业建立一支优秀的互联网前端开发师资队伍，建立更多符合实际场景需求的教学案例，拓展更多的校企合作渠道和模式，更为重要的是本课程的教学内容设置贴合社会当前对 前端应用开发人才的迫切需求。如何有效地开展课堂教学和改革评价体系，提高学生 工程项目的设计、开发、调试等职业能力水平，增强他们社会就业的竞争力正是本课程建设要解决的根本问题。二、课程开设存在问题及解决对策（一）课程开设基本情况。互联网开发网页设计基础是计算机科学与技术专业培养方案中开设的“互联网开发系列课程”中最基础的一门课程，授课对象面向大一第二学期的学生。该课程强调理论与实践并重，主要目标是培养学生利用所学的、以及 知识进行网页作品设计与开发，课程采用的网页设计软件是（数字天堂）推出的支持 的 前端集成开发工具。学生对此门课程有着浓厚的学习兴趣，在完成一次次的课堂作业时都会有一种小小的成就感，例如导航栏、下拉菜单、轮播图、网页架构设计、仿回收站、注册页面、调查问卷设计、音乐播放器、时钟、日历以及地理定位等等。课程结束后还会要求每位同学利用本学期学习的知识，结合自己的兴趣爱好设计一个综合性的网站作品并在课堂上演示，讲解作品设计的难点以及解决方案，回答老师和其他同学的提问。与其他新技术一样，网页前端的技术更新速度也较快，实践性也很强，无论是 技术标准的不断发展，还是教学案例的更迭都使得教学内容在不断地更新与完善。理论教学内容包括 基础、基础、基础、拖放、表单、媒体、地理定位、画布 以及 技术等。教学实施上，采用基于案例的教学法，强调基本理论与技能的综合训练与掌握。（二）存在的问题。通过初期授课发现，学生们尽管对网页设计有着浓厚的学习兴趣，但存在以下三个突出问题：一是网页设计入门并不是很难，但各类标记、属性繁杂，而我们的课堂学时有限，课堂实施进度比较快，学生记忆起来有难度。二是课堂上缺乏师生互动，学生认为基础知识简单，不屑于认真听讲，以为自己一看就懂，等到上机实践设计网页时，又发现无从下手，或者遇到代码出错，能自行解决的学生少之又少。三是课程考核评价方式比较单一，一般是教师根据学生作品情况给定分数，不利于调动学生学习的积极性。（三）解决对策。年后入学的大学生被冠以“后”大学生，他们目前正处于“互联网 智能教育”的思潮下，平时离不开网络和手机，而且善于接受新事物和学习新技能。其中，各种移动在线学习平台已经成中国大学生获取信息的一个重要途径，将移动在线学习平台运用到教育领域，作为新的学习辅助手段，进行专业知识的传播潜力十分巨大。因此，要将移动学习平台和传统课堂教学相结合，构建移动混2023年第22卷 第1期产业与科技论坛2023（22）1Industrial&Science Tribune合式教学，利用移动学习平台交互的即时性和强大的在线教学管理功能，提升学生学习效果和课堂教学质量。课程教学尝试使用了超星泛雅在线教学管理平台，设计每个教学单元、推送学生、即时互动、随堂测验、在线指导、综合评价等，将学生应该掌握的课程基本知识、实战技能和职业素养融入整个教学过程，让学生以一种实践的、联系的方式学习这门课，并以此能促进学生 前端应用开发技能与工程能力的提高，增强他们社会就业的竞争力。三、基于超星泛雅平台的网页设计基础在线课程建设与教学实施（一）教学资料的选取。现在市面在售的网页设计基础教材有很多，在选取时要特别注意教材中涉及的诸如标签、属性等知识点是否符合现行的 标准规范，教材的案例选取是否符合当前 设计规则等。比如，在 规范中已经废弃了、等标签，取而代之的是用 完成样式呈现，但有的教材中仍旧存在使用这些废弃标签的情形；再如 规范引入了语义化标签，但很多教材中并没有这些知识点或相应案例。经过调研，最终本课程决定选取周文洁编著的 网页前端设计作为教学参考书籍。随着互联网技术的迅速发展，仅仅依靠教材或参考书中的知识掌握网页设计与开发技术是远远不够的，在教学过程中一直极力建议学生多学习和参考网络上的网页设计学习资源：菜鸟教程、慕课网以及各大在线平台的网络公开课等。另外，通过设置打开现有网站网页的调试模式，可以查看任意网页的源码，这也是很好的学习网页设计的方法。但是以上两个教学资源仍旧存在的问题是一个知识点大都对应一个案例，这些案例或者缺乏实用性，或者案例之间的联系性不强，学生学完之后只是掌握了每一个知识点，却不会将它们融会贯通联系在一起，甚至有的不知道用在何处、怎么用，经常出现标签混用、滥用的情况。因此，每一章节学完后，都会为学生设置一些综合性较强的网页设计案例作业，同时给出该案例设计的思路，一步步引导大家制作、完善并完成。（二）教学过程实施。在本次教改中，课程教学通过课程导学、章节内容建设、基本知识点测验、章节综合设计案例以及实时在线指导答疑和录制微视频的方式展开，在超星泛雅平台完成了课程建设。第一次授课前，首先向学生详细公布课程形式与任务、教学目标、课程对应岗位、课程学习要求、推荐的学习平台和工具以及课程考核方法等。在正式讲解 前端技术之前，先给学生设置一些讨论题，比如“网页是如何形成的？”“静态网页和动态网页的区别”“平时浏览的网页中包含哪些要素”“怎么查看网页源代码？”“制作网页的工具有哪些”等，引导学生探究这些问题的答案。了解了网页的基础知识后，通过录制微视频为学生讲解如何从整体上规划和设计一个网页，如何通过网页集成开发工具 对设计的网页进行实现。让学生对网页设计课程先有一个宏观的了解。在接下来进入网页设计的核心技术内容部分，授课内容包括 基础、基础、基础、拖放、表单、画布、媒体、地理定位 等方面，每一部分的内容又从章节知识点、客观题测验以及章节综合案例三个角度去学习、强化和内化。在章节知识点部分采用基础理论整合“菜鸟教程”中的很多实例进行单个知识点的讲解，同时也方便学生课后就某个知识点随时进入“菜鸟教程”进行复习和强化。为了检验章节知识点的学习效果，学生可以通过客观题测验检查已掌握和未掌握的内容。本课程的最终目标是希望学生能构建、美化和发布网站，因此章节后的综合案例作业也是必不可少的环节。教师可以通过泛雅平台统计和掌握学生测验题的答题情况，发现学生学习过程中出现的问题，通过 群就学生反馈的设计难点（如 盒模型的使用、如何调试网页脚本等）进行实时在线指导，就难点问题录制微视频上传至泛雅平台，供学生随时观看和复习。（三）考核方式。学生学完章节内容后，通过完成相应的客观自测题（主要为单选和判断题）以及章节设计综合题以检验对基本理论的掌握程度和对知识的综合运用情况。通过客观自测题的答题情况，教师可以在泛雅平台上通过统计数据非常清楚地了解学生的薄弱环节，进而及时进行辅导和强化；对于章节设计综合题，在发布这些题目的同时也给学生指出设计的思路，但还是经常会存在设计效果达不到样张要求的情况，这时很多学生会与教师进行互动，反馈自己在设计时遇到的问题，教师就每个学生的情况一一讲解，引导学生逐步完成作业。事后就典型的作业问题进行微视频录制讲解，上传泛雅平台让大家课后去学习，避免以后踩同样的坑。这里的客观题测验及章节设计综合作业完成程度和完成的质量也纳入了课程考核的模块。在课程期末考核阶段，每位同学根据本课程所学知识自选题材设计与开发一个网站作品。作品从主题选择是否积极向上、网站环境搭建是否科学、网页布局设计是否合理和规范、内容组织与导航是否清晰、样式与外观设计是否与主题和谐以及页面元素（文字、图片、超链接、多媒体、表格、表单以及地理定位等）插入和设置是否正确几个方面进行评分。网页作品完成之后，每位同学在课上向全班同学展示自己精心制作的网站，相互之间互相提问、互相讨论学习、共同进步。最终成绩由“网站作品 客观题测验 章节案例作业 课程资料 微视频学习 平时考勤”构成。四、结语网页设计基础课程超星泛雅教学平台的线上 线下混合式教学应用于改革，能利用移动学习平台交互的即时性和强大的在线教学管理功能，让学生以一种随时随地的、实践的、知识点之间有机联系的方式来学习这门课；教师通过管理平台可以第一时间掌握学生学习的薄弱环节，进而给出精准的辅导，取得了较好的成效。教学改革是一个不断发展完善的过程，这就需要教师及时跟踪学科和技术的发展前沿，完善和充实教学内容和教学案例，不断改进现有的教学理念和方法，注重培养学生实践动手能力，才能培养出适应社会需求的专业技术人才。【参考文献】直 聘 官 网 ：？李彦，边国栋 基于线上线下混合教学模式的“网页设计”课程的改革探讨 微型电脑应用，：周文洁 网页前端设计 北京：清华大学出版社，：菜鸟教程 ：