基于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¼金;BSrjftx*?.绅妻介m女.HWWMWisn.SwWJ三三*m人的复-天野瓜KSBWKA(83)反身RI(Mt!)阳卬第弟.，J，(S*0h主ISita卑SvutMaeimBAVHaMaavaW9nrr.JtwueiesauMffi94*e*长MI大学；nuw;Mfi«f»itlWV*i三IKH*；TH：1010W1SR»as<M的-MZJV天2,a&KWV«ttK3魔女宅急便介绍<SfrS>BXA*k99CJLCK.南小N风过主岁,R9D.ItffMTTWA«»2014lE3P111ffH*i3e1.谖HHHWfctMWlPIQ-，W了W习Ie女BWa开父母in通立与充NF的jrg交接的迫电中喇H”正3怆“覆琪琪Sirjc三aari6Bx*aa20ZM-240Mlto>三re.tmn三iM三.ns”itnmiRvct;学?必。，0»18站长简介页：关键代码：<divclass="met-bannerbanner-ny-h"data-height="><divclass="slick-slide"><imgclass="cover-image"src="picturelll.png"sizes="(max-width:767px)767p×"alt="站长简介"><div><div><divclass="met-column-nav"><divclass=,'container"><divclass="row"><divclass="sidebar-tile"><lclass="met-colmn-nav-linvisible-xs"><ul><div><div><div><div><!-站长简介-><divclass="main_m"><divclass="two_pho"><hlStyIe="font-size:20px;colocrgb(98,79,79);">站长简介<hl><pstyle="line-height:32px;"><imgsrc="pictregr.png"width="360"style="float:right;">我是长沙理工大学软件工程专业的一名学生。在师友的严格教益及个人的努力下，我具备了扎实的专业基础知识，系统地掌握了等有关理论;熟悉涉外工作常用礼仪;具备较好的英语听、说、读、写、译等能力;能熟练操作计算机办公软件。同时，我利用课余时间广泛地涉猎了大量书籍，不但充实了自己，也培养了自己多方面的技能。<br>在校期间，我认真学习，勤奋刻苦，努力做好本职工作，在学生会和班级工作中积累了大量的工作经验，使自己具有良好的身体素质和心理素质。几年来我努力学习专业知识，从各门课程的基础知识出发，努力掌握其基本技能技巧，深钻细研，寻求其内在规律，并取得了良好的成绩，获过校一等奖学金。<br>此外，我还积极地参加各种社会活动，抓住每一个机会，锻炼自己。我深深地感受到，与优秀学生共事，使我在竞争中获益向实际困难挑战，让我在挫折中成长。<br>专项技能：<br>熟悉C+和ffmpeg,熟悉流媒体中ffmpeg的使用，熟悉RTMP1HLS流媒体协议,熟悉音视频格式和编解码，熟悉音视频的采集,了解经常用到的直播流分辨率,以及流的构成，熟悉Android的JNI/NDK开发,能实现JAVA与C/C+程序间的互调,能完成工作中推拉流相应底层代码，熟练掌握Android源码以及frameWork原理,有较好的java基础，熟练掌握AndroidIPC机制、VieW的事件体系以及工作原理，熟悉Socket及时通讯原理和Android大图分片加载处理，画，熟悉Handler、Message、LOOPer消息机制及ASynCTaSk异步任务机制，熟悉View和ViewGroup的事件分发机制以及线程和线程池，熟练自定义View、animation,能够根据需求定义出相应的自定义控件和动熟练掌握RetrOfit、RXJaVa、OkHttpsXUtilS等三方开源Iibrary,熟悉AndrOid应用性能优化的实现（LiStVieW优化、防止内存溢出和图片三层缓存机制等），熟练使用各种UI控件，具有控件冲突解决能力，能实现页面和动画视觉效果，熟悉MVC.、MVP和单例模式、装饰者模式、工厂模式等。<p><br><br><tableWidth="960"CeilSPaeing="10"cellpadding="10"><tr><td><imgsrc=',picture55.pg,>><td><td><imgsrc="picture66.png,><td><tr><table><div><divstyle="clear:both"><div><div>效果图：站长箭介M<H三3PteirBflrsrG*BvwuatBWn.M三73(IGiHM«0R.JW11r7flXWfcWWMlIfteAmctHMfiHKBflWi.UlK.fgft加KMMWfVKXm.HK.HMMkMMrUttiHirxJIa,YMX7e.aM7aSW9MLt*.kum*m.MMX.tnwmn.±*omftw三x三nift*M.«na«f9»m9ttKA100irM.ajwi三*W*1OR.从MXMSnMKKi,HnVWKM-HimK.«WW.94UM&JBV.丽ITWBxt.SM11r*.k.naaMH*MKM).n-wa.三waaanwt&n*RfiJUn«rui.itam>rs¼.RC3p<9W*Mrt4*8gMM2"3>LSitaHtMiMlMXSaM&WOMm.MftiRWSXS.IMff用HeBUIWSU=.MAmKKtIMMXflR.iC*3«MKX>!Wmtt3Z(tT«4ffi«MMKK.MSB*MKM*mK*ar>o0UB*.WfiHMMLMMAneKxlffCfW.MwW11*JIWanJB三,B3oc*XBKISiRAmaAMIOdtMHKxaHtIV.RAMn>et.Me*MeLMPcrMMIMjIAnnCTMk>mfH>MMIVMwMIGnMffiWlzmMWttKIOttlUI.MOSSW*EaKnIt*«*««义出mu隼纳”DM.VAWMrot.<*.a*W.XUMl三方开AIr».0AMraamiKUt8a观(3Mw>O½.B±IM7&i»Wt£JM0mMVl.MttfftMtuem.KMttmtfKfttn.IemESlCiMMe9».MMC.MVHQIMncMMMhCInRK9.HiMrlA学；WITW2K11M;KMVItavUlNaTKVCt;211MOWWXB给我留言页：包含了一个站长简介的图片和一个表单。图片地址为“picture/77.png”，在页面中使用了一个div元素来展示该图片。表单部分包括了QQ、邮箱、联系方式、意见反馈和详细内容等输入项，用户可以填写相关信息并提交。关键代码：<divclass="met-banerbanner-y-h"data-height="><divclass="slick-slide"><imgClass=nCover-image"src="picture77.pg"sizes="(max-width:767px)767px"alt=“站长简介”><div><div><divclass=',met-colm-av"><divclass="cotainer"><divclass="row"><divclass=',sidebar-tile"><ulclass=',met-colum-nav-ulinvisible-xs"><ul><div><div><div><div><!-表单一><sectioclass="met-showanimsitio"><divclass=',met-index-jiomet-index-body"style="backgroud-image:url()color#666;"><divclass="cotainer"style="max-width:800px;"><divclass=',input-group"style="margin-top:20px"><spanclass="input-grop-addo"id="basic-addonl">QQ<span><inputtype="text"class="form-control"placeholder="123456789"aria-describedby="basic-addol"><div><divclass="inpt-grop,'style="margin-top:20px"><spanclass="input-group-addo"id=',basic-addonl">邮箱<spa><inputtype="text"class="form-contro,placeholder=',"aria-describedby="basic-addonl"><div><divclass="ipt-group"style="margin-top:20px"><spanClaSS="input-group-addon"id="basic-addonl”>联系方式<spa><iputtype="text"class="form-control"placeholder="123456789"aria-describedby="basic-addol,><div><divclass="inpt-grop"style="margin-top:20px"><spanCIaSS="input-group-addon"id="basic-addonl”>意见反馈<spa><inputtype="text"class="form-control"PIaCehOlder=“内容”aria-describedby="basic-addol"><div><divclass="inpt-group"style="margin-top:20px"><spanClaSS="input-group-addon"id="basic-addonl”>详细内容<spa><textareaclass="form-cotro,rows="2,'><textarea><div><buttonstyle="margin-top:20px"type="submit"class=',btnbt-primarybtn-block”>提交<button><div><div><section>效果图：Ki尔T大学；ttttTW2TO3三;:Wfl计M¾WM9R;学号：2021018018四、总结通过本次的网站设计开发，我学到了很多东西，实训的过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。把所学的知识进行融会贯通，通过遇到的难题就要想办法去解决它，有从百度，B站上去找疑问、解决问题，从而获取新的知识。掌握了html、CSS、javascript等前端开发技术，能够灵活的运用所学的知识和技巧制作出简单的网页，还学会了使用各种前端框架和工具，例如：BoOtStrap、React,VUe等，提升了页面的交互性。在未来的工作中，我会不断学习和实践，完善自己的知识体系结构，提高自己的技能水平。同时，我也会从这次经历中汲取教训和经验，以便更好地应对未来的挑战。