web前端开发实习报告

第1篇：Web前端开发

Web前端开发_Tip 理论篇

WEB标准

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Aociation）的ECMAScript标准。

结构标准语言 XML XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（知识就已经足够了？

自从99年以后，网页制作技术在国内就没有怎么进步和变革过(除了flash的兴起)，而在国外前进的脚步就一直没有停止过，xhtml1.0、xhtml1.1、xml、xsl...，W3C和各大软件公司都在不断的研究和推进web技术，使它更方便、更有效、更强大。web标准的应用和推广国外已经开展了八年多(以zeldman的web标准组织网站为起点)，虽然困难重重，但正在逐步被人们接受和认可。为什么我们依然陶醉在网站表面的“繁华”上，不去思考页面背后本质的东西。比较AS2.0和AS3.0在面向对象方面的异同 1.定义

ActionScript 2.0：实际上是as1.0的升级版，首次将OOP（Object Oriented Programming，面向对象的程序设计）引入Flash，但并不是完全面向对象的语言，只是在编译过程中支持OOP语法。

ActionScript 3.0：是一个完全基本OOP的标准化面向对象语言，最重要的就是as3.0不是as2.0的简单升级，而完全是两种思想的语言。可以说，as3.0全面采用了面向对象的思想，而as2.0则仍然停留在面向过程阶段，举个例子，就像VB和C#的感觉。在as3.0里，可以看到java和c#的影子，确实，这三种语言大部分思想都是一致的，只有一些小的区别，比如as3.0引入了命名空间的概念，但是不支持比如委托,在包封装及外部访问上也引入了一些新概念。

2.发展过程

一、ActionScript 1.0最简单、最灵活、比较容易理解。既可以用原始的方式一个个地创建影片、设置对象的事件处理函数，等等。

早期的flash 3中的ActionScript 1.0语法冗长，主要的应用是围绕着帧的导航和鼠标的交互.这种状况一直保持到flash 5。到flash 5版本时ActionScript已经很象JavaScript了。它提供了很强的功能和为变量的传输提供了点语法。ActionScript同时也变成了一种prototyped（原型）语言，允许类似于在javscript中的简单的oop功能。这些在随后的flash mx(6)版本中得到的增强。

二、ActionScript 2.0则相对比较规范，是1.0的升级版。首次将OOP引入FLASH。

Flash MX2004(7)引入了ActionScript 2.0,它带来了两大改进：变量的类型检测和新的cla类语法。ActionScript 2.0的变量类型会在编译时执行强制类型检测。它意味着当你在发布或是编译你的影片时任何指定了类型的变量都会从众多的代码中剥离出来，检查是否与你现有的代码存在矛盾冲突。如果在编译过程中没有发现冲突，那么你的swf将会被创建，没有任何不可理解变量类型的代码将会运行。尽管这个功能对于flash player的回放来说没有什么好处，但对于flash创作人员来它是一个非常的好工具，可以帮助调试更大更复杂的程序。

在ActionScript 2.0中的新的cla类语法用来在ActionSctipt 2.0中定义类。它类似于Java语言中的定义。尽管Flash仍不能超越它自身的原型来提供真正的cla类，但新的语法提供了一种非常熟悉的风格来帮助用户从其它语言上迁移过来，提供了更多的方法来组织分离出来As文件和包。

三、ActionScript 3.0更加系统、规范。完全OOP。

接下来我们进入到flash CS3(9;在flash8中没有发生多大的变化)ActionScript 3.这里我们不光有一个带有新的版本号的ActionScirpt 语言，还有一个全新的虚拟机即—Flash Player在回放时执行ActionScript的底层软件。ActionScript 1.0和ActionScript 2.0都使用是AVM1(ActionScript 虚拟机1),因此它们在需要回放时本质上是一样的，记得我们在ActionScript2上说过它增加了强制变量类型和新的类语法，它实际上在最终编译时变成了ActionScript 1，而ActionScript 3.0运行在AVM2上，一种新的专门针对ActionScirpt 3代码的虚拟机。基于上面的原因，ActionScript 3.0影片不能直接与ActionScript 1和ActionScript 2影片直接通讯(ActionScript 1和ActionScript 2的影片可以直接通讯，因为他们使用的是相同的虚拟机；如果要ActionScirpt 3影片与ActionScirpt 1.0和ActionScript 2.0的影片通讯，只能通过local connection),但是你会发现ActionScript 3.0的改变更深远更有意义。

