基于bootstrap框架的动漫影视网站设计与实现.docx
动漫网网站设计与制作报告学号：姓名:自评成绩：一、总体介绍微动漫是中国新媒体动漫的发展趋势。新媒体传承了传统媒体的特性，将文字、图画图像、声音等多种载体有机合成，以图文并茂、声形辉映的信息刺激方式同时作用于受众的视觉和听觉神经。新媒体的出现，使动漫作品的传播如虎添翼。网站名称：动漫书店网站主题：通过网站宣传，提高动漫的知名度。输入法网站语言：简体中文网站风格：以白色为主，给人一种简洁的感觉，主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。首页设计：页头：log。与导航条页面：动漫的展览。二、网站的主要功能模块网站分别为：网站首页、你的名字页、声之形页、天气之子页、魔女宅急便页、站长简介页、给我留言页.网站首页：顶部是导航栏，往下就是网站基本都有的轮播图，轮播图覆盖导航栏，轮播图的下面是动漫电影的经典语录，鼠标移动到图片上面图片将会放大一点，并会出现改图是来源于哪部动漫电影。再往下是导演简介模块、电影人物模块、电影介绍模块。最后是页脚，标注着我的著作信息，每一个页面的导航栏和页脚都是一样的。你的名字页：展示你的名字的精彩图片。声之形页：介绍该电影的人物。天气之子页：介绍该电影的人物。魔女宅急便页：介绍该电影的人物。站长简介页：展示我的个人介绍。给我留言页：留言表单，可以给我留言。三、网站导航结构设计网站的目录结构图如下：动漫网站网站首页你的名字声之形天气之子魔女宅急便站长简介|给我留言左边是网站的logo,右边是网站导航栏，导航栏中的你的名字页和天气之子页有二级导航,网站共有7个链接。网站的logo如下：你的名字页二级导航栏分别为：人物介绍、剧情介绍。效果图如下：天气之子页二级导航栏分别为：人物介绍、剧情介绍、声优介绍、评论交流。效果图如下:逐页截图，并介绍每一个页面的CSS效果及js动态效果，使用到的关键技术、亮点。轮播图关键技术：这段代码还使用了HTML中的<div、<img>等标签来定义轮播图的结构以及显示的图片。每个<img>标签的SrC属性指定了要显示的图片路径，alt属性提供了当图片无法加载时的替代文本。亮点：使用“SlickCar。USer技术，实现了一个响应式和可交互的图片轮播效果。图片轮播具有自动轮播、无限循环、切换效果等功能，提升了用户体验。通过HTML中的<div>、<img>等标签，定义了轮播图的结构及显示的图片，并提供了替代文本，增加了可访问性。主要代码：<divclass="net-banner"data-height="><divclass="slick-slide"><imgclass="cover-image"src="picture/天气2.jpg”SiZeS="(maxwidth:767px)767px"alt=""><div><divclass=',slick-slide"><imgClaSS="cover-image”SrC="picture/魔女宅急便主图.png”sizes="(max-width:767px)767px"alt=""><div><divclass="slick-slide"><imgclass="cover-image"SrC="picture/声之形主图.jpg”SiZeS="(maxwidth:767px)767px"alt=""><div><div>页脚部分的关键代码：<divclass="met-linkstext-center"><divclass="container',><olclass="breadcrmb"><li>长沙理工大学；软件工程2103班；姓名：谢倭<ol><div><div><footer><divclass="powered_by_metinfo">计算机与通信工程学院；学号：202101030103<div><div><footer>首页：经典语:电影介为ltn*VWKUER.你的名字页：使用了HTML和CSS来构建网页结构和样式。还使用了懒加载(LazyIoad)：在class属性中可以看到“imgloading”，这表明使用了懒加载技术来延迟加载图片。懒加载可以提高页面加载速度，提升用户体验。还使用了表格布局(TableLayout):使用table元素和tbody元素来创建了一个表格布局，将图片排列在多个单元格内。WMtI*;ttAUS2XMI.HMitWMiflIR114R;*HM210WWKB关键代码：<sectionclass=',met-showanimsition',><divclass="container"><divclass="row"><divclass="met-editorIazyloadclearfix"><div><table><tbody><tdwidth=,"500"valign="top"><imgclass=',imgloading"src="PiCtUre/你l.png"width="552p×"height="306px"><td><tdwidth="500"valign=1"top"><imgclass="imgloadig"src="picture/2.png"width=1,552p×"height="306px17><td><tr><tdwidth=,500"valig="top>,><imgclass="imgloading,SrC="picture/你3.png"width="552px"height="306px17><td><tdwidth=",500"valig="top"><imgclass="imgloadig"SrC="picture/你4.png"width="552px"height="306px"><td><tr><tdwidth="500"valign="top"><imgclass="imgloading"Sre二"PiCtUre/你5.png"width=1,552p×"height="306px17><td><tdwidth="500"valign=,top"><imgclass="imgloadig"src="PiCtUre/你6.png"width="552px"height=',306px"><td><tbody><table><p><br><p><div><div><div><div><section>声之形页、天气之子页、魔女宅急便页：这三个页面的模块都相识，关键的技术和亮点页差不多。<divclass="met-banerbaner-ny-h"data-height='>>.<div>:这是一个横幅部分,用于显示一个图片，其中data-height="是用于设定高度的属性。<divclass="container">.<div>:这是一个容器，用于包含介绍内容。<divclass="row">.<div>:这是一个行元素，用于在网页中创建一行。<divclass=',col-md-9met-ews-body,>.<div>:这是一个占据9个网格空间的列元素，用于显示人物介绍内容。<divclass="row,>.<div>:这是一个行元素，用于在网页中创建一行。<lclass="met-page-ajax"data-scale=10.71428571428571'>.<ul>:这是一个无序列表,其中met-page-ajax是用于加载更特性，data-scale=Q71428571428571是用于设定比例的属性。每个<liclass;<li>代表一个人物的介绍，其中包含了、描述、发布日期和浏览次数等信息。<divClaSS="media-Ieft”>.<div>是用于显示人物左侧内容的容器。<divClaSS="media-body”>.<div>是用于显示人物主要内容的容器。<h4CIaSS="media-heading”,<h4>是人物的名称。<pClaSS="des'>.<p>是人物的描述。<pclaSSFinfd>.<p>是人物的信息，包括发布日期和浏览次数。<divClaSS='mejpager>.<div>是一个分页器，用于显示当前页数和总记录数。关键代码：<sectioclass="met-ewsanimsitio"><divclass="cotainer"><divclass="row"><divclass=',col-md-9met-news-body"><divclass="row',><divclass="met-ews-list',><lclass=',met-page-ajax"data-scale=,0.71428571428571,><liclass=""><divclass="mediamedia-lg',><divCIaSS="media-left"><ahref="声之形.html"title二”石田将也”target=1self><imgclass="media-object"SrC二"picture/声之形人物l.jpg"style="height:150px;'alt="石田将也”><a><div><divclass="media-body"><h4class=',media-heading"><ahref="声之形.html"title="石田将也”target二:Self'>石田将也L?<a><h4><pclass="des">演员:-配音:入野自由（高中生）、松冈茉优（小学生）、王晨光（普通话）小孩子时期是孩子王。但是自从出了硝子的事情以后就被周围的人孤立。一直都活在孤独和自我厌恶中<p><pclass="ifo',><span>2023-6-24<span><span><iclass="iconwb-eyemargin-right-5"aria-hidde="true',><i>104<spa><p><div><div><li>Aia4*>IOMtrAT.tWITJS2XXMR.BfiMUMUiMImt;*H:202,0101g天气之子页:森岛机高UBMWtXM(t8),KMTC三Hf>S89中集.<MffT<±n*.KKEKA.JtHfttMBMlWWMSMMtetIL.魔女宅急便页：7须货美s*田nIBD.«««<ss)-eft*s*ftTae¼金;BSrjf
