前言：寻找写作灵感？中文期刊网用心挑选的HTML5+CSS3网站设计混合式教学模式探索，希望能为您的阅读和创作带来灵感，欢迎大家阅读并分享。
摘要：互联网+时代，移动设备、指间知识、碎片化学习、视频学习成为一种趋势。该文旨在通过对html5+css3网站设计课程的现状和存在的问题进行分析,利用“互联网+”的特征，结合Web前端岗位需求，在混合式教学模式的理念下将移动学习、网络学习、在线学习与传统现场教学相结合,形成了一套适合中职教育的线上线下混合式教学的思路和方法。
关键词：互联网+；混合式教学；网站设计
随着网络技术、通信技术的蓬勃发展,各行各业都因为互联网融合而发生着改变。在教育领域中，互联网与教育的结合，正颠覆传统教育的运作模式。互联网+时代，移动设备、指间知识、碎片化学习、视频学习成为一种趋势。在疫情时期“停课不停学”的推动下，线上线下融合育人环境日趋成熟，混合式学习将成为后疫情时代教育的“新常态”。如何有效地利用这种趋势和常态让学生更好地进行学习，笔者在担任HTML5+CSS3网站设计课程的教学过程中，探索出以微课为媒介，将移动学习、网络学习、在线学习与传统现场教学相结合,该教学模式在HTML5+CSS3网站设计课程中提升学生的学习兴趣,促使学生主动学习,提升教学质量。
1HTML5+CSS3网站设计课程的现状分析
《HTML5+CSS3网站设计》课程是我校计算机等相关专业的核心课程。随着互联网+时代的到来，网站设计的技术一直在更新，HTML5+CSS将是前端开发核心技术，为使教学内容符合行业发展需求，保证教学内容的先进性，该课程的教学内容及其教学资源急需更新。另外，由于网站的存储和显示形式有别于其他普通文档，大众化的教学平台无法组织显示学生的网站，这给教师组织教学带来诸多不便，以往学生提交网站只能孤立存储于教师的便携移动存储设备或上传至仅有教师有访问权限的服务器，这不利于学生之间的互相学习、评价、再完善和课后学习。传统的教学方式和现有的教学资源不能较好地满足学生的需求。再者学生在进行HTML5+CSS3网站设计开发自主能力不足，创新、融会贯通能力较弱。为了这种适应现阶段人才模式培养的需求，笔者采用以微课为主的混合式教学模式在HTML5+CSS3网站设计课程进行了探索，结合岗位需求，让学生能运用HTML5+CSS3的知识，完成网站页面设计和制作，能熟悉前端开发的工作规范。本次探究正是贴合实际需求的一次创新实践。
2混合式教学模式研究可行性分析
以微课为主的混合式教学模式是当前的主流。混合式教学模式是结合网络学习与传统课堂教学的混合式学习的学习方式提出的，是当前信息化教学的主流教学方式，也较能被学生广泛接受。微课凭借其“短小精悍”的特点迅速成为教学改革和资源建设的宠儿，制作精良的微课在辅助课堂教学和促进学习者自主学习方面的出色表现得到了众多学者和广大教师的认可。课程将知识碎片化,课堂切片化，区别于传统课堂模式的系统化教学,是新时代下适应中职学生新需求的“微学习”。
3混合式教学模式的探究与实践
为保证微课程内容呈现的科学性、形式展现的趣味性、技术实现的可行性，在本次探究的过程中我们与做互联网网站设计和教育产品有充足经验的企业合作，设计符合本校实际的开发模式设计，共同开发微课程。另外，本次不仅仅局限于微课程的开发，还充分发挥“互联网+”的优势，在我们已经使用比较成熟的基于移动端的学生技能鉴定学习模拟教学平台和超星教学平台上采用混合式教学模式在实际教学中开展微课程的应用研究。此外校企还共建适合《HTML5+CSS3网站设计》课程教学的网络教学平台。笔者采用微课为主的混合式教学模式在HTML5+CSS3网站设计课程中进行了为期一个学期的探索实践。1）确认微内容，设计章节清单。作为一门技术的课程，最重要也是最难的就是要将一些非常复杂、难以理解的思想和问题简单化，让学生轻松理解并掌握。HTML5+CSS3网站设计课程可分为HTML语法，HTML5页面元素及属性、CSS3入门、CSS3选择器、CSS3盒子模型、浮动与定位等。通过内容的划分，帮学生进行知识的梳理，教学目标明确，知识点集中，有一定的针对性。确认好内容再对每项微内容的评价考核分解成相应的章节，每个章节不仅有微课视频，还包括了学习清单——教学课件，知识点小测，学生提问和教师评价等。2）制作微视频，提供在线学习资源。微课程开发最重要的依据是能根据本校的实际，以任务为导向，结合岗位需求。《HTML5+CSS3网站设计》课程目前以HT⁃ML5+CSS3应用开发为核心，知识点多且关联性较强，这很符合微课在选择知识点时的独立性要求。《HTML5+CSS3网站设计》实践性强，很多知识点都需要教师进行演示，为使教学内容学生更容易接受，同时让学生在线上先对课程进行预习,做好课前准备。因此将教学内容制作成10分钟左右的微视频。学生在学习过程中可以重复播放、自行调整课程进度，对较难理解的问题反复听和看，直到学会为止,这也是线上微课的优点。回到线下课堂中，教师通过问题导向的方式帮助学生梳理知识点。3）网络教学平台，追踪学习成长轨迹。使用共建的网络教学平台搭建了《HTML5+CSS3网站设计》课程。该平台包括了教学大纲，本课程ppt，相关图文素材，微课资源，课后拓展练习，优秀作品赏析等一系列丰富资源。系统能够自动追踪学生成长轨迹，通过学生的成绩、行为记录、知识结构、学习偏好等数据，自动生成学生未来职业潜质多维模型。线上的学习，交流，作业提交反馈都在该平台上实现。4）教学过程实施。在本次探究的过程中，以该课程《CSS3过渡属性》章节为例，本课的教学设计主要包含以下几个阶段：（1）课前准备，组织预习完成任务点。学生课前在线上教学资源的辅助下完成部分简单内容的学习，可使学生对新知识处于有准备的心理状态，课堂上有目的地听预习时所不能理解的地方，不仅降低学习难度，也是培养自身自学能力的有效途径。因此笔者在本次课前除了CSS3过渡属性微课视频让学生进行观看学习外，还了预习任务，设计小组研究问题。问题围绕将要学习的重难点展开。教师通过查看学生预习作业，可发现学生较集中的问题，以便在接下来的课堂教学中有针对性的施教。（2）课堂教学，多种教学方式相结合。采用以“学生为主体，以问题为中心”的问题导向式教学模式，以“问题”为教学活动的起点，使学生在合作学习中学会探究问题、互助合作，形成学习共同体。因此在本次课的课堂教学中首先利用分析中软国际UI设计培训宣传界面中使用到过渡动画的元素案例导入本次课程主题：CSS3的过渡属性。然后就抛出本课待研究的7个问题。利用网络教学平台与学生一起分析预习情况，采用提问法选择正确的学生，让其说出选择理由。在分析中解决第1个问题。还利用了研究型教学和小组合作学习的方式布置小组研究任务，借助微课课程以及网络教学平台上关于CSS3过渡的内容，让学生以小组为单位研究解决剩余问题。在难点的突破上，由于网络上较少有与之相关的详细阐述，教材上仅仅展示公式及静态图片，学生在理解上存在困难，由教师利用讲授法结合信息化手段---贝塞尔曲线网站上的模拟器。帮助学生更好地理解属性的含义，并可创造出更有创意的过渡方案。该模拟器避开复杂的函数和公式，以图形化的界面，动画的形式直观展示函数应用后的效果，轻松突破了难点。通过多种教学方式相结合，较好地激发学生的学习热情，提高了他们的自信心。（3）课后扩展，小组合作提升技能。在实际教学中，要使学生能及时掌握本节课的知识点，需要通过案例帮助学生强化知识点。因此在课后拓展环节，教师通过在平台上拓展任务：以完成最美逆行者感人瞬间图片切换显示照片背后的故事为目标效果，让学生小组讨论分析效果并设计实现，每个组员按要求完成效果并上传到学习平台，并参与评价。小组每个成员都需要完成该任务并上传作为学习成果评价之一，防止部分学生吃大锅饭。小组合作完成任务的过程就是知识应用过程，把实现方法讲出来，进一步将记忆转化为深度理解，既消化了所学知识，提升了解决问题的能力，又锻炼了语言表达能力。（4）建立双师协同点评并以能力考核为重点的课程评价。任务完成后，传统的教学过程是教师对平台提交的作品进行批改点评，在这次探究实践中特邀请企业导师通过腾讯会议在线点评大家的作品。采用基于信息化技术支撑的"双师协同教学"方式，通过具有丰富前端开发工作经验的前端工程师的专业点评，使学生得到启迪、指导和借鉴。5）多元评价，激发学习积极性。本课程对学生的评价采用自我评价、小组互评、双师评价相结合的方式，对学生进行全方位的多元评价。在本次探究实践中，多元评价主要评价以下五个方面：线上学习完成情况、课堂表现、知识测试、课堂作业、小组合作活动情况。通过多元评价加强对学生学习过程的管理，激发学生学习的积极性，提高了教学效率。
4探索反思
基于互联网+环境下的混合式教学模式增强了教学的灵活性，有效地节省教学时间，提高了教学效率。学期末通过查看网络教学平台的数据，惊喜地发现大部分同学每个学习的任务点的完成率都在92%以上。有些同学反馈这样的混合式教学模式提升了他们的学习兴趣，有些同学还能在网络学习平台上提出了自己的见解和建议。这样教学改革是有效的，但仍存在一些问题：（1）课前通过线上微课的方式引入课程，让学生由被动学习向主动学习转变，但对于一些学习自制力差的同学，任务完成率的真实性和有效性还有待研究。（2）小组活动包括合作学习、成果汇报等形式。虽然尽可能地优化小组学习中个人的监管，但吃大锅饭的现象还是会存在。因此今后在评价中应考虑更多因素。通过一学期的探索与实践，基于互联网+环境下的混合式教学模式能极大提高学生的学习兴趣和自主学习能力。学生可以根据自己的实际学习情况，利用网络平台上丰富的学习资料，查缺补漏，和老师互动交流，完成测试检验自己的学习情况。教师通过不断的研究学习信息化手段，教学能力得以提升。总之，基于互联网+环境下的混合式教学模式利用微课程能有效调动同学们的学习积极性，教学效果得到了显著提高。
作者:骆韵婷 单位:厦门信息学校