Web前端关键技术课程实训总结报告.doc

《Web前端技术课程设计》汇报
一、 实训课题名称

二、 课题设计目标
经过实训，应使学生巩固所学知识，把所学理论知识利用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训步骤中进行利用。为以后学习动态网站打下基础。
三、 实现功效：
用PhotoShop、DreamWeaver等开发工具制作一个由静态网页组成简单网站，要求包含一个首页、最少三个子网页，根据网站开发步骤，先做网页效果图，然后制作网页素材、构建网站文件结构、计划网页布局、制作网页动画、实现网页功效，尔后进行网站测试，并编制出各阶段必需文档。在编写文档时，必需严格遵照要求，最终提交文档。
功效要求：该网站首页必需包含网站logo、导航条（带有鼠标事件改变效果）、banner（简单flash动画）、图片、多媒体利用、文字等关键信息展示；子网页包含用户注册（带有表单输入项当地验证功效）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间经过超链接切换。
最终要求提交具体课程设计汇报及网页效果图（.psd）和网站运行文件，现场运行验收开发系统。

四、 课题设计内容：

（1）开发背景
（2）网站分析设计部分
1）用户需求分析
l 网站栏目划分
l 栏目内容介绍
l 网站拓扑图
l 网页风格创意设计
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、一开始不知道怎样让图片滚动显示经过查书找到：<marquee behavior="alternate" scrollamount="10"></marquee>
4、经过查书找到怎样将子网页显示在主页中main部分（红色部分为关键）：
<iframe src="怎样成为一名黑客.html" name="iframe" scrolling="auto" width="675px" height="610px"></iframe>
<li class="topmenu"><a href="介绍.html" style="height:77px;line-height:77px;" target="iframe"><img src="index/css3menu1/blue-user.png" alt=""/>黑客介绍</a></li>

实训体会
信息化时代我们天天浏览多种网页，网页也是五花八门，让人赏心悦目，仿佛历来全部没有去想这个网页做起来是轻易还是难或是谁制作。直到第一次学习web课程时候，才知道网页做起来不是易事，做一部分就会在右面看见效果图这给我了极大爱好和成就感。我从开始感觉到了这门课是必需得悉道积累，每一个实现全部会有一个固定代码，记住它是用来做什么是我要去积累知识。
经过这学期期末课题设计，我才知道要想做一个静态网页是件很不轻易事情，开始佩服那些专业做网站人，想想我们浏览网页全部是她人不知道花费了多少心思做出来。因为平时没有好好把握课下练习时间，到最终做大作业时候才会手忙脚乱，查找网站上查找数据，找多种资料，一切并不像想象那样简单，但最终整体效果出来后还是尤其有成就感。要想做好一个网站，不仅仅是课上认真，还有课下练习和自己课外知识拓展。
还记得那次去师大本部双选会上，其中有招聘网页制作企业，我和小伙伴上前往问，大约了解到现在是制作网站主流是html5,应聘需要提交自己作品，招聘方还尤其强调不是我们平时做作业。这让我立即感觉到了危机感，我毕业可能就失业了。全部说未来路全部是自己走出来，从那次开始我逐步意识到我从现在开始努力还不晚！这次大作业我认认真真完成，做到我认为最好。以后每一件小事要尽最大努力去做好！脚扎实地，从把最基础最小事开始做好，未来就是明朗！