前端页面设计总结 .docx
信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结专业班级：大数据212班一 .设计思想班级网站课设是项很有趣、很仃挑战性的学习任务，它涉及到的知识点比较丰富，需耍我们综合应用自己的专业知识和技能“我认为款好的班级网站需要具备几个方面的特点，比如页面简洁、排版清晰、整洁高效、色彩搭配协调等等。在网站内容的策划方面，更需要符合班级主题、充满活力和贴近实际活动。当然，我们也可以尝试增加些创新元素，来让我们的班级网站更加突出。比如大幅度的图片或并视频介绍，还可以利用互动凸显班级的特色元素等等。总之，班级网站课设的目的是要让我们能够综合应用所学的知识和技能，将其化为一个不同寻常的、有价值的成果。二 .各个网页设计分析1.网页的结构主要分为登录界面，网站首页，教师风采，班级部分人员信息，班级论坛，个人信息共六大板块。2.部分网页的具体实现方法I(1)网站苜页：主页设计主要以盒子的形式划分。页面上方的导航栏所对应的字符都设置了超链接href,副标移动到相应位置时会到达下一个页面。网站首页主要包括精彩期影，教师团队，班级成员，班级课表。精彩剪影这一部分使现了轮播图。首先在HTM1.页面中创建一个容器div,用于保存轮播图的内容。可以为其设置宽度、高度和定位样式,然后在该容器中，创建一个U1.列表，并添加Ii元素,在每个Ii元素中添加一张图片。用JaVaSCriP1.编写轮播图的功能，比如设置轮播间隔时间、添加鼠标移入和移出轮插图时的操作等等。教师团队，班级成分这两部分实现/视频的插入。首先，在HTM1.网页中创建一个VidOo元素.然后，媪辑视频元亲的屈性，使其适应页面.最后，在VideC元素中添加源文件.班级课表这一部分实现了对tabic,tr,和td标签的使用.首先，在HTM1.网页中创建个表格元素。然后使用tabic,tr和td标签配置课表格了中的内容。可以设置rowspan和co1.span属性来解决某些单元格跨行或跨列。代码：<!D(XTTYPEhtm1.><hcm1.hng=cn,><hcad><mctaChaniCI="UTF8"><metahttp-cquiv=MX-UA-Compatib1.c"content=,'1.E=cdgc,*><mctaname="viewport“contcnt=Mwidth=dcvice-width,initia1.-sca1.e=1.0,*>HUe大数据212班<i1.o<1.inkre1.="s1.y1.eshexM*href="1.ib,'bo1.s1.rap,css,',b1.strap.css><1.inkre1.="s1.y1.eshexMtype=*,1.ex(css"href="cindex.css,*><1.inkre1.="shrtcuticon"href=,'img1.k_favicon.icoM1.ype="iinage/x-ia>nM><1.inkre1.="s1.y1.eshexM*Iype=,'1.extcss"href="css(,norma1.ize.cssM><1.inkhrcf="cnain.css,'re1.=Ms1.y1.eshcc1.M(ypc='(cx1.css'i><1.inkhref="css/demo.cssMre1.="sty1.esheet,'iype=,tex(css,f><1.inkhref="css/index.cssMre1.=Msty1.esheetM/><n>euname="VieWpOrcon(ent="widh=device-wid(h.initia1.-sca1.e=,><1.inkre1.=,'styIesbeeiwhtvf=Nhups:/cdn.Maticfi1.e.offgAwiaer*boots(rap/3.3.7/css/bootscrap.min.c$s">VseriP1.sr="hnpscdn.siaticfi1.e.org.,jquery2.1.1.,jquery.min.jsM></scrip(><scriptsrc=vhus:cdn.s½ticfi1.e.fg(wier-boots(ri3.3.7jsbootscra.min.js"xscrip(><sty1.c>.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:tex1.-a1.ign:center:backgroundok>r<7c91.'db;).overa1.1.(width:900px;height:500px;a1.ign-items:ce11er;).conte11(x>si(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(M>px:border-radius:5%;border:5pxso1.idWocO600:).conten1.o1.position:re1.ative:disp1.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(background-co1.or:whitesmoke:J<sty1.c><.,hcad><bdy><!-导航条-><divid=k.nav,>><navc1.ass=*navbarnavbar<defau1.tnavbar_1.k*><divc1.ass=',container,><!-Brandandtogg1.egetgroupedforbettermobi1.edisp1.ay-><divc1.ass=,navbar-header*><buuonIyPe="buuon"c1.ass=wnavbar-ogg1.eco1.1.apsed"da(a-togg1.e=*co1.1.apseMdaui4argei=',#b$-exainp1.e-navbar-co1.1.apse-1.Maria-expanded二"fidse''><spanc1.ass=wsr-on1.y,>Togg1.enavigaion<Zspa11><spanc1.ass=,icon-bar><pan><spanc1.ass=,icon-bar><pan><spanc1.ass=,icon-bar><pan><>utton><ac1.ass=11avbar-brand"hrcf="#"><imgsrc=',CAU5icn>岐尔Dcskt(班级网站班级网站imgs1.cy.jpg"ah=""Widih=FOpxthcight=,60px"><a><div><!-Co1.1.ectthenav1.inks,forms,andothercontentfortogg1.ing-><divc1.ass=,co1.1.apscnavbaroHapsc"id=bs-cxamp1.c-nav'bar-coHapqc1.”><u1.c1.ass="navnavhar-nav',><1.i><ahrcf="首页.him”首页<7a><J1.i><1.ixahrcf="dctai1.htm>教师风采<xrti>< 1.i><ahref="IUman.hrn1t>班级论坛DaXi><1.ixahmf="xq.h1.mr'人员信息V&x/】i>< 1.ixahref=，个人信息.htmr>个人信息<7ax1.i>< 1.ixahrcf=登录注册.htm1.>登录注册<7X1.i><u1.><divx!-/.navbar-co1.1.apsc-><divx!-/.Coniaincr-I1.uid-><nav><<1.iv><bdy><divc1.ass=,con1.ainer,><h1c1.ass=tex(-center">精彩剪影<h1.><divc1.ass=Hoverair><divc1.ass=econten,><u1.><1.i><ingsrc="CUsee戴尔Desku>班级网站班级网站imgs精彩剪影4 .jpg,a1.t="1.i><1.i><ingsrc="CUsee戴尔Desku>班级网站班级网站imgs精彩剪影5.jpgMa1.t=MMx/1.i><1.i><img$rc="C:UsCN戴尔'DcskmpM级网站,现级网站imgs精彩舅影3.jpg”a1.t=n><1.i><1.i><img$rc="C:UsCN戴尔'DcskmpM级网站,现级网站imgs精彩舅影5 .jpg-a1.t=n><1.i><1.i><img$rc="C:UsCN戴尔'DcskmpM级网站,现级网站imgs精彩舅影1.jpg,a1.t=n><1.i><u1.><o1.><1.i><1.i><1.i><1.i><1.i><1.i><1.i><1.i><o1.><div><div><div><bdy><scrip1.>windw.on1.oad=func<ion()varcon1.en1.=1.hs.d<ument.getE1.ernen1.sByC1.assNa11w(*'con1.en)(0);varIi=conten,geE1.e11)entsByTagNiu)e(*1.i");functionfun(i»j)(1.ii,sty1.e.oachy=1.;Ii(j
