人機(jī)交互與界面設(shè)計(jì)-班級(jí)頁面課程設(shè)計(jì)_第1頁
人機(jī)交互與界面設(shè)計(jì)-班級(jí)頁面課程設(shè)計(jì)_第2頁
人機(jī)交互與界面設(shè)計(jì)-班級(jí)頁面課程設(shè)計(jì)_第3頁
人機(jī)交互與界面設(shè)計(jì)-班級(jí)頁面課程設(shè)計(jì)_第4頁
人機(jī)交互與界面設(shè)計(jì)-班級(jí)頁面課程設(shè)計(jì)_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

信息工程學(xué)院課程設(shè)計(jì)報(bào)告（2021-2022學(xué)年第二學(xué)期）課程：人機(jī)交互與界面設(shè)計(jì)題目：班級(jí)頁面設(shè)計(jì)總結(jié)專業(yè)班級(jí)：大數(shù)據(jù)211班班級(jí)網(wǎng)頁設(shè)計(jì)總結(jié)網(wǎng)頁結(jié)構(gòu)包含登錄、注冊(cè)界面，班級(jí)主頁，班級(jí)活動(dòng)展示（含班級(jí)人員信息表），留言板等界面。其中用到HTML，標(biāo)題，表格，表單，導(dǎo)航欄；CSS，div布局對(duì)象，圖片、文字等的定位，浮動(dòng)；運(yùn)用JavaScript展示登錄及其圖片輪播效果。設(shè)計(jì)思路設(shè)計(jì)班級(jí)網(wǎng)頁的思路：1、首先明確網(wǎng)頁的目的和受眾，例如：展示班級(jí)信息、分享班級(jí)活動(dòng)等。2、選擇合適的網(wǎng)頁結(jié)構(gòu)和布局，通?？梢允褂胔eader、nav、main、section、aside和footer等HTML5新標(biāo)簽。3、選取合適的配色和字體，要讓網(wǎng)頁看起來舒適美觀，并保證易讀性。4、設(shè)計(jì)網(wǎng)頁的導(dǎo)航菜單，使用戶可以輕松瀏覽網(wǎng)頁內(nèi)容。在導(dǎo)航菜單中可以設(shè)置鏈接到班級(jí)介紹、學(xué)生名單、班級(jí)動(dòng)態(tài)等頁面。5、在班級(jí)介紹頁面中，可以介紹班級(jí)的基本情況、班級(jí)榮譽(yù)、班級(jí)宣言等。6、在學(xué)生名單頁面中列出全班同學(xué)的姓名和照片，可以按照姓名首字母或班級(jí)序號(hào)排序。7、在班級(jí)動(dòng)態(tài)頁面中，及時(shí)發(fā)布班級(jí)發(fā)生的各種活動(dòng)和事項(xiàng)，可以附上照片和文字。8、在網(wǎng)頁的底部添加版權(quán)聲明和聯(lián)系方式，方便用戶與班級(jí)管理者聯(lián)系交流。最后，使用JavaScript為網(wǎng)頁添加交互效果，例如圖片展示、輪播圖、下拉菜單、滾動(dòng)加載等。整體效果圖：注冊(cè)界面：登錄界面：首頁界面：同學(xué)展示界面：活動(dòng)展示界面：詳細(xì)設(shè)計(jì)：1.注冊(cè)界面，登錄界面：登錄界面表單驗(yàn)證，輸入正確形式的文字，驗(yàn)證正確后點(diǎn)擊登錄進(jìn)入首頁，添加了一個(gè)倒計(jì)時(shí)按鈕，點(diǎn)擊該按鈕后按鈕屬性變?yōu)榻茫_始倒計(jì)時(shí)60s，下面添加登錄按鈕和一個(gè)復(fù)選框，當(dāng)選中復(fù)選框時(shí)登錄按鈕解除禁用。右下角添加了超鏈接還沒注冊(cè)，直接注冊(cè)（向右對(duì)齊），可以跳轉(zhuǎn)到注冊(cè)頁面。注冊(cè)頁面注冊(cè)頁面添加了標(biāo)簽和input輸入框，input輸入框含有表單驗(yàn)證輸入正確的形式才能注冊(cè)成功，下面添加了注冊(cè)按鈕和一個(gè)復(fù)選框，當(dāng)復(fù)選框選中時(shí)，按鈕解除禁用，按鈕禁用時(shí)背景顏色為灰色，解除禁用后背景顏色為藍(lán)色，注冊(cè)后可以點(diǎn)擊右邊的超鏈接進(jìn)入登錄頁面。2.首頁：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>課程設(shè)計(jì)</title><metaname="description"content="班級(jí)網(wǎng)頁設(shè)計(jì)"><!--網(wǎng)頁描述--><metaname="keyword"content="班級(jí)"><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/藍(lán)底左.png"alt="底1"><imgclass="blueright"src="images/藍(lán)底右.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="yun2"src="img/云霧背景.png"alt="底4">--><imgclass="yun3"src="images/云霧背景右.png"alt="底5"><!--導(dǎo)航欄設(shè)置--><divclass="dhbt"><imgsrc="images/logo1.jpg"alt=""></div><divclass="dh"><ul><li><ahref="index.html">網(wǎng)站首頁</a></li><li><ahref="form.html">同學(xué)展示</a></li><li><ahref="active.html">活動(dòng)中心</a></li></ul></div><divclass="dlzc"><p><ahref="dl.html"class="cn_net">登錄</a><ahref="zc.html"class="en_net">注冊(cè)</a></p></div><!--具體內(nèi)容//第一部分--><imgclass="tp1"src="images/a.jpg"alt="圖1"><divclass="text1"><pclass="text1-1"><b>信息工程學(xué)院<br>大數(shù)據(jù)211<br><br></b></p><divclass="text3"><!--<divclass="rx_mainbox">--><pclass="text-3"><b>活動(dòng)資訊<br><br></b></p><!--<divclass="rx_mainbox_title"><h1>活動(dòng)資訊</h1>--><!--</div>--><divclass="sixbox"><pclass="new_rq"><span>20</span>2023-6</p><pclass="newrf_tx"><ahref="#">【思政、道德教育】“誠(chéng)信”系列團(tuán)日活動(dòng)</a><span>熱烈歡迎各位同學(xué)參加“誠(chéng)信”系列團(tuán)日活動(dòng)，讓我們攜手共進(jìn)，共創(chuàng)美好未來?。。?lt;/span></p><pclass="new_rq"><span>15</span>2023-6</p><pclass="newrf_tx"><ahref="#">【社會(huì)實(shí)踐】不負(fù)青春韶華，助力考研</a><span>熱烈歡迎各位同學(xué)參加“不負(fù)青春韶華，助力考研”，讓我們攜手共進(jìn)，共創(chuàng)美好未來！?。?lt;/span></p><li><ahref="">首頁</a></li><li><ahref="">同學(xué)展示</a></li><li><ahref="">信息展示</a></li></ul><divclass="links"><pclass="link_title">友情鏈接：</p><ul><li><ahref="javascript:;">信工院21級(jí)</a></li><li><ahref="javascript:;">大數(shù)據(jù)</a></li></ul></div></div><divclass="download"><div><p>電話4323710</p><p>郵箱：sales@、market@</p><p>地址：中國(guó)·甘肅·蘭州</p><p>傳真lt;/p><p>郵編：437400</p></div></div></div></div></div></div></div></body></html>3.同學(xué)展示：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>同學(xué)展示</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"/><!--<scriptsrc="js/sticky_color.js"></script>--></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">注冊(cè)</a></p></div></div><divclass="header"><divclass="w1200"><divclass="header-log"><h1>班級(jí)展示</h1></div><divclass="header_right"><ulclass="main_nav"><li><ahref="index.html">首頁</a></li><liclass="active"><ahref="form.html">同學(xué)展示</a></li><li><ahref="active.html">活動(dòng)展示</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>您當(dāng)前位置:<ahref="index.html">首頁</a><span>></span><aclass="cur"href="javascript:;">同學(xué)展示</a></p></div></div></div><!--內(nèi)頁主盒子--><divclass="container_box"><divclass="innerMainInfow1200"><h1class="innerTitle">同學(xué)信息展示</h1><divclass="subbox"><table><thead><tr><!--<th>頭像</th>--><th>名字</th><th>郵箱</th><!--<th>愛好</th>--><th>學(xué)號(hào)</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>班級(jí)信息</h1><br><h1>展示</h1></div><divclass="foot_content"><ulclass="foot_map"><li><ahref="">首頁</a></li><li><ahref="">同學(xué)展示</a></li><li><ahref="">信息展示</a></li></ul><divclass="links"><pclass="link_title">友情鏈接：</p><ul><li><ahref="javascript:;">信工院21級(jí)</a></li><li><ahref="javascript:;">大數(shù)據(jù)</a></li></html>4.班級(jí)活動(dòng)：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>活動(dòng)展示</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">注冊(cè)</a></p></div></div><divclass="header"><divclass="w1200"><divclass="header-log"><h1>班級(jí)展示</h1></div><divclass="header_right"><ulclass="main_nav"><li><ahref="index.html">首頁</a></li><li><ahref="form.html">同學(xué)展示</a></li><liclass="active"><ahref="active.html">活動(dòng)展示</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>您當(dāng)前位置:<ahref="index.html">首頁</a><span>></span><ahref="form.html">班級(jí)展示</a></p></div><ulclass="inner_nav"><liclass="active"><ahref="javascript:;"data-type="asyw">全部活動(dòng)</a></li><li><ahref="#"data-type="tlbd">班級(jí)活動(dòng)</a></li></ul></div></div><div><divclass="mooc"style="display:none"><divid="mooc"><!--頭部--><h3id="moocTitle">最進(jìn)活動(dòng)<ahref="#"target="_self">更多>></a></h3><!--頭部結(jié)束--><!--中間--><divclass="zk"></div><pclass="slide"><ahref="javascript:showDiv()"id="str"class="btn-slide">更多選項(xiàng)+</a></p></div><divclass="sb"><ul></ul></div></div></div><divclass="booklists"><ul><li><divclass="video"><videocontrolsposter="images/拔河.jpeg"><!--Videofiles--><sourcesrc="video/1.MP4"type="video/mp4"size="576"></video></div><p>人間仙境</p></li><li><divclass="video"><videocontrolsposter="images/2.PNG"><!--Videofiles--><sourcesrc="video/2.MP4"type="video/mp4"size="576"></video></div><p>冰天景</p></li><li><divclass="video"><videocontrolsposter="images/3.PNG"><!--Videofiles--><sourcesrc="video/3.MP4"type="video/mp4"size="576"></video></div><p>面朝大海</p></li><li><divclass="video"><videocontrolsposter="images/5.PNG"><!--Videofiles--><sourcesrc="video/5.MP4"type="video/mp4"size="576"></video></div><p>黃昏</p></li><li><divclass="video"><videocontrolsposter="images/6.PNG"><!--Videofiles--><sourcesrc="video/6.MP4"type="video/mp4"size="576"></video></div><p>風(fēng)景</p></li><li><divclass="video"><videocontrolsposter="images/7.PNG"><!--Videofiles--><sourcesrc="video/7.MP4"type="video/mp4"size="576"></video></div><p>羽毛球活動(dòng)</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");//圖片節(jié)點(diǎn)varpoints=document.querySelectorAll(".point")//點(diǎn)varleft=document.getElementById("leftBtn");varright=document.getElementById("rightBtn");varall=document.querySelector(".wrap")varindex=0;vartime=0;//定時(shí)器跳轉(zhuǎn)參數(shù)初始化//封裝一個(gè)清除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();}//綁定點(diǎn)擊事件監(jiān)聽left.addEventListener('click',function(){goLeft();time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零})right.addEventListener('click',function(){goRight();time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零})for(i=0;i<points.length;i++){points[i].addEventListener('click',function(){varpointIndex=this.getAttribute('data-index')index=pointIndex;goIndex();time=0;//計(jì)時(shí)器跳轉(zhuǎn)清零})}//計(jì)時(shí)器輪播效果vartimer;functionplay(){timer=setInterval(()=>{time++;if(time==20){goRight();time=0;}},100)}play();//移入清除計(jì)時(shí)器all.onmousemove=function(){clearInterval(timer)}//移出啟動(dòng)計(jì)時(shí)器all.onmouseleave=function(){play();}變量：items：代表所有圖片DOM元素points：代表所有點(diǎn)DOM元素left：向左輪播的箭頭DOM節(jié)點(diǎn)right：向右輪播的箭頭DOM節(jié)點(diǎn)all：表示整個(gè)輪播圖DIV容器index：當(dāng)前顯示圖片的索引值time：計(jì)時(shí)器，表示跳轉(zhuǎn)時(shí)間函數(shù)：clearActive：清除所有圖片和點(diǎn)的active效果goIndex：根據(jù)當(dāng)前索引值改變對(duì)應(yīng)的圖片和點(diǎn)的active效果goLeft：向左移動(dòng)，先判斷是否到達(dá)第一張圖片，如果是則跳到最后一張；否則減少索引值goRight：向右移動(dòng)，先判斷是否到達(dá)最后一張圖片，如果是則跳到第一張；否則增加索引值play：開啟輪播，創(chuàng)建一個(gè)計(jì)時(shí)器，每1秒鐘檢查是否需要跳轉(zhuǎn)，如果時(shí)間達(dá)到20秒就執(zhí)行向右跳轉(zhuǎn)。同時(shí)也要清除計(jì)時(shí)器跳轉(zhuǎn)timeall.onmousemove：當(dāng)鼠標(biāo)在輪播圖上移動(dòng)時(shí)清除計(jì)時(shí)器，避免跳轉(zhuǎn)all.onmouseleave：當(dāng)鼠標(biāo)移出輪播圖時(shí)重新啟動(dòng)計(jì)時(shí)器程序的核心是通過設(shè)置計(jì)時(shí)器來達(dá)到輪播效果，同時(shí)用索引值記錄和控制當(dāng)前顯示的圖片。點(diǎn)擊箭頭或者點(diǎn)都會(huì)改變索引值，并通過goLeft、goRight、goIndex等函數(shù)來改變圖片和點(diǎn)的active效果，從而達(dá)到圖片輪播的效果。四：總結(jié)：通過制作班級(jí)網(wǎng)頁鞏固了HTML,CSS和JavaScript的相關(guān)知識(shí)，在編寫代碼的過程中，個(gè)人對(duì)于HTML和CSS的相關(guān)術(shù)語和概念較為熟悉，而JavaScript的知識(shí)運(yùn)用相對(duì)薄弱，對(duì)前端的應(yīng)用和問題處理不夠全面。隨著知識(shí)面的不斷拓展，學(xué)習(xí)的相關(guān)技術(shù)語言越來越多，所需掌握的技術(shù)也很廣泛，這需要我在學(xué)習(xí)的過程中不斷努力并及時(shí)總結(jié)。在班級(jí)網(wǎng)頁制作的過程中，收獲頗豐。游戲：找不同：代碼實(shí)現(xiàn)效果圖：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"所匹配到的元素添加單擊事件監(jiān)聽器。當(dāng)".w"被單擊時(shí)，程序會(huì)將".v"的透明度設(shè)置為1，從而讓它顯現(xiàn)出來。<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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論