人機交互與界面設(shè)計-班級頁面課程設(shè)計

上傳人：萬*** IP屬地：貴州上傳時間：2024-07-04 格式：DOCX 頁數(shù)：26 大?。?.41MB 積分：15 舉報 版權(quán)申訴

已閱讀5頁，還剩21頁未讀，繼續(xù)免費閱讀

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

文檔簡介

信息工程學(xué)院課程設(shè)計報告（2021-2022學(xué)年第二學(xué)期）課程：人機交互與界面設(shè)計題目：班級頁面設(shè)計總結(jié)專業(yè)班級：大數(shù)據(jù)211班班級網(wǎng)頁設(shè)計總結(jié)網(wǎng)頁結(jié)構(gòu)包含登錄、注冊界面，班級主頁，班級活動展示（含班級人員信息表），留言板等界面。其中用到HTML，標(biāo)題，表格，表單，導(dǎo)航欄；CSS，div布局對象，圖片、文字等的定位，浮動；運用JavaScript展示登錄及其圖片輪播效果。設(shè)計思路設(shè)計班級網(wǎng)頁的思路：1、首先明確網(wǎng)頁的目的和受眾，例如：展示班級信息、分享班級活動等。2、選擇合適的網(wǎng)頁結(jié)構(gòu)和布局，通常可以使用header、nav、main、section、aside和footer等HTML5新標(biāo)簽。3、選取合適的配色和字體，要讓網(wǎng)頁看起來舒適美觀，并保證易讀性。4、設(shè)計網(wǎng)頁的導(dǎo)航菜單，使用戶可以輕松瀏覽網(wǎng)頁內(nèi)容。在導(dǎo)航菜單中可以設(shè)置鏈接到班級介紹、學(xué)生名單、班級動態(tài)等頁面。5、在班級介紹頁面中，可以介紹班級的基本情況、班級榮譽、班級宣言等。6、在學(xué)生名單頁面中列出全班同學(xué)的姓名和照片，可以按照姓名首字母或班級序號排序。7、在班級動態(tài)頁面中，及時發(fā)布班級發(fā)生的各種活動和事項，可以附上照片和文字。8、在網(wǎng)頁的底部添加版權(quán)聲明和聯(lián)系方式，方便用戶與班級管理者聯(lián)系交流。最后，使用JavaScript為網(wǎng)頁添加交互效果，例如圖片展示、輪播圖、下拉菜單、滾動加載等。整體效果圖：注冊界面：登錄界面：首頁界面：同學(xué)展示界面：活動展示界面：詳細設(shè)計：1.注冊界面，登錄界面：登錄界面表單驗證，輸入正確形式的文字，驗證正確后點擊登錄進入首頁，添加了一個倒計時按鈕，點擊該按鈕后按鈕屬性變?yōu)榻?，開始倒計時60s，下面添加登錄按鈕和一個復(fù)選框，當(dāng)選中復(fù)選框時登錄按鈕解除禁用。右下角添加了超鏈接還沒注冊，直接注冊（向右對齊），可以跳轉(zhuǎn)到注冊頁面。注冊頁面注冊頁面添加了標(biāo)簽和input輸入框，input輸入框含有表單驗證輸入正確的形式才能注冊成功，下面添加了注冊按鈕和一個復(fù)選框，當(dāng)復(fù)選框選中時，按鈕解除禁用，按鈕禁用時背景顏色為灰色，解除禁用后背景顏色為藍色，注冊后可以點擊右邊的超鏈接進入登錄頁面。2.首頁：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>課程設(shè)計</title><metaname="description"content="班級網(wǎng)頁設(shè)計"><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">網(wǎng)站首頁</a></li><li><ahref="form.html">同學(xué)展示</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>信息工程學(xué)院<br>大數(shù)據(jù)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>熱烈歡迎各位同學(xué)參加“誠信”系列團日活動，讓我們攜手共進，共創(chuàng)美好未來?。。?lt;/span></p><pclass="new_rq"><span>15</span>2023-6</p><pclass="newrf_tx"><ahref="#">【社會實踐】不負青春韶華，助力考研</a><span>熱烈歡迎各位同學(xué)參加“不負青春韶華，助力考研”，讓我們攜手共進，共創(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級</a></li><li><ahref="javascript:;">大數(shù)據(jù)</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.同學(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"/></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">同學(xué)展示</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>您當(dāng)前位置:<ahref="index.html">首頁</a><span>></span><aclass="cur"href="javascript:;">同學(xué)展示</a></p></div></div></div><divclass="container_box"><divclass="innerMainInfow1200"><h1class="innerTitle">同學(xué)信息展示</h1><divclass="subbox"><table><thead><tr><th>名字</th><th>郵箱</th><th>學(xué)號</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="">同學(xué)展示</a></li><li><ahref="">信息展示</a></li></ul><divclass="links"><pclass="link_title">友情鏈接：</p><ul><li><ahref="javascript:;">信工院21級</a></li><li><ahref="javascript:;">大數(shù)據(jù)</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">同學(xué)展示</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>您當(dāng)前位置:<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>風(fēng)景</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");//圖片節(jié)點varpoints=document.querySelectorAll(".point")//點varleft=document.getElementById("leftBtn");varright=document.getElementById("rightBtn");varall=document.querySelector(".wrap")varindex=0;vartime=0;//定時器跳轉(zhuǎn)參數(shù)初始化//封裝一個清除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();}//綁定點擊事件監(jiān)聽left.addEventListener('click',function(){goLeft();time=0;//計時器跳轉(zhuǎn)清零})right.addEventListener('click',function(){goRight();time=0;//計時器跳轉(zhuǎn)清零})for(i=0;i<points.length;i++){points[i].addEventListener('click',function(){varpointIndex=this.getAttribute('data-index')index=pointIndex;goIndex();time=0;//計時器跳轉(zhuǎn)清零})}//計時器輪播效果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節(jié)點right：向右輪播的箭頭DOM節(jié)點all：表示整個輪播圖DIV容器index：當(dāng)前顯示圖片的索引值time：計時器，表示跳轉(zhuǎn)時間函數(shù)：clearActive：清除所有圖片和點的active效果goIndex：根據(jù)當(dāng)前索引值改變對應(yīng)的圖片和點的active效果goLeft：向左移動，先判斷是否到達第一張圖片，如果是則跳到最后一張；否則減少索引值goRight：向右移動，先判斷是否到達最后一張圖片，如果是則跳到第一張；否則增加索引值play：開啟輪播，創(chuàng)建一個計時器，每1秒鐘檢查是否需要跳轉(zhuǎn)，如果時間達到20秒就執(zhí)行向右跳轉(zhuǎn)。同時也要清除計時器跳轉(zhuǎn)timeall.onmousemove：當(dāng)鼠標(biāo)在輪播圖上移動時清除計時器，避免跳轉(zhuǎn)all.onmouseleave：當(dāng)鼠標(biāo)移出輪播圖時重新啟動計時器程序的核心是通過設(shè)置計時器來達到輪播效果，同時用索引值記錄和控制當(dāng)前顯示的圖片。點擊箭頭或者點都會改變索引值，并通過goLeft、goRight、goIndex等函數(shù)來改變圖片和點的active效果，從而達到圖片輪播的效果。四：總結(jié)：通過制作班級網(wǎng)頁鞏固了HTML,CSS和JavaScript的相關(guān)知識，在編寫代碼的過程中，個人對于HTML和CSS的相關(guān)術(shù)語和概念較為熟悉，而JavaScript的知識運用相對薄弱，對前端的應(yīng)用和問題處理不夠全面。隨著知識面的不斷拓展，學(xué)習(xí)的相關(guān)技術(shù)語言越來越多，所需掌握的技術(shù)也很廣泛，這需要我在學(xué)習(xí)的過程中不斷努力并及時總結(jié)。在班級網(wǎng)頁制作的過程中，收獲頗豐。游戲：找不同：代碼實現(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"被單擊時，程序會將".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"></

人人文庫> 全部分類> 教育資料 > 畢業(yè)論文

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

人機交互與界面設(shè)計-班級頁面課程設(shè)計

文檔簡介

溫馨提示

最新文檔

評論

人機交互與界面設(shè)計-班級頁面課程設(shè)計

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