人机交互与界面设计——班级网站课程报告cxx.docx
信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：班级网站课程设计报告专业班级：大数据212班一.设计思想设计个班级网站,班级网站课设是个非常实用的项目，它可以提高学生的编程能力、团队协作能力和项目管理能力，同时也可以提供一个互动交流的平台，增强班级的凝聚力和活力。二.各个网页设计分析1.网页的结构主要分为班级网站首页，班级成员信息,班级活动展示,班级留言，登录注册界面共五大板块。2.部分网页的具体实现方法：(1)网站首页：主页设计主要以盒了的形式划分。网站首页主要由轮播图，点击图片放大效果，背景图片也调整到对应大小，设置了一个空连接，首页卜.方有班级介绍，鼠标移动到相应位置时会到达卜一个页面，中间的图片之间设置了合适的间距并调整图片大小,使用了setinterva1.函数,来实时更新页面中的一个id为“time”的元素显示当前的年月日时分秒。代码：!OOCTYPEht111.>t<1.><head><netcharset-,*UTF-8*>FNIa火致箱212班”Ut1.Q<1.inkhref*css/sxy1.e.css,ce1.-'Sty1.esheeftype-textcss*ned1.1.,><head><bodyid-,bodyE1.c-><d1.vc1.ass*Zt-><divid="header"><divSWhE”>-212M<d1.v><div><d1.v1.d,'nV><u1.><H><ahrf-"ind«>x.htn1.*>frW<a><H><1.1.>ohref”班维人Ui1.Bj(1.Bhtm1.>班级成&<a1.><1.i><ahrefwHtt.htn>SttJB<a><1.i><1.i><ahref"区儡动板3页面.htm1.”>J动<，/><1.i><1.i><11hr¢f-1.iuya.ht11'>Mf¾iWt'(<a><1.1.><Mahref*rhu1.Nm>¾Mag8113<11><3-”W-tie,><a><1.i><u1.><div><divid-"content"><aivc1.ass三wap><divid三-ifocus"><divid-"ifcus-pic><<J1.v1.(hi-1.f(xu5,p1.c1.1.stMSWkm代：9；top:。；一<u1.><M><ahref三-n><isrc='*iMges1.jpg>><8><1.i><11><hrf-tt><isrc-"1.mago2.jpg>><a><M><11><hr«f-Mtt->ci®gsrc-"images/3.jpg>><a><M><M><ahre*t><utsrc>N1.Mges/4.jpg*><a><><u1.><div><tfivid-MOCUJOPdi><Hv><divid=*1.focu$_tx*><u1.><1.c1.ass,*current'>好学生一耙大字生话过得一彩而充实对火学生至关学要我们整ho1.d住我力的大学ho1.d住我们的讦去年华I<1.i><1.c1.ss,*or11*>规划好学生活耙大，生过得影而充实对火学生至关学旻我的耍ho1.d住我们的大学ho1.d住我们的青谷年华！<1.i><11c1.ss-nor11a1.->一卸好F1.-的大学生活活过影海充实对火孕生健关VftfJSho1.d住我们的大学ho1.d住我们的有*年华！<1.i><1.c1.ass-,11o11>一划好一的大学生笊生活过一而充实时火今生至关女ho1.d后我打高看ho1.d至ft们的有少年华！<1.i><u1.><d1.v><d1.v><divid-"ifocus-btn><u1.><11<1.as5r,<urr><1.resrc,1.mages1.jpg*a1.x-><H><11c1.ass1.nOrm1."Xicgsrc三*inages/2.jpg"a1.t三,*><1.i><1.ic1.ss-,'norn><ingsrc«einagcs/3.jpg"a1.t*,><1.i><Mc1.as5-"norna,><1.ngsrc-1.11ags4.jpg"a1.t-w><M><U1><div><div><divc1.a5Srcn<u>,><d1.><dd><ivsrcw1.waes5dpwidth-454mheight."346-c1.ass三"renM1.*><<Jd><d1.><v><div><d1.vc1.ass-c1.erxd1.v><divc1.as-*h,><divC1.aSSrr><spn>班嫌介矩"span><ahre1.>更C>xaxA1.1.s<d1.vc1.ss"rc-><i11gsrc-i11ge5hf.jpg,c1.ass11hc1.11g,><divc1.a5s->11hzj-><pCIaSS“向hjsr大数据2124p<c1.ss三-jIanjie">；,-幕主任杜金龙老如的带领下.我的团结有进，朝气薛勃打菊豁版<”>-因为耶会我M无麻改忌.因为耶经.我勿无所不徒,囚为印经.我们设惧.我们的未来充*无Hr可绘.地阻且长.行IU将至：行而不泰未来可期.蚊哥梆2名.书写精澈学及.<><div><H"<div><divc1.ass="c1.earxdiv><div><div><scripttypc"text/javascript"*src*jsjs.js,><script><body><t111.>(2)班级成员信息：班级成员信息页面主要编写J'班级成员表，点击个人信息可以跳转到班级成员个人信息页面，并I1.设置了旋转效果，即点击图片旋转。代码：!OOCTYPEhtn1.>ht111.><be<ad><r*etaCharSSIUTF-8”<tit1.e>三i5AfiRSSS<tit1.e><1.inkhrf*css/sty1.e.css*rc1.4sty1.esheet*type-text/css*mediawa1.1."><h¢*i><1.>ody><divc1.asst-><divid-"hcder*><div><d1.v1.d=''11v><u1.><1.i><ahr¢f-"ind.htn1.>fi5I<a><K><H>ohref-Mifi¾i½5thi.htm>Mrtttt<a><1.1.>< 11'bef,:.ht.-< 1.i><ahref-.ht1.->三a;7.H><H><ahrQf-"Hya.htn1.,>JIiSifZ(<a><1.i>< 1.1.><ahref»Mt1.u1.htn1.*>fJ1.<></11><u1.><div><dvid->'contpt>><01vc1.ss-dnr1.ht>><d1.>< ahref",<><i11g5rc-'1.11ag>sItC.jpg*><a>< dt><heJ>班8×xx<a><<>< ddc1.ass="dnr<w><br><br>电话，12345<br>这.大*都不用了吧.。邪没学找班长<d1.><3< ahref三"f"><1.Hgsrc三-ifiages/¢.jpe"><a><dt><ahref0)学习安员xxx<a><dt><ddc1.ass-d11rc-><t>r><br>电话：13579<br>号Vt拴长了就找他<d1.><d1.><ahrfrf-'t*><i11gsrc-,i11Agc>sG*jjpg*><a><dt><ahref三>三36××x<a><<1.t><ddC1.ess=teJnrc-Xbo<br>电话，24681<br>色筠生班心即他束汴询<dd><d1.><d1.>< ahref三"f><Ifigsr<三"Inages/111ZB.jpg*><>< dt><ahrof"团支书xxx<a><dt>< ddc1.ass-*d11r<->电话I24688<t>r>用H任动主特人<dd><d1.><<11><«hrf<t><iBgsrca*inagos*MXftrjpgN/></>(dtxmhr¢f->fiCttx×<a><<n>(ddc1.ass-,d11rc->电话：009988<br>爆织班级活动<d1.><d1.><ohr,f><igSrC*gges体会，1pe"><a><dt><<jhref=0>体委xxx<,a><dt><ddc1.ass,d11rc'>电话，747375<br>活动<dd><d1.><div><div><divc1.055*c1.cr,><div><div><div>/body)<tr1.><OOCrvPEht111.<htn1.><head>(h1.>班雅伯恩h1.<tb1.ea1.ig(v*center*border2*ce1.1.pddd1.nc>N15px,ace1.1.spac1.og»M0-><tbed><tr>讣>姓名"Kh><th>性,别"th<th><xh>yh>个人主页<八2tr,<thead><tbody><tr>K<td><td><t<1.><td>3<td><td><buttn><aref三*HI1tt,Ji1.ht1.w>个人主页3xbuttonxtd)<tr><tr><td>学习委员"td><td>B<td><td>2<W><td><butto>><ahre1.班班人员借.。贞rt.ht111.->4*i<><buttn><td><tr><tr><t<J>GHH<td><td><c<td><td>B<td><tdxbutton><ahruf="责珑人小於5!山rti.ht111.->yi*1.i<o><button><td><tr><tr><U>If1.JcE'<.td>.I1.j-：-J。3'J,，、：,：',二href-,；,，.”"，；：曾口i.ht111.->个人主页<8<"utto0><八d
