前端页面设计总结 .docx

《前端页面设计总结 .docx》由会员分享，可在线阅读，更多相关《前端页面设计总结 .docx（24页珍藏版）》请在课桌文档上搜索。

1、信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据212班一 .设计思想班级网站课设是项很有趣、很仃挑战性的学习任务，它涉及到的知识点比较丰富，需耍我们综合应用自己的专业知识和技能“我认为款好的班级网站需要具备几个方面的特点，比如页面简洁、排版清晰、整洁高效、色彩搭配协调等等。在网站内容的策划方面，更需要符合班级主题、充满活力和贴近实际活动。当然，我们也可以尝试增加些创新元素，来让我们的班级网站更加突出。比如大幅度的图片或并视频介绍，还可以利用互动凸显班级的特色元素等等。总之，班级网站课设的目的是要让我们能够综合应用所学的知

2、识和技能，将其化为一个不同寻常的、有价值的成果。二 .各个网页设计分析1.网页的结构主要分为登录界面，网站首页，教师风采，班级部分人员信息，班级论坛，个人信息共六大板块。2.部分网页的具体实现方法I(1)网站苜页：主页设计主要以盒子的形式划分。页面上方的导航栏所对应的字符都设置了超链接href,副标移动到相应位置时会到达下一个页面。网站首页主要包括精彩期影，教师团队，班级成员，班级课表。精彩剪影这一部分使现了轮播图。首先在HTM1.页面中创建一个容器div,用于保存轮播图的内容。可以为其设置宽度、高度和定位样式,然后在该容器中，创建一个U1.列表，并添加Ii元素,在每个Ii元素中添加一张图片。

