HTML5实训报告原创实训总结

1、专业实训报告学生姓名：* * *学号：20130341100专业：电子信息科学与技术班级：13级电科本1班指导教师：* * *2017年9月15日专业实训报告实训单位：物理与电子工程学院地点:实验楼信号与系统实验室实训时间：2017、9、52017、9、11指导教师:* * *1、实训目的及要求:（根据指导教师在教学过程中给出的具体要求填写）通过本次实训，旨在以亲身参与各类项目的实际编写工作，来了解新兴的 HTML语言的发展历程,并了解与掌握这一新技术在IT行业中的具体应用范围与 使用方法。在进行对H5语言进行初步了解后，通过实训课程的安排，逐步学习基 础的H5语言的指令代码，运用所学习的指令

2、代码进行更深入的效果设计，如定位、浮动、3D动画设计、轮播图等初级的 H5设计，最后通过运用所有学习的指 令操作完成总体的项目设计，从而对H5语言展开比较全面的了解与具备应用能 力。要求实训期间认真学习 H5的各种指令操作，认真完成作业并书写日报，不得 迟到、早退、旷课；若有问题需及时与校负责老师与项目工程师沟通联系。2、实训的流程及内容（包括前期准备及实训过程）实训开始前，由承担实训的主要负责人与实训老师 ，即蓝鸥公司老师杨成 龙对这次实训做了总体概述，并说明了本次实训所需要的 sublime软件、谷歌浏 览器；展示了预期需要完成的设计效果，并说明了实训期间的各项要求。实训的具体流程为：第一

3、天，总体介绍实训，主要介绍了 H5语言的发展历 程,说明了本次实训的任务，介绍了所使用的sublime软件的操作方法与相关插 件的安装方法。第二天，主要学习了在sublime软件中的固定代码格式，主要有头 文件名、网页标题、 <style>v/style> 格式，并学习了一些基础的设置，女口添加颜 色的代码操作。第三天，学习了浮动指令、添加图片的操作。第四天 ，学习了 JC 语言,CSS内联样式的代码书写。第五天，学习了 CSS外联样式的代码书写，并学 习3D动画的代码书写，学习了轮播动画的设计，并对所学的各种代码操作加以总 结复习。第六天，学习了当当优品项目的设计与代码书写

4、，并开始设计答辩项目。第七天,完成自己设计的项目，并进行项目答辩，实训结束3、实训过程中的相关问题与解决方法（如实填写）在本次实训中,主要的问题集中在对JC语言的学习与对CSS内联、外联样 式的学习与理解上。由于JC语言就是一种偏向于脚本语言的代码书写 ,与C语言有相似之处但 就是又有不同之处，这就使得在理解过程需要花费精力去想明白其原理，有些较 难的原理、想不明白的原理就及时与老师、同学进行沟通与交流 ，力争在最短时 间里解决问题,不留下遗留问题。除此之外，CSS外联的学习就是一个重点,也就是一个很大的难点。CSS外 联就是指在书写主程序代码时，某一些指令需要单独使用JC语言生成脚本代码，

5、然后再在主程序中调用。出现的问题主要表现在一就是对 JC语言本身学习的不 就是很充分，再加上涉及到两个项目间的调用，使得经常出现代码错误，且难以自 行察觉。解决这些问题的主要方法就就是，首先要寻求同组人的帮助，检查错误， 尤其就是首先要解决基础性的错误，如果仍然无法解决，则需要向老师寻求帮助。在CSS内联的学习上,出现的问题大体上与外联的问题相同。所谓 CSS内 联样式，就就是在主程序内部书写的某种功能性代码，并对其加以调用。出现的问 题不就是很多，但就是存在。最后，最主要的问题集中在学习3D动画的过程中。在这一模块的学习时， 主要涉及到首先要想明白所设计的动画效果就是什么。由于涉及到3维空间