3.flash as2.0 与as3.0的本质区别

一、虚拟机

在编译阶段，as2采用的是AVM1（actionScript vitual machine），而as3采用的是AVM2。新一代虚拟机采用了OOP思想，在执行速度上比起avm1也快了10倍。还提供了异常处理。以前我们在使用AS2时，一旦出错，AVM1选择的是静默失败，让人根本不知道什么地方出错了，会浪费大量的时间去查错，而AVM2与目前主流的编译器一样，会有异常处理，运行出错会输出错误提示，工作效率大大提高。如果做个对比，我想说，AVM1就是大刀长矛，而AVM2就是手枪，大刀和长矛也能杀敌，但是只在面对弱智的敌人才能发挥作用，面对一个大型项目，不用点现代化工具是不行滴。

二、事件机制

这也是很多人拿起as3就不知所措的原因，初学者会发现连一个按钮点击的方法都写不出来。实际上as3的事件机制采用的是监听的方式，和as2的onClipEvent不同，as3里所有的事件都是需要触发器，监听器，执行器三种结构的，这样做的好处就是使得这个语言非常的坚强，非常大标准化。不像as2,奇形怪状的代码漫天飞，可以这样写，也可以那样写，代码变得繁复难懂，可读性太差，执行效率也大大降低。要特别说明的是，as3的所有事件都直接继承event对象，而event是直接继承自BOSS类object,结构多么完美。所以在as3中，所有的事件都继承自相同的父亲，结构相同，提高了重用性。

三、封装性

这是as3与as2最大的不同，as3引入了封装的概念，使得程序安全性大大提高，各个对象之间的关系也通过封装，访问控制而得以确定，避免了不可靠的访问给程序带来的意外产生。

四、XML 我觉得这是最令人激动人心的改变，现在as3程序员可以很轻松也很自豪的说，我们是使用XML人群中最快乐的人。AS2时代对XML的存取仍然需要解析，而AS3则创新的将XML也视作一个对象，存取XML就像存取普通对象的属性一样方便，用点语法就可以，无疑大大提高了效率。

五、容器的概念

AS3.0采用了容器的思想，告别了as2.0一个MovieClip打天下的局面。对于as2程序员来说，可能不能理解，我mc用的好好的，干嘛不让我用啊。但是当你真正的了解as3.0的思想的时候，当你真主的体会到OOP的好处的时候，你会觉得as3.0的容器的思想的完全正确的。as2.0时代，我们做什么都用mc,而as2.0时代的mc也是直接继承自object，这给了mc极大的权限，极其多大方法属性，而有时我们只需要放一个背景图，这样做就造成了极大的浪费。说实在话as2.0和as3.0比起来就是浪费之神，所以as2.0编出的swf绝对比as3.0编译出来的swf要大上几倍。as3.0把所有你用到的显示对象都分开，mc的属性方法都被瓜分开来，举个例子，你去水果超市买水果，就肯定比直接去大型超市买要方便，更节约时间，时间就是金钱，那就是很大的节省。

4.AS3.0新特性

一、OOP方面的增强

通过类定义而生成的实例，在 AS3 中是属于 Sealed 类型，即其属性和方法无法在运行时修改。这部分属性在 AS2 中是通过类的 prototype 对象来存储，而在 AS3.0中则通过被称为 Trait 的概念对象存储管理，无法通过程序控制。这种处理方式一方面减少了通过 prototype 继承链查找属性方法所耗费的时间（所有父类的实现方法和属性都会被直接复制到对应的子类的 Trait 中），另一方面也减少了内存占用量，因为不用动态的给每一个实例创建 hashtable 来存储变量。如果仍然希望使用 AS2 中类实例在运行时的动态特性，可以将类声明为 dynamic。

二、API方面的增强

新增 Display API，使 AS3 可以控制包括 Shape, Image, TextField, Sprite, MovieClip, Video, SimpleButton, Loader在内的大部分 DisplayList 渲染单位。这其中 Sprite 类可以简单理解为没有时间轴的 MovieClip，适合用来作为组件等不需要时间轴功能的子类的基础。而新版的 MovieClip 也比 AS2 多了对于 Scene（场景）和 Label（桢标签）的程序控制。另外，渲染单位的创建和销毁通过联合 new 操作符以及 addChild/removeChild 等方法实现，类似 attachMovie 的旧方法已被舍弃，同时以后也无须去处理深度值。

