篇一：假期web前端实习报告
郑州轻工业学院
实 习 报 告
学生姓名：
学 号：
专业班级：
实习单位：
实习时间：
校外指导教师：
校内指导教师：
成 绩：
目 录
1实习背景 ...................................................... 1
1.1 实习目的 ............................................................................................................................................ 1
1.2 实习起止时间 .................................................................................................................................... 1
1.3 实习内容概要 .................................................................................................................................... 1 2 实习内容 .................................................... 1
2.1 实习过程 ............................................................................................................................................ 1
2.2 实习内容 .......................................................................................................................................... 5
2.3 主要成果 .......................................................................................................................................... 6 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
? 学习阶段
? 开发模式
1) 软件生命周期
同任何事物一样,一个软件产品或软件系统也要经历孕育、诞生、成长、成熟、 -衰亡等阶段，这一般称为软件生命周期。
软件开发生命周期(SDLC)是指软件开发的全部过程、活动和任务的结构框架。
SDLC的一般步骤包括：确定问题、可行性分析与开发计划、收集需求、分析与设计、编码开发、测试、安装、维护。
2) 软件生命周期模式
典型的几种生命周期模式包括：瀑布模式、演化模式、螺旋模式、快速原型模式、喷泉模式和混合模式等。
3) 敏捷开发
敏捷开发（Agile）是一种关注价值、消除浪费、以人为核心、迭代、循序渐进的开发方法。
特点：
a) 是一种开发方法学（Methodology），可以应对客户快速变 更的需求。 b) 强调以人为核心，采用迭代的方式，循序渐进地开发软件。
c) 在敏捷开发过程中，软件项目被划分成多个相互联系但也能独立运行的子项
目。
d) 每个子项目在开发、测试直至完成的过程中一直保持可使用的状态。
e) 这个过程就是要形成开发过程中团队之成员之间更加有效的合作关系，使其
灵活性更高，以适应不断变化的需求。
? 技术讲解
1) 讲解内容：HTML5、CSS、JAVASCRIPT技术
2) HTML5
HTML5是一个描述用于帮助开发者创建下一代网站和应用的HTML、CSS和JavaScript规格的涵盖性术语。这个定义中最显眼的三个部分是：HTML、CSS和
2
JavaScript。他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScript API来制作最新的网络开发功能。简单而言，HTML5=HTML+CSS+JavaScript。
特性：
a) 语义特性（Class：Semantic）
b) 本地存储特性（Class: OFFLINE & 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) 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 元素。
3
篇二：web前端设计与开发-实验目的及要求 (2)
web前端设计与开发 实验
实验须知：
1. 本实验课程一共有6个实验，围绕“个人主页”的主题，（1）使用Axure制作网站的页面原型；（2）使用HTML标签设计页面的结构；（3）使用CSS控制页面的表现；（4）使用JavaScript脚本实现网页的交互效果；（5）并使用PhotoShop完善网站的视觉设计（6）最终呈现一个完整的“个人主页”网站。
2. 网站推荐使用“一页式”的“响应式设计”，但这不是必须的。
3. 网站如果采用“一页式”设计，则必须有三屏内容；如果是多网页设计，则必须有三个页面，包括首页。
实验1：网站页面原型设计
实验目的：
1. 掌握Axure工具的使用；
2. 领会网站设计的思想；
3. 理解页面原型的作用。
实验要求：
1. 网站主题：“个人主页”或“个人求职主页”；
2. 网站推荐使用“一页式”的“响应式设计”，但这不是必须的；
3. 网站如果采用“一页式”设计，则必须有三屏内容；如果是多网页设计，则必须有三个页面，包括首页在内；
4. 要求设计出网页的基本结构，并有一定的交互效果；
5. 尽可能设计出高保真型原型。
实验2：网站页面HTML设计与实现
实验目的：
1. 掌握HTML标签的使用；
2. 理解HTML标签的语义；
3. 合理使用HTML标签结构化页面元素。
实验要求：
1. 要求使用HTML语言将实验一设计的网页原型实现；
2. 要求语义化使用HTML标签，合理地结构化页面元素及内容；
3. 要求可适当分析页面布局，加入控制布局的标签；
4. 要求设计一个合适的前端框架，即能分类存放不同的文档。
实验3：使用DIV+CSS布局并美化网页
实验目的：
1. 掌握CSS基本语法；
2. 掌握DIV+CSS布局的基本技术；
3. 灵活运用CSS美化页面。
实验要求：
1. 要求使用HTML+CSS语言将实验一设计的网页原型实现；
2. 要求在实验二的基础上，开始编写CSS控制页面布局；
3. 要求尽可能使用CSS呈现页面原型中的设计；
4. 要求在CSS代码中能够清晰地看到所定义CSS代码所起的作用。
实验4：使用JavaScript实现页面的动态交互设计
实验目的：
1. 掌握JavaScript的基本使用方法；
2. 掌握JavaScript控件的使用；
3. 理解JavaScript脚本在页面中的作用。
实验要求：
1. 要求使用HTML+CSS+JavaScript语言将实验一设计的网页原型实现；
2. 要求在实验三的基础上，开始加入JavaScript脚本实现原型设计中的动态交互部分；
3. 鼓励自己编写脚本代码，但还可以在互联网上下载相关控件，运用到页面中，实现
交互效果；
4. 要求页面中至少有两处使用JavaScript；
5. 可使用jQuery框架支持下的脚本代码。
篇三：Web前端技术实训报告书
《Web前端技术实训》任务书
一、实训课题名称
1、 教育类网站的设计与制作 2、 商业类网站的设计与制作
3、 旅游休闲类网站的设计与制作 4、 体育健身类网站的设计与制作
二、 课题设计目的
通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。
三、 任务要求：
用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。
功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。
最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。
四、 课题设计报告书要求：
1、 课题设计报告书第一页为封面，封面上写清楚标题、班级、姓名、指导老师、
完成日期。
2、 课题设计报告书第二页为本任务书。 3、 课题设计报告书第三页为教师评语。 4、 课题设计报告书第四页为目录。
5、 课题设计报告书第五页开始为具体内容：
（1）开发背景 ? 网站栏目划分 2）网页素材及网站架（2）网站分析设计部分 ? 栏目内容介绍 构制作 1）客户需求分析 ? 网站拓扑图 3）首页制作页面设计 2）网站风格定位 4）网站效果图 4）子页面制作 3）网站建设方案 （3）网站制作部分 ? 网页风格创意设计 1）效果图制作
6、课题设计报告书最后一页是本次课程设计的小结和参考文献。
7、字数要求不少于3000字。
8、打印纸张使用B5纸，页边距设为上、下、左2厘米，右1.5厘米， 五、 如有雷同，将作不及格处理。 六、 完成时间：2012.1.5
教育类网站设计报告书——宁海职业技术学院网 -
教师评语
教师：
2012.1．5.
一 前言 ........................................................................................................................................ - 4 -
1.1客户需求分析 ................................................................................................................ - 4 - 1.2网站风格定位 ................................................................................................................ - 5 -
1．色彩： .................................................................................................................... - 5 - 2．排版 ........................................................................................................................ - 6 - 3．特效 ........................................................................................................................ - 6 -
二 网站设计前期准备 ................................................................................................................ - 6 -
2.1网站风格定位 ................................................................................................................ - 6 -
1．页面风格创意设计 ................................................................................................ - 7 - 2．网站栏目划分 ........................................................................................................ - 7 - 3.特效 ........................................................................................................................... - 7 -
三、网站拓扑图 .......................................................................................................................... - 7 - 四、网站效果图 .......................................................................................................................... - 8 -
教育类网站设计报告书——宁海职业技术学院网 -
五、中期网站制作 .................................................................................................................... - 11 -
（一）网站首页制作 ........................................................................................................ - 11 - 1、首页logo效果： ................................................................................................................ - 11 - 2、站内公告效果： .................................................................................................................. - 11 - 3、站内新闻效果图： .............................................................................................................. - 11 - 4、登陆效果图： ...................................................................................................................... - 12 -
（二）网站搭建过程 ........................................................................................................ - 14 - 三、制作网站的Logo动画 ............................................................................................. - 16 - 六、网站建设心得小结 ............................................................................................................ - 24 - 七、参考文献 ............................................................................................................................ - 26 -
一 前言
1.1客户需求分析
客户需求，是指学校创建门户网站的目的和对网站提出的特定要求。
了解客户需求，是建好学校门户网站的前提。宁海职业技术学
教育类网站设计报告书——宁海职业技术学院网 -
校对其拟建的门户网站提出的主要要求有以下几点。 （1）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就
业情况，提高学校的社会知名度；
（2）适时发布学校管理、教学、招生等相关信息，为求学者提供相
关咨询服务；
（3）获取社会各界对学校教育教学情况的评价和意见、建议； （4）建立与兄弟院校进行交流学习的平台；
（5）向社会各界推荐毕业生，为毕业生提供就业信息。
1.2网站风格定位
校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。对于本项目介绍的校园网站以抚州职业技术学校为例，从以下三个方面来学习该网站的风格定位。
1．色彩：
本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。在页面中借助浅灰色的背景图像，采用了留白艺术给人
教育类网站设计报告书——宁海职业技术学院网 -
免费论文网友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.csmayi.cn Corporation, All Rights Reserved 共享时代 共享你我他 版权所有