Html5网页设计课程的教学

摘要：Html 5网络技术已经成为当今时代主流的网络平台前端开发技术，高职院校为适应当今网络技术新形式、新时代的要求，研究相关课程的教学工作是非常必要的，本文就Html 5网络课程的教学做了重要的阐述，合理地安排该课程的教学方法是目前相关专业教师的首要任务。

关键词：Html 5;浏览器;B/S结构;

在2010年3月的微软MIX2010大会上，微软的工程师在介绍Internet Explorer 9浏览器的同时，也提出未来将进入Html 5的时代。他从开发的角度把互联网的发展分解成为三个阶段，而即将进入的Html 5就是第三个阶段———丰富的图形内容和丰富的媒体内容阶段，网站开发即将迎来一个新的时代。因此，高校关于网络开发的课程要适应新时代新环境就要求，基于Html 5的网页设计的课程教学研究是非常必要的。

一、网页设计课程目标

超文本置标语言(Html)为了能够创建更为简单的Web开发程序，代码书写更简洁更高效，在2008年进行了大规模的修改更新，推出了Html 5版本。对比以往的Html版本，Html 5提供了更多的属性更多的元素，大大拓展了Html本身的功能。Html 5的互联网应用能够改善用户的体验，是当前Web设计和开发的首选，也是高校网页设计相关课程的首选。

二、以往相关专业课程存在的问题

(一)内容涵盖不足，新内容较少

在当今时代IT行业的任何一个方向的发展都是突飞猛进的，网络开发技术的平台一直没有统一的标准，在移动端开发出现后，基于移动端框架的网络开发发展迅猛，近几年需求量已经远远超过了PC端，而与此相关的专业知识，以往课程内容涵盖不足。当今网页的浏览器的种类繁多，常用的包括Internet Explore、Google、Firefox、Safari、Opera等Web浏览器。开发者在开发相应的网页的过程中，不仅要了解相关的Html知识，还要了解对不同浏览器的运行支持。而以往的课程只是以讲解理论知识为主，技术开发在网络上的适应性和拓展性并没有花太大的篇幅去介绍，新案例讲解较少。要适应网络平台实时更新新技术新框架的发展要求，开发者不仅需要有扎实的理论知识，更需要通过开发新案例来了解最新的技术和网络发展方向。

(二)知识点过于松散

关于网页设计相关的课程因为Html版本的繁多，语法的不统一，网络课程的知识点重复太多，有些知识点并不需要开发者都掌握，只是保证开发出的网页在不同浏览器的兼容性，不同的语法实现相同功能的情况较多，开发者往往需要二次开发。Html每次推出新版本后，旧有的语法规则会保留部分，再用新语法替换部分弃用的语法规则，新旧语法交替，教师在讲解课程的过程中会出现知识断层，学生在学习的过程中也遇到相关知识无法衔接或语法混淆的问题，课程的学习效果很低。

(三)了解企业需求

相关专业课程提出的需求不能仅仅需要满足于课堂，更应该契合企业和市场的需求，促进人才培养与产业需求相结合。Web前端相关的技术发展速度非常快，新的技术理念层出不穷，而市场和企业的需求才是最终的需求方向。因此人才培养方案需注重加强岗位能力培养，积极推进产教融合、课证融合，提升专业群与产业群的契合度，才能夯实学生就业创业基础。

三、Html 5课程的优势

(一)适应时代的要求

Html 5相关知识是今后互联网通用标准的统一标准，这也是时代的迫切要求，之前的课程光讲解Web浏览器之前的兼容性就浪费了大量的时间，Html 5在Web应用平台上开发标准非常明确，在此平台上，视频、音频、图像、动画以及电脑的交互都是标准化的，非标准化所导致的问题得以解决，知识点构建是非常明确的。

(二)完善以往课程的不足

Html 5相关知识向上兼容，可以完善网络开发专业的教学计划，在原有课程的基础上，弥补以往因为平台、浏览器等兼容性所导致的漏洞。用Html 5标准创建的网页程序也可以识别旧版本的语法，并且Html 5追加了很多新规则、新知识、新框架，大大拓展了开发潜力，不仅如此，还结合了包括微格式、无障碍应用等各种周边的技术，完善以往语法的不足，提高了语法的可读性。

(三)与其他核心课程有很好的衔接

以往的网页设计相关的课程都是基于PC平台，但当今社会手机平台的使用已成为主流，因此基于手机开发相关的知识也是当前网络开发方向学习的热门方向之一，而Html 5的课程，不仅介绍了PC平台的开发知识，也介绍了手机平台的相关知识。教师在介绍本课程的相关知识的同时也会涵盖其他方向的一些知识点，学生在学习完本课程之后，再学习其他核心课程，比如手机APP开发课程时，相关的知识点是可以通用的。

四、Html 5课程的整体框架

