Web前端技术课程实训报告.docx

Web前端技术课程实训报告.docx

《Web前端技术课程实训报告.docx》由会员分享，可在线阅读，更多相关《Web前端技术课程实训报告.docx（12页珍藏版）》请在冰豆网上搜索。

Web前端技术课程实训报告

"Web前端技术课程设计"报告

一、实训课题名称

二、课题设计目的

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

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

为以后学习动态打下根底。

三、实现功能：

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

在编写文档时，必须严格遵照要求，最后提交文档。

功能要求：

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

各页面之间通过超切换。

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

四、课题设计容：

〔1〕开发背景

〔2〕分析设计局部

1〕客户需求分析

●栏目划分

●栏目容介绍

●拓扑图

●网页风格创意设计

2〕风格定位

3〕建立方案

4〕效果图

〔3〕制作局部

1〕效果图制作

2〕网页素材及架构制作

3〕首页制作页面设计

4〕子页面制作

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

教师评语

评分项

分值

得分

设计

实现

局部

（60分）

1.实现.能力（50分）

效果图

5

Logo

5

Banner

5

导航条

5

页面布局与美化

5

注册验证、登录

10

图片多媒体运用

5

程序复杂度

5

运行效果

5

2.创新能力

5

3.学生辩论

5

小计

60

设计

报告

局部

（30分）

1.构造完整，条理清晰〔封面、任务书、教师评语、目录、正文容、小结、参考文献〕

10

2.独立完成

5

3.描述工具使用恰当：

拓扑图

5

4.制作步骤描述清晰

5

5.报告容充实

5

小计

30

学习态度局部（10分）

考勤

5

认真完成，勤于思考，积极提问

5

小计

10

总计

100

成绩

参考方案：

开发背景…………………………………………………………………………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、排版

网页是构成的根本元素。

当浏览者轻点鼠标，在中漫游时，一幅幅精彩的网页会呈现在面前。

则，决定网页精彩元素是什么"色彩的搭配、文字的变化、图片的处理等式不可忽略的因素，除了这些外，还有一个非常重要的元素——网页排版。

黑客学习采用的是"厂字型〞排版形式。

最上面是的logo。

接下来是的menu，中心容分为两局部：

一是左侧meun二是右侧显示menu的主要容。

最下面的是的一种根本信息、联系方式、声明等。

这种版式的优点是网页构造清晰，主次清楚，但弱点是规矩呆板，信息量少。

针对这个弱点，该在细节上做了一些处理。

例如：

对于黑客新闻以到另一个网页的形式，并将所有新闻的超级置于此网页，增大的信息量。

logo设置较为个性并动态显示，使整个页面显得更加生动富有特色。

3、特效

的特效就是让网页看起来生动活泼的各种应用，如Flash、JavaScript等。

五、建立方案

在黑客学习的建立中，前期准备至关重要的，要有明确的做的根本目的。

该黑客学习通过黑客的介绍、黑客新闻以及黑客攻防技术的宣传，大大的提高了的知名度。

由于信息化时代的很多漏洞，大多数人没有全面的意识，且很大一局部人对黑客十分感兴趣，因此黑客学习的存在想必给很爱好者们大量的信息量和学习资源，也为同爱好者或是高手提供了交流平台，从而推动了信息化时代的进一步开展，也为网民提供了更多的学习平台。

为了充分发挥黑客学习的作用，就需要对的容进展系统规划。

六、网页风格创意设计

该页面颜色采用黑灰色为主，淡蓝色为辅。

在此色调的根底上对黑灰色进展有机搭配，同时还要适当的辅以淡蓝色。

通过颜色传达了新颖、神秘、平安、技术等元素，从而使产生了一种知识海洋的气氛。

七、栏目划分

1、首页2、黑客简介3、等级区分

4、黑客新闻5、国黑客6、相关电影资源

7、爱好者报名表8、黑客交流版

八、栏目容介绍

1、首页：

本栏目为导航页面，为吸引用户在main中放置与黑客相关视频。

2、黑客简介：

本栏目中介绍黑客的根本定义，并对黑客名字的来源作以详细的介绍。

4、黑客分类：

本栏目中介绍黑客的分类，

3、等级区分：

本栏目主要是让用户在对黑客有了简单认识下区分黑客的等级，提升在用户心中的荣耀感。

4、黑客新闻：

该栏目具体放置的为有关黑客的最新新闻以及其中的技术。

5、国黑客：

该栏目的主要目的是让用户了解国四大有名的黑客：

中国黑客联盟，中国红客，中国第八军团，华夏联盟。

