网页设计与制作实训报告_网页设计与制作实训

网页设计与制作实训报告由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页设计与制作实训”。

《网页设计与制作》课程设计报告书

设计题目：起止日期： 工作室或公司网站设计

2013.12.23-2013.12.27

目录

一、关于网站 ···························· 31、网站的主题 ·························· 3 2.网站材料 ··························· 4

二、网站的规划设计 ························· 5 1.网站的功能定位 ························2.站点的内容 ··························3.站点的风格 ··························4.网站功能模块图 ························三．网站技术解决方案 ························

1、网站的制作工具 ························

2、所用技术 ···························四．网页介绍 ····························

1、制作网站的网页 ························2.第二层展示 ··························3.动漫排行榜展示 ························4.第三层展示 ··························5.关于短片的插入： ·······················五.关于我们： ···························六．实训总结： ··························· 25 5 6 67 78 9

13 14 14

一、关于网站

1、网站的主题

我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。建立一个展示动漫的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。最重要的是做出自己的风格，给浏览者好的欣赏感受。

动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。

现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代（Anime Comic Time）》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。在中国以外，并没有此种说法。国外习惯性将动画（anime）、漫画（comic）、游戏（game）三者合称作ACG，或加上轻小说（novel）合称为ACGN。

由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。

漫画正是吸收了影视艺术的这两个特点。当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了； 当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候；当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。一部现代故事漫画往往集远、中、近、特四种镜头于一身，漫画家往往能熟练地运用镜头的移动和各种蒙太奇剪接，对故事特定部分的情绪和氛围进行渲染。这就是现代故事漫画容易和动画结合的一个原因，因为它天生就像动画的分镜头剧本，读者在看漫画时仿佛就是在看一部电影。正是有着这样的相似性，所以如今将动画和漫画合称为“动漫”。

动漫领域衍生出的许多术语均已经被广泛应用，例如：正太，萝莉，御姐，百合,BL等。

动漫产业日益与游戏产业结合紧密，在日本已经形成一个成熟的产业链，动漫已经 3 从单单的平面媒体和电视媒体扩展到游戏，书籍，网络，玩具等众多领域。许多动漫游戏应运而生，例如《死神bleach》PSP平台的游戏，也有许多GALGAME被改编成动漫作品。

Manga（まんが，manga）为日语“漫画”的罗马字注音。另外，英文词cartoon的中文音译“卡通”，也是漫画与动画的合称，但被用来特指美国动画。版面有限，相关词条，详见：“动漫概论” 按类型分类：

情感；推理；动作；战争；后宫；宠物；历史；搞笑；机战；少年；冒险；治愈；童话；格斗；

少女；悬疑；科幻；竞技；社会；神魔；热血；校园；耽美；原创；魔法；教育；恐怖；惊悚；

政治；哲理；经典；励志；伦理；恶搞；血腥；言情；暴力。按版本分类： 电视动画（TV）：

电视频道上播映的动画作品。

剧场动画（MOV）：影院公映的动画作品，是日本动画按传播方式分类的一种，在中国又被称为剧场版。

OVA（OAD）：原创动画录影带，其中OVA是单独发售，OAD是随书发售的。网络动画（NET）：以网络为播放平台的动画。

动画音乐：一部动漫作品中的音乐，包括主题音乐和背景音乐（BGM）。

动画原创：依漫画改编的动画，由于动画的更新速度比漫画快的关系，当动画的剧集快赶上漫画时，动画的剧情就要脱离漫画剧情，开始动画原创。

同人：也叫二次创作，由漫画、动画、游戏、小说、影视等作品甚至现实里已知的人物、设定衍生出来的文章及其他如图片影音游戏等等，或“自主”的创作。COS：全称COSPLAY，装扮成漫画、动画、游戏、小说等中的人物，也可以是原创。

2.网站材料

主要在网站上搜集所要的网页信息，包括图片、文字、相关的产品。同时，查询相关的动漫、百度等方式收集所需的文字资料,图象资料,网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。

二、网站的规划设计

1.网站的功能定位

