Web前端设计实习报告

《Web前端设计实习报告》由会员分享，可在线阅读，更多相关《Web前端设计实习报告（9页珍藏版）》请在金锄头文库上搜索。

1、实 习 报 告学生姓名： 学 号： 专业班级： 实习单位： 实习时间： 校外指导教师： 校内指导教师： 成 绩： 目 录1实习背景11.1实习目的11.2实习起止时间11.3实习内容概要12实习内容12.1实习过程12.2 实习内容52.3 主要成果63总 结63.1 网页游戏的认识63.2 实习的自我评价71实习背景1.1 实习目的 了解软件开发的各种模式，开发流程，以及各种形式的建模 详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率 掌握HTML5、CSS、JAVASCRIPT等技术1.2 实习起止时间 开始时间：2015年7月12号 截止时间：2015年7月18号1.3

2、实习内容概要 学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授） 学习HTML5、CSS、JAVASCRIP技术（形式：观看视频） 按照敏捷开发的流程，学员分组，制定每日的站立会议时间 观看实习内容例子的视频，分工合作 提交实习成果，老师检查打分2实习内容2.1实习过程可以以周为时间单位概述实习各阶段所从事的主要工作等； 学习阶段 开发模式1) 软件生命周期同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、 -衰亡等阶段，这一般称为软件生命周期。软件开发生命周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。SDLC的一般步骤包括：确定问题、可行性分析与开

3、发计划、收集需求、分析与设计、编码开发、测试、安装、维护。2) 软件生命周期模式典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。3) 敏捷开发敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。特点：a) 是一种开发方法学（Methodology），可以应对客户快速变 更的需求。b) 强调以人为核心，采用迭代的方式，循序渐进地开发软件。c) 在敏捷开发过程中，软件项目被划分成多个相互联系但也能独立运行的子项目。d) 每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。e) 这个过程就是要形成开发过程中团队之

4、成员之间更加有效的合作关系，使其灵活性更高，以适应不断变化的需求。 技术讲解1) 讲解内容：HTML5、CSS、JAVASCRIPT技术2) HTML5HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。特性：a) 语义特性（Class：Semantic）b) 本地存储特性（Class: OFF

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

6、式Linking（也叫外部样式）：将网页链接到外部样式表。b) 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。c) 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。CSS布局特点：a) 精简代码，降低重构难度b) 网页访问速度c) SEO优化d) 浏览器兼容性基础语法：a) CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。b) 选择器 宣言1; 宣言2; . 宣言N c) 选择器通常是您需要改变样式的 HTML 元素。d) 每条声明由一个属性和一个值组成。e) 属性（property）是您希望设置的样式属性（style attribute）。

7、每个属性有一个值。属性和值被冒号分开。f) 选择器 property: value4) JAVASCRIPTJavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。组成a) ECMAScript，描述了该语言的语法和基本对象。b) 文档对象模型（DOM），描述处理网页内容的方法和接口。c) 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。特点a) 是一种解释性脚本语言（

8、代码不进行预编译）。b) 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。c) 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。d) 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。 开发阶段 开发第一天站立会议：8.008.15会议内容：小组分工，制定站立会议时间，了解每个人的学习情况，交流学习的内容任务内容：“打地鼠”网页游戏的网页布局HTML5+CSS技术 开发第二天站立会议：8.008.15会议内容：小组分工，完成情况，了解每个人的进度，交流学习的内容任务内容：“打地

9、鼠”网页游戏的功能实现 开发第三天站立会议：8.008.15会议内容：小组分工，完成情况，查漏补缺，测试软件，寻找bug，交流学习的内容任务内容：“打地鼠”网页游戏的软件测试，寻找不足，确认无误，提交实习结果2.2实习内容 项目介绍 “打地鼠”网页游戏是安卓版“打地鼠”游戏的进一步开发，可以实现在网页中构建游戏的所有功能，并且不用下载安装既可以用的游戏，网页版游戏的市场前景潜力无限，国内逐渐发展起来一批喜欢网页游戏的用户群，并且网页游戏属于中小型的项目，易于开发，应用于敏捷开发的流程，效率十分高。 我的任务“打地鼠”网页游戏网页布局的调整，以及“打地鼠”之所谓“打”的动画实现，还有最后的“软件

10、测试”。 软硬件平台dreamweaver cs6，Mozilla Firefox浏览器，photoshop cs6 使用技术 HTML5 CSS JAVASCRIPT 浏览器中的开发人员调试 photoshop cs6的图片处理技术 JAVASCRIPT的进阶JQERY技术2.3主要成果“打地鼠”网页游戏的成功开发，基本功能：打地鼠的动画，游戏的时间限制，统计分数，开始游戏，暂停游戏，结束游戏，走马灯介绍等等。但是在实际测试的时候仍然出现了一些bug，比如动画的迟缓（主要是因为动画的缓冲没有做好），还有一些分数的统计不甚合理，这在我们应用的时候及时的发现，并且处理了这样的问题。3总 结3.1

11、 网页游戏的认识网页游戏又称Web游戏，无端网游，简称页游。是基于Web浏览器的网络在线多人互动游戏，无需下载客户端，不存在机器配置不够的问题，最重要的是关闭或者切换极其方便，尤其适合上班族。在那个网络泡沫经济高速扩张的年代，在那个大量菜鸟网民拥入网络的年代，在那个文字MUD已经逐渐衰退而网络游戏又尚未兴起的年代，这种新颖玩意儿的推出，无疑让很多人为之惊艳。仅仅通过简单注册，就可以边玩游戏边泡论坛。尽管只有简陋的游戏界面、一堆文字、几张图片，游戏方式也不过是刷新页面而已，但WebGame却带来了无限的乐趣和遐想，同时还演绎了让无数人刻骨铭心的爱恨情仇。如今网络游戏百花争鸣，到处充斥着唯美的人物

12、和绚丽的光影。你会偶尔缅怀那些逝去的岁月吗？至少在我心底，一直有数款难以忘怀的WebGame。WebGame，顾名思义就是基于Web浏览器的网络在线多人游戏。从诞生发展至今，WebGame大概分为三种类型：一是基于Web浏览器，使用PHP/ASP/Perl等解释语言建设的虚拟社区；二是基于Web浏览器，使用Flash/JAVA技术制作的游戏；三是需要下载客户端并连接专用服务器运行的游戏。网页游戏尽管EBS将国内WebGame的发展往前推了一把，但是一段时间后，这类WebGame的弱点逐渐暴露出来。一些架设WebGame供网民免费游玩的站点，由于质量和管理不过关、服务器负载过大，丢失了不少玩家。

13、同时，比WebGame华丽N倍的网络游戏兴起后，WebGame自然就逐渐没落了。传统意义上的WebGame依然为少部分热爱者延续至今，而且游戏性与游戏素材比以前丰富许多。 前景分析 网页游戏的市场潜力巨大，与其他类型网游相比有着强劲优势 网页游戏的用户群逐渐培养起来，极有可能成为未来网游用户的一支主力军 避大型网游之锋芒，坚持走游击路线。坚持和中小站长合作 针对用户群大胆创新，敢于突破固有模式 游戏特点 混搭式类型成主流 策略游戏不断丰富 游戏内容多样化 消费群体不断成熟 市场集中度提高 游戏跨形态融合 产品结构渐丰富 步入全球化运作 企业品牌意识增强3.2 实习的自我评价这次实训充分利用了课

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