web前端实习报告.docx
《web前端实习报告.docx》由会员分享，可在线阅读，更多相关《web前端实习报告.docx（34页珍藏版）》请在冰点文库上搜索。
web前端实习报告
web前端实习报告
篇一：
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厘米，右厘米，五、如有雷同，将作不及格处理。
六、完成时间：
教育类站设计报告书——宁海职业技术学院-
教师评语
教师：
．5.
一前言........................................................................................................................................-4-
客户需求分析................................................................................................................-4-站风格定位................................................................................................................-5-
1．色彩：
....................................................................................................................-5-2．排版........................................................................................................................-6-3．特效........................................................................................................................-6-
二站设计前期准备................................................................................................................-6-
站风格定位................................................................................................................-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）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就
业情况，提高学校的社会知名度；
（2）适时发布学校管理、教学、招生等相关信息，为求学者提供相
关咨询服务；
（3）获取社会各界对学校教育教学情况的评价和意见、建议；（4）建立与兄弟院校进行交流学习的平台；
（5）向社会各界推荐毕业生，为毕业生提供就业信息。
站风格定位
校园站就是学校的上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。
对于本项目介绍的校园站以抚州职业技术学校为例，从以下三个方面来学习该站的风格定位。
1．色彩：
本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使页看起来色彩统一，富有层次感。
在页面中借助浅灰色的背景图像，采用了留白艺术给人
教育类站设计报告书——宁海职业技术学院-
篇二：
假期web前端实习报告
郑州轻工业学院
实习报告
学生姓名：
学号：
专业班级：
实习单位：
实习时间：
校外指导教师：
校内指导教师：
成绩：
目录
1实习背景......................................................1
实习目的............................................................................................................................................1
实习起止时间....................................................................................................................................1
实习内容概要....................................................................................................................................12实习内容....................................................1
实习过程............................................................................................................................................1
实习内容..........................................................................................................................................5
主要成果..........................................................................................................................................63总结.....................................................6
页游戏的认识..........................................................................................................................6
实习的自我评价..........................................................................................................................7
1实习背景
实习目的
了解软件开发的各种模式，开发流程，以及各种形式的建模
详细学习敏捷开发的各个流程，并通过实习来体会敏捷开发所带来的效率掌握HTML5、CSS、JAVASCRIPT等技术
实习起止时间
开始时间：
XX年7月12号
截止时间：
XX年7月18号
实习内容概要
学习软件开发的各种模式，重点学习了敏捷开发（专业老师讲授）
学习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和
2
JavaScript。
他们定义了开发者如何使用优化标记，风格更丰富的性能，以及新JavaScriptAPI来制作最新的络开发功能。
简单而言，HTML5=HTML+CSS+JavaScript。
特性：
a）语义特性（Class：
Semantic）
b）本地存储特性（Class:
OFFLINE&STORAGE）
c）设备兼容特性（Class:
DEVICEACCESS）
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前端实习经验
经验
XX年7月11日
11:
20
自我介绍时：
千万不要忘记介绍名字
代码：
1.标记为done表示已经调试好，完全测试过了
2.代码规范。
phpstrom，统一格式化
3.借鉴代码时注意liscence
4.项目相接时，文档规范（步骤，文档不可少）
项目：
4.微信（接口，产品（wify））
任务：
1.每天用几个小时做了什么，做得怎么样（日报，周报）
2.接受项目（任务）时，先评估后再决定是否接受，接收后做不好，更不好
处理关系：
1.尽快记住大家的名字
2.按时任务
3.邮件发送人与抄送人，1小时内回复
4.沟通：
不懂或有意见的时候要及时沟通
还要学习
，jQuery学习
2.算法，业务流程
3.代码规范
4.友好的注释（便于自己和他人）
5.打字速度很需要提高
6.多看英文文档
篇四：
web前端技术实验报告1
Web前端技术实验报告
课程名称：
Web前端技术
实验名称：
html页设计
系别班级：
计科系1302班
学生姓名：
余洲杰
学生学号：
XX100204
辅导老师：
王琦
一、实验目的
熟悉HTML制作页的基础知识，并能熟练运用学过的内容制作、设计较为简单的页。
二、内容及要求
运用学过的代码设计一个页，其中要求运用到以下知识点：
1、不同的文字样式设计；
2、插入背景图片；
3、设计超链接；
4、表格的简单实用；
三、实验原理
文本：
font可以跟color、size、face等属性根据不同的值对文本进行修
改；
滚动字：
marquee可以跟bgcolor、height、width、direction、align、
behaviour等属性根据不同的值对滚动字进行设置；
表格：
tabble分成各个格子，后跟百分比来分成适当的栏
其他相关内容：
各级标签、标题设置、背景图、超链接等。
四、实验步骤
（此内容根据自己的页设计实况填写，如下事例）
1、确立自己的页主题
选择了个人感悟作为本次页设计的主题。
2、页基本设计
a、分设五个基础页，分为主页及四个个介绍页。
b、设计主页为整图如下，在图片上编写适当文本，并添加超链接以进入下一个页面。
c、点击超链接进入下一个页面，共四个页面。
如图
d、使用滚动字，背景图片的插入，背景颜色的设置等，使页美化。
五、实验代码
花开半夏，似水流年
六、实验总结
1、学会了如何运用table，marquee,font等。
2、对于背景图片的运用不是很熟练，在查找资料之后才得以实现。
篇五：
Web前端技术课程实训报告
《Web前端技术课程设计》报告
一、实训课题名称
二、课题设计目的
通过实训，应使学生巩固所学知识，把所学的理论知识运用到站制作实践中。
培养学生动手能力，将PS制作效果图、HTML、CSS+DIV页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。
为以后学习动态站打下基础。
三、实现功能：
用PhotoShop、DreamWeaver等开发工具制作一个由静态页构成的简单站，要求包括一个首页、至少三个子页，按照站开发流程，先做页效果图，然后制作页素材、构建站文件结构、规划页布局、制作页动画、实现页功能，尔后进行站测试，并编制出各阶段必要的文档。
在编写文档时，必须严格遵照要求，最后提交文档。
功能要求：
该站首页必须包括站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子页相关栏目。
各页面之间通过超链接切换。
最后要求提交详细的课程设计报告及页效果图（.psd）和站运行文件，现场运行验收开发的系统。
四、课题设计内容：
（1）开发背景
（2）站分析设计部分
1）客户需求分析
站栏目划分
栏目内容介绍
站拓扑图
页风格创意设计
2）站风格定位
3）站建设方案
4）站效果图
（3）站制作部分
1）效果图制作
2）页素材及站架构制作
3）首页制
升级会员 