人机交互与界面设计-班级页面课程设计

上传人：万*** IP属地：贵州上传时间：2024-07-04 格式：DOCX 页数：26 大小：3.41MB 积分：15 举报 版权申诉

已阅读5页，还剩21页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

信息工程学院课程设计报告（2021-2022学年第二学期）课程：人机交互与界面设计题目：班级页面设计总结专业班级：大数据211班班级网页设计总结网页结构包含登录、注册界面，班级主页，班级活动展示（含班级人员信息表），留言板等界面。其中用到HTML，标题，表格，表单，导航栏；CSS，div布局对象，图片、文字等的定位，浮动；运用JavaScript展示登录及其图片轮播效果。设计思路设计班级网页的思路：1、首先明确网页的目的和受众，例如：展示班级信息、分享班级活动等。2、选择合适的网页结构和布局，通常可以使用header、nav、main、section、aside和footer等HTML5新标签。3、选取合适的配色和字体，要让网页看起来舒适美观，并保证易读性。4、设计网页的导航菜单，使用户可以轻松浏览网页内容。在导航菜单中可以设置链接到班级介绍、学生名单、班级动态等页面。5、在班级介绍页面中，可以介绍班级的基本情况、班级荣誉、班级宣言等。6、在学生名单页面中列出全班同学的姓名和照片，可以按照姓名首字母或班级序号排序。7、在班级动态页面中，及时发布班级发生的各种活动和事项，可以附上照片和文字。8、在网页的底部添加版权声明和联系方式，方便用户与班级管理者联系交流。最后，使用JavaScript为网页添加交互效果，例如图片展示、轮播图、下拉菜单、滚动加载等。整体效果图：注册界面：登录界面：首页界面：同学展示界面：活动展示界面：详细设计：1.注册界面，登录界面：登录界面表单验证，输入正确形式的文字，验证正确后点击登录进入首页，添加了一个倒计时按钮，点击该按钮后按钮属性变为禁用，开始倒计时60s，下面添加登录按钮和一个复选框，当选中复选框时登录按钮解除禁用。右下角添加了超链接还没注册，直接注册（向右对齐），可以跳转到注册页面。注册页面注册页面添加了标签和input输入框，input输入框含有表单验证输入正确的形式才能注册成功，下面添加了注册按钮和一个复选框，当复选框选中时，按钮解除禁用，按钮禁用时背景颜色为灰色，解除禁用后背景颜色为蓝色，注册后可以点击右边的超链接进入登录页面。2.首页：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>课程设计</title><metaname="description"content="班级网页设计"><metaname="keyword"content="班级"><linkrel="stylesheet"type="text/css"href="css/base.css"/><linkrel="stylesheet"type="text/css"href="css/indexstyle.css"/></head><body><divclass="father"><divclass="line0"></div><imgclass="blueleft"src="images/蓝底左.png"alt="底1"><imgclass="blueright"src="images/蓝底右.png"alt="底2"><imgclass="line"src="images/竖线.png"alt="块1"><imgclass="patch1"src="images/小块.png"alt="块1"><imgclass="patch2"src="images/小块.png"alt="块2"><imgclass="patch3"src="images/小块.png"alt="块3"><imgclass="yun1"src="images/云雾背景.png"alt="底3"><imgclass="yun3"src="images/云雾背景右.png"alt="底5"><divclass="dhbt"><imgsrc="images/logo1.jpg"alt=""></div><divclass="dh"><ul><li><ahref="index.html">网站首页</a></li><li><ahref="form.html">同学展示</a></li><li><ahref="active.html">活动中心</a></li></ul></div><divclass="dlzc"><p><ahref="dl.html"class="cn_net">登录</a><ahref="zc.html"class="en_net">注册</a></p></div><imgclass="tp1"src="images/a.jpg"alt="图1"><divclass="text1"><pclass="text1-1"><b>信息工程学院<br>大数据211<br><br></b></p><divclass="text3"><pclass="text-3"><b>活动资讯<br><br></b></p><divclass="sixbox"><pclass="new_rq"><span>20</span>2023-6</p><pclass="newrf_tx"><ahref="#">【思政、道德教育】“诚信”系列团日活动</a><span>热烈欢迎各位同学参加“诚信”系列团日活动，让我们携手共进，共创美好未来！！！</span></p><pclass="new_rq"><span>15</span>2023-6</p><pclass="newrf_tx"><ahref="#">【社会实践】不负青春韶华，助力考研</a><span>热烈欢迎各位同学参加“不负青春韶华，助力考研”，让我们携手共进，共创美好未来！！！</span></p><li><ahref="">首页</a></li><li><ahref="">同学展示</a></li><li><ahref="">信息展示</a></li></ul><divclass="links"><pclass="link_title">友情链接：</p><ul><li><ahref="javascript:;">信工院21级</a></li><li><ahref="javascript:;">大数据</a></li></ul></div></div><divclass="download"><div><p>电话4323710</p><p>邮箱：sales@、market@</p><p>地址：中国·甘肃·兰州</p><p>传真lt;/p><p>邮编：437400</p></div></div></div></div></div></div></div></body></html>3.同学展示：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>同学展示</title><linkrel="stylesheet"type="text/css"href="css/base.css"/><linkrel="stylesheet"type="text/css"href="css/indexstyle.css"/><linkrel="stylesheet"type="text/css"href="css/form.css"/><linkrel="stylesheet"href="css/main.css"/></head><body><divclass="wrapper"><divclass="net_top"><divclass="tops"><divclass="w1200"><pclass="tops_r"><ahref="dl.html"class="cn_net">登录</a><ahref="zc.html"class="en_net">注册</a></p></div></div><divclass="header"><divclass="w1200"><divclass="header-log"><h1>班级展示</h1></div><divclass="header_right"><ulclass="main_nav"><li><ahref="index.html">首页</a></li><liclass="active"><ahref="form.html">同学展示</a></li><li><ahref="active.html">活动展示</a></li><imgsrc="images/logo1.jpg"alt="logo"width="145px";height="88px";></ul></div></div></div></div><divclass="rx_container"><divclass="toolbox"><divclass="w1200"><divclass="breadnav"><p>您当前位置:<ahref="index.html">首页</a><span>></span><aclass="cur"href="javascript:;">同学展示</a></p></div></div></div><divclass="container_box"><divclass="innerMainInfow1200"><h1class="innerTitle">同学信息展示</h1><divclass="subbox"><table><thead><tr><th>名字</th><th>邮箱</th><th>学号</th><th>性别</th></tr></thead><tbody><divclass="wave-box"><divclass="marquee-boxmarquee-up"id="marquee-box"><divclass="marquee"><divclass="wave-list-box"id="wave-list-box1"><ul><li><imgheight="60"src="images/wave_02.png"></li></ul></div><divclass="wave-list-box"id="wave-list-box2"><ul><li><imgheight="60"src="images/wave_02.png"></li></ul></div></div></div><divclass="marquee-box"id="marquee-box3"><divclass="marquee"><divclass="wave-list-box"id="wave-list-box4"><ul><li><imgheight="60"src="images/wave_01.png"></li></ul></div><divclass="wave-list-box"id="wave-list-box5"><ul><li><imgheight="60"src="images/wave_01.png"></li></ul></div></div></div></div><divclass="footer"><divclass="foot_header"><divclass="w1200"><divclass="foot_logo"><h1>班级信息</h1><br><h1>展示</h1></div><divclass="foot_content"><ulclass="foot_map"><li><ahref="">首页</a></li><li><ahref="">同学展示</a></li><li><ahref="">信息展示</a></li></ul><divclass="links"><pclass="link_title">友情链接：</p><ul><li><ahref="javascript:;">信工院21级</a></li><li><ahref="javascript:;">大数据</a></li></html>4.班级活动：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>活动展示</title><linkrel="stylesheet"type="text/css"href="css/base.css"/><linkrel="stylesheet"type="text/css"href="css/indexstyle.css"/></head><body><divclass="wrapper"><divclass="net_top"><divclass="tops"><divclass="w1200"><pclass="tops_r"><ahref="dl.html"class="cn_net">登录</a><ahref="zc.html"class="en_net">注册</a></p></div></div><divclass="header"><divclass="w1200"><divclass="header-log"><h1>班级展示</h1></div><divclass="header_right"><ulclass="main_nav"><li><ahref="index.html">首页</a></li><li><ahref="form.html">同学展示</a></li><liclass="active"><ahref="active.html">活动展示</a></li><imgsrc="images/logo1.jpg"alt="logo"width="145px";height="88px";></ul></div></div></div></div><divclass="rx_container"><divclass="toolbox"><divclass="w1200"><divclass="breadnav"><p>您当前位置:<ahref="index.html">首页</a><span>></span><ahref="form.html">班级展示</a></p></div><ulclass="inner_nav"><liclass="active"><ahref="javascript:;"data-type="asyw">全部活动</a></li><li><ahref="#"data-type="tlbd">班级活动</a></li></ul></div></div><div><divclass="mooc"style="display:none"><divid="mooc"><h3id="moocTitle">最进活动<ahref="#"target="_self">更多>></a></h3><divclass="zk"></div><pclass="slide"><ahref="javascript:showDiv()"id="str"class="btn-slide">更多选项+</a></p></div><divclass="sb"><ul></ul></div></div></div><divclass="booklists"><ul><li><divclass="video"><videocontrolsposter="images/拔河.jpeg"><sourcesrc="video/1.MP4"type="video/mp4"size="576"></video></div><p>人间仙境</p></li><li><divclass="video"><videocontrolsposter="images/2.PNG"><sourcesrc="video/2.MP4"type="video/mp4"size="576"></video></div><p>冰天景</p></li><li><divclass="video"><videocontrolsposter="images/3.PNG"><sourcesrc="video/3.MP4"type="video/mp4"size="576"></video></div><p>面朝大海</p></li><li><divclass="video"><videocontrolsposter="images/5.PNG"><sourcesrc="video/5.MP4"type="video/mp4"size="576"></video></div><p>黄昏</p></li><li><divclass="video"><videocontrolsposter="images/6.PNG"><sourcesrc="video/6.MP4"type="video/mp4"size="576"></video></div><p>风景</p></li><li><divclass="video"><videocontrolsposter="images/7.PNG"><sourcesrc="video/7.MP4"type="video/mp4"size="576"></video></div><p>羽毛球活动</p></li></ul></div></div><divclass="na"style="display:none;"> <imgsrc="images/20.JPG"class="bi"style="width:1200px;height:400px;margin:30px;"> <divclass="sb"> <ul> <li> <inputclass="i1"type="button"value="查看详情"style="background:skyblue"> </li> <li> <inputclass="i1"type="button"value="查看详情"style="background:pink"> </li> <li> <inputclass="i1"type="button"value="查看详情"style="background:#e00"> </li><li> <inputclass="i1"type="button"value="查看详情"style="background:#e00"> </li> </ul></div></div></div><scripttype="text/javascript">vard1=document.querySelector(".booklists");vard2=document.querySelector(".mooc");vard3=document.querySelector(".na");varinp=document.querySelectorAll(".i1");varp=document.querySelectorAll(".p2");varli=document.querySelector(".inner_nav").querySelectorAll("li");vararea=document.getElementById("moocBox");varcon1=document.getElementById("con1");varcon2=document.getElementById("con2");/*console.log(li);*/inp[0].onclick=function(){if(this.value=="收起"){p[0].style.display='none';this.value="查看详情";}else{p[0].style.display='block';this.value="收起";}}轮播图：varitems=document.querySelectorAll(".item");//图片节点varpoints=document.querySelectorAll(".point")//点varleft=document.getElementById("leftBtn");varright=document.getElementById("rightBtn");varall=document.querySelector(".wrap")varindex=0;vartime=0;//定时器跳转参数初始化//封装一个清除active方法varclearActive=function(){for(i=0;i<items.length;i++){items[i].className='item';}for(j=0;j<points.length;j++){points[j].className='point';}}//改变active方法vargoIndex=function(){clearActive();items[index].className='itemactive';points[index].className='pointactive'}//左按钮事件vargoLeft=function(){if(index==0){index=4;}else{index--;}goIndex();}//右按钮事件vargoRight=function(){if(index<4){index++;}else{index=0;}goIndex();}//绑定点击事件监听left.addEventListener('click',function(){goLeft();time=0;//计时器跳转清零})right.addEventListener('click',function(){goRight();time=0;//计时器跳转清零})for(i=0;i<points.length;i++){points[i].addEventListener('click',function(){varpointIndex=this.getAttribute('data-index')index=pointIndex;goIndex();time=0;//计时器跳转清零})}//计时器轮播效果vartimer;functionplay(){timer=setInterval(()=>{time++;if(time==20){goRight();time=0;}},100)}play();//移入清除计时器all.onmousemove=function(){clearInterval(timer)}//移出启动计时器all.onmouseleave=function(){play();}变量：items：代表所有图片DOM元素points：代表所有点DOM元素left：向左轮播的箭头DOM节点right：向右轮播的箭头DOM节点all：表示整个轮播图DIV容器index：当前显示图片的索引值time：计时器，表示跳转时间函数：clearActive：清除所有图片和点的active效果goIndex：根据当前索引值改变对应的图片和点的active效果goLeft：向左移动，先判断是否到达第一张图片，如果是则跳到最后一张；否则减少索引值goRight：向右移动，先判断是否到达最后一张图片，如果是则跳到第一张；否则增加索引值play：开启轮播，创建一个计时器，每1秒钟检查是否需要跳转，如果时间达到20秒就执行向右跳转。同时也要清除计时器跳转timeall.onmousemove：当鼠标在轮播图上移动时清除计时器，避免跳转all.onmouseleave：当鼠标移出轮播图时重新启动计时器程序的核心是通过设置计时器来达到轮播效果，同时用索引值记录和控制当前显示的图片。点击箭头或者点都会改变索引值，并通过goLeft、goRight、goIndex等函数来改变图片和点的active效果，从而达到图片轮播的效果。四：总结：通过制作班级网页巩固了HTML,CSS和JavaScript的相关知识，在编写代码的过程中，个人对于HTML和CSS的相关术语和概念较为熟悉，而JavaScript的知识运用相对薄弱，对前端的应用和问题处理不够全面。随着知识面的不断拓展，学习的相关技术语言越来越多，所需掌握的技术也很广泛，这需要我在学习的过程中不断努力并及时总结。在班级网页制作的过程中，收获颇丰。游戏：找不同：代码实现效果图：constT1=document.querySelectorAll('.w')

