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