web前端技术课程实训报告 ()

的网站。
网站中除了采用黑灰色系外，还和淡蓝色、白色搭配，使网站产
Fra Baidu bibliotek
生一种舒适的气氛，使人可以长时间驻留其间，眼睛也不会觉得疲劳。
2、排版
5
Web 前端课程设计
河北师范大学汇华学院
网页是网站构成的基本元素。当浏览者轻点鼠标，在网站中漫游
时，一幅幅精彩的网页会呈现在面前。那么，决定网页精彩元素是什
么?色彩的搭配、文字的变化、图片的处理等式不可忽略的因素，除
但弱点是规矩呆板，信息量少。针对这个弱点，该网站在细节上做了
一些处理。例如：对于黑客新闻以链接到另一个网页的形式，并将所
有新闻的超级链接置于此网页，增大的信息量。logo 设置较为个性并
动态显示，使整个页面显得更加生动富有特色。
3、特效
网站的特效就是让网页看起来生动活泼的各种应用，如 Flash、
JavaScript 等。
学习资源，也为同爱好者或是高手提供了交流平台，从而推动了信息
化时代的进一步发展，也为网民提供了更多的学习平台。为了充分发
挥黑客学习网站的作用，就需要对网站的内容进行系统规划。
六、网页风格创意设计
该网站页面颜色采用黑灰色为主，淡蓝色为辅。在此色调的 基础上对黑灰色进行有机搭配，同时还要适当的辅以淡蓝色。通 过颜色传达了新颖、神秘、安全、技术等元素，从而使网站产生 了一种知识海洋的氛围。
了这些外，还有一个非常重要的元素——网页排版。
黑客学习网站采用的是“厂字型”排版形式。最上面是网站的
logo。接下来是网站的 menu，中心内容分为两部分：一是左侧 meun
二是右侧显示 menu 的主要内容。最下面的是网站的一种基本信息、
联系方式、版权声明等。这种版式的优点是网页结构清晰，主次分明，
3
一、开发背景
Web 前端课程设计
河北师范大学汇华学院
如今已是信息化时代，很多网络中的强盗已经将魔爪伸向我
们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识
和新闻是很有必要的。黑客学习网一直致力于面向全球华人提供
最新的黑客新闻、最先进的黑客攻防技术，力求将黑客学习网打
造成网民每天必看的学习网站！
并茂的网站。
5． 具备独立撰写实训报告等科技文件的基本能力；
6． 在网页设计的实践中培养分析问题、解决问题的能力，培
养协作、交流的能力，培养创新能力。
十一、 实训任务
1． 站点规划，搜集资料。确定网站主题内容，规划站点结构，
从网上搜索相关资料（图片、文字等）。
2． 进行主页设计。构思主页布局，进行主页标题图片的设计
1
Web 前端课程设计
教师评语
河北师范大学汇华学院
网站 设计 实现 部分 (60 分)
设计 报告 部分 (30 分)
学习态 度部分 (10 分)
评分项
分值
效果图
5
Logo
5
Banner
5
导航条
5
1.实现.能力
页面布局与美化
5
(50 分)
注册验证、登录
10
图片多媒体运用
5
程序复杂度
5
运行效果
5
2. 创新能力
一、
Web 前端课程设计
河北师范大学汇华学院
《Web 前端技术课程设计》报告
实训课题名称
二、 课题设计目的
通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。 培养学生动手能力，将 PS 制作效果图、HTML、CSS+DIV 网页布局、JavaScript 等 Web 前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。
三、 实现功能：
用 PhotoShop、DreamWeaver 等开发工具制作一个由静态网页构成的简单网站，要求包 括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、
构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并 编制出各阶段必要的文档。在编写文档时，必须严格遵照要求，最后提交文档。
七、网站栏目划分
1、网站首页 2、黑客简介 3、等级区分 4、黑客新闻 5、国内黑客网站 6、相关电影资源 7、爱好者报名表 8、黑客交流版
八、栏目内容介绍
1、网站首页：本栏目为导航页面，为吸引用户在 main 中放置与 黑客相关视频。 2、黑客简介：本栏目中介绍黑客的基本定义，并对黑客名字的来 源作以详细的介绍。 4、黑客分类：本栏目中介绍黑客的分类， 3、等级区分：本栏目主要是让用户在对黑客有了简单认识下区分 黑客的等级，提升在用户心中的荣耀感。 4、黑客新闻：该栏目具体放置的为有关黑客的最新新闻以及其中 的技术。
四、 课题设计内容：
（1）开发背景 （2）网站分析设计部分
1）客户需求分析 网站栏目划分 栏目内容介绍 网站拓扑图 网页风格创意设计
2）网站风格定位 3）网站建设方案 4）网站效果图 （3）网站制作部分
1）效果图制作 2）网页素材及网站架构制作 3）首页制作页面设计 4）子页面制作
五、体会及下一步学习方向
8、黑客交流版：该栏目主要用来让黑客以及爱好者对黑客技术文 章或者新闻等方面在网上进行评论交流。
九、网站拓扑图
网站主页
网国
黑
等
站内
客
级
首黑
简
区
页客
介
分
爱
黑
好
客
报
交
名
流
表
版
黑黑
相
客客
关
分新
电
类闻
影
中中 中 华 国国 国 夏 黑红 第 联 客客 八 盟
联
军
盟
团
黑红 蓝 客客 客
十、实训目的 1． 更好的熟悉和掌握网站建设的基本流程和技术规范；
5、国内黑客网站：该栏目的主要目的是让用户了解国内四大有名 的黑客网站：中国黑客联盟，中国红客，中国第八军团，华夏联 盟。 6、相关电影资源：该栏目主要是为用户提供有关黑客的电影。
7
Web 前端课程设计
河北师范大学汇华学院
7、爱好者报名表：该栏目主要是让爱好者通过报名的方式成为我 们中的一员，进行更进一步的学习。
功能要求：该网站首页必须包括网站 logo、导航条（带有鼠标事件变化效果）、banner
（简单 flash 动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带
有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之 间通过超链接切换。
最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验 收开发的系统。
5
3. 学生答辩
5
小计
60
1. 结构完整，条理清晰（封面、任务书、教 10
师评语、目录、正文内容、小结、参考文献）
2. 独立完成
5
3. 描述工具使用恰当：网站拓扑图
5
4. 制作步骤描述清晰
5
5. 报告内容充实
5
小计
30
考勤
5
认真完成，勤于思考，积极提问
5
小计
10
总计
100
得分
成绩
2
参考方案：
Web 前端课程设计
8
Web 前端课程设计
河北师范大学汇华学院
2． 运用 flash 动画制作软件设计网页中动画的知识；
3． 巩固运用 Fireworks 图像处理软件进行网页中图形制作
4． 综合使用 Dreamweaver、Flash、Photoshop、Css3Menu 四
个软件完成网站的建设，可以独立构思并设计出内容完整图文
旅游地图片，体现网站主题。图片和文字部分采用浮动形式，让网站
五、网站建设方案
在黑客学习网站的建设中，前期准备至关重要的，要有明确的
做网站的根本目的。该黑客学习网站通过黑客的介绍、黑客新闻以及
黑客攻防技术的宣传，大大的提高了网站的知名度。由于信息化时代
6
Web 前端课程设计
河北师范大学汇华学院
的很多漏洞，大多数人没有全面的意识，且很大一部分人对黑客十分
感兴趣，因此黑客学习网站的存在想必给很爱好者们大量的信息量和
客户对其拟建的黑客学习网站提出的主要要求有以下几点：
1、宣传信息安全的重要性，提高人们对信息安全的认识，增加网
站的知名度。
2、适时地发布最新黑客新闻和技术，为学习者提供最佳资源。
3、在网上发布报名表，引进国内外的爱好者来此学习交流。
4
Web 前端课程设计
河北师范大学汇华学院
4、网站上要设有爱好者交流留言板，用户可以网站新闻和技术文
9
Web 前端课程设计
所掌握技术，效果好。
河北师范大学汇华学院
5． 综合优化。链接正确、得当，动态效果好（时间轴动画、
行为、代码的嵌入等）
6． 网站测试并递交。在浏览器中对完成的网站逐页打开测试，
包括链接正确与否，页面打开时间，图片和动画是否丢失等。
十二、实训项目
1、网站基本介绍
网站的主题是:游览天下行，快乐共分享。背景图片均为国内外知名
目录
河北师范大学汇华学院
开发背景…………………………………………………………………………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
二、前期准备
本网站是以信息安全类为主体设计，系统的介绍了黑客攻防的新
闻的知识。
三、客户需求分析
客户需求是指客户创建本网站的目的和对网站建设提出来
的特定的要求。
了解客户的需求，是建好黑客学习网站的前提。黑客学习网
站通过互联网可以更好的开展信息技术的交流、学习和网上报名等活
动。这样可以提高网站的访问量、知名度，也是网站业务的重要来源。
性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览
的简洁与方便。从而更能衬托网站的主题，若色彩能与主题合理搭配，
将会增加网站的易读性。
黑客学习网站选定的主题色是黑灰色。因为若是要打开一个黑客
方面的网站，每个人的头脑中肯定都是黑色或者灰色，即为较暗淡神
秘的颜色。能给吸引更多用户并给用户一种神秘感，很适合黑客学习
（要求原创），进行主页其余图片的设计和页面内容的录入，
最后进行主页的整体优化设计。
3． 网页设计。除主页以外的网页设计，首先设计网页模版，
一部分网页由模版生成，一部分为单独设计（依据实际需要确
定哪些网页由模版生成，确定哪些网页单独设计）。包括版面
设计和图形设计、内容录入等。
4． 动画设计。主页动画设计和其余页面动画设计，充分运用
章进行评论和留言交流，对于网站的改进和更新很有帮助。
四、网站风格定位
网站风格是指网站的整体形象给浏览者的综合感受。这个整体形
象包括站点的 logo、标志、色彩、字体、标语、版面布局、浏览方式、
交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游
网进行定位。
1、色彩
网站的色彩是浏览者整体的视觉感官，如果网站的色彩具有一致