动漫网页设计

摘要本论文主要论述了本人所做毕业设计课题《动漫网页制作》的技术背景，设计理念，概要设计，详细设计以及最后效果展示等方面的内容，通过网站系统工程建设思想突出网站建设框架概念。随着时代的发展以及技术的进步，互联网在人们的生活中占比越来越多，人们的许多活动因为有了互联网而越发的便捷，其中包括有金融、娱乐、科研以及新闻等等。而随着用户的需求逐渐增加，越来越多的网站运营而生，比如动漫网页，游戏网页，电影网页等等。而网站则是由一个个小小的网页组合而成，没有网页就没有强大的网站。目前虽然有许多形形色色的网页，但是许多网页的页面不够简洁，太过于繁琐，因此为了优化各种用户的使用我决定设计一个页面简洁，内容充实的动漫网页页面简单操作方便的同时优化用户使用感受。因此我的目标是做一个页面简洁，内容充实的动漫网页。网页实现的基本模块有显示新推出的动漫和最近比较火的动漫信息以及倍受喜爱的动漫人物信息等等。动漫爱好者们可以通过导航栏寻找自己喜欢的动漫内容。关键词：动漫网页；2MySQL；3Dreamweaver；网页制作

目录TOC\o"1-2"\h\u31813摘要 一、前言随着社会信息网络化的发展，人们获取信息的途径越来越依赖与Intrenet。同时休闲娱乐方式也发生了巨大的改变，从之前的棋牌喝茶，到现在各种各样的娱乐方式，每个人都有不一样的休闲活动，对于那种部分休息时间就像在家里看看电视的人来说，视频、动漫就成了不可或缺的一部分，以前只能从电视上来看视频，翻来覆去的换台也就那么几个能看的节目，现在可不一样了，现在的视频光每个分类你就眼花缭乱，根本看不过来，所以在这个时代的发展下，各种各样的视频网站孕育而生，并且随着互联网的继续发展网络上的视频种类越来越多，同时越来越多的视频成为了VIP用户的专属，导致有些用户感兴趣的视频无法在线观看和浏览，同时随着互联网视频的发展，动漫的传播越来越广泛，能够足不出户在家看到各个国家的动漫，动漫网站运营而生。而对于喜欢看动漫的用户群体来说动漫网站则更容易获得青睐。二、动漫发展前景（一）发展前景根据中研网的分析2020年，我国动漫产业产值已经突破2000亿元。这是一个什么概念？这标志着动漫行业正在以一个难以想象的速度飞快发展，推动动漫的发展的同时也能够推动国家的经济发展，根据中研网上获取的资料从2009年开始国家每年都会进行全国动漫企业认定工作，目前，全国共有924家国家认定的动漫企业，其中国家重点认定的动漫企业有43家。而且根据用户群体的调查来看动漫网站的用户群体趋于年轻化多以95后与00后居多，随着时间的推动，动漫的受众群体将会越来越庞大，并且随着用户粘性的不断增强，用户的消费潜力将进一步的被挖掘，根据以上资料说明动漫网站的发展前景十分良好。并且中国曾经的水墨画动画在全世界也是数一数二的，曾经使得动漫大国日本的动漫作家宫崎骏来到中国取经，并且水墨画的经典作品十分之多比如《小蝌蚪找妈妈》《大闹天宫》《葫芦兄弟》《神笔马良》《黑猫警长》《天书奇谭》《阿凡提》《女娲补天》等等许多精彩的动画，但是随着时间的流逝，以及国家技术的进步，水墨动画越来越沉寂了，但是近几年的国产动画也有了许多代表作品比如《大圣归来》《姜子牙》《佣之城》《魁拔系列》《大鱼海棠》《哪吒之魔童降世》等等，但是我也希望随着动漫的发展能够让中国曾经的水墨动画重新回到大众的视野。而且随着国家对进口影片配额限制的改动，将会有越来越多的境外动画电影和国产动画电影同台竞技，这个举动能够促进国产动画电影技术水平及创新性的提升。因为以上的原因所以我十分看好动漫网站的发展前景，因此想要制作一个理想的网页。（二）目的我制作动漫网页的目的有三，之一是想让更多的动漫爱好者能够免费看动漫，根据我对现在几个有名的视频网站的观察，发现了现在的视频网站很多类容都需要VIP才能观看，而且有很多的广告，我便想制作一个完全免费并且没有广告的动漫网页，以便于更过的动漫爱好者可以愉快的在互联网上观看自己喜欢的动漫。之二试想要改变现在很多网站的繁琐布局，因为现在很多视频网站内容过于复杂，对找寻自己感兴趣的类型很不方便，所以想要改变这个设计让页面更加的简单易懂，以此来达到自己想要改变如今视频网站繁琐布局的目的。之三是想为中国的动漫行业发展贡献自己的一份微薄之力。因为现在的动漫更加的多元化将更有意识创作面向全年龄观众的动画电影，同时兼顾低幼市场，使低龄向动画电影和成人向动画电影、合家欢向动画电影并驾齐驱，为创作者和观影者都提供广阔的空间，进一步推动电影市场的多元化。使我再电影市场多元化的进程中出一份微薄的力量。同时我也希望能够通过这次机会提升一下自己的网页编写水平，来为以后的工作打好基础，并且这方面也是我所感兴趣的，所以我十分开心能够在自己力所能及的范围内为互联网用户建立一个免费的动漫网站。三、分析（一）用户需求根据各大现有视频网站的分析，新的网页将配备登录系统，用户只需要点击登录，输入自己的账号密码即可进入自己的账户，系统会根据账号的喜好推荐合适的动漫登陆系统中还有观看历史功能，方便用户查看自己的观看记录。同时配备了动漫的推荐排行榜单，在榜单上的动漫都是最近的大火动漫，通过与用户账号之间的联系，推荐的动漫都是符合用户喜好的，为不知道看什么的动漫爱好者提供了更多的选择性。在网页的最右边还配备了搜索功能，用户只需要将自己想看的动漫名称输入进搜索栏中，再点击搜索按钮，页面即可跳转到用户搜索的动漫页面去，省去了挨个查找的烦恼，为用户的使用提供了便捷。并且设置了动漫类容的分类选项，只需要点击自己想看的分类，网页便会跳转到相应的页面，该页面中的动漫全是符合该分类的，可以筛选自己想看类型的动漫，这样就可以不用一页一页的去翻找自己想看的动漫。同时该网站还具备下载选项，用户在浏览过该动漫后如果觉得喜欢便可点击右方的下载按钮将动漫下载到自己的手机中，方便用户们将喜欢的动漫现在到手机中离线观看，这样在电梯中也能在动漫的世界中畅游。在具备以上功能的情况下我想添加一个评论功能，用户只需点击评论便可看到其余用户对该动漫的评价来看见其余用户对该动漫的观点，这样的话动漫爱好者就可以在观看动漫前了解到其他人对该动漫的客观评价。当然，留言板功能必不可少，这个功能是加深动漫爱好者之间沟通的最好方式，用户只需要点击留言板在留言板中输入自己想要留下的话，比如对网站有哪些期望，网站哪些方面做得不好，需要了解那些动漫资讯之类的，其余的用户便能了解到该用户的需求，并可以与其沟通，我们也能及时获取用户对于该网站的意见，并及时的维护网站，提高用户的使用体验。而且网页的布局我希望更加的简洁，可以一眼看过去就知道自己想要的功能在什么位置，优化了用户的使用体验，而且简洁的页面也能给用户带来更好的使用感受，我希望我做的网页是一个一眼看过去只有动漫，没有其他东西的网页，这样的网页才是动漫爱好这喜欢的网页。用户们需要的只是一个使用方便，页面简洁，能够满足日常所需，以及能够随时观看与随时交流的网站。（二）经济可行性根据动漫对经济的影响发现，全球的动漫产业本身就在增长并且在动漫产业中动画电影市场对经济发展的贡献最为瞩目，近几年上映的动漫电影数量是一年比一年多，比如哆啦A梦系列、大侦探皮卡丘、疯狂原始人2、哪吒之魔童降世、姜子牙等等动漫，其中包括了徐国近几年精彩的国产动漫，但是更多的还是国外的动漫电影。随着国内紧急的发展，动漫市场也面临这巨大的挑战，随着动漫企业的增多，市场面临着供不应求，动漫行业有进一步洗牌的强烈可能，但好在一些动漫细分市场仍然有较大的发展空间，信息化技术将成为核心竞争力！根据研究来看，在2017年，世界动画电影产业规模已经达到2540亿美元并持续保持增速，预计到2020年将达到2700亿美元，产业各领域平均增速约为2%。除此之外，与动漫产业紧密相关的国际IP授权产业发展增速不减。2017年世界授权产业规模达到2716亿美元，同比增长3.3%。授权金规模达到145亿美元，同比增长2.6%。亚洲、拉美等分别增长6.2%和7.6%，是增长最快的地区。中国近几年的动漫产业增长也是十分的迅速，与巴西和日本并列为增长最快的国家。经过几十年的发展，动漫这个行业已经成熟起来，然而真正靠动漫赚钱的大头其实是与动漫相关的周边、玩具、饰品、以及各种应用之物等等，动画越火IP越大。国产动画品牌《熊出没》已有成功案例，其衍生品年产值达25亿元。据了解，“熊出没”的衍生品现有3000多款，合作超过200多个授权商。随着中国的信息发展，动漫行业越发的受欢迎，并带动了与动漫相关的众多企业经济发展，同时也促进了国家的经济。2017年，我国国内动漫产业产值已经达到了1700亿元人民币，占国内生产总值比重达到0.2%，预计到十三五末期，国内动漫产业产值要达到2500亿元人民币。并且以动漫为主玩具，饰品以及相关周边也有着十分庞大的经济市场，并且随着用户黏性的逐渐增强，用户的消费水平也会有所提高，所以推动动漫发展可以带动国家的经济发展，就经济可行性来说，制作动漫网页是可行的。（三）技术可行性在代码编写方面我选择Dreamweaver8提供了功能全面的编码环境，支持手工编写HTML代码，也提供可视化编辑功能快速地创建网页，其强大的功能使用户大大地提高了网页制作的效率，而网页的美化方面我将使用Photoshop这个软件来美化网页，Potoshop是一个拥有强大美化图片功能的软件，网页的数据库则使用MySQL，使其更加的符合我的设计初衷，来达到想要的效果。网页的材料也可以在互联网上查找。根据用户需求分析我们可以得出，用户在使用动漫网页时的主要目的是能够在线或者离线观看动漫并且能够与其他的动漫爱好者相互交流沟通。因此主要实现功能为：显示动漫信息、能够提供在线或离线观看动漫、留言本三个板块。因此我选择MySQL为存放信息的数据库，因为MySQL使用的SQL语言是用于访问数据库最常用的标准化语言。而且MySQL使用简单，操作方便，并且数据库体积小、速度快、总体拥有成本低、开放源代码等等，许多中小型的网站开发都会选择MySQL作为网站数据库。而且MySQL还有许多其他的优点，比如：支持AIX、FreeBSD、HP-UX、Linux、MacOS、NovellNetware、OpenBSD、OS/2Wrap、Solaris、Windows等多种操作系统、提供TCP/IP、ODBC和JDBC等多种数据库连接途径等等，并且MySQL的数据库处理功能也非常的强大，能够处理拥有上千万条记录的大型数据库，因此我选择MySQL作为该网页的数据库。所以根据自己掌握的技术与材料而言，制作一个动漫网页是可行的，所以技术可行性与经济可行性都可行，网页制作开始。四、网页的建设流程（一）网页是什么网页是什么呢？网页是构成一个网站的基本元素，是承载各种网站应用的平台。同时网页也是一个包含HTML标签的纯文本文件，它可以存放在世界任何一个角落的计算机中，同样也是万维网中的一“页”，是超文本标记语言格式。是一个适用于万维网和网页浏览器的文件，它存放在世界某个角落的某一部或一组与互联网相连的计算机中。html(超文本标识语言)是web页面的描述性语言，无论是在web上发布信息，或者是编写可供交互的程序，都离不开html语言，可以说在网页制作技术日新月异的今天，html语言是任何高级网页制作技术的核心与基础。网页经由网址(URL)来识别与访问，当我们在网页浏览器输入想要访问的网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户家的计算机，然后再通过浏览器解释网页的内容，最后将网页内容清晰的展示给用户。（二）前期策划在制作网页之前我前往各大现有动漫网站获取了很多相关的知识，并且根据现有的网站，同时我将许多如今网络上大火的动漫进行整理，也在互联网上查找了许多自己需要的素材。并且我将使用Dreamweaver、Html、MySQL、phtoshop等开发工具，Dreamweaver是创建专业网站的最佳工具，开发人员可以在一个开发环境下快速实现网站以及互联网应用程序的创建和管理。HTML，文档的基本结构，网页中文本的处理方法，用来创建超链接、列表、框架、表格、表单等页面元素的标记，用来嵌入多媒体和脚本的标记，CSS样式的使用，以及DIV+CSS网页布局方式。MySQL是一个存放信息的数据库具备查询、表、窗体、页、宏、模块、报表等功能。Phtoshop具有强大的图像修饰功能，是一个图片美化软件，它可以用来制作、美化网页的背景图片，而且是可视化的操作，可以让设计师更方便的进行操作。（三）框架规划、素材收集在框架方面我打算制作偏简约，上方一个导航栏，导航栏的右上方是一个搜索功能，在导航栏的下方则是四个推荐动漫的板块，每一个板块中都有许多热门动漫，在推荐板块的右方则是动漫的排行榜，用户可以直截了当的看见最近动漫的排行，给用户们提供了更多的选择可能，目前的框架规划就是如此。最上面一行是导航栏，下面的四个模块是推荐的分类，然后左右边的那一列是最近的动漫排行，这种布局可以让动漫网友们一眼就看出最近比较火热的动漫以及上新的动漫有哪些，也可以方便网友们自己选择想看的动漫类型，画面布局显得十分简洁干净。也能便于让不知道看什么的用户有所选择，同时提供了动漫的分类，让用户们可以直接点进此分类的动漫提高了用户的使用体验。相关素材的整理主要是在互联网上搜索自己所要的网页信息，主要包括图片、文字、动漫相关的新闻、最近新推出的动漫人物信息以及备受观众喜爱的动漫信息等等。同时也去查询相关的书籍，百度搜索动画的图像资料。要想给浏览者带来更好的使用体验就要尽可能多的收集相关资料，资料收集的越丰富之后制作网站就越容易，只有将资料收集的足够完整才能让网站更加的完善，这样做出来的网站才能叫做一个好的网站。（四）网页设计网站采用了Dreamewear的CSS样式与div标签进行主页与副业的排版，通过运用这个技术能够清晰明了的看到网页的各个布局。导航栏设计了七种热门类型的漫画分类板块更加的便捷，使用户能够有更良好的使用体验，方便用户直接进入自己喜欢的分类进行浏览，提高了用户的使用效率。深(彩色版)深(彩色版)深(彩色版)深(彩色版)五、动漫网页制作（一）主页规划主页的宗旨就是简洁明了的将内容完美的展现给浏览者，因此大部分内容会被隐藏，而精华部分的内容会被放在导航栏之下的四个推荐区域，导航栏使用div标签与CSS样式进行布局以达到理想布局效果，导航栏的几大分类，用户想选择那种类型即可点击进去，页面便会跳转到相对应分类的网页，方便了用户使用查找。如下图图5-1导航栏而推荐新番漫画区域所推荐的的全是当前比较火的新番动漫，用户可以直接点击进去便可观看十分便捷。并且推荐漫画下有该漫画的分类，可以使用户了解该动漫是否是自己想要观看的类型。如下图图5-2新番推荐区域还有登录系统也放置在主页，用户进入网页后即可登录自己的账号观看自己喜欢的类型动漫。同时该账号的历史观看记录也会保存用户之前看过的所有动漫，方便用户使用，提升了用户的使用体验。最下方的则是留言板功能，用户可以在这里留下自己的建议以及想了解的动漫资讯，其他的用户能够看见留言板中的内容，如果自己有兴趣便可在留言板内与其他用户进行沟通，同时通过留言板功能用户的建议我们也能及时知悉并尽量完善。（二）副业规划副页宗旨则是详细介绍此部动漫的主要内容，使其内容简洁明了，首先映入眼帘的便是该动漫的名称，在动漫名称下边则是动漫的内容简介以及该动漫的分类，能够让用户瞬间明白这部漫画主要讲了什么。如下图图5-3副页规划以及提供了该动漫的集数供用户选择，在内容介绍的下方便是该动漫所有的集数，并且还有该动漫的观看记录，可以看见用户之前看到那一章节了，方便继续之前的浏览，这样也省去了许多查找之前记录的时间，更加的人性化，优化用户使用体验。（三）网页制作本次项目主要为了实现网页的基础功能，由搜索功能，用户登录功能，动漫分类功能，动漫推荐功能，动漫热度排行功能，留言板功能和上新动漫推荐功能组成。首先使用Dreamewear建立一个网页并创建大小为<h1>的标题如图图5-4标题代码搜索框功能的实现，接着建立搜索框功能，搜索框用于搜索用户需要寻找的动漫，并将页面跳转至用户搜索页面，使用户的使用更加的便捷。待搜索栏建立好后，选择搜索栏代码，点击插入布局对象中的div标签，新建CSS规则并将其命名为navbar-header，并将规则定义为新建样式表文件，确定后点击保存，接着输入自己想要的规格即可如下图图5-5搜索栏代码导航栏的实现，为了让页面更加的简洁并且为了让用户有良好的使用体验，在建立完搜索框后继续建立该网页的导航栏，导航栏功能用于对动漫进行分类，并优化用户使用体验，需要看什么类型直接点击进去即可。首先插入该动漫分类的超链接并将每个导航栏按照该链接的分类进行命名。接下来创建div标签，并将CSS样式表命名为navbar-primary，如下图所示图5-6导航栏实现代码新番推荐区域的实现，新番推荐区为想看动漫但不知看什么的用户提供了更加方便的选择，并且在推荐区域中能够一眼看出该推荐动漫的所属类型。首先将新番推荐四个词插入为超链接，大小设置为<h3>并新建CSS样式表，插入div标签为panel-headingclearfix。推荐漫画区域的动漫名称设置大小为<h5>并插入该动漫的超链接，并用div标签video-info依次对其进行布局。而推荐漫画下方的分类则使用推荐动漫下面的标签使用<ahref="/type2/%E6%80%AA%E7%89%A9hits.html">怪物来达成。依次设置完后全选该分类插入另一个标签u1.thumbnail-groupclearfix如下图图5-7新番推荐区域如图，在新番推荐区域建立完成后，接下来便是创建漫画热度排名板块，热度排名板块能够让用户直观的发现最近的火热动漫，为不知看什么的用户提供了选择。热度排名板块的实现同样先创建一个div标签与CSS样式表panel-aside与u1.rank-groupclearfix，并挨个插入<li>标签与<span>标签，并创建该排名动漫的超链接，如下图所示图5-9热度排行板块代码（四）网页测试将编写好的网页保存至桌面后，双击打开测试：通过测试发现网页的布局以及有些功能并没有没有达到自己理想中的效果，原本预估横向分类的导航栏变成了竖着的，推荐在导航栏下面的几大板块虽然做了出来但是全部都跑到了网页的最左边，毫无排版可言。网页的登录系统以及留言板功能也并没有做出来，好在搜索功能成功的做了出来，这也算没有完全失败吧。目前自己掌握的技术没有达到制作自己理想的登录页面，这方面后续会加强自己对网页布局、登录功能的完善、留言板功能的练习，争取早日达到自己的理想布局。

结束语通过这次网页设计，激发了我对于网页制作的学习兴趣，能够调动我的学习自觉性，提供了自己动脑、动手能力，也教会了我运用网络资源。结合教材以及老师的指导创作出了具有个人风格、个性的网页。总的来说，整个大学的学习过程让我学会了很多知识，在网页设计的这几天时间中，充分利用这次的设计机会，全身心的投入到了网页的世界里去，去不断地学习，去探索，同时也去不断的充实和完善自我，在网络的世界里逐渐美化自己的人生！同时也检验了我这几年来学习的理论和专业知识的成果。让我了解了真正开发一个网站需要具备的知识和能力，并且经验的积累对于开发行业来说也是十分重要的。在开始设计网页之