6、，也就就是涉及到绕着那个轴旋转的问题，稍有代码错误，或者旋转轴出错都不能达 到预期效果。问题主要表现为，对代码指令的不熟悉导致动画错误，对要设计的动 画效果不清晰导致代码使用错误，基本的动画设计与代码指令衔接不同步导致动 画出现的效果不就是预期效果等问题。一般出现这些问题时，由于涉及到需要有 专业知识才能解决，基本上都就是向老师寻求帮助，根据老师的讲解先自行更改， 仍有错误的，则让老师帮助修改代码主程序，并找到出现错误的原因。4、实训总结(包括心得体会与后期学习计划)为期七天的实训课，不经意间就结束了，虽然只就是短短的七天实训，但就是 却收获很多，学习到的关于 HTML5语言的知识也比较多。首

7、先，我想先来说说这次实训的主要学习内容 ，即HTML5语言。HTML指的 就是超文本标记语言 (Hyper Text Markup Lan guage)标记语言就是一套标记标签 (markup tag),HTML使用标记标签来描述网页。 HTML5区别于 HTML的标准， 基于全新的规则手册，提供了一些新的元素与属性，在web技术发展的过程中成为 新的里程碑。HTML5被推广用于 Web平台游戏开发，及手机移动领域，从市场来 瞧,无论就是桌面应用还就是移动应用 ，HTML5 都就是当下 Web技术中最炙手可 热的新宠，就是创新的主旋律，在不久的时间里一定会大有作为。我想这也就是这 次实训课的主

8、要意义之一。因此，从我个人的角度上，我也很重视这次的实训课程 的学习。在整个实训课程的安排上，简要的可以概括为在七天的时间中，整体对H5语 言的发展与前景有所了解，然后进行基础知识的学习，最后进行项目的设计与答 辩。主要内容就是第一天，总体介绍实训，H5语言的发展历程，说明了本次实训的 任务，介绍了所用的 sublime 软件的操作与相关的插件、安装。第二天 ，主要学习 了在 sublime软件中的固定代码格式，主要有头文件名，网页标题,<style>v/style>格 式,并学习了一些基础的设置的，添加颜色的代码操作。第三天，学习了浮动，添加图 片的操作。第四天，学习了 J

9、C语言,css内联样式的代码书写。第五天，学习了 css 外联样式的代码书写，并学习3D动画的代码书写，学习了轮播动画的设计，并对所 学的各种代码操作加以总结复习。第六天 ，学习了当当优品项目的设计与代码书 写，并开始设计答辩项目。第七天，进行对自己设计的项目，进行答辩，实训结束。下 面来谈谈我在这次实训中的收获与感受。第一点，学习到了 HTML5语言的设计与代码指令自然不必再赘述，但更重要 的就是锻炼了思维能力，培养了设计创新的能力。在整个 H5学习的过程中，代码 的运用、基础知识的学习可以说只就是作为技术的基础层面，而要想真正完成一个项目，更多的就是需要思维能力的锻炼与项目的创新。就学习代

10、码而言，3D动画 的学习，就十分需要空间想象力与思维能力 ，不怕这种能力的不足，怕的就是不去学习，不去培养。因为如果没有这种能力，或者比较薄弱，一方面难以想出新的项目 的构思，另一方面无法想出动画的翻转或者各种效果的指令代码的书写。所有的 这些都贯穿于H5的实训过程中。再具体的将来，就就是对于所学的每个指令，并 非就是记忆住其书写的格式，而就是需要我们加入自己对每个代码感悟与认识。 怎样的情况下去应用，如何用，使用时的技巧，这些都就是重要的对于自己能力的 锻炼。另外，结合于其中的，还有对于独立思考的能力的培养。这一点就是显而易 见的。无论就是对于一个新的项目的编写，还就是对于学习每一条单独的指

