基于bootstrap框架的动漫影视网站设计与实现.docx

《动漫网网站》设计与制作报告

学号：_________?姓名:_________?自评成绩：________

一、总体介绍

微动漫是中国新媒体动漫的发展趋势。新媒体传承了传统媒体的特性，将文字、图画图像、声音等多种载体有机合成，以图文并茂、声形辉映的信息刺激方式同时作用于受众的视觉和听觉神经。新媒体的出现，使动漫作品的传播如虎添翼。

网站名称：动漫书店

网站主题：通过网站宣传，提高动漫的知名度。

输入法网站语言：简体中文

网站风格：以白色为主，给人一种简洁的感觉，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。

首页设计：

页头：logo与导航条

页面：动漫的展览。

二、网站的主要功能模块

网站分别为：网站首页、你的名字页、声之形页、天气之子页、魔女宅急便页、站长简介页、给我留言页.

网站首页：顶部是导航栏，往下就是网站基本都有的轮播图，轮播图覆盖导航栏，轮播图的下面是动漫电影的经典语录，鼠标移动到图片上面图片将会放大一点，并会出现改图是来源于哪部动漫电影。再往下是导演简介模块、电影人物模块、电影介绍模块。最后是页脚，标注着我的著作信息，每一个页面的导航栏和页脚都是一样的。

你的名字页：展示《你的名字》的精彩图片。

声之形页：介绍该电影的人物。

天气之子页：介绍该电影的人物。

魔女宅急便页：介绍该电影的人物。

站长简介页：展示我的个人介绍。

给我留言页：留言表单，可以给我留言。

三、网站导航结构设计

网站的目录结构图如下：

左边是网站的logo，右边是网站导航栏，导航栏中的你的名字页和天气之子页有二级导航，网站共有7个链接。网站的logo如下：

你的名字页二级导航栏分别为：人物介绍、剧情介绍。效果图如下：

天气之子页二级导航栏分别为：人物介绍、剧情介绍、声优介绍、评论交流。效果图如下：

逐页截图，并介绍每一个页面的css效果及js动态效果，使用到的关键技术、亮点。

轮播图关键技术：这段代码还使用了HTML中的div、img等标签来定义轮播图的结构以及显示的图片。每个img标签的src属性指定了要显示的图片路径，alt属性提供了当图片无法加载时的替代文本。

亮点：使用SlickCarousel技术，实现了一个响应式和可交互的图片轮播效果。图片轮播具有自动轮播、无限循环、切换效果等功能，提升了用户体验。通过HTML中的div、img等标签，定义了轮播图的结构及显示的图片，并提供了替代文本，增加了可访问性。

主要代码：

divclass=met-bannerdata-height=

divclass=slick-slideimgclass=cover-imagesrc=picture/天气2.jpgsizes=(max-width:767px)767px

alt=/div

divclass=slick-slideimgclass=cover-imagesrc=picture/魔女宅急便主图.pngsizes=(max-width:767px)767px

alt=/div

divclass=slick-slideimgclass=cover-imagesrc=picture/声之形主图.jpgsizes=(max-width:767px)767px

alt=/div

/div

页脚部分的关键代码：

divclass=met-linkstext-center

divclass=container

olclass=breadcrumb

li

长沙理工大学；软件工程2103班；姓名：谢倕

/ol

/div

/div

footer

divclass=powered_by_metinfo

计算机与通信工程学院；学号：202101030103

/div

/div

/footer

首页：

你的名字页：使用了HTML和CSS来构建网页结构和样式。还使用了懒加载（Lazyload）：在class属性中可以看到imgloading，这表明使用了懒加载技术来延迟加载图片。懒加载可以提高页面加载速度，提升用户体验。还使用了表格布局（TableLayout）：使用table元素和tbody元素来创建了一个表格布局，将图片排列在多个单元格内。

关键代码：

sectionclass=met-showanimsition

divclass=container

divclass=row