如下图所示，Html 5有完整的结构框架，高校在开设相关的网页设计课程包含了目前流行的网络开放相关知识，包括css、svg、Animation等，Html 5所包含的全新的标签和元素更是课程的重点内容，以适应新时代、新环境下的教学要求。

五、Html 5课程主要特色

(一)制定Html 5网页设计课程体系

新的课程体系的建立是为了让Html 5网页设计课程的课程目标、课程内容、课程方法满足Web前端职业技能人才需求，适应国家和社会发展的需求，提高高职教学效果和人才培养质量，以岗位技能目标为导向，提升学生的就业竞争力和可持续发展的能力。

(二)明确Html 5网页设计的课程定位

Html 5网页设计课程总目标定位于使学生掌握常用的网页设计和网站工具，掌握网页设计的基本技能，熟悉HTML5语言，能够利用HTML5和CSS3知识进行Web前端网页设计、制作及站点管理的基本知识和技能，能够独立制作中小型的静态网站。

(三)选择适应Html 5网页设计课程的教学方法

Html 5网页设计课程教学的研究不仅给课程制定了教学标准，更要求学生在学习课程后需要掌握的相关技能标准，因此在教学过程中，传统的讲授式教学方法的比重应该减少，提高演示法和学生自主学习法的比重，开展多样性学习法。比如可以增加网课模式，学生可以先通过课堂教学学习相关知识点，课后再通过一边观看网课一边与教师进行在线答疑的课后自主学习，大大提高学习效率。

(四)探索适应Html 5网页设计专业标准的教学模式

传统的教学模式已经无法适应社会发展的需求，积极探索新型高职教学模式是必然要求。Html 5网页设计课程应该在教学研究改革的理念下采用新的教学模式代替传统的教学模式，满足Web前端开发的技术标准要求。

六、Html 5课程可能面临的问题

虽然Html 5作为当今主流的网络前端开发语言，但其作用并非十全十美，不管是教师教学还是学生学习都会遇到一些问题，大致包含以下几点:

(一)浏览器兼容性的问题

众所周知Web浏览器之前的兼容性是非常低的，在开发网页程序的过程中，虽然程序可以某一个浏览器上可以运行，但在另一个浏览器上就不一定能够正常运行，这个问题是因为以往的规范不统一，或者说没有标准化所造成的。Html 5新语法解决了部分浏览器兼容的问题，但就现今的发展趋势来看，该问题依然还是存在的，要想从根本上解决这个问题还有很长的路要走。

(二)语法文档的不严谨

在Html 5之前的Html版本，文档的结构不清晰，比如

这个元素，过多地使用该元素会导致程序分不清正文和标题，以至于语法书写过程中主次不明确，容易混淆。Html 5虽然很好地解决了这个问题，但同时也兼容了以往版本语法的缘故，新语法与旧语法都可以使用，再加上语法的自由度很高，如果不按照统一的标准书写很容易造成程序的可读性低，非开发者无法弄懂的情况。

(三)没有触及专业核心，难以满足企业要求

教师在教学上避重就轻、避难就易，因而在课程内容的组织上，主要是以HTML+CSS基本的知识为主，很少或没有讲述前端的核心技术Java Script语言更谈不上企业广泛使用的各种主流框架，这样培养出来的学生很难满足企业要求。

(四)缺乏与企业衔接的课程

由于没有充分及时的调研或企业参与，加上Web前端开发技术更迭快、选型多，难以及时了解当前行业企业的主流的技术应用方案和趋势，缺少岗前衔接课程，因而，所培养的毕业学生难以达到企业用人标准。

七、结语

虽然Html 5就目前的发展与预期的目标还有一段距离，但对高校目前的网络相关的方向是毋庸置疑的核心课程，高校的教师培养学生对Html 5网络课程的兴趣，丰富自身的网络知识，并针对性地教育学生相关的网络专业的技能，提高学生们的web前端开发的能力，培养一批适应Web前端开发的人才，满足企业用人岗位的需求。

参考文献

[1]陆凌牛.HTML 5与CSS 3权威指南[M].机械工业出版社，2013(3):10-14,25-27.

[2]刘华星，杨庚.HTML5---下一代Web开发标准研究[J].教育评论，2011(8):2-3.

[3]张路斌.HTML 5 Canvas游戏开发实战[M].机械工业出版社，2013(4):45-57,86-89.

[4] Charles Wyke-Smith.Stylin’with CSS:A Designe’s Guide[M].人民邮电出版社，2012(5):32-35.

[5]弗里曼著，谢廷晟，牛化成，刘美英译.HTML 5权威指南[M].人民邮电出版社，2014(1) 67-68,89-92.

[6]埃斯特尔，韦尔Estelle,Weyl著，范圣刚，陈宗斌译.HTML5移动开发[M].人民邮电出版社，2016(1):44-46.

[7]刘国红.HTML5在移动互联网开发中的应用[J].科技广场，2014(04).

[8]毕晓明.简析HTML5在移动互联网开发中的应用[J].软件工程，2016(02).