我的网站共有5个主页面：首页、动漫之家、动漫排行榜、动漫连载、周边产品。每一个页面用图片来做。

我是用素材拼音命名网站名，用以方便存储和转发。网站主页整体色调为梅红色，配上深沉的背景图，搭配出一种层次感。然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用c设计一个样式，以保证随时、准确的调用。

2.站点的内容

我们动漫汇主要是要向客户介绍动漫，包括动漫的介绍，动漫的周边产品，动漫的图片及动漫的漫画或是动漫片段。站点里面包括：

首页：第一层网页，画面主要有动漫汇的logo，logo下方是一个横幅，鼠标经过会有光亮，点击仍将是动漫的主页。左边是一个动态动漫图，显得主页可爱又有动漫气息等。下方是会员登录，点击登陆跳转至输入账号及密码界面，如不是会员，点击注册跳转个人用户注册界面。主页的背景图是动漫海报，由两层叠加。主图是6幅动漫图，6种动漫的介绍。鼠标进过动漫图时，会有相应的动漫简介。

跳转页：第二层和第三层，主要的主页的过渡。里面有动漫的详细介绍，有动态图欣赏左侧是关于动漫的周边产品。点击看漫画或动漫，即可欣赏相关动漫。

3.站点的风格

整个网页色彩明显，我们添加了gif图，这样网页稍微有活力，背景都是用动漫海报。其中使用翻看图片的特效，使得看漫画不那么单挑。同时也插入视频，使得网站有活力一些。

首页的标题插入闪光效果，鼠标经过时能出现，不容易产生无趣感。首页的图片不只有图片，鼠标放至图片上会有文字出现，是动漫的简介。使得网页有活力。

4.网站功能模块图

三．网站技术解决方案

1、网站的制作工具

做网页时主要使用的是Dreamweaver CS3另外，为了处理网页中的其他元素，还使用了Photoshop、FLASH等软件。

2、所用技术

动漫汇需要大量的图片及相关的话题。我们需要插入图片，大小要适合，以动漫海报为网页的背景，则设置好页面设置，选好准备好的海报图。插入gif图片，需要时在ps中做gif图。插入视频时需要设置好相关的，视频名称中不能有中文，是flv格式的。图文介绍的需要经过ps的加工，使得首页的图片有生机活力。插入表单，是关于用户的登录，点击跳转至登录或是注册界面。首页标题都有链接，点击进入相应的网站。首页下方是关于动漫汇，为了突出字，用ps进行加工。

四．网页介绍

1、制作网站的网页

素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“web”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了各类动漫的文件夹来存放图片。同时，由于漫画页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的c 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图：

根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。

2.第二层展示

页面中，中间的页面主要包含动漫介绍，周边产品，但浏览者有了新的认识后，可以点击下方的“点击看漫画”按钮来进入第三层页面（漫画页面）。而背景图必须选择横图，而且两边的位置要有良好的视觉效果，我们的排版虽然精简，但是非常有视觉效果，使页面的整体布局合理，既突出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性。

动漫介绍页面

3.动漫排行榜展示

动漫排行榜是为了让浏览者更方便更快更准确地了解到动漫的最新信息而制作的，红色的为最热门的TOP5，分别有：总排行、日本漫画排行、香港漫画排行、大陆漫画排行等排行榜榜单。我们也会定时更新榜单，为了让广大读者更快更直接地了解最新的动漫信息。

4.第三层展示

看漫画页面，是我们制作的重点，并且为了让大家能看漫画，我们专门找了类似翻页的网页特效，方便读者的翻阅，而且让网站更炫，也不容易觉得无趣及疲劳。第三层部门动漫是漫画欣赏，有的是动漫观看。主要是看我们更新的是什么哦~ 也可以让各位动漫迷提前看到剧情的发展，好看又过瘾啊！亲。定时进入查看最新动漫吧~注册用户账号，方便随时进入看哦 送上一幅漫画图：第三层页面的设计代码如下：

秦时明月漫画

width:149px;height:68px;z-index:1;} a:visited { color: #000000;} a:hover { color: #000000;} a:active { color: #FF3366;}-->

返回