郑州电力职业技术学院
毕业设计说明
题目： 动漫网站毕业设计
系 别 信息工程系
专 业 计算机应用技术
班 级 2012届计算机2班
学 号 ************
姓 名 杨 松
| 论文成绩 | | 指导教师 | 白燕青 |
| 答辩成绩 | | 主答辩教师 | |
| 综合成绩 | | 答辩委员会主任 | |
摘 要
随着互联网的飞速发展，电脑网络已应用到各个领域，普与到千家万户,无论是国内还是国外都迅速的发展起来。现在，网络已经成为人们快速获取信息、发布信息和传输信息的主要渠道，成为每个人生活中的一部分，同时网络也提供了一个很好的信息交换平台。
目前，网页设计和网站建设成为新时代的一个热点。网络已经渗透到各个领域，无论是企业还是个人，网络为我们提供了很好的信息交流平台。利用网站宣传自己的、企业利用网站宣传自己的形象、学校利用网站宣传自己的教育、个人利用网站展示自己的个性风采。越来越多的人都希望拥有自己的个性网站，展现自己的个性风采。通过建设网站，我们可以展示自己，与别人交流学习，求职等等。
本网站主要从Adobe Dreamweaver入手，实现网站系统的主页浏览模块、从网站设计的主页、界面设计方面研究。
论文主要论述了本人所做毕业设计课题《动漫主题网站设计》的技术背景、设计理念、概要设计、详细设计以与最后效果展示等方面内容，详细的介绍了本人对于设计简单网站的一套设计过程和相关技术难点的解决方法。
关键词：动漫网站；Dreamweaver；网站设计
引 言
随着科技的进步、时代的发展，计算机信息行业也逐步壮大，人们也越来越离不开各种各样的信息，人们对信息的追求越来越迫切。
网站作为网络信息主要的表现形式而且还是互联息的主要承载者，在互联网上表现出了它与其重要的地位，并发挥着与其重要的作用，无论是国内还是国外都迅速的发展和壮大，并被人们重视。网站的迷人之处在于它综合使用文本、图像、声音、动画视频信息和内容，具有丰富的多媒体表现与互动特点。毋庸置疑，网站已成为最吸引人的也是最有效的信息传递的手段与方式。随着网络技术的逐步发展，各类网站纷纷出现。
随着动漫产业，动漫文化的不断发展，动漫已经从过去的低年龄层向全民动漫方向发展，动漫产业链逐步完善，喜欢动漫的爱好者越来越多。当然市场需求量也在不断增长，越来越多的动漫爱好者在这一领域能希望得到更多动漫资源，获得更多的一些能满足他们各种爱好的资源集中地，而动漫网站则包含了动漫和动漫论坛，满足了广大动漫迷的需求，逐渐形成了动漫一种文化特色存在。
一 概述
（一）软件的选用与简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台和跨越浏览器的充满动感的网页。Dreamweaver具有制作效率高、操作直观、简单易学、站点管理方便等无可比拟的控制能力优势，但它也同样存在着难以精确达到与浏览器完全一致、不能实时更新、不能对大量信息进行更改、操作不方便、页面原始代码难以控制等不足。本设计选用的是Dreamweaver CS6。
Adobe Photoshop CS4作为Adobe公司出品的最出色的图形图像处理软件，Photoshop以其强大的功能向我们证明着它的名至实。在网站设计时一些图片素材如背景图片、按钮、LOGO等在运用到网站前基本需要用Photoshop做适当的处理。（如图1-1）
图1-1 一些被PS处理过的图片
（二）选题的目的和意义
动漫作为一个文化产业，以其独特的优势，新颖的特点，广大的受众，的扶持，迅速在各个市级城市体现价值，各个地方也都把动漫产业作为经济新的增长点，与此同时，大量动漫从业者涌入社会，各种机会，挑战应运而生，动漫市场的虚火与杂化为目前主要表现特征，从业者面临更多困境，从而有些转入相关行业。
在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，因此网站建设在Internet应用上的地位越来越重要了。目前Internet上已有上百万个web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大。动漫设计网站成为越来越多动漫爱好者和非动漫爱好者获得信息和交流的平台，它满足了广大用户随时随地进行交流和沟通的需要，为网上用户提供交流场所，实现高效动态信息交换。
现在虽然有很多动漫网站，但版面千篇一律，缺乏个性化、前瞻性、页面设计混乱，不利于用户查看，因此我针对以上问题设计一个个性化、能个用户带来特殊视觉感动的动漫网站。网站实现的基本模块有显示动漫杂谈信息，在线观看动漫影片，动漫爱好者可以根据自己的需要进行浏览，本网站的主要特色是页面新颖友好，内容直观，操作简单方便，适用于广大动漫爱好者。
（三）课题研究的主要简介
现在互联网是社会发展的必然趋势，很多人已经意识到网络强大生命力和它在未来将要处于的重要地位。他们进行钻研并且努力进入到一个新的空间、新的领域。其中包括动漫网站。
在我们的日常、休闲生活当中，越来越多的人喜欢观看动漫。就这个课题的研究，因为是介绍动漫的网站，所以我只选择了自己擅长和喜爱的动漫内容，在突出动漫的风格个性和特点的同时，还应用了我所学过的的网站设计技术和Photoshop技术等。
二 设计准备
“动漫网站要发展，要从动漫爱好者的需求出发，网页设计是一门新兴起的设计类，近几年来随着网络的发展而逐渐受到人们的重视，它自己本身以网络作为载体,把各种各样的信息以最快捷、方便的方式传达给大家。一个网站项目的确立一般是建立在各种各样的需求上面的，这是动漫网站，所以这种需求一般来自于动漫爱好者，其中每个人的实际需求占了绝大数部分。因此如何更好地了解、分析需求，并且又能够准确、清晰地以文档的形式表达出来，保证开发过程以动漫爱好者的需求为目的正确项目开发方向进行。
（一）设计愿望
越来越多的人喜欢上动漫，这就出现了越来越多的动漫网站设计以与推广的工作和任务。
就我个人来说，我之所以在毕业设计的时候选择这个课题是因为我自己也是一个动漫爱好者，在互联网上拥有我自己的一席之地，从而真正的参与到互联网中去，做个网络新时代的主人，同时也希望自己喜欢的一些动漫能够和大家一起分享，和互联网上的朋友一起分享。
（二）确定网站主题
做网站，首先必须要解决的就是网站内容的问题，即是确定网站的主题。如果自己在某些方面越有兴趣，或掌握的资料越多，就可以做一个自己感兴趣的东西。你可以有自己的见解，做出自己的特色网站。当然，也可以推销自己，让别人了解自己，和别人进行沟通和交流，展示一些自己的东西，让大家更好地了解自己。对于内容主题的选择，要做到小而精，即主题定位要小，且内容要精。不要去试着作一个包罗万象的站点，这往往会失去你的网站的特色，也会带来很大的劳动，给网站的与时更新带来更大的困难。我的网站主题是以我个人喜爱的动漫来制作的，介绍了这部动漫。
（三）确定网站形象
网站形象的设计可以从网站的LOGO、网站的色彩、网站的字体宣传语等这些方面着手。
网站色彩，网站给人的第一印象来自于视觉的冲击，不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”指的是能体现网站形象和延伸内涵的色彩，给人们一种以整体统一的感觉。我个人网站的色彩是以浅蓝色色为主，浅蓝色的字体和浅色的图像给人一种舒服的感觉，仿佛生活在虚幻的世界里。
网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的一些特有字体。为了体现网站所特有的风格，可以根据自已的网站所表达的内涵，选择更贴切的字体。（如图1-2）
图2-1 我的动漫网站LOGO
（四）确定网站内容
我的动漫网站大体上包括了一些内容：首页、关于宫园薰、人物介绍、在线观看、动漫简介等动漫网站常用内容，方便的大家的浏览。
三 各模块简介
一个网站的首页其实是一个文档，当一个网站服务器收到一台电脑上网络浏览器的信息连接请求时，便会向这台电脑发送这个文档。当在浏览器的位址列输入域名，而并未指向特定目录或档案时，通常浏览器会打开网站的首页。
网站首页往往会被编辑的很易于了解该网站所提供的所有资讯，并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容，我的动漫网站的首页给大家一目了然的感觉，打开首页就可以了解我的个人网站的设计风格还可以看到一些特定的功能，大家可以尽情地浏览其中的信息。
（一）首页模块
介绍了一些关于动漫《四月是你的谎言》的的基本信息，比如女主角的姓名、学校、兴趣爱好、还有一些动漫里的经典语录、包括网页背景音乐等。希望大家可以进一步的了解《四月是你的谎言》这部动漫。如下图1-3所示。
图3-1 网站首页
（二）关于宫园薰
介绍了宫园薰的一些基本信息，里面有宫园薰的资料（宫园薰，女，市立墨谷中学初三学生，小提琴手。家中开蛋糕店，喜欢小孩子，乐观开朗，元气十足。积极向上的心态也感染了身边的人，有时候意外的会说出意义深刻的话或者引言。 喜欢美食，特别是甜食。）如下图1-4所示
图3-2 关于宫园薰
（三）人物介绍
在这里介绍了《四月是你的谎言》动漫里的一些主要登场人物包括男主角有马公生、女主角宫园薰、泽部椿、渡亮太、相座武士等。还有旋转字特效、网页背景音乐、论坛导航、留言信息、和一些最近访客。如下图1-5所示
图3-3 人物介绍
（四）在线观看
在线观看这部分中列举出了《四月是你的谎言》22集缩略图与观看地址网页的底部还有一些网友自己制作的动漫相关MAD和观看地址，本页面同样包括了，旋转字特效、论坛导航、留言信息、最近访客等。如下图1-6所示
图3-4 在线观看
（五）动漫简介
在动漫简介这部分中介绍了《四月是你的谎言》这部动漫得过的相关奖项、出版时间、动漫剧情介绍、和《四月是你的谎言》幕后制作工作人员表。
《四月是你的谎言》是由日本漫画家新川直司作画的漫画。曾获得讲谈社漫画赏少年部门奖。故事讲述了拥有少见才能的中学男生（钢琴家），和女生（小提琴家）共同努力、成长的青春物语。在2014年3月21日举行的noitaminA的10周年纪念活动”noitaminA发表会2014 ～10th Anniversary～“上，《四月是你的谎言》宣布TV动画化[1-2] 。电视动画于2014年10月9日首播，全22话。在2015年5月15日发售的漫画最终卷第7卷特装版，会同捆推出OVA动画。如下图1-7所示。
图3-5 动漫简介
四 具体实现与分析
（一）静态设计
先用Dreamweaver进行布局和排版。
（二）站点的建设与收集素材
创建本地站点的具体操作步骤如下：
要制作一个网站，第一步操作都是一样的，就是要创建一个“站点”，这样可以使整个网站的结构清晰地展现在面前，避免了以后复杂的管理。 打开Dreamweaver从菜单中选择“站点/新建站点”在弹出的对话框中填写目录和指定文件夹，输入站点名称和默认的存放图像的位置。在文本框中输入自己已经想好的网站名称“个人网站”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。 在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定一个空的文件夹“D:/ys”。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，这样，一个站点就算建好了。
收集素材：
收集一些网站所需要的素材，比如图片、音乐、文字等。做网站前的一些准备工作也是很重要的。只有有了充足的准备我们才能把网站做好。因此在做网站前我们必须把做网站的过程中可能所需的所有的材料都准备好，这样才能做出让自己和大家都满意的网站，而不至于在做的过程中乱了手脚。图片的LOGO如下图1-8所示
图4-1 LOGO展示图
（三）HTML语言
要想建出专业的Web页面，就要学会利用HTML来编写网页。HTML(Hypertext Markup Language)超文本标记语言，是用于编写网页的主要语言。它是纯文本的类型的语言，语法非常的简单。它通过对各种标记、元素、属性、对象等的设置来建立与图形、声音、视频等多媒体信息以与对其它超文本的链接。一般典型网页应该包括如下HTML代码：
杨松的毕业设计-四月是你的谎言
春天 马上就要来了
让我与你相遇的春天 就要来了
再也没有你的春天 就要来了
---有马公生
经典语录
其中，
与之间是网页的标题，一般被显示在浏览器的标题栏中。与之间可以声明和定义变量、方法，还可以加入java-script/vb-script等一些脚本语言。与之间是网页的主要内容，任何网页元素都可以加入其中。例如在主体中可以加入与标签是定义了一个层，加入与标签是定义字体样式，加入标签是定义一个CSS样式等。（四）用框架表格进行布局和排版
主页面使用的是上方固定，左侧嵌套的框架共四个网页。然后在main、top和left每个网页中又嵌套了一个表格那是整个版面看起来更加整齐、清晰。
Top中的表格用来组织页面头部的元素（下称“头表格”），在设计视图下将鼠标光标置于网页编辑区，点击“插入”→“表格”，设置2行、3列的表格，“表格宽度”1000像素，“边框粗细”为1，点击确定。选中表格在属性控制面板中设置对齐方式为“居中对齐”。
然后再将第二行单元格合并。并插入所需要的元素。
Left中再插入一个2行1列的表格，用来组织左边页面的主体内容，其它属性同头表格。
再填入所需内容，并加入超链接。
最后再在Main网页中插入一个1行2列的表格，用来组织页面的主要内容元素。 “边框粗细”为1，设置表格为显示边框。
（五）添加网页元素
利用设置表格图片、插入图片等形式添加网页图片元素。利用键盘输入或复制粘贴等方式添加文字，文字颜色设置为红色。
（六）旋转字特效
代码如下
- 干燥的空气
- 尘埃的味道
- 我在其中
- 踏上旅途
（七）网页设计过程图
如下图1-9 2-1所示
图4-2 网站设计过程
图4-3 网站设计过程
致 谢
毕业设计完成之际，我由衷地感谢司老师的大力帮助和支持，感谢我的同学和朋友，在我遇到各种各样复杂问题的时候，给予我鼓励和帮助，使我分析问题和解决问题能力有了很大提高。
本论文是在白老师的悉心指导下完成的。白老师渊博的专业知识，诲人不倦的高尚师德，严以律己、宽以待人的崇高风范，朴实无华、平易近人的人格魅力对我影响深远。不仅使我树立了远大的学术目标，还使我明白了许多待人接物与为人处世的道理。所有这一切都将成为我受益终生的宝贵财富!本论文从选题到完成，每一步都是在导师的指导下完成的，倾注了导师大量的心血。在此，我向导师表示崇高的敬意和由衷的感谢！我在研究思想方法上得到了启发，并且在研究工作中采用他们的部分研究成果与资料。尽管与他们为我付出的一切相比，所有的语言都显得苍白无力，但我仍要真诚地说声:谢谢!
感谢三年来各位老师和同学对我学习、生活的关心和帮助。在论文即将完成之际，我的心情久久无法平静，从开始进入课题到论文的顺利完成，有多少可敬的师长、同学、朋友给予了我无言的帮助，在这里请接受我诚挚的谢意！
最后感谢我的母校—郑州电力职业技术学院三年来对我的栽培。毕业设计完成之际，我由衷地感谢信息工程系各位指导老师们的大力帮助和支持，感谢热心的同学与朋友，在我遇到种各样复杂问题的时候，给予我鼓励和帮助。
参考文献：
[1] 前沿电脑图像工作室 编著.《精通Dreamweaver8》.北京：人民邮电出版社，2007.
[2] 杨尚森.网页设计与制作[M]（第三版）.北京：电子工业出版社，2010年.
[3] 王君学.网页设计与制作[M].北京：人民邮电出版社，2009年.
[4] 王映雪.HTML网页制作[M].北京：清华大学出版社，2009年.
[5] 谢希仁.计算机网络(第五版)[M].北京：电子工业出版社，2008年.
[6] 耿跃鹰.网页制作与网站开发：从入门到精通［M］.北京：清华大学出版社，2008年.
[7] 唐永明.浅议网页设计与制作[J].科技信息.第20期,193页.2009年.
[8] 胡珊.个人网页设计与制作[J].电脑学习.2009年.