新增 DOM Event API，所有 在DisplayList 上的渲染单位都支持全新的三段式事件播放机制，以 Stage 为起点自上而下的播报事件到 target 对象（此过程称为 Capture Phase），然后播报事件给 target 对象（此过程称为 Target Phase），最后在自下而上的播报事件（此过程称为 Bubbling Phase）。

新增内置的 Regular Expreions（正则表达式）支持，使 AS3 能够高效地创建、比较和修改字符串，以及迅速地分析大量文本和数据以搜索、移除和替换文本模式。

新增 ECMAScript for XML(E4X)支持。E4X 是 AS3 中内置的 XML 处理语法。在 AS3 中 XML 成为内置类型，而之前的 AS2 版本 XML 的处理 api 转移到 flash.xml.*包中，以保持向下兼容。

新增 Socket类，允许读取和写入二进制数据，使通过 AS 来解析底层网络协议（比如 POP3, SMTP, IMAP, NNTP 等）成为可能，使 Flash Player 可以连接邮件服务器和新闻组。

新增 Proxy 类来替代在 AS2 中的 Object.__resolve 功能。新增对于 Reflect（反射）的支持，相关方法在 flash.util.* 包中。

5.总结

一、AS3.0和2.0的代码不能混用，且不能和装载的as2.0或1.0的swf相互通信

使用AS3.0可以加载AS2.0 或者 1.0的swf。但是AS3.0不可以访问加载swf中变量和函数。为了方便理解，我们可以想成两个虚拟机并行工作，但是不能通信。事实上，我猜实现机制可能就和这个差不多LocalConnection。

使用AS2.0或1.0编写的swf是不可以加载AS3.0的。换句话说Flash 8＆Flex 1.5及之前所有工具生成的swf都不可以加载(load)AS 3.0 swf的。

如果想让AS2.0或1.0的swf与AS3.0 swf协同工作，那么AS2.0＆1.0的文件必须进行移植。就是说转成3.0。

单个的swf文件中是不能混合使用AS3.0＆AS2.0(或者1.0)的。不会像AS2.0＆1.0那样混用了，毕竟是AS2.0&AS3.0是两个不相同的虚拟机。

一句话总结，就是AS3.0可以加载以前的所有版本的swf,但是只是简单加载，不能访问AS2.0(或1.0)的swf内部变量＆函数，无法交互。

二、所采用的编程方式

as 3.0所采用的编程方式是与java C++非常类似的面向对象编程方式，不论在语法上还是在设计思路上。只要你有java C++基础，那学 AS是非常轻松的。不过AS3.0不能像java C++那样操作底层数据，如存储数据等，必须通过后台语言如php asp 等来实现，而且运行大规模数据时会慢一些。as 2.0以往是主要面向过程的编程方式，也就是说想到哪就可以写到哪，但到3.0之后就不行了，你必须把每一块程序都写到一个类中，让类和类之间进行联系。凡事都是类的理念。

其实不同的事情有很多，但是也可以这么讲，AS3.0与AS2.0是一样的，只是语法不同了，编程思路不同了，但核心内容不变，也就是说，如果你精通AS2.0，那么，你离精通3.0就不远了。因为你在编程进对算法的掌握和思想都是相通了。

三、as2.0到as3.0的转换

在AS2项目往AS3转换/移植的过程中，不要想象这只是一个语法转换的过程，实际上，你不得不考虑AS3以及其类库中的一些新机制，所能带来的性能以及程序结构良好性的提升。因此，可能很多东西，你得重新设计，特别是可视元素和事件相关的，也就是用户交互方面的东西，我认为是必须得根据AS3的特点重新设计的，否则转换是无价值的，甚至会得到更差的程序。一些纯算法方面的代码，可能不需要重新设计，直接替换一些语言层面的东西即可。还有FlashPlayer的速度提升使代码执行速度提升10倍左右，可视元素运行/渲染速度平均提升2倍左右，位图渲染速度有比较明显的提升。

一些在AS2里面我们需要的东西，在AS3里面，我们不再需要了；一些用AS2做出来的东西，运行起来效率不够理想，用AS3做出来，运行得更快了；一些AS2里面不可能做到的东西，在AS3里面，我们可以做了。CSS盒子 前言

如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。

理解CSS盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。

转变我们的思路

传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

实现结构与表现分离

在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

加进思源社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。

如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

段落内容

这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离：

用CSS排版

height:80;

width:100;