6、相关电影资源：

该栏目主要是为用户提供有关黑客的电影。

7、爱好者报名表：

该栏目主要是让爱好者通过报名的方式成为我们中的一员，进展更进一步的学习。

8、黑客交流版：

该栏目主要用来让黑客以及爱好者对黑客技术文章或者新闻等方面在网上进展评论交流。

九、拓扑图

十、实训目的

1．更好的熟悉和掌握建立的根本流程和技术规；

2．运用flash动画制作软件设计网页中动画的知识；

3．稳固运用Fireworks图像处理软件进展网页中图形制作

4．综合使用Dreamweaver、Flash、Photoshop、Css3Menu四个软件完成的建立，可以独立构思并设计出容完整图文并茂的。

5．具备独立撰写实训报告等科技文件的根本能力；

6．在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力。

十一、实训任务

1．站点规划，搜集资料。

确定主题容，规划站点构造，从网上搜索相关资料〔图片、文字等〕。

2．进展主页设计。

构思主页布局，进展主页标题图片的设计〔要求原创〕，进展主页其余图片的设计和页面容的录入，最后进展主页的整体优化设计。

3．网页设计。

除主页以外的网页设计，首先设计网页模版，一局部网页由模版生成，一局部为单独设计〔依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计〕。

包括版面设计和图形设计、容录入等。

4．动画设计。

主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。

5．综合优化。

正确、得当，动态效果好〔时间轴动画、行为、代码的嵌入等〕

6．测试并递交。

在浏览器中对完成的逐页翻开测试，包括正确与否，页面翻开时间，图片和动画是否丧失等。

十二、实训工程

1、根本介绍

的主题是:

游览天下行，快乐共分享。

背景图片均为国外知名旅游地图片，表达主题。

图片和文字局部采用浮动形式，让看起来更生动，更有吸引力；导航栏采用超，到相关，同时插入表单，设置了登陆界面和主页的。

还插入了音乐，轻柔舒缓，仿佛置身于游览圣地中。

2、报名界面：

3、保存的文件位置：

4、首页展示效果图：

5、导航条展示效果图：

6、留言板表格布局：

7、的展示图：

8、国黑客界面展示：

9、黑客新闻界面展示：

10、电影展示图：

一主页视频二为相关电影推荐

11、黑客简介界面展示〔含滚动图片展示〕：

12、黑客区别界面展示：

13、黑客分类界面展示：

十三、实训中的问题和解决方法

1、动态图片插入后不显示为动态，后来同过将图片格式改为".swf〞即可显示为动态。

2、插入的视频一开场只能显示界面但是不能播放后通过将后缀名改为".flv〞再通过Dreamweaver中插入媒体FLV成功播放，且易设置视频的格式。

3、一开场不知道如何让图片滚动显示通过查书找到：

4、通过查书找到如何将子网页显示在主页中main局部〔红色局部为重点〕：

77p*;line-height:

77p*;"target="iframe">黑客简介

实训体会

信息化时代的我们每天浏览各种网页，网页也是五花八门，让人赏心悦目，好似从来都没有去想这个网页做起来是容易还是难或是谁制作的。

直到第一次学习web课程的时候，才知道网页做起来不是易事，做一局部就会在右面看见效果图这给我了极大的兴趣和成就感。

我从开场感觉到了这门课是必须得懂得积累，每一个实现都会有一个固定的代码，记住它是用来做什么是我要去积累的知识。

通过这学期期末的课题设计，我才知道要想做一个静态网页是件很不容易的事情，开场佩服那些专业做的人，想想我们浏览的网页都是别人不知道花费了多少心思做出来的。

因为平时没有好好把握课下的练习时间，到最后做大作业的时候才会手忙脚乱，查找上查找数据，找各种资料，一切并不像想象的那样简单，但最后整体效果出来后还是特别有成就感。

要想做好一个，不仅仅是课上的认真，还有课下的练习和自己课外知识的拓展。

还记得那次去师大本部的双选会上，其中有招聘网页制作的公司，我和小伙伴上前去问，大概了解到现在是制作的主流是html5,应聘需要提交自己的作品，招聘方还特别强调不是我们平时做的作业。

这让我顿时感觉到了危机感，我毕业可能就失业了。

都说未来的路都是自己走出来的，从那次开场我渐渐的意识到我从现在开场努力还不晚！

这次大作业我认认真真完成，做到我认为的最好。

以后的每一件小事要尽最大努力去做好！

脚踏实地，从把最根底最小的事开场做好，未来就是明朗的！