火影忍者网站设计与实现.pdf

目 录 一、内容简介 1 1.1 背景与意义 1 1.2 资料收集和分析 1 1.3 方案设计 1 1.4 方案的实施 1 二、产品分析 2 2.1 方法分析 2 2.2 过程分析 2 三、设计草图 2 3.1 网站栏目策划 2 3.2 网站布局策划 3 3.3 LOGO 草图 5 四、设计效果图 4 4.1 首页效果图 4 4.2 二级页面 6 五、过程图片 11 5.1 Banner 图片 11 5.2 框架代码错误!未定义书签。 5.3 CSS 样式 错误!未定义书签。 六、设计创意说明错误!未定义书签。 七、设计总结错误!未定义书签。 一、内容简介 1.1 背景与意义 随着现如今互联网的发展，网络已成为现如今人们不可缺少的一部分。看电视，追 剧已成为人们网上放松的一种方式。那随着网络的发展，和外国文化的影响。越来越多 的人们开始喜欢看日本动漫。“二次元”，“宅男”等词也成为网络热词。而我想向大 家介绍一部其中最火的动漫之一《火影忍者》。其中故事情节令人回味，也向我们介绍 了他们本国的文化。 在这个网络飞速发展的时代，互联网将我们整个世界都链接在了一块。地球也成为 了地球村，我们能见识到外国优秀的作品。在此我想选择自己的爱好，把自己认为好看， 有意义的东西介绍给大家。 在如今网络发展的时代，追番似乎成为了人们的常态。许多人经常沉醉于此甚至出 现了“番荒”，无番可看的尴尬地步。常常想看一些优秀的作品但是却不想浪费自己的 时间去踩坑。而《火影忍者》由日本著名的漫画家岸本青史所创作。而仅仅只是中国的 播放量就上百亿。每年还在上涨热度不减。其中关于朋友同伴的诠释更是获得了许多人 的认可。本设计就是介绍了这部作品的大纲以及主要人物。希望大家通过对这部动漫的 介绍从而对于动漫有一个新的认识。然后通过一个网页的形式让许多没看过的人们见识 到这部动漫的魅力。 1.2 资料收集和分析 本设计使用了DW 软件制作一个静态网页，其中图片素材通过自己百度然后自己所 整理出来。关于网页制作则通过div+css 等相关书籍查找以及自己理解.而文案则通过贴 吧粉丝和百度介绍外加自己整理。 1.3 方案设计 主要介绍了《火影忍者》这部动漫，其中网页中首页介绍了大纲。然后分为了五个 子页面包括了火影简介.热门人物.传说三忍.咨询八卦以及贵宾留言。其中咨询八卦中又 分为十二个子页面。里面是一些关于网上粉丝对于火影的看法及感悟。 1.4 方案的实施 1.制作环境： （1）硬件环境：intel(R) Core(TM) i5-825ou CPU@1.60GHz 8GB 的内存 64 位操 作系统，基于X64 处理器 （2）软件环境：平面制图工具Adobe Photoshop 版本为 CC 2017；网页制作工具 Adobe Dreamweaver 版本为CS6 2.制作流程： 1 本毕业设计操作步骤如下： （1）2019 年11 月完成了毕业设计选题，确定想做一个介绍自己喜欢的动漫网站 （2）2019 年11 月查阅了网页制作的一些资料。整理出火影的大纲，收集素材图片。 主要来自火影忍者网和贴吧以及动漫简介然后加上自己的理解。并请教指导老师。 （3）2019 年12 月确定了火影忍者网站的设计，明确了网站要提供和发布的内容。 （4）2020 年 3 月咨询指导老师后，初步完成这个静态网页的框架.色彩.文字和图 片等设计。 （5）2020 年 5 月根据学校有关毕业设计报告撰写规范，完成了毕业设计报告的撰 写工作；并对设计报告初稿做出修改和完善。 二、产品分析 2.1 方法分析 本设计主要使用了Photoshop 和Dreamweaver 两个软件。 Photoshop 的作用主要 是用来修改素材美化图片和调整图片大小。然后再用 Dreamweaver 编辑语言采用 “html”。用div/div打好框架和制作内容，用a/a引入超链接，用css 调整样 式（如字体大小、颜色、阴影等），完成整个网页制作。 2.2 过程分析 1.搜集素材 2.制定站点 3.整理规划 4.页面布局