Html5css3在网页设计基础课程中教学改革和应用.docVIP

Html5css3在网页设计基础课程中教学改革和应用 　　【摘 要】在分析HTML5+CSS3的最新相关技术和实际教学可行性的基础上，明确了HTML5和CSS3的全新功能在网页设计基础课程中的作用，并在教学中探索合理可行的技术型实践教学模式，经过实践总结WEB端实践教学的效果。 　　【关键词】HTML5+CSS3；任务驱动 　　“网页设计基础”课程是网络专业本科的一门基础课程，课程的教学从网页基础布局和Web应用开发的需求出发，以小型实验课的表现方式，着重培养学生的实际动手能力。另外，此课程的设计对象主要针对于市场，市场新兴的技术和完善的功能需求对教师的教学要求有着强大的牵动力。此时，web端正发生了革命性的变化，移动端盛行的当今，作为web前端的基础课程，在实际教学中必然要以HTML5+CSS3的最新技术置入课堂进行教学，以项目实施的方式来激发学生的学习兴趣、引导学生熟练的运用相关理论知识和表现技法，提高学生自我学习的能力。至此，课程改革势在必行。 　　一、HTML5+CSS3在实践教学的可行性分析 　　（一）HTML5+CSS3的技术符合度。WEB技术发展日益迅猛，HTML5的出现将WEB技术推向了巅峰，目前HTML5技术已经日趋成熟，不仅在PC端，在移动终端上也有广泛的应用。而HTML5的实质包含HTML、CSS、Javascript三个部分。根据“网页设计基础”的相关教学要求，增加技术性的教学方向上主要体现为： 　　1、做好衔接。HTML5本身是由W3C推荐而出。其代码本质是从HTML4发展而来，其在HTML4的基础上增加了8个新标签和19个新型的元素，同时废除了相关的一些标签和属性，这使教学任务的完成有一个最基本的知识构建。 　　2、简化的语法。HTML5简化了很多细微的语法，例如doctype的声明，你只需要写就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。 　　3、语义化的结构标签。可以让很多更语义化的结构化代码标签代替大量的无意义的div 标签。这种语义化的特性不仅提升了网页的质量和语义，并且减少了以前用于CSS调用的class和id属性。 　　4、CANVAS和CSS3动画。无论动画以何种技术载体呈现，无论是传统的手绘动画，还是电脑生成的3D动画，也无论是用Flash还是CSS，动画的基本原理和设计准则都未曾变过的。都是以帧的设置方式来完成动画的制作。 　　5、新增的Audio和Video标签。完成丰富的页面效果必定需要多媒体的置入，在HTML5中，可以使用Audio和Video标签来完成媒体支持。HTML5使用三种格式的同时加载来完成浏览器的兼容性。 　　6、HTML5本地存储。HTML5的出现，可以在本地永久存储5MB的数据，此数据并非由服务器请求传递，而是在请求时使用相关数据完成，其支持技术源于HTML5 API。 　　7、构建HTML5的缓存技术。HTML5通过应用程序缓存整个离线站点的HTML、CSS、JasaScript、网站图像和相关资源。当服务器没有和internet建立连接时，也可以而利用本地缓存中的资源文件来正常运行Web应用程序。 　　（二）实践教学模式。根据网页设计基础的教学目标和相关要求，此课程依旧采用实验小课的教学模式，在教学方向上，每节课的内容都以一个独立的项目点来完成和构建。课程实验的内容则以贯穿课堂教学任务为核心，以培养学生独立思考、制作能力为发散点进行知识点的铺排和构建。同时，在课程的安排上进行阶段性的连接，将独立的课堂教学点串联起来完成大项目的制作。整个课程以层层推进，项目独立的方式进行螺旋式教学方式展开。 　　二、HTML5+CSS3的典型案例教学――响应式页面的构建 　　（一）项目确定。客户提出产品功能移动化的需求。 　　（二）应用型体现。根据用户行为以及移动设备进行响应式页面的设计。 　　（三）主要技术点。1、meta标签的viewport属性；2、HTML结构的单位定义；3、媒介查询-Media Queries。 　　（四）核心技能的提高。以响应式页面为核心教学点切入新课程，给学生带来web前端的最新技术，以激起学生学习的相关兴趣点。同时通过此项技术为学生提供接触实际项目的机会，不但能让学生了解自己所学知识和技能与社会要求之间的差距，更能借此督促其强化自身专业能力。在行业飞速发展的今天，企业对毕业生的实际应用能力的相关要求日益提高，借由此核心技术点，为学生提供一个前沿技术性的概念掌握，为在校学生总结不足、全面提升自身专业核心技能提供了可能。 　　（五）学生专业成长紧跟行业发展前沿。HTML5的核心技术涵盖面广泛，针对核心教学目标，在课程里置入相关的新技术点也能在主题上体现了当今行业和专业发展的最新方向