3、用JaVaSCriP1.编写轮播图的功能，比如设置轮播间隔时间、添加鼠标移入和移出轮插图时的操作等等。教师团队，班级成分这两部分实现/视频的插入。首先，在HTM1.网页中创建一个VidOo元素.然后，媪辑视频元亲的屈性，使其适应页面.最后，在VideC元素中添加源文件.班级课表这一部分实现了对tabic,tr,和td标签的使用.首先，在HTM1.网页中创建个表格元素。然后使用tabic,tr和td标签配置课表格了中的内容。可以设置rowspan和co1.span属性来解决某些单元格跨行或跨列。代码：HUe大数据212班i1.onMeuname=VieWpOrcon(ent=widh=devic

4、e-wid(h.initia1.-sca1.e=,VseriP1.sr=hnpscdn.siaticfi1.e.org.,jquery2.1.1.,jquery.min.jsM.bd(margin-bottom:2()px;background-co1.or:rgM204,86,204);1.sp.row(margin-top:IOpx;Jspz(font-size:I8px;J,foo1.er(margin-top:-10px;).ftcrpwidth:100%;height:1.(X)px;font-size:14px;co1.or:a1.iceb1.c:1.ine-height:98px

5、:tex1.-a1.ign:center:backgroundokrsi(ion:re1.ative：height:4(X)px;J.contentu1.Iist-Sty1.c-Iypc:none;J.ntcnu1.1.iwidth:600px:height:300px;position:abso1.ute;transition:Is：opacity:0;).contentu1.1.iimgwidth:9(X)px;height:5(Mpx:border-radius:5%;border:5pxso1.idWocO600:).conten1.o1.position:re1.ative:disp

6、1.ay:grid:gridem1.ateco1.umns:reea(5.75x);gridem1.aterows:auto;grid-gap:1.em;gap:Ienuf1.oat:right;magin(o:450x;Iisi-Siy1.e:none;(op:0;1.eft:0;J.contento1.1.i(width:25px;height:IOpx;font-size:I5px;1.ine-height:20px;f1.oat:1.eft:tcxt-a1.ign:center;border-radius:2cm;border:5pxso1.id#afVd9d:I.container(

7、background-co1.or:whitesmoke:Jnavc1.ass=*navbarnavbarTogg1.enavigaionutton岐尔Dcskt(班级网站班级网站imgs1.cy.jpgah=Widih=FOpxthcight=,60px;ahrcf=首页.him”首页教师风采班级论坛DaXi个人信息登录注册精彩剪影班级网站班级网站imgs精彩剪影4 .jpg,a1.t=1.i班级网站班级网站imgs精彩剪影5.jpgMa1.t=MMx/1.iwindw.on1.oad=funcion()varcon1.en1.=1.hs.d=5)(i=0;fun(O.4);1e1.se(f

8、un(i.i-1):)Itimer=this.SeUntCrVaHaI1.M2(XX);content.onmous)ver=function()C1.earIn1.erva1.(tinier:Icontent.on11ouseout=function(Iimer=sei1.11erva1.(au1.o.2000);IVarj=0;for(J5j+)(1.i(j5.i1.ex=j;1.i(j5,onc1.ick=fu11ction()(fun(this.ikx,i)i=this.indcx;IIIVsCCtiOnid=sp*divc1.ass=,c致加团队Vh1.Vdivc1.ass=Mrow

9、Msy1.e=*bordcrrighcOpx;margin-top:50pxfpx:Hvi班主任：杜金龙数据仓库：张晶晶vbr人机交互：刘晨概率论：朱实强计算机殂成原理：朱小军数据采集：ttHM数据结构：王秀雨班皴成员VVidCOsrc=MimgSvidco2.mp4contro1.s=*contro1.sMc1.ass=nimg-rcsponsivcXvidooVdivCIaSS=spz庞仲帅段舒馨李婷蜉何岩松刘家伟曰贞贞魏琪朱济雯赵之聪本旭阳祥青彬陈潇潇VbQ党冰冰郭宝杰郭毅力黄向龙景彦徐季里程Vbr李浩源李四红刘思伟李宇飞马世贤宋文康Vbr邵泽英王佳王康宣王明杰王旗王艺魏亚东徐雪瑞杨兰兰

10、杨涛杨莹杨玉慈vbr赵佳佳张宁张瑞龙张玉娇周亚秀赵IMI圆赵子豪张正涛vbr班侬课表图-y1td周.周三周四Vtd周五Vtdyd周六Vtdvd周日Vtdwidth=301.1.dWidth=120rowspan=2bge1.or数据采集教一:楼v1.dVtdwidth=120*11wspan=2bg81or=ccfftX工程英语教:楼JVAdVtdwidth=*120ruwspan=2,23马克思主义原理教二楼)数据仓库载三图VU1.width=,120rwspan=2,wspan=2,bgcdor=87ceT概率论教二楼)wspan=2,怩81。尸99:1r工程英语1教二楼/14wspan=

11、2wspan=245VtdwWtb=,1.200加二2帆(:01。门”忖899”概率论数二楼VtdwWtb=,1.20mw*pan=2bg8kr=33cc99计算机组成原理窗三楼ydWid1.h二I2(Krowspan=2bge1.or=6699f人机交互教三楼4tddWidIh=120rowspan=2Tgco1or=CCfTO(FX育体育馆xdydWid1.h二I2(Krowspan=2bge1.or=6699f人机交互教三楼4tdVtdwidth=*120*rDwspan=2,7Vtdwidth=*120ruwspan=2,Vtdwidth=*120ruwspan=2,Vtdwidth=

12、*120ruwspan=2,Vtdwidth=*120ruwspan=2,8(2)个人侑息：这个界面包含r返回主页按钮、关于我、热爱生活和旅行生活等内容.其中使用了div元素来划分不同的区域，使用了p元走来段落化文字内容，使用了h2元亲来定义标题.部分代码：v!DOCTYPEhtm1.VmCtaCharSCt=UTF8”个人信息1ma璀in:Opx:padding:Opx;1.ist-sty1.e:none:bodybackground-co1.or:*4B7C99;nVaIUe=点我返回主页CIaSS=1H1.Hon”Xaanncr关于我Uh2span)姓名:党冰冰t1.:女VbrVSPan

13、爱好span所歌打游戏追剧旅行VSPan性格vspan:活泼开1.j家乡:甘巾庆阳vbrVSPan专业span:数据科学与大数据技术热爱生活Vh2一、岁月从来不曾府好，只是有人在替你背倒枷锁，含泪前行。也许是父母，也许是朋友，也许是陌生人无论是谁，请记得游怀感恩之心。旅行生活i1.1.,1.1.VXbOdyVXh1.m1(3)教师风采，这部分的特点是：缩略图的使用。transition属性设置缩略图样式的过渡效果，持续时间为()2s.transform属性设置sca1.ed.5),将缩略图放大到原来的1.5倍。部分代码：.1.hu11bnai1.imgwidth:3()0px:height:2

14、00px:cu11ior:poin1.er;transition:a1.1.0.2s:I.1.hunbi1.imgverIransfomi:scdc(1.5):I.co1.-md4img!border:Ipxso1.idwhite;padding:IOpx;width:300px;box-shadow:IpxIpx5px#666;border-radius:IOpx;transition:a1.1.Is;I.co1.-md-4img:hovcrtransform:sca1.c(1.5.1.5):z-indcx:I;.img1.(position:abso1.ute:1.op:30px;1.dt

15、:60px;transform:r0(atc(3(kkg);IVi叫srv=imgs/任课教师4.jgah=MMsty1.e=*wi刘晟老Mi认真严而，设任心强点赞1.老师介绍V小2 : :  :大数据212班在刘晨.张晶晶.朱实强.刘君等优秀的任课老师组的带额下走向成功的道路.从刚开始的未知惜情.到现在的前刃疔余，从开始对程序的一窍不通到现在的信手拈来，从刚开始接触前后端设置的迷茫到现在自己也可以设计出令人湎意的网站，从刚开始对数学的恐慌，到现在的大胆会试追求创新，这些都少不了这些任课老师对我们的辛苦栽培，少不了老师一个一个代码为我们解称，一个一个尊敬为我们

16、讲解，少不了老师的件促和救策.cripscrip(src=1.ibiboostrasbooscriptye=tex(javascripi,src=jindex.js,xcripo(4)班皴论坛这一部分的特色是对手滚动的应用。首先，为滚动区域添加适当的CSS样式.然后，为滚动内容添加样式，例如设置内边距、边框等。接下来，在JaVaSCriPt中添加功能来控制滚动.可以使用事件监听器和DOM操作来实现滚动效果.部分代码：精选问题Odiv今年什么时候期末考Vi今年会提前放假吗Dgv1.i期末考试如何更习期末考试会提前进行吗V川2021级军训还补叫英语四六级什么时候出分数v1.iyrip1.type-

17、,(cxtjavascripi,varPartArca=documcnt.gctE1.cmcntBy1.dCpart2);varScro1.1.I-docunent.gctE1.cmcntById(,scro1.1.1);varScro1.i2=docu!ncnt.gctE1.cmcntBy1.d(,scro1.1.2,):Scro1.1.2.inncrHTM1.=Scro1.1.1.inncrHTM1.;functionro1.1.()if(Scro1.1.2.offsctHcigh(-PartArca.scro1.op=0)PartArca.ScroHTop-=Scro1.1.I.ofsc

18、tHcight:Ie1.se(PartArca.ScroHTop+:IIvarStopRoII=sct1.ntcrva1.(ro1.1.120);PartArca.Onmouscovcr=function()c1.earinerva1.(SiopRo1.1.);IPar1.AreaAHnnouscout=function()(StopRoII=Se1.IntervaKro1.I.120)：I(5)人员侑息这一部分用tab1.e创建了一个人员信息表格，屣示班级同学的一些基本情况,包括姓名，籍贯，年龄，性别。然后，使用元素添加确定和取消按钮，并通过Onc1.ick属性指定相关的JavaScript

19、函数。部分代码：Vab1.ebonier=*I*c1.ass=n(ab1.etab1.e-hover*S1.yIe=disp1.ay:none;*id=ab1.e1.CeHSpaCing=2CCHpadding=新增人员信,y.vtd姓名：vtd年跄性别se1.ectid=,sexnc1.ass=,forn-otionVaIUe=请选择“男op籍指VinPU1.IypC二ICK1.c1.ass=M1.bmi-con(rornamcarca”VaIUC=汉族VbuttonIypC=buttonc1.ass=,btnhn-infoMOndiCk=addperson。”确定bfunctionHddP

20、CrSon(Mvarfie1.d2=documen1.geiE1.enentBy1.d(,f1.eki2);vara=pindex-1;a.id=index;a.name=d(xrunicn1.ge1.E1.einentById(HnameM).va1.ue:a.o1.d=docunen1.ge1.EkmcntBy1.d(o1.dM).va1.ue:a.sex=documeni.geiE1.enen(ById(Msex),va1.ue;a1.ert(a,id+M+a,nanew+a.o1.d+,a,sex+,f*+a.aream);index十七.push（八）;showPerson);)fu

21、nctioncance1.()vardiv2=document.getE1.emen(By1.d(div2MXdiv2.sty1.c=disp1.ay:none;vardiv3=documcn1.gc1.E1cmcmBy1d(PN3);div3.sty1.c=disp1.ay:none;；)三.设计总结1 .做了那些准备？首先，对于有些不熟悉或者忘记的知识查阅了一些资料：然后，对班级的信息进行收集和整理，如老师信息、学生名单、课程安排等.最后，利用JaVaSCriPt相关知识，添加一些互动和动态效果，如轮播图等“2 .期间也到的问题？XT-JavaScript的函数调用和事件的绑定的有些地方不熟悉，还有对整体布局欠缺合理性。在网页中，使用大盘图片和其他多媒体资源，从而导致页面加载速度变慢。3 .还有那些不足的地方？这次课程设计还仃许多不足的地方，如：整体的揖版布局不足，页面内容较为空旷，老册所讲的有些知识没有用到。4 .个人感想盛个开发过程中，我运用了HTMI、CSS和JaVaSCriPt等前端技术，同时还运用了一些常用的开发工具和框架，如VSCode等，帮助我更高效地完成网站的开发和调试.总而言之，通过本次班级网站课设，我不仅加深了对HTMI.和CSS的理解,还锻炼了我的设计和开发能力。我学会了如何创建一个用户友好、富有互动性的班级网站,并且加深了对