人机交互与界面设计——班级页面课程设计.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.as