margin:5px auto;}--> 第2篇：Web前端实习报告

实习报 告

学生姓名： 学 号： 专业班级： 实习单位： 实习时间：

校外指导教师： 校内指导教师： 成 绩：

目 录

1实习背景...实习目的...实习起止时间..实习内容概要..2 实习内容.实习过程...实习内容..主要成果..3 总 结..网页游戏的认识.......实习的自我评价.......1实习背景

1.1 实习目的了解软件开发的各种模式，开发流程，以及各种形式的建模

详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率

掌握HTML5、CSS、JAVASCRIPT等技术

1.2 实习起止时间

开始时间：2015年7月12号

截止时间：2015年7月18号

1.3 实习内容概要

学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授）

学习HTML5、CSS、JAVASCRIP技术（形式：观看视频）

按照敏捷开发的流程，学员分组，制定每日的站立会议时间

观看实习内容例子的视频，分工合作

提交实习成果，老师检查打分

2 实习内容

实习过程

可以以周为时间单位概述实习各阶段所从事的主要工作等； 学习阶段

开发模式 1)软件生命周期

同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、-衰亡等阶段，这一般称为软件生命周期。

软件开发生命周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。

SDLC的一般步骤包括：确定问题、可行性分析与开发计划、收集需求、分析与设计、编码开发、测试、安装、维护。2)软件生命周期模式

典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。3)敏捷开发

敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。特点：

a)是一种开发方法学（Methodology），可以应对客户快速变 更的需求。

b)强调以人为核心，采用迭代的方式，循序渐进地开发软件。c)在敏捷开发过程中，软件项目被划分成多个相互联系但也能独

立运行的子项目。

d)每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。

e)这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其灵活性更高，以适应不断变化的需求。

技术讲解

1)讲解内容：HTML5、CSS、JAVASCRIPT技术 2)HTML5

HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。

特性：

a)语义特性（Cla：Semantic）

b)本地存储特性（Cla: OFFLINE & STORAGE）c)设备兼容特性(Cla: DEVICE ACCESS)

d)连接特性（Cla: CONNECTIVITY）e)网页多媒体特性(Cla: MULTIMEDIA)

f)三维、图形及特效特性（Cla: 3D, Graphics & Effects）g)性能与集成特性（Cla: Performance & Integration）h)CSS3特性(Cla: CSS3)

3)CSS

CSS(层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS使用方法：

a)外联式Linking（也叫外部样式）：将网页链接到外部样式表。b)嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样

式表。

c)内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元

素。CSS布局特点：

a)精简代码，降低重构难度 b)网页访问速度 c)SEO优化 d)浏览器兼容性 基础语法：

a)CSS 规则由两个主要的部分构成：选择器，以及一条或多条声

明。

b)选择器 {宣言1;宣言2;...宣言N } c)选择器通常是您需要改变样式的 HTML 元素。d)每条声明由一个属性和一个值组成。

e)属性（property）是您希望设置的样式属性（style

attribute）。每个属性有一个值。属性和值被冒号分开。f)选择器 {property: value} 4)JAVASCRIPT JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

组成a)ECMAScript，描述了该语言的语法和基本对象。

b)文档对象模型（DOM），描述处理网页内容的方法和接口。c)浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。特点

a)是一种解释性脚本语言（代码不进行预编译）。

b)主要用来向HTML（标准通用标记语言下的一个应用）页面添

加交互行为。

c)可以直接嵌入HTML页面，但写成单独的js文件有利于结构和

行为的分离。

d)跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下

运行（如Windows、Linux、Mac、Android、iOS等）。

开发阶段

开发第一天 站立会议：—

会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的内容

任务内容：“打地鼠”网页游戏的网页布局——>HTML5+CSS技术

开发第二天 站立会议：—

会议内容：小组分工，完成情况，了解每个人的进度，交流学习的内容 任务内容：“打地鼠”网页游戏的功能实现

开发第三天 站立会议：—

会议内容：小组分工，完成情况，查漏补缺，测试软件，寻找bug，交流学习的内容

任务内容：“打地鼠”网页游戏的软件测试，寻找不足，确认无误，提交实习结果

实习内容

项目介绍

“打地鼠”网页游戏是安卓版“打地鼠”游戏的进一步开发，可以实现在网页中构建游戏的所有功能，并且不用下载安装既可以用的游戏，网页版游戏的市场前景潜力无限，国内逐渐发展起来一批喜欢网页游戏的用户群，并且网页游戏属于中小型的项目，易于开发，应用于敏捷开发的流程，效率十分高。

