人机交互与界面设计——班级页面课程设计.docx

《人机交互与界面设计——班级页面课程设计.docx》由会员分享，可在线阅读，更多相关《人机交互与界面设计——班级页面课程设计.docx（27页珍藏版）》请在优知文库上搜索。

1、信息工程学院课程设计报告（2021-2022学年第二学期）课程：人机交互与界面设计题目：班级页面设计总结专业班级:大数据211班目录前端页面设计总结1-.整体效果图：2注册界面：2登录界面：2首页界面：2同学展示界面：4活动展示界面：5二.详细设计：61.注册界面，登录界面.6登录界面6注册页面62 .首页：73 .同学展示：94 .班级活动：12四.总结：16班级网页设计总结网页结构包含登录、注册界面,班级主页，班级活动展示（含班级人员信息表）.留言板等界面。其中用到HTM1.标题，表格，表单，导航栏；CSS,div布局对象，图片、文字等的定位，浮动：运用JaVaSCriPt展示登录及其图片

2、轮播效果。设计思路设计班级网页的思路：1、首先明确网页的目的和受众.例如：展示班级信息、分享班级活动等。2、选择合适的网页结构和布局，通常可以使用header、nuv、main,section,aside和footer等Hn1.1.5新标签。3、选取合适的配色和字体，要让网页看起来舒适美观，并保证易读性.4、设计网页的导航菜单，使用户可以轻松浏览网页内容。在导航菜单中Uf以设置链接到班级介绍、学生名单、班级动态等页面。5、在班级介绍页面中，可以介绍班级的基本情况、班级荣誉、班级宣言等。6、在学生名单页面中列出全班同学的姓名和照片，可以按照姓名首字母或班级序号排序。7.在班级动态页面中，及时发布

3、班级发生的各种活动和事项，可以附上照片和文字。8、在网页的底部添加版权声明和联系方式,方便用户与班级管理者联系交流。最后，使用JavaScript为网页添加交互效果，例如图片展示、轮播图、下拉菜单、滚动加载等。整体效果图:注册界面:登录界面:首页界面，班级展示活动展示界面;班级展示二.详细设计，1.注册界面，登录界面，登录界面表单险证，输入正确形式的文字，验证正确后点击登录进入首页，添加一个倒计时按钮，点击该按钮后按钮属性变为禁用，开始倒计时60s,下面添加登录按钮和个纪选框，当选中纪选框时登录按钮解除禁用。右下角添加了超链接还没注册，直接注册（向右对齐），可以跳转到注册页面。注册页面注册页面

4、添加了标卷和inpu1.输入框，input输入框含有表单验证输入正确的形式才能注册成功，下面添加了注册按钮和一个夏选框，当嵬选框选中时，按钮解除禁用，按钮禁用时背景颜色为灰色，解除禁用后背景颜色为蓝色，注册后可以点击右边的超链接进入登录页面。2.首页:课程设计!-ximgC1.aSS=yun3src=images/云雾背景右pnga1.t=底5”网站首页v1.i同学展示vax1.i活动中心登录va注册1-具体内容第一部分信息工程学院大数据211 1-活动资讯!活动资讯-!-202023-6【思政、道镌教育】“诚信”系列团日活动热烈欢迎各位同学参加“诚信”系列团日活动，让我们携手共进，共创美好未来！VSPan152023-6【社会实践】不负青春潮华，助力考研热烈欢迎各位同学参加“不负青春招华，助力考研”，让我们携手共进，共创美好未来！首页同学展示信息展示友情链接：信工院21级大数据va电话：0715-43228334323710邮箱：sa1.es、market地址：中国甘肃兰州vp传真：0715-4323710邮编：4374003.同学展示；同学展示!-登录注册班级展示-页同学展示活动展示您当前位置:首页>同学展示divc1.as