人机交互与界面设计——班级页面课程设计.docx
信息工程学院课程设计报告（2021-2022学年第二学期）课程：人机交互与界面设计题目：班级页面设计总结专业班级:大数据211班目录前端页面设计总结1-.整体效果图：2注册界面：2登录界面：2首页界面：2同学展示界面：4活动展示界面：5二.详细设计：61.注册界面，登录界面.6登录界面6注册页面62 .首页：73 .同学展示：94 .班级活动：12四.总结：16班级网页设计总结网页结构包含登录、注册界面,班级主页，班级活动展示（含班级人员信息表）.留言板等界面。其中用到HTM1.标题，表格，表单，导航栏；CSS,div布局对象，图片、文字等的定位，浮动：运用JaVaSCriPt展示登录及其图片轮播效果。设计思路设计班级网页的思路：1、首先明确网页的目的和受众.例如：展示班级信息、分享班级活动等。2、选择合适的网页结构和布局，通常可以使用header、nuv、main,section,aside和footer等Hn1.1.5新标签。3、选取合适的配色和字体，要让网页看起来舒适美观，并保证易读性.4、设计网页的导航菜单，使用户可以轻松浏览网页内容。在导航菜单中Uf以设置链接到班级介绍、学生名单、班级动态等页面。5、在班级介绍页面中，可以介绍班级的基本情况、班级荣誉、班级宣言等。6、在学生名单页面中列出全班同学的姓名和照片，可以按照姓名首字母或班级序号排序。7.在班级动态页面中，及时发布班级发生的各种活动和事项，可以附上照片和文字。8、在网页的底部添加版权声明和联系方式,方便用户与班级管理者联系交流。最后，使用JavaScript为网页添加交互效果，例如图片展示、轮播图、下拉菜单、滚动加载等。整体效果图:注册界面:登录界面:首页界面，班级展示活动展示界面;班级展示二.详细设计，1.注册界面，登录界面，登录界面表单险证，输入正确形式的文字，验证正确后点击登录进入首页，添加一个倒计时按钮，点击该按钮后按钮属性变为禁用，开始倒计时60s,下面添加登录按钮和个纪选框，当选中纪选框时登录按钮解除禁用。右下角添加了超链接还没注册，直接注册（向右对齐），可以跳转到注册页面。注册页面注册页面添加了标卷和inpu1.输入框，input输入框含有表单验证输入正确的形式才能注册成功，下面添加了注册按钮和一个夏选框，当嵬选框选中时，按钮解除禁用，按钮禁用时背景颜色为灰色，解除禁用后背景颜色为蓝色，注册后可以点击右边的超链接进入登录页面。2.首页:<!DOCTYPEhtm1.><htm1.1.ang="en"><head><metacharset="UTF-8"><tit1.e>课程设计<Ht1.e><metaname="description"Content="班级网页设计”><!-网页描述-><metaname="keyword"content="班级"><1.inkre1.="sty1.esheet"tpe="textcss"href="cssbase.css"><1.inkre1.="sty1.esheet"type="textcss"href="cssindexstve.css"><head><body><divc1.ass="father"><!-背景元素-><divc1.ass="1.ine"><div><imgc1.ass="b1.ue1.eft"src="images/蓝底左.png"a1.t="底1."><imgc1.ass="b1.ueright"src="images/蓝底右.png"a1.t="底2"><imgc1.ass="1.ine"src="images,Sf.png"a1.t="块1."imgc1.ass="atch1."Src="images/小块.png"a1.t="块1."><imgCIaSS="patch2"src="images/小块.png"a1.t="块2"ximgc1.ass="patdh3"src="images/小块.png"a1.t="块3"><imgc1.ass="yun1."src="images/云雾背景.png"a1.t="底3"><!-<imgc1.ass="un2"src="img/云雾背兔.png"a1.t="底4">-ximgC1.aSS="yun3"src="images/云雾背景右png"a1.t="底5”><!-导航栏设置-><divc1.ass="dhbt"><imgsrc="images1.ogo1.jpg"a1.t=""><div><divc1.ass="dh"><u1.><1.ixahref="index.htm1.”>网站首页<a>v1.i><1.i><ahref三"form.htm1.”>同学展示vax1.i><1.ixahref="active.htm1.”>活动中心<ax1.i><u1.><div><divc1.ass="d1.zc"><p><ahref="d1.htm1."CIaSS="cn_net”>登录va><ahref="zc.htmc1.a5s="en_net">注册<axp><div><1-具体内容第一部分<imgc1.ass="tp1."src="imagesa.jpg"a1.t="图1"><divc1.ass="text1.">< pc1.ass="text1.-1."><b>信息工程学院<br>大数据211<br><br><b><p><divc1.ass="text3',>< 1-<divc1.ass="rx-mainbox">->< pC1.aSS="text-3"><b>活动资讯<br><brbp><!"<divc1.ass="rx_mainbox_tit1.e"><h1.>活动资讯<h1.>-><!-<div>-><divc1.ass="sixbox"><pc1.a$s="new_rq"><span>20<span>2023-6<p><pc1.ass="newrfjx"><ahref="#">【思政、道镌教育】“诚信”系列团日活动<a><span>热烈欢迎各位同学参加“诚信”系列团日活动，让我们携手共进，共创美好未来！<span><P><pc1.ass="new-rq">VSPan>15<SPan>2023-6<P><pc1.ass="newrf_tx"><ahref="tt">【社会实践】不负青春潮华，助力考研<a><span>热烈欢迎各位同学参加“不负青春招华，助力考研”，让我们携手共进，共创美好未来！<span><P><1.ixahref="">首页<a><1.i><1.ixahref="">同学展示<a><1.i><1.ixahref="">信息展示<a><1.i><u1.><divc1.ass="1.inks"><pCIaSS="Iink_tit1.e">友情链接：<><u1.><1.i><ahref="javascript:;”>信工院21级<a><1.i><1.i><ahref="javascript:;">大数据va><1.i><u1.><div><div><divc1.ass="down1.oad"><div><p>电话：0715-43228334323710<p><p>邮箱：sa1.es、market<p><p>地址：中国甘肃兰州vp><p>传真：0715-4323710<p><p>邮编：437400<p><div><div><div><div><div><div><div><body><htm1.>3.同学展示；<!DOCTYPEhtm1.><htm1.><head><metacharset="UTF-8"><tit1.e>同学展示<tit1.e><1.inkre1.="sty1.esheet"type="te×tcss"href="cssbase.css"><1.inkre1.="sty1.esheet-type="te×tcss"href三"cssinde×sty1.e.css7><1.inkre1.="sty1.esheetMtype="te×tcss"href="cssform.css"><1.inkre1.="sty1.esheet"href="cssmain.css"/><!-<scriptsrc="jssticky-co1.or.js"><script>-><head><body><divc1.ass="wrapper"><divc1.ass="net-top"><divc1.ass="tops"><divc1.ass="w1.200"><pc1.ass="tops-r"><ahref="d1.htm1."c1.ass="cn-net">登录<a><ahref="zc.htm1."CIaSS="en_net">注册<a><p><div><div><divc1.ass="header"><divc1.ass="w1.200"><divdass="header-1.og"xh1.>班级展示<h1.><div><divc1.ass="header-right"><u1.c1.ass="main-nav"><1.ixahref="index.htm1.">-页<a><1.i><1.ic1.ass="active"><ahref="form.htm1.”>同学展示<a><1.i><1.ixahref="active.htm1.”>活动展示<a><1.i><imgsrc="imagesogo1.jpg"a1.t="1.ogonwidth="145px"height="88px"><u1.><div><div><div><div><1"主体><divc1.ass="r×-container"><!-工具区-><divc1.ass="too1.box"><divc1.ass="w1.200"><divc1.ass="breadnav"><p>您当前位置:<ahref="index.htm1.">首页</axspan>></$panxac1.ass="cur"href="javascript:丁,>同学展示<a><p><div><div><div><!-内页主盒子一><divc1.ass="cotainer-box"><divc1.ass="inerMain1.nfow1.200,><h1.CIaSS="innerTit1.e''>同学信息展示<h1.><divc1.ass="subbox"><tab1.e><thead><tr><!-<th>头像<th>-><th>名字<th><th>邮箱<th>v!-<th>爱好vth>->vth>学号vth>vth>性别vth><tr><thead><tbody><divC1.aSS="wave-box”><divc1.ass="marquee-boxmarquee-up"id="marquee-box"><divc1.ass="marquee"><divc1.ass="wave-1.ist-box"id="wave-1.ist-box1."><u1.><1.i><imgheight="60"src="images/wave_02.png"x/1.i><u1.><div><divc1.ass="wave-1.ist-box"id="wave-1.ist-box2"><u1.><1.i><imgheight="60"src="images/wave_02.png"x/1.i><u1.><div><div><div><divc1.ass="marquee-box"id="marquee-box3"><divCIaSS="marquee”><divc1.ass="wave-1.ist-box"id="wave-1.ist-box4"><u1.><1.i><imgheight="60"src="images/wave_01.png"x/1.i><u1.><div><divc1.ass="wave-1.ist-box"id="wave1.istboxS"><u1.><1.i><imgheight="60"src="images/wave_01.png"x/1.i><u1.><div><div><div><div><!-底部-><divc1.ass="footer"><divc1.ass="foot_header"><divc1.ass="w1.200"><divdass="fooj1.ogo"><h1.>班级信息<h1.><br><h1.>展示<h1.><div><divc1.ass="foot-ntent"><u1.c1.ass="foot_map"><1.i><ahref="">首页<ax1.i><1.i><ahref="">同学展示<ax1.i><1.i><ahref=*,>信息展示<a><1.i><u1.><divc1.ass="1.inks"><pc1.ass="1.ink_tit1.e">友情链接：<p><u1.><1.i><ahref="javascript:;">BIIw21级<a><1.i><1.i><ahref="javascript:;">大数据<a><1.i><htm1.>4.班皴活动：<!DOCTYPEhtm1.><htm1.><head><metacharset="UTF-8"><tit1.e>活动展示<tit1.e><1.inkre1.="sty1.esheet"type="textcss"href="cssbase.css"><1.inkre1.="sty1.esheet"tvpe="textcss"href="cssindexstve.css"><head><body><divc1.ass="wrapper"><divc1.ass="net-top"><divc1.ass="tops"><divc1.ass="w1.2"><pc1.ass="tops-r"xahref="d1.htm1."c1.ass="cn-net">登录<a><ahref="zc.htm1."C1.aSS="en_net">注册<a><p><div><div><divc1.ass="header"><divc1.ass="w1.2"><divc1.ass="header-1.og"xh1.>ij<<h1.><div><divc1.ass="header-right"><u1.c1.ass="main-nav"><1.ixahref="index.htm1.">首页va>v1.i><1.ixahref="form.htm1.”>同学展示va><1.i><1.ic1.ass="active"><ahref="active.htm1.”>活动展示<a><1.i><imgsrc="images1.ogo1.jpg"a1.t="1.ogo"width="145px"height="88px"><u1.><div><div><div><div><1-主体-><divc1.ass="rx-container"><1-工巅-><divc1.ass="too1.box"><divc1.ass="w1.2',><divc1.ass="breadnav"><p>您当前位置：<ahref="index.htm1.">首页</axspan>></span><ahref="form.htm1.”>班级展示<a><p><div><u1.c1.ass="inner-nav"><1.ic1.ass="active"><ahref="javascript:;"data-tpe="asyw">全部活动<a><1.i><i><ahref="#"data-type="t1.bd">班级活动<a><1.i><u1.><div><div><div><divc1.ass=,"mooc"sty1.e="disp1.ay:none"><divid="mc"><!头部><h3Id="moocTit1.e”>最进活动Vahref="Irtarget="一se1.fw'>更多>><a><h3><!-头部结束-><!-中间-><divc1.ass="zk"><div><pc1.ass="s1.ide"><ahref="javascript:showDiv()"id="str"c1.ass=',btn-s1.ide">更多选项+<a><p><div><divc1.ass="sb"><u1.><u1.><div><div><div><divc1.ass="book1.ists"><u1.><1.i><divc1.ass="video"><videocontro1.sPoSter="images/拔河.jpeg”><!"Videofi1.es-><sourcesrc="video1.MP4"type="videomp4"stee="576"><video><div><>人间仙境<><1.i><1.i><divc1.ass="video"><videocontro1.sposter="images2.PNG"><!-Videofi1.es-><sourcesrc="video2.MP4"tvpe="videomp4"SiZe="576”><video><div><>冰天景<><1.i><1.i><divc1.ass="video"><videocontro1.sposter="images3.PNG,><1-Videofi1.es-><sourcesrc="video3.MP4"tpe="videomp4"size="576"><video><div>v>面朝大海vp><1.i><1.i><divCIaSS="video"<videocontro1.sposter="images5.PNG"><1.-Videofi1.es-><sourcesrc="video5.MP4"type="videomp4"size="576"><video><div><p>黄fi=<p><1.i><1.i><divc1.ass="video"><videocontro1.sposter="images6.PNG"><!-Videofi1.es-><sourcesrc="video6.MP4"tvpe="videomp4"size="576"><video><div><p>风景<p><1.i><1.i><divc1.ass="video"><videocontro1.sposter="images7.PNG',><!-Videofi1.es-><sourcesrc="video7.MP4"type="videomp4"size="576"><video><div><p>羽毛球活动<p><1.i><u1.><div><div><divc1.ass="na"st1.e="disp1.ay:none;"><imgsrc="images20.JPG"c1.ass="bi"sty1.e="width:1200px;height:400px;margin:30px;"><divc1.ass="sb"><u1.><1.i>type="button"va1.ue="<inputc1.ass="i1."sty1.e="background:skyb1.ue"><1.i><1.i><inputsty1.e="background:pink"><1.i><1.i><inputsty1.e="background:WeOO"><1.i><1.i><inputsty1.e="background:WeOO">c1.ass="i1."c1.ass="i1."c1.ass="i1."type="button"type="button"type="button"va1.ue="va1.ue="va1.ue="<1.i><u1.><div><div><div><scritte="textjavascript,>vard1.=document.querySe1.ector(".book1.ists");vard2=document.querySe1.ector(".mooc");vard3=document.querySe1.ector(".na");VarinP=document.querySeIeCtorAII(".i1.");varp=document.querySe1.ectorAII(".p2");var1.i=document.querySe1.ector(".innernav").querySe1.ectorA1.1.("!i");vararea=document.getE1.ementBy1.d("moocBox");varcon1.=document.getE1.ementBy1.d"con1.");varcon2=document.getE1.ementBy1.d"con2");*ConsoIeJog(Ii);*/inp0.onc1.ick=function()if(this.va1.ue="i攵起")p(O.sty1.e.disp1.ay='none'this.va1.ue=喳看详情"；e1.se(p(O.sty1.e.disp1.ay='b1.ock'this.va1.ue="收起"；)轮插图,varitems=document.querySe1.ectorAII(".item")t1i'varpoints=document.querySe1.ectorAII(".point"),var1.eft=document.getE1.ementBy1.d("1.eftBtn");varright=document.getE1.ementBy1.d("rightBtn");vara1.1.=document.querySe1.ector(".wrap")varindex=0;vartime=0;定时器跳转参数初始化封装个清除active方法VarC1.earActive=function()for(i=0;i<items.1.ength；i+)itemsi.c1.assName='item'for(j=0;j<points.1.ength;j+)points(j.c1.assName='point'改变active方法vargo1.nde×=function()c1.earActive();items(inde×.c1.assName='itemactive'points(inde×.c1.assName='pointactive'左按钮事件vargo1.eft=function()if(index=0)index=4;e1.seindex-;go1.ndex();右按钮事件vargoRight=function()if(index<4)index+;e1.seindex=0;)go1.ndex();)绑定点击事件监听1.eft.addEvent1.istener(,c1.ick,function()go1.eft();time=0;计时器跳转清零!)right.addEvent1.istener(,c1.ick',function)goRight();time=0;计时器跳转清零for(i=0;i<points.1.ength;i*)pointsi.addEvent1.istener('cick',function()varpointindex=this.getAttribute(,data-inde×')index=pointindex;go1.ndex();time=0;计时器跳转清零)计时器轮播效果vartimer;functionp1.ay()timer=set1.nterva1.()=>time+;if(time=20)goRight();time=0;,100)PIaV0;移入清除计时器a1.1.onmousemove=function()C1.earinterVaI(timer)移出启动计时器a1.1.onmouse1.eave=function()PavO;)变量：items：代表所有图片DOM元素points：代表所有点DOM元素1.eft：向左轮播的箭头DoM节点right：向右轮播的箭头DoM节点a1.1.：表示整个轮播图D1.V容器index：当前显示图片的索引值time：计时器，表示跳转时间函数：c1.earActive：清除所有图片和点的active效果go1.ndex：根据当前索引值改变对应的图片和点的active效果go1.eft：向左移动，先判断是否到达第一张图片，如果是则跳到最后一张：否则减少索引值goRight：向右移动，先判断是否到达最后张图片，如果是则跳到第张：否则增加索引值p1.ay：开启轮播，创建一个计时器,每1秒钟检查是否需要跳转，如果时间达到20杪就执行向右跳转。同时也要清除计时器跳转timea1.1.onmousemove：当鼠标在轮播图上移动时清除计时器，避免跳转a1.1.onmouse1.eave：当鼠标移出轮播图时重新启动计时器程序的核心是通过设置计时器来达到轮播效果，同时用索引值记录和控制当前显示的图片。点击徜头或者点都会改变索引值，并通过go1.eft、goRightgo1.ndex等函数来改变图片和点的active效果，从而达到图片轮播的效果。四，总结:通过制作班级网页巩固了HTM1.,CSS和JavaScript的相关知识，在编写代码的过程中，个人对于HTM1.和CSS的相关术语和概念较为熟悉，而JaVaSCriPt的知识运用相对薄弱，对前端的应用和问题处理不够全面。随着知识面的不断拓展，学习的相关技术语言越来越多，所需掌握的技术也很广泛，这需要我在学习的过程中不断努力并及时总结。在班级网页制作的过程中，收获颇丰。四.游戏I找不同：代码实现效果图:constT2-d<x<ct.uerySe1.<torA1.1.(,.v')for(1.ot1.-0;1<n.1yt;1)(T1.().*»1.Event1.1.it«ner(cMcicfunction()conso1.e.dir(T2(1)T2(1.sty1.cc1.tyTn(1.).sty1.e.owty'1*给选择器".w"和".v"所匹配到的元素添加单击事件监听器。当”.k被单击时,程序会将".N的透明度设置为1,从而让它显现出来。<sty1.e>divingwidth：800px;.).w(width:50px;height:50px;border:IOpxso1.idbisque;border-radius:50%;position:abso1.ute;.Jdiv(position:re1.ative;).t1.top:50px:1.eft:180px;opacity:0).t3(top:150px;1.eft:500px;opacity:0).t2(top:450px;1.eft:1150pz;opacity:0(top:450px:1.eft:410px;opacity:0width:100px;top:50px;1.eft:950px;opacity:0).w.t6vidth:100px;top:180px:1.eft:1350px;opacity：0)divdiv1.ogVidth：65px;height:65px;)divdivposition:abso1.ute;).r1.top:530px:bottoa:130px;1.eft:200px;opacity:0).r2top:530px:bottoa:130px;1.eft:100px;opacity:0).r3top:530px:bott<n:130px;1.eft:300px;opacity:0(top:530px;bott(»:130px;.1.eft:400px;.opacity:0.).r5top:530px;.botto三:130px;1.eft:500px;.opacity:0.).M.top:530px;.bottoa:130px;1.eft:600px;.opacity：0.)<sty1.e><head><body><div><iagsrc三*1.pnga1.t三*><iagsrc三*2.png*a1.t三*><divc1.ass三*t1.w>><div><divc1.ass=t2w,><div><divc1.ass=*t3w*Edth=TOOpx-hight=*100px><div><divc1.ass=*'t4w*,><div><divc1.ass=*tw*><div>< divc1.ass=*t6r>><div>< divc1.ass=*r3v>><i三gsrc=*3.png*a1.t=*><div>< divc1.ass=*"r4v>><i三gsrc=*./7.png*a1.t=*><div>< divc1.ass=*r2v*><i三gsrc=*./5.png*a1.t=*><div>< divc1.ass=*r1.v>><i三gsrc=*./8.pnga1.t=*><div>< divc1.ass=*r5v*,><i三gsrc=*./4.png*a1.t=*><div>< divc1.ass=*r6v*><i三gSrC="./6.png.a1.t=*><div><div>创建一个网页布局，其中包括多个图片和一些位置、大小和透明度的设置.该代码使用了盒模型、浮动和绝对定位等CSS技术。其中，W2表示一个块级元素，沁g表示图片元素表示类选择器，"#咪示ID选择明通过CSS设理它们的样式属性，从而实现网页布局效果。消消乐：代码实现效果图:啦2时阍为21hh三9bhdEQ91.1.ChqihHGfiBSSH<script>constbtn=document.querySe1.ectorAII(,divdiv,)consttim=document.querySe1.ector('.time,)1.eti=0;constn=SetInterVa1.(function()i+tim.innerHTM1.='经过时间为$i'1.100)constf1.agjd=1;for(1.eti=0;i<btn.1.ength；i+)btni.addEvent1.istener(,c1.ick,function)if(f1.agjd.1.ength=011btnf1.agjdf1.agJdJength-1.innerHTM1.=btni.innerHTM1.)f1.ag_id.push(i)btni.sty1.e.backgroundCo1.or=,pink,e1.sewhi1.e(f1.ag_id.1.ength!=0)btnf1.agJd.pop()J.sty1.e.backgroundCo1.or=,azure,if(f1.agjd.1.ength=3)(whi1.e(f1.ag_id.1.ength!=0)btnf1.agjd.pop().sty1.e.disp1.ay=,n