我的任务

“打地鼠”网页游戏网页布局的调整，以及“打地鼠”之所谓“打”的动画实现，还有最后的“软件测试”。

软硬件平台

DREAMWEAVER CS6，MOZILLA FIREFOX浏览器，PHOTOSHOP CS6

使用技术

HTML

5CSS

JAVASCRIPT

浏览器中的开发人员调试

PHOTOSHOP CS6的图片处理技术

JAVASCRIPT的进阶——>JQERY技术

主要成果

“打地鼠”网页游戏的成功开发，基本功能：打地鼠的动画，游戏的时间限制，统计分数，开始游戏，暂停游戏，结束游戏，走马灯介绍等等。但是在实际测试的时候仍然出现了一些BUG，比如动画的迟缓（主要是因为动画的缓冲没有做好），还有一些分数的统计不甚合理，这在我们应用的时候及时的发现，并且处理了这样的问题。

3 总 结

网页游戏的认识

网页游戏又称Web游戏，无端网游，简称页游。是基于Web浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。

在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字MUD已经逐渐衰退而网络游戏又尚未兴起的年代，这种新颖玩意儿的推出，无疑让很多人为之惊艳。仅仅通过简单注册，就可以边玩游戏边泡论坛。尽管只有简陋的游戏界面、一堆文字、几张图片，游戏方式也不过是刷新页面而已，但WebGame却带来了无限的乐趣和遐想，同时还演绎了让无数人刻骨铭心的爱恨情仇。如今网络游戏百花争鸣，到处充斥着唯美的人物和绚丽的光影。你会偶尔缅怀那些逝去的岁月吗？至少在我心底，一直有数款难以忘怀的WebGame。

WebGame，顾名思义就是基于Web浏览器的网络在线多人游戏。从诞生发展至今，WebGame大概分为三种类型：一是基于Web浏览器，使用PHP/ASP/Perl等解释语言建设的虚拟社区；二是基于Web浏览器，使用Flash/JAVA技术制作的游戏；三是需要下载客户端并连接专用服务器运行的游戏。

网页游戏尽管EBS将国内WebGame的发展往前推了一把，但是一段时间后，这类WebGame的弱点逐渐暴露出来。一些架设WebGame供网民免费游玩的站点，由于质量和管理不过关、服务器负载过大，丢失了不少玩家。同时，比WebGame华丽N倍的网络游戏兴起后，WebGame自然就逐渐没落了。传统意义上的WebGame依然为少部分热爱者延续至今，而且游戏性与游戏素材比以前丰富许多。

前景分析

网页游戏的市场潜力巨大，与其他类型网游相比有着强劲优势

网页游戏的用户群逐渐培养起来，极有可能成为未来网游用户的一支主力军

避大型网游之锋芒，坚持走游击路线。坚持和中小站长合作

针对用户群大胆创新，敢于突破固有模式

游戏特点

混搭式类型成主流

策略游戏不断丰富

游戏内容多样化

消费群体不断成熟

市场集中度提高

游戏跨形态融合产品结构渐丰富

步入全球化运作

企业品牌意识增强

实习的自我评价

这次实训充分利用了课堂所学，掌握了许多关键技术，例如模版技术，CSS样式，使得制作过程方便了很多。在完成基本要求得基础上，文件夹、文件命名规范；文件存放位置合理； 制作完成之后进行过现场清理：没有无用的文件、文件夹，没有断链(外部链接不算)；工作量饱满：内容较丰富、自己设计制作的素材应用多；色系、布局合理美观、考虑用户访问方便；采用各种特效、并且运用合理。不过也有些不足，比如一开始没有把几个人制作的文件夹分开，导致后面汇总时比较麻烦。还有就是文件名字开始中文命名，有的时候链接错误。这次的作业随说我是在网上找了很多做好的模板但是我还是很有成就感，觉得自己很不错。不过总的来说，对这次的作品相当满意，不仅选择了我们自己喜欢的内容，而且在我们的水平上把它做的很精美。在这个过程中我们意识到了自己在相关技术上的不足，通过学习，知道了如何改进我们的缺点，相信在以后的应用中，我们会做的更加完美！

第3篇：Web前端实习报告

实习报 告

学生姓名： 学 号： 专业班级： 实习单位： 实习时间：

