javaweb課程設計報告.用戶注冊界面設計.docx

課程設計Java web開發(fā)課程設計：論壇系統(tǒng)用戶注冊界面的設計目錄設計目的：設計內(nèi)容及目標：定義CSS樣式，也就是網(wǎng)頁樣式。4利用HTML語言安排控件5JavaScript交互功能的實現(xiàn)8Html css jsp JavaScript java web一課程設計目的課程設計是一項重要的實踐性教學環(huán)節(jié)，在教師的指導下，以學生為中心，充分調(diào)動學生的積極性和能動性，重視學生自學能力的培養(yǎng)。Java Web技術實踐是為教育技術學本科專業(yè)開設的專業(yè)選修課程，課程的主要目標是要求學生掌握基本的Java Web應用程序開發(fā)和設計的流程及相關的技術技能。本課程在講解相關理論知識的基礎上，按照一定的組織原則和現(xiàn)有實驗條件安排了一定數(shù)量的實驗，通過這些實驗使學生初步掌握開發(fā)和設計Java Web應用程序的基本方法和基本技能。然而由于這些實驗是分時分批按一定的技術種類和實驗目的實施的，固然可以有目的地訓練和培養(yǎng)學生某個方面技能，但明顯的不連續(xù)性使學生不能從整體上把握如何系統(tǒng)地開發(fā)和設計一個完整Java Web應用程序。通過本課程設計可以較好地解決這個問題。通過本課程設計可以使學生充分認識開發(fā)和設計Java Web應用程序的的重要性和復雜性，充分了解Java Web應用程序的設計和開發(fā)的基本過程，掌握常用的Java Web開發(fā)技術，充分把握各項技術的特點和應用領域以及各項技術之間的相互關系，進一步體會各項技術在Java Web應用程序中地位和作用從而對各種技術有比較清醒的認識，在此基礎上習得Java Web開發(fā)技術平臺的選擇能力。二課程設計內(nèi)容與目標課題名稱：用戶注冊界面設計設計目標：利用HTMLCSS JavaScript技術制作簡潔及交互功能比較強的頁面設計方法：網(wǎng)頁制作工具配合相關技術（如HTML、CSS、JavaScript等）設計要求：利用Java Web應用程序的客戶端開發(fā)技術（包括HTML、CSS、JavaScript、BOM、DHTML、XML等）設計一個符合要求的Java Web應用程序界面，并在此界面的基礎上實現(xiàn)用戶交互功能的設計，達到Java Web應用程序可用性和易用性目標。三系統(tǒng)分析與設計：1.總體分析：系統(tǒng)要實現(xiàn)的功能是有效性判斷以及相關對象之間的關聯(lián)關系，涉及到程序的算法，Java Web技術中的對象的認識；（1）整體風格（2）系統(tǒng)所要實現(xiàn)的功能：用戶交互功能（3）控間間的邏輯關系（4）程序算法（5）客戶端開發(fā)技術中對象的認識2設計：本課程設計時間為2周，實際有效天數(shù)為10天。具體時間安排如下：第1天：收集資料、準備開發(fā)平臺和技術、醞釀表單的功能和有關控件的數(shù)據(jù)第2天：表單控件設計第3天：表單外觀設計第46天：表單用戶交互功能邏輯設計第7天：Java Web表單應用程序的調(diào)試、修整、完善與定稿模塊劃分、內(nèi)容結(jié)構如何組織的方法，對一個Java Web程序設計的影響是很大的，有效的規(guī)劃可以為Java Web程序設計增加美感。其它的模塊則有一定的聯(lián)系性，以下是我Java Web程序設計的組織框架。但是所有的模板其并非是層級關系即一層一層的點下去，他們可以通過導航欄上的鏈接轉(zhuǎn)到其它JAVA WEB程序設計上，由此可形成一個具有Java Web程序設計的模式，因此這些模塊之間可以實現(xiàn)無順序關系，卻仍能感受到該Java Web程序設計是一個很條理。3.界面設計：有效性和交互性設計：數(shù)字輸入框的數(shù)字有效性；特定內(nèi)容的文本框輸入的有效性；四模塊的實現(xiàn)與調(diào)試1模塊的實現(xiàn)：模塊系統(tǒng)可以直接深入到站點及其Java Web程序設計的所有內(nèi)容，將Java Web程序設計中的有效數(shù)據(jù)采集出來（而不僅是Java Web程序設計或鏈接），并保持數(shù)據(jù)之間的邏輯關系。例如對一個外部西湘旅游息站點，采集系統(tǒng)可以將其每個教育信息的標題、正文、作者、日期等信息單獨采集出來，分別作為字段存儲在系統(tǒng)中，并無縫組合形成自身的Java Web程序設計信息。Java Web程序設計具有強大的批量設置功能，可以顯示文章標題、文章作者、文章來源、內(nèi)容分頁方式、配色風格、版面設計模板等信息。Java Web程序設計是計算機綜合處理圖形圖像、文字、音頻和視頻等多種信息及其存儲與傳輸?shù)募夹g，可以分為Java Web程序設計硬件技術和Java Web程序設計技術兩大部分。Java Web程序設計素材的收集與制作，即對文本、圖像、動畫、聲音以及視頻影像等各種類型的Java Web程序設計素材的收集準備與制作，就可以自己構建一個對制作本科教學課件方便而有效的素材庫。另外，在一些電子出版物中有很多優(yōu)秀的Java Web程序設計素材，平時應注意收集和整理，這也是提高制作速度與Java Web程序設計素材庫質(zhì)量的有效途徑。以上我們所說的都是素材的采集，接下來我們就要整理素材和進行素材編輯，這樣在制作課件時將這些素材輸出，就能又快又好地制作出精美的課件。2模塊的調(diào)試：對所設計的作品進行調(diào)試是十分重要的，在制作Java Web程序設計的過程中可以通過調(diào)試的方法查找模塊存在的不足，以便更正。我剛開始做Java Web程序設計的時候沒有要合理使用層和表格，也或許是為圖方便曾經(jīng)大量使用層，當做好Java Web程序設計進行調(diào)試時，發(fā)現(xiàn)所有的層都走了樣，整個Java Web程序設計幾乎殘破不堪，后來我重新使用表格才得到了我想要的結(jié)果，也是那時候我才發(fā)現(xiàn)表格用起來也不是那么麻煩。3模塊代碼：定義CSS樣式，也就是網(wǎng)頁樣式。 /* CSS Document */tdfont:normal normal normal 20px 新宋體;border-width:medium;/*文字邊框樣式*/border-top:2px inset #33FF00;border-right: 2px inset #33FF00;border-left:2px inset #33FF00;border-bottom:2px inset #33FF00;/*border:10px #009900;*/padding:10px ;margin:auto.label1 /*字體*/font:oblique normal bold 48px 新宋體;color:#000099.label2 /*字體*/font-size:large; font-family:宋體; background-image:url(images/img1.jpg);.p1/*三個問題的樣式*/font:normal normal bold 20px 新宋體;color:#000099.tablestyleborder-width:thick;/*表格邊框樣式*/border-top:8px outset #006600;border-right: 4px outset #006600;border-left:4px outset #006600;border-bottom:4px outset #006600;border-color:#0000CC;border-style:double; 利用HTML語言安排控件中國旅游網(wǎng)中國旅游論壇 用戶名：證件號碼: 您最希望前往的旅游地區(qū)？ 陜西北京西藏 海南四川上海您最希望所選旅游地區(qū)獲得的旅游項目？ 騎馬爬山游泳 滑雪美食散步您平時的興趣愛好？ 看書上網(wǎng)下棋看報籃球聊天您的家庭住址？省/市: 湖南省 上海市 浙江省        縣/市： 請說說您的旅游感想     JavaScript交互功能的實現(xiàn)var imgs=new Array();var n=0;var isif=1;for(i=1;i5;i+)imgsi=new Image();imgsi.src=images/+i+.jpg;var arr_Ln_Check=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ;function LoginName()var j=1;var k=0;var l=0;var t=0;var v=0;if(document.mainBody.loginName.value != )if(document.mainBody.loginName.value.length=3)for(l=0;l arr_Ln_Check.length;l+)if(document.mainBody.loginName.value.charAt(0)=arr_Ln_Check.charAt(l)v=1;break;if(v)for(j=1;j3;j+)for(k=0;k10;k+)if(document.mainBody.loginName.value.charAt(j)=str_Ps_Check.charAt(k) t=t+1;break;if(t=2)document.mainBody.tiShi4.value=輸入正確！;document.mainBody.tiShi4.style.color=green;in_Txt4=1;elsedocument.mainBody.tiShi4.value=錯誤！格式為“X00”“X99”，X是任意大小寫字母！;document.mainBody.tiShi4.style.color=red;elsedocument.mainBody.tiShi4.value=錯誤！格式為“X00”“X99”，X是任意大小寫字母！;document.mainBody.tiShi4.style.color=red;elsedocument.mainBody.tiShi4.value=錯誤！格式為“X00”“X99”，X是任意大小寫字母！;document.mainBody.tiShi4.style.color=red;function chechmima()/證件號碼判斷var getv=document.form1.number.value;alert(證件號碼不能為空，請重新輸入！);if(getv=)alert(證件號碼不能為空，請重新輸入！);document.form1.number.focus();return false;for(var i=0;i=0 & ischar4)n=1;document.all(pic).src=imgsn.src;function chT1()isif=1;setTimeout(chT(1),1000);function chT2()isif=0;function choosecheck(num) if(num=1) if (document.all(c1).checked) document.all(c5).disabled=true;document.all(c6).disabled=true;else document.all(c5).disabled=false;document.all(c6).disabled=false; else if(num=2) if (document.all(c2).checked) document.all(c5).disabled=true;document.all(c6).disabled=true; else document.all(c5).disabled=false;document.all(c6).disabled=false; else if(num=3) if (document.all(c3).checked) document.all(c3).disabled=true;document.all(c4).disabled=true; else document.all(c3).disabled=false;document.all(c4).disabled=false; function chooseradio() if(document.all(xhl).checked) document.all(qm).disabled=false;document.all(ps).disabled=false; document.all(yy).disabled=true;document.all(hx).disabled=false; document.all(ms).disabled=false;document.all(sb).disabled=false; if(document.all(xbj).checked) document.all(qm).disabled=true;document.all(ps).disabled=false; document.all(yy).disabled=false;document.all(hx).disabled=true; document.all(ms).disabled=false;document.all(sb).disabled=false; if(document.all(xxz).checked) document.all(qm).disabled=false;document.all(ps).disabled=false; document.all(yy).disabled=true;document.all(hx).disabled=false; document.all(ms).disabled=true;document.all(sb).disabled=false; if(document.all(xhn).checked) document.all(qm).disabled=true;document.all(ps).disabled=false; document.all(yy).disabled=false;document.all(hx).disabled=true; document.all(ms).disabled=false;document.all(sb).disabled=false; if(document.all(xsc).checked) document.all(qm).disabled=false;document.all(ps).disabled=false; document.all(yy).disabled=false;document.all(hx).disabled=true; document.all(ms).disabled=false;document.all(sb).disabled=false; if(document.all(xsh).checked) document.all(qm).disabled=true;document.all(ps).disabled=true; document.all(yy).disabled=false;document.all(hx).disabled=true; document.all(ms).disabled=false;document.all(sb).disabled=false; function choosepla()var snum1=new Array(長沙市,株洲市);var snum2=new Array(浦東區(qū),崇明區(qū));var snum3=new Array(杭州市,舟山群島); var num=document.all(select1).options(document.all(select1).selectedIndex).value;var tem= ;var xx=document.all(select2).lastChild.value;for(j=0;j=xx;j+) document.all(select2).options.remove(1);if(num=1) for(i=1;i6;i+) tem=snum1i-1; var opton=new Option(tem,i); document.all(select2).options.add(opton); if(num=2)for(i=1;i6;i+) tem=snum2i-1;var opton=new Option(tem,i);document.all(select2).options.add(opton); if(num=3)for(i=1;i5;i+) tem=snum3i-1;var opton=new Option(tem,i);document.all(select2).options.add(opton); function checkyhm()if(document.form1.usename.value=)alert(用戶名不能為空，請重新輸入！);document.form1.usename.focus();function submitit()if(document.all(usename).value=)alert(用戶名不能為空!);document.all(usename).focus();return false;if(document.all(number).value=)alert(證件號碼不能為空!);document.all(number).focus();return false;if(document.all(xhl).checked=false & document.all(xbj).checked=false& document.all(xsh).checked=false& document.all(xxz).checked=false& document.all(xsc).checked=false& document.all(xhn).checked=false)alert(請選擇您最希望前往的旅游地區(qū)！);return false;if(document.all(qm).checked=false & document.all(ps).checked=false& document.all(yy).checked=false& document.all(hx).checked=false& document.all(ms).checked=false& document.all(sb).checked=false)alert(請選擇您最希望所選旅游地區(qū)獲得的旅游項目？);return false;if(document.all(c1).checked=false & document.all(c2).checked=false& document.all(c3).checked=false& document.all(c4).checked=false& document.all(c5).checked=false& document.all(c6).checked=false)alert(請選擇您平時的興趣愛好？);return false;var ss =用戶名：+document.all(usename).value+n;ss +=證件號碼+document.all(number).value+n;if(document.all(xhl).checked)ss+=最希望前往的旅游地區(qū)：黑龍江+n;if(document.all(xbj).checked)ss+=最希望前往的旅游地區(qū)：北京+n;if(document.all(xxz).checked)ss+=最希望前往的旅游地區(qū)：西藏+n;if(document.all(xhn).checked)ss+=最希望前往的旅游地區(qū)：海南+n;if(document.all(xsc).checked)ss+=最希望前往的旅游地區(qū)：四川+n;if(document.all(xsh).checked)ss+=最希望前往的旅游地區(qū)：上海+n;if(document.all(qm).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：騎馬+n;if(document.all(ps).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：爬山+n;if(document.all(yy).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：游泳+n;if(document.all(hx).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：滑雪+n;if(document.all(ms).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：美食+n;if(document.all(sb).checked)ss+=最希望所選旅游地區(qū)獲得的旅游項目：散步+n;if(document.all(c1).checked)ss+=平時的興趣愛好：看書+n;if(document.all(c2).checked)ss+=平時的興趣愛好：上網(wǎng)+n;if(document.all(c3).checked)ss+