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文件和包。

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