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厘米， 五、 如有雷同，将作不及格处理。 六、 完成时间：xx.1.5

教育类网站设计报告书——宁海职业技术学院网 -

教师评语 教师：

xx.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）宣传学校办学理念，展示办学设施、教师队伍、专业设置、就

业情况，提高学校的社会知名度；

关咨询服务；

（3）获取社会各界对学校教育教学情况的评价和意见、建议； （4）建立与兄弟院校进行交流学习的平台；

（5）向社会各界推荐毕业生，为毕业生提供就业信息。

1.2网站风格定位

校园网站就是学校的网上形象，每一所学校都有自己的特色，每一个院系或班级都会有自己的强项。对于本项目介绍的校园网站以抚州职业技术学校为例，从以下三个方面来学习该网站的风格定位。

1．色彩：

本项目中采用一种色彩，先选定主色调为橙色，这是令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者饱和度，就是色彩进行变淡、加深或渐变的处理，产生新的橙色的近似色彩，使网页看起来色彩统一，富有层次感。在页面中借助浅灰色的背景图像，采用了留白艺术给人

教育类网站设计报告书——宁海职业技术学院网 -

郑州轻工业学院

实 习 报 告

学生姓名： 学 号：

专业班级：

实习单位：

实习时间：

校外指导教师：

校内指导教师： 成 绩： 目 录

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 实习起止时间

? 开始时间：xx年7月12号

? 截止时间：xx年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技术_web前端实习报告。

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) 网页访问速度_web前端实习报告。

c) SEO优化

d) 浏览器兼容性

基础语法：

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

b) 选择器 {宣言1; 宣言2; ... 宣言N }

c) 选择器通常是您需要改变样式的 HTML 元素。 3

经验

xx年7月11日 11:20

时：千万不要忘记介绍名字 代码：

1.标记为done表示已经调试好，完全测试过了

2.代码规范。phpstrom，统一格式化

3.借鉴代码时注意liscence

4.项目相接时，文档规范（步骤，文档不可少） 项目： 1.CRM

2.REP 3.OA

4.微信(接口，产品（wify）） 任务：

1.每天用几个小时做了什么，做得怎么样（日报，周报）

2.接受项目（任务）时，先评估后再决定是否接受，接收后做不好，更不好

处理关系：

1.尽快记住大家的名字

2.按时任务

3.邮件发送人与抄送人，1小时内回复

4.沟通：不懂或有意见的时候要及时沟通

还要学习

1.css，jQuery学习

2.算法，业务流程

3.代码规范

4.友好的注释（便于自己和他人）

5.打字速度很需要提高

6.多看英文文档

《Web前端技术课程设计》报告

一、 实训课题名称

二、 课题设计目的

通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。

培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。

三、 实现功能：

用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。

功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。

最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。

四、 课题设计内容：

（1）开发背景

（2）网站分析设计部分

1）客户需求分析

? 网站栏目划分

? 栏目内容介绍

? 网站拓扑图

? 网页风格创意设计

2）网站风格定位

3）网站建设方案

4）网站效果图

（3）网站制作部分

1）效果图制作

2）网页素材及网站架构制作

3）首页制作页面设计

4）子页面制作

五、体会及下一步学习方向

教师评语

参考方案： 目录

开发背

景…………………………………………………………………………4 前期准

备…………………………………………………………………………4 客户需求分

析……………………………………………………………………4 网站风格定

位……………………………………………………………………5 色彩………………………………………………………………………………5 排

版………………………………………………………………………………5 特

效……………………………………………………………………………....6 网站建设方

案……………………………………………………………………6 网页风格创意设

计………………………………………………………………7 网站栏目划分……………………………………………………………………7 栏目内容介

绍……………………………………………………………………8 网

站拓扑

图………………………………………………………………………9 实训目

的…………………………………………………………………………10 实训任

务…………………………………………………………………………10 实训项

目…………………………………………………………………………11 网站基本介

绍……………………………………………………………………11 报名界

面…………………………………………………………………………10 保存的文件位

置…………………………………………………………………11 首页展示效果

图…………………………………………………………………12 导航条展示效果

图………………………………………………………………13 留言板表格布局…………………………………………………………………14 网站版权的展示

图………………………………………………………………14 国内黑客网站界面展示图………………………………………………………

15 黑客新闻界面展示

图……………………………………………………………16 电影展示图………………………………………………………………………18 黑客简介界面展示

图……………………………………………………………20 黑客区别界面展示图……………………………………………………………21 黑客分类界面展示

图……………………………………………………………22 实训中的问题和解决办法………………………………………………………23 实训体

会…………………………………………………………………………24

一、开发背景

如今已是信息化时代，很多网络中的强盗已经将魔爪伸向我们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的。黑客学习网一直致力于面向全球华人提供最新的黑客新闻、最先进的黑客攻防技术，力求将黑客学习网打造成网民每天必看的学习网站！

二、前期准备

本网站是以信息安全类为主体设计，系统的介绍了黑客攻防的新闻的知识。

三、客户需求分析

客户需求是指客户创建本网站的目的和对网站建设提出来的特定的要求。

了解客户的需求，是建好黑客学习网站的前提。黑客学习网

站通过互联网可以更好的开展信息技术的交流、学习和网上报名等活动。这样可以提高网站的访问量、知名度，也是网站业务的重要。客户对其拟建的黑客学习网站提出的主要要求有以下几点：

1、宣传信息安全的重要性，提高人们对信息安全的认识，增加网站的知名度。

2、适时地发布最新黑客新闻和技术，为学习者提供最佳资源。

3、在网上发布报名表，引进国内外的爱好者来此学习交流。

4、网站上要设有爱好者交流留言板，用户可以网站新闻和技术文章进行评论和留言交流，对于网站的改进和更新很有帮助。

四、网站风格定位

网站风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括站点的logo、标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游网进行定位。 1、色彩

网站的色彩是浏览者整体的视觉感官，如果网站的色彩具有一致性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览的简洁与方便。从而更能衬托网站的主题，若色彩能与主题合理搭配，将会增加网站的易读性。

黑客学习网站选定的主题色是黑灰色。因为若是要打开一个黑客方面的网站，每个人的头脑中肯定都是黑色或者灰色，即为较暗淡神秘的颜色。能给吸引更多用户并给用户一种神秘感，很适合黑客学习的网站。

网站中除了采用黑灰色系外，还和淡蓝色、白色搭配，使网站产生一种舒适的气氛，使人可以长时间驻留其间，眼睛也不会觉得疲劳。 2、排版 本文：

内容仅供参考