校外指导教师： 校内指导教师： 成 绩：

目 录

1实习背景..1

1.1 实习目的.....1

1.2 实习起止时间.1

1.3 实习内容概要.1

2 实习内容 1

2.1 实习过程.....1

2.

2实习内容....5

2.

3主要成果....5

3 总 结.6

3.1 网页游戏的认识.........6

3.2

实习的自我评价.........7

1实习背景

1.1 实习目的➢ 了解软件开发的各种模式，开发流程，以及各种形式的建模

➢ 详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率 ➢ 掌握HTML5、CSS、JAVASCRIPT等技术

1.2 实习起止时间

➢ 开始时间：2015年7月12号 ➢ 截止时间：2015年7月18号

1.3 实习内容概要

➢ 学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授）➢ 学习HTML5、CSS、JAVASCRIP技术（形式：观看视频）➢ 按照敏捷开发的流程，学员分组，制定每日的站立会议时间 ➢ 观看实习内容例子的视频，分工合作 ➢ 提交实习成果，老师检查打分

2 实习内容

2.1 实习过程

可以以周为时间单位概述实习各阶段所从事的主要工作等；

➢ 学习阶段

 开发模式

1)软件生命周期

同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、-衰亡等阶段，这一般称为软件生命周期。

软件开发生命周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。SDLC的一般步骤包括：确定问题、可行性分析与开发计划、收集需求、分析与设计、编码开发、测试、安装、维护。2)软件生命周期模式

典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。3)敏捷开发

敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。

特点：

a)是一种开发方法学（Methodology），可以应对客户快速变 更的需求。b)强调以人为核心，采用迭代的方式，循序渐进地开发软件。

c)在敏捷开发过程中，软件项目被划分成多个相互联系但也能独立运行的子项

目。

d)每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。e)这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其

灵活性更高，以适应不断变化的需求。

 技术讲解

1)讲解内容：HTML5、CSS、JAVASCRIPT技术 2)HTML5 HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新

JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。

特性：

a)语义特性（Cla：Semantic）

b)本地存储特性（Cla: OFFLINE & STORAGE）c)设备兼容特性(Cla: DEVICE ACCESS)d)连接特性（Cla: CONNECTIVITY）e)网页多媒体特性(Cla: MULTIMEDIA)f)三维、图形及特效特性（Cla: 3D, Graphics & Effects）g)性能与集成特性（Cla: Performance & Integration）h)CSS3特性(Cla: CSS3)3)CSS CSS(层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS使用方法：

a)外联式Linking（也叫外部样式）：将网页链接到外部样式表。b)嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。c)内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。CSS布局特点：

a)精简代码，降低重构难度 b)网页访问速度 c)SEO优化 d)浏览器兼容性 基础语法：

a)CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。b)选择器 {宣言1;宣言2;...宣言N } c)选择器通常是您需要改变样式的 HTML 元素。d)每条声明由一个属性和一个值组成。

e)属性（property）是您希望设置的样式属性（style attribute）。每个属性

有一个值。属性和值被冒号分开。f)选择器 {property: value} 4)JAVASCRIPT JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

组成a)ECMAScript，描述了该语言的语法和基本对象。b)文档对象模型（DOM），描述处理网页内容的方法和接口。c)浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。特点

a)是一种解释性脚本语言（代码不进行预编译）。

b)主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。c)可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。d)跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如

Windows、Linux、Mac、Android、iOS等）。

➢ 开发阶段

 开发第一天

站立会议：8.00—8.15 会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的内容 任务内容：“打地鼠”网页游戏的网页布局——>HTML5+CSS技术  开发第二天

站立会议：8.00—8.15 会议内容：小组分工，完成情况，了解每个人的进度，交流学习的内容 任务内容：“打地鼠”网页游戏的功能实现  开发第三天

站立会议：8.00—8.15

会议内容：小组分工，完成情况，查漏补缺，测试软件，寻找bug，交流学习的内容 任务内容：“打地鼠”网页游戏的软件测试，寻找不足，确认无误，提交实习结果

2.2 实习内容

➢ 项目介绍

“打地鼠”网页游戏是安卓版“打地鼠”游戏的进一步开发，可以实现在网页中构建游戏的所有功能，并且不用下载安装既可以用的游戏，网页版游戏的市场前景潜力无限，国内逐渐发展起来一批喜欢网页游戏的用户群，并且网页游戏属于中小型的项目，易于开发，应用于敏捷开发的流程，效率十分高。➢ 我的任务