11、令，老 师与同学所能帮助的就是引导与解决难题的作用，而要想真正做到自己学会指令，则离不开独立思考，独立学习的过程与环节。第二点，通过这次实训，使得自己对IT行业有了进一步的了解。在实训的过程 中，老师也对IT行业与相关的就业前景进行了诸多叙述，对于自己与同学们有很 大的帮助。HTML5在网页开发上，赋予网页更好的意义与结构，HTML5手机应用 的最大优势就就是可以在网页上直接调试与修改。因此在HTML5中的新的标签，将有助于开发人员定义重要的内容，可以给站点带来更多的多媒体元素（视频与音 频），可以很好的替代FLASH与Silverlight并且当涉及到网站的抓取与索引的时候 , 对于SEO很

12、友好。对于这些优势性的，几乎也都有相关的工作岗位。由此可见在 未来的一段时间里，伴随着互联网的不断普及与优化，H5的前端开发的相关岗位 也必将就是很火热的。这也就是这次实训的另一意义所在，她对于就业就是很有帮助的。第三点，实训课将理论与实践相结合，从直观与整体上带来了很好的效果。在 大学本科的学习过程中，C语言的学习可以说就是不可或缺的、必不可少的。但 就是就我个人而言，在学习C语言时，只就是为了学习其语法结构而学习语言，只 就是在应试的层面上对其理解，记忆,编程。但就是这次的 HTML5的实训课却完 全就是不同的。最根本之处就就是通过在 sublime的编写的代码可以在浏览器中 直接以直观的

13、音频、视频的形势表现出来 ，给人最直观的感受。这对于激发学习 兴趣，激发探索学习的精神就是很有影响的。例如在学习轮播项目时，就就是将事先准备好的素材，包括音频与图片，放到网页中，让其开始的时候以十张图片循环 旋转的形势展现，当鼠标停留时，停留在那张图片上会有视频播放。这就就是轮播 效果，但就是在代码编写的过程中国，还就是要比只管瞧起来有所繁琐的。它主要 涉及到图片的插入，视频的插入的代码书写，轮播动作的大代码的书写，调整轮播 效果，调整视频、图像的位置格式等问题。尽管如此，在书写完所有指令之后，再对整体项目进项调试的时候，某个参数的设置都会影响不同的展现效果。对于理想 效果的追求，激励着不断调

14、试程序，不断尝试。这就就是H5语言的激励作用所在。 第四点，这次实训加强了自己的团队合作的意识、团结协作的能力。这一点 上我就是感受很深的。在最后两天的项目设计上，要求以四个人为一个小组进行项目设计，从素材，动画效果，讲解展示都会给出评分。并且就是要求在一天内完成 项目设计，第二天进行项目答辩。诚实的将在刚刚听到任务时感觉就是不可能的，冷静思考之后，运用到这几天所学的指令进行一个简单的项目设计还就是可以的，但就是，时间紧任务重，技术有限。因此，在四个人一组的小组中，大家开始分工合作, 各自负责不同的任务部分。代码编写与调试 ，素材的收集与整理，每个人的工作都 进行细化，再细化，定时保量的去完成

15、。这样的结果就是，的确提高了工作的效率。 原本制定的要到第二天早晨才能完成的工作，在课程设计的第一天就完成了。我 想这就展示出了合作的重要性。如果所有的任务都去一个人完成，那么在这么短的时间内，又要保证一定质量的完成任务，绝对就是不可能的。此外，有合作,就难免有分歧。这次的实训课的项目设计环节也绝对就是对我 个人沟通、交流能力的锻炼。一开始，在确定项目的设计上，就出现了两种不同的 观点。一种，整体画面分为两部分，上方一个轮播，下方三张静态效果展示，另一种方 案就是将老师给的模板进行简单改造，力求按时完成任务。这两种方案都就是具 有可行性的，而且有都有各自的有点与缺点。很明显第一种方案，可以很好地给观众以视觉呈现，但就是在技术上要难于第二种方案 ；而第二种方案则一定能够保证 在要求的时间里完成任务，但就是很明显的就是在视觉效果上并不好。为此 ，对于 这两种方案大家进行了充分的讨论，最终决定对第一种方案进行改造，力求优势互 补，效果最佳。在这其中的就是小组成员的各自的出谋划策 ，也必须需要相互的表 达