constT2=document.querySelectorAll('.v')

for(leti=0;i<T1.length;i++){

T1[i].addEventListener('click',function(){

console.dir(T2[i])

T2[i].style.opacity='1'

T1[i].style.opacity='1'给选择器".w"和".v"所匹配到的元素添加单击事件监听器。当".w"被单击时，程序会将".v"的透明度设置为1，从而让它显现出来。<style>divimg{width:800px;}.w{width:50px;height:50px;border:10pxsolidbisque;border-radius:50%;position:absolute;}div{position:relative;}.t1{top:50px;left:180px;opacity:0}.t3{top:150px;left:500px;opacity:0}.t2{top:450px;left:1150px;opacity:0}.t4{top:450px;left:410px;opacity:0}.w.t5{width:100px;top:50px;left:950px;opacity:0}.w.t6{width:100px;top:180px;left:1350px;opacity:0}divdivimg{width:65px;height:65px;}divdiv{position:absolute;}.r1{top:530px;bottom:130px;left:200px;opacity:0}.r2{top:530px;bottom:130px;left:100px;opacity:0}.r3{top:530px;bottom:130px;left:300px;opacity:0}.r4{top:530px;bottom:130px;left:400px;opacity:0}.r5{top:530px;bottom:130px;left:500px;opacity:0}.r6{top:530px;bottom:130px;left:600px;opacity:0}</style></head><body><div><imgsrc="/1.png"alt=""><imgsrc="/2.png"alt=""><divclass="t1w"></div><divclass="t2w"></div><divclass="t3w"width="100px"height="100px"></div><divclass="t4w"></div><divclass="t5w"></div><divclass="t6w"></

人人文库> 全部分类> 教育资料 > 毕业论文

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

人机交互与界面设计-班级页面课程设计

文档简介

温馨提示

最新文档

评论

人机交互与界面设计-班级页面课程设计

文档简介

温馨提示

最新文档

评论

相关文档