“打地鼠”网页游戏网页布局的调整，以及“打地鼠”之所谓“打”的动画实现，还有最后的“软件测试”。➢ 软硬件平台

DREAMWEAVER CS6，MOZILLA FIREFOX浏览器，PHOTOSHOP CS6 ➢ 使用技术

 HTML5  CSS  JAVASCRIPT  浏览器中的开发人员调试  PHOTOSHOP CS6的图片处理技术  JAVASCRIPT的进阶——>JQERY技术

2.3 主要成果

“打地鼠”网页游戏的成功开发，基本功能：打地鼠的动画，游戏的时间限制，统计分数，开始游戏，暂停游戏，结束游戏，走马灯介绍等等。但是在实际测试的时候仍然出现了一些BUG，比如动画的迟

缓（主要是因为动画的缓冲没有做好），还有一些分数的统计不甚合理，这在我们应用的时候及时的发现，并且处理了这样的问题。

3 总 结

3.1 网页游戏的认识

网页游戏又称Web游戏，无端网游，简称页游。是基于Web浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。

在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字MUD已经逐渐衰退而网络游戏又尚未兴起的年代，这种新颖玩意儿的推出，无疑让很多人为之惊艳。仅仅通过简单注册，就可以边玩游戏边泡论坛。尽管只有简陋的游戏界面、一堆文字、几张图片，游戏方式也不过是刷新页面而已，但WebGame却带来了无限的乐趣和遐想，同时还演绎了让无数人刻骨铭心的爱恨情仇。如今网络游戏百花争鸣，到处充斥着唯美的人物和绚丽的光影。你会偶尔缅怀那些逝去的岁月吗？至少在我心底，一直有数款难以忘怀的WebGame。

WebGame，顾名思义就是基于Web浏览器的网络在线多人游戏。从诞生发展至今，WebGame大概分为三种类型：一是基于Web浏览器，使用PHP/ASP/Perl等解释语言建设的虚拟社区；二是基于Web浏览器，使用Flash/JAVA技术制作的游戏；三是需要下载客户端并连接专用服务器运行的游戏。

网页游戏尽管EBS将国内WebGame的发展往前推了一把，但是一段时间后，这类WebGame的弱点逐渐暴露出来。一些架设WebGame供网民免费游玩的站点，由于质量和管理不过关、服务器负载过大，丢失了不少玩家。同时，比WebGame华丽N倍的网络游戏兴起后，WebGame自然就逐渐没落了。传统意义上的WebGame依然为少部分热爱者延续至今，而且游戏性与游戏素材比以前丰富许多。

➢ 前景分析

 网页游戏的市场潜力巨大，与其他类型网游相比有着强劲优势

 网页游戏的用户群逐渐培养起来，极有可能成为未来网游用户的一支主力军  避大型网游之锋芒，坚持走游击路线。坚持和中小站长合作  针对用户群大胆创新，敢于突破固有模式 ➢ 游戏特点

 混搭式类型成主流  策略游戏不断丰富  游戏内容多样化  消费群体不断成熟  市场集中度提高  游戏跨形态融合  产品结构渐丰富  步入全球化运作  企业品牌意识增强

3.2 实习的自我评价

这次实训充分利用了课堂所学，掌握了许多关键技术，例如模版技术，CSS样式，使得制作过程方便了很多。在完成基本要求得基础上，文件夹、文件命名规范；文件存放位置合理； 制作完成之后进行过现场清理：没有无用的文件、文件夹，没有断链(外部链接不算)；工作量饱满：内容较丰富、自己设计制作的素材应用多；色系、布局合理美观、考虑用户访问方便；采用各种特效、并且运用合理。不过也有些不足，比如一开始没有把几个人制作的文件夹分开，导致后面汇总时比较麻烦。还有就是文件名字开始中文命名，有的时候链接错误。这次的作业随说我是在网上找了很多做好的模板但是我还是很有成就感，觉得自己很不错。不过总的来说，对这次的作品相当满意，不仅选择了我们自己喜欢的内容，而且在我们的水平上把它做的很精美。在这个过程中我们意识到了自己在相关技术上的不足，通过学习，知道了如何改进我们的缺点，相信在以后的应用中，我们会做的更加完美！

web前端开发工作总结

web前端开发具体岗位职责

web前端开发岗位职责说明书（共6篇）

web前端岗位职责

web前端自我评价