課程設計--班級網站設計與制作

1、<p>　　《Web程序設計基礎》</p><p><b>　　課程實踐報告</b></p><p>　　設計題目: 《班級網站設計與制作》 </p><p>　　完成日期： 2015 年 1 月 3 日 </p><p>　　指導教師評語:

2、 </p><p>　　____________________________________________________________________________________________________________________________________________________________________ &

3、lt;/p><p>　　__________________________________________________________________________________</p><p>　　成績（五級記分制）: _ 指導教師（簽字）: </p><p><b

4、>　　課程設計任務書</b></p><p>　　設計題目：班級網站設計與制作</p><p>　　教研室主任： 指導教師： 年 月 日</p><p><b&

5、gt;　　目錄</b></p><p>　　1.網站的結構規(guī)劃4</p><p><b>　　2.素材的準備5</b></p><p><b>　　3.站點建立6</b></p><p>　　4.主頁面的制作8</p><p>　　4.1主頁面結構圖如下：

6、8</p><p>　　4.2主頁面主要div如下：8</p><p>　　5.二級頁面的制作10</p><p>　　5.1 局部刷新的使用10</p><p>　　5.2框架使用11</p><p>　　5.3注冊頁面設計13</p><p>　　6.JavaScript功能代碼

7、的編寫15</p><p>　　6.1導航代碼15</p><p>　　6.2注冊校驗代碼15</p><p>　　6.3登錄校驗代碼19</p><p>　　6.4時間顯示代碼20</p><p>　　7.設計效果圖22</p><p>　　7.1主頁效果圖22</p>

8、;<p>　　7.2導航測試效果圖23</p><p>　　7.3登錄及注冊界面23</p><p><b>　　總 結25</b></p><p><b>　　致謝26</b></p><p><b>　　參考文獻27</b></p>

9、<p><b>　　1.網站的結構規(guī)劃</b></p><p>　　班級網站，主要分為登錄、注冊（僅客戶端驗證）、班級簡介、班級相冊、學習園地、班級LOGO、班級公告等七部分。規(guī)劃詳圖見圖1.</p><p><b>　　圖1 規(guī)劃詳圖</b></p><p><b>　　2.素材的準備</b&

10、gt;</p><p>　　根據規(guī)劃圖，依次準備了如下素材。</p><p>　　圖2-1 1.jpg</p><p>　　圖2-2 domi.jpg</p><p>　　圖2-3 logo.jpg</p><p>　　圖2-4 tree.jpg</p><p><b>　　3.站點建

11、立</b></p><p>　　先建一個項目文件夾“班級網站”（如），然后在里邊建一個站點index.html,該網頁用于登錄注冊（僅客戶端驗證），CSS文件夾，用于存放樣式文件，style.css，IMG文件夾，用于存放圖片資源及LOGO，JS文件夾，用于存放Js文件。</p><p>　　圖3-1 站點文件夾</p><p><b>　　

12、4.主頁面的制作</b></p><p>　　4.1主頁面結構圖如下：</p><p>　　圖4—1 主頁面布局圖</p><p>　　4.2主頁面主要div如下：</p><p>　　body,div{ </p><p><b>　　margin:0;</b></p>

13、<p>　　padding:0;</p><p><b>　　}</b></p><p><b>　　div{ </b></p><p>　　height:600px;</p><p>　　border:solid;</p><p><b>　　}<

14、/b></p><p>　　.left{ //對左部的div樣式進行設置</p><p>　　float:left; </p><p>　　width:250px;</p><p>　　border-color:#fff; </p><p>　　position:absolute;</p><

15、p>　　left:0px; </p><p><b>　　}</b></p><p>　　.right{ //對右部的div樣式進行設置</p><p>　　float:right; </p><p>　　width:250px;</p><p>　　border-color:#fff; &

16、lt;/p><p>　　position:absolute;</p><p>　　left:1050px; </p><p><b>　　}</b></p><p>　　.center{ //對中間的div樣式進行設置</p><p>　　margin:0 200px; </p>&l

17、t;p>　　border:1px solid; </p><p>　　border-top-color:#fff; </p><p>　　border-bottom-color:#fff; </p><p>　　border-left-color:#c8c8c8; </p><p>　　border-right-color:#c8c8c

18、8; </p><p>　　position:absolute;</p><p>　　left:74px;</p><p>　　width:750px;</p><p><b>　　}</b></p><p>　　.top{ //對頂部的div樣式進行設置</p><p>

19、　　width:1300px;</p><p>　　height:500px; </p><p>　　border-color:#fff;</p><p>　　margin:0 auto; </p><p>　　background-repeat:no-repeat;</p><p><b>　　}</

20、b></p><p>　　.down{ //對底部的div樣式進行設置</p><p>　　width:1300px;</p><p>　　height:129px; </p><p>　　background-color:#333333; </p><p>　　border-color:#fff;</p&

21、gt;<p>　　margin:0 auto; </p><p>　　margin-top:5px; </p><p><b>　　}</b></p><p><b>　　5.二級頁面的制作</b></p><p>　　5.1 局部刷新的使用</p><p>　

22、　center區(qū)域中的內容可實現局部刷新，并不會因為選擇某種功能而導致整個界面的刷新，局部刷新主要的實現方式是通過js改變iframe框中的src值。right區(qū)域中的內容使用了iframe框，其中讀取了公告頁面的內容。</p><p><b>　　5.2框架使用</b></p><p>　　班級簡介、班級相冊、學習園地、班級LOGO的導航實現及center區(qū)域的模塊

23、和公告區(qū)域的模塊都采用了曲邊設計。主要div設置如下：</p><p>　　.box{ //對導航按鈕的div框進行設置</p><p>　　background-color:#fff;</p><p>　　margin-top:10px;</p><p>　　border:1px solid #c8c8c8; </p><

24、;p>　　width:130px; </p><p>　　height:130px; </p><p>　　margin:0 auto;</p><p>　　-webkit-border-radius:50px;</p><p>　　-moz-border-radius:50px;</p><p>　　-o-bo

25、rder-radius:50px;</p><p>　　border-radius:50px; </p><p>　　font-family:"微軟雅黑"; </p><p>　　font-size:14px;</p><p>　　cursor:pointer;</p><p><b>

26、　　} </b></p><p>　　.box2{ //center區(qū)域中的iframe的樣式設置</p><p>　　background-color:#fff;</p><p>　　border:1px solid #c8c8c8; </p><p>　　width:130px; </p><p>　　

27、height:130px; </p><p>　　margin:0 auto; </p><p>　　-webkit-border-radius:50px; </p><p>　　-moz-border-radius:50px; </p><p>　　-o-border-radius:50px; </p><p>　　

28、border-radius:50px; </p><p>　　margin-top:100px;width:600px; </p><p>　　height:380px; </p><p>　　margin-left:75px; </p><p>　　font-family:"微軟雅黑"; </p><

29、;p>　　font-size:14px;</p><p>　　line-height:22px</p><p><b>　　} </b></p><p>　　.innerbox{ //center區(qū)域中的iframe中的子網站的div的樣式設置</p><p>　　margin-top:0px;</p>

30、<p>　　width:595px; </p><p>　　height:360px; </p><p>　　margin-left:0px; </p><p>　　font-family:"微軟雅黑"; </p><p>　　font-size:14px;</p><p>　　li

31、ne-height:22px; </p><p>　　border:none;</p><p><b>　　} </b></p><p>　　.box3{ //right區(qū)域中的iframe框的樣式設置</p><p>　　background-color:#fff;</p><p>　　bord

32、er:1px solid #c8c8c8; </p><p>　　margin:0 auto; </p><p>　　-webkit-border-radius:50px; </p><p>　　-moz-border-radius:50px; </p><p>　　-o-border-radius:50px; </p>&l

33、t;p>　　border-radius:50px; </p><p>　　margin-top:80px;</p><p>　　width:200px; </p><p>　　height:400px; </p><p>　　margin-left:20px; </p><p>　　font-family:&q

34、uot;微軟雅黑"; </p><p>　　font-size:14px;</p><p>　　line-height:22px</p><p><b>　　} </b></p><p><b>　　5.3注冊頁面設計</b></p><p><b>　　

35、主要div如下：</b></p><p>　　.navigation_top{//注冊及登錄界面的頂部div設置</p><p>　　margin-top:0px;</p><p>　　overflow: hidden;</p><p>　　background: #F3F3F3;</p><p>　　wi

36、dth:1300px; </p><p>　　margin:0 auto;</p><p>　　text-align: center;</p><p>　　border:none;</p><p>　　height:150px;</p><p><b>　　}</b></p><

37、;p>　　.navigation_div{</p><p>　　width: 800px;</p><p>　　margin: 0px auto;</p><p>　　border:none;</p><p><b>　　}</b></p><p>　　.navigation_center{

38、//注冊及登錄界面的center的div的樣式設置</p><p>　　margin-top:0px;</p><p>　　overflow: hidden;</p><p>　　background: #fff;</p><p>　　padding: 3em 0em; </p><p>　　width:1300px;

39、 </p><p>　　height:350px;</p><p>　　margin:0 auto;</p><p>　　text-align: center;</p><p>　　position:relative;</p><p>　　border:none;</p><p><b&g

40、t;　　}</b></p><p>　　.navigation_box{ //注冊及登錄界面的center的div中的小div的樣式設置</p><p>　　background-color:#fff;</p><p>　　border:1px solid #c8c8c8; </p><p>　　margin:0 auto; &l

41、t;/p><p>　　-webkit-border-radius:50px; </p><p>　　-moz-border-radius:50px; </p><p>　　-o-border-radius:50px; </p><p>　　border-radius:50px; </p><p>　　width:600px

42、; </p><p>　　height:380px; </p><p>　　font-family:"微軟雅黑"; </p><p>　　font-size:14px;</p><p>　　line-height:22px;</p><p>　　position:absolute;</p&

43、gt;<p><b>　　left:28%;</b></p><p><b>　　} </b></p><p>　　.navigation_account{//此div用來固定登錄窗口的位置</p><p>　　margin-top:100px;</p><p>　　margin-le

44、ft:150px;</p><p>　　width:300px;</p><p>　　height:200px;</p><p>　　border:none;</p><p><b>　　}</b></p><p>　　6.JavaScript功能代碼的編寫</p><p>

45、;<b>　　6.1導航代碼</b></p><p>　　function Classabout(){</p><p>　　document.getElementById("cc").src='class_about.html';</p><p>　　}//該代碼實現id為cc的div的局部刷新</p&

46、gt;<p>　　function Classphoto(){</p><p>　　document.getElementById("cc").src='classpage_photo.html';</p><p><b>　　}</b></p><p>　　function Classstud

47、y(){</p><p>　　document.getElementById("cc").src='classpage_area.html';</p><p><b>　　}</b></p><p>　　function Classlogo(){</p><p>　　document.

48、getElementById("cc").src='classpage_logo.html';</p><p><b>　　}</b></p><p>　　function Changecolor1(){</p><p>　　document.getElementById("Classabout&q

49、uot;).style.background="#fa694e";</p><p>　　document.getElementById("Classabout").style.border="#fa694e";</p><p>　　}//該代碼改變id為Classabout的div的背景和邊框顏色</p><p

50、>　　function Changecolor2(){</p><p>　　document.getElementById("Classphoto").style.background="#fa694e";</p><p>　　document.getElementById("Classphoto").style.borde

51、r="#fa694e";</p><p><b>　　}</b></p><p>　　function Changecolor3(){</p><p>　　document.getElementById("Classstudy").style.background="#fa694e";

52、</p><p>　　document.getElementById("Classstudy").style.border="#fa694e";</p><p><b>　　}</b></p><p>　　function Changecolor4(){</p><p>　　doc

53、ument.getElementById("Classlogo").style.background="#fa694e";</p><p>　　document.getElementById("Classlogo").style.border="#fa694e";</p><p><b>　　}<

54、;/b></p><p>　　function Changecolor5(){</p><p>　　document.getElementById("Classabout").style.background="#fff";</p><p>　　document.getElementById("Classabo

55、ut").style.border="1px #c8c8c8 solid";</p><p><b>　　}</b></p><p>　　function Changecolor6(){</p><p>　　document.getElementById("Classphoto").style.

56、background="#fff";</p><p>　　document.getElementById("Classphoto").style.border="1px #c8c8c8 solid";</p><p><b>　　}</b></p><p>　　function Cha

57、ngecolor7(){</p><p>　　document.getElementById("Classstudy").style.background="#fff";</p><p>　　document.getElementById("Classstudy").style.border="1px #c8c8c8 s

58、olid";</p><p><b>　　}</b></p><p>　　function Changecolor8(){</p><p>　　document.getElementById("Classlogo").style.background="#fff";document.getEl

59、ementById("Classlogo").style.border="1px #c8c8c8 solid";</p><p><b>　　}</b></p><p><b>　　6.2注冊校驗代碼</b></p><p>　　function check1()</p>

60、<p><b>　　{</b></p><p>　　var account=document.getElementById("account").value;</p><p>　　var password=document.getElementById("password").value;</p>&

61、lt;p>　　var repassword=document.getElementById("repassword").value;</p><p>　　var mail=document.getElementById("mail").value;</p><p>　　var card=document.getElementById("

62、;card").value;//獲值</p><p>　　if(account!="")//帳號不為空進行下一步判斷</p><p><b>　　{</b></p><p>　　if(password==repassword)//兩次密碼輸入一致進行下一步判斷</p><p><b&g

63、t;　　{</b></p><p>　　if(isEmail(mail)==true)//郵箱驗證通過進行下一步判斷</p><p><b>　　{</b></p><p>　　if(checkidcard(card)==true)//學號判斷成功后，跳轉界面</p><p><b>　　{<

64、/b></p><p>　　alert("注冊成功，頁面將跳轉到登錄界面");</p><p>　　window.location.href=window.location.href;</p><p><b>　　}</b></p><p><b>　　else</b>&l

65、t;/p><p><b>　　{</b></p><p>　　alert("學號格式有誤，請輸入八位整數");</p><p>　　document.getElementById("card").value="";</p><p><b>　　}</

66、b></p><p><b>　　}</b></p><p><b>　　else</b></p><p>　　alert("郵箱格式有誤，請重新輸入");</p><p>　　document.getElementById("mail").value

67、="";</p><p><b>　　}</b></p><p><b>　　else</b></p><p><b>　　{</b></p><p>　　alert("兩次密碼輸入不一致");</p><p>　

68、　document.getElementById("password").value="";</p><p>　　document.getElementById("repassword").value="";</p><p><b>　　}</b></p><p>

69、<b>　　}</b></p><p><b>　　else</b></p><p><b>　　{</b></p><p>　　alert("帳號不能為空");</p><p><b>　　}</b></p><p

70、><b>　　}</b></p><p>　　function isEmail( str ){ </p><p>　　var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; </p><p>　　if(myReg.test(str)) return true;

71、 </p><p>　　return false; </p><p>　　} //判斷郵箱的正則表達式</p><p>　　function checkidcard( s ){ </p><p>　　var regu =/^\d{8}$/; </p><p>　　var re = new RegExp(regu);

72、 </p><p>　　if (re.test(s)) { </p><p>　　return true; </p><p><b>　　}else{ </b></p><p>　　return false; </p><p><b>　　} </b></p>

73、<p>　　} //判斷學號的正則表達式</p><p><b>　　6.3登錄校驗代碼</b></p><p>　　function check()</p><p><b>　　{</b></p><p>　　var account=document.getElementById(&qu

74、ot;account").value;</p><p>　　var password=document.getElementById("password").value;</p><p>　　if(account=="admin" &&password=="admin")</p><p

75、><b>　　{</b></p><p>　　window.location.href='classpage.html';</p><p><b>　　}</b></p><p><b>　　else</b></p><p><b>　　{<

76、;/b></p><p>　　alert("帳號或密碼錯誤，請重新輸入");</p><p>　　document.getElementById("account").value="";</p><p>　　document.getElementById("password").v

77、alue="";</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　6.4時間顯示代碼</b></p><p>　　<script language="javascript"

78、></p><p>　　var t = null;</p><p>　　t = setTimeout(time,1000);//開始執(zhí)行</p><p>　　function time()</p><p><b>　　{</b></p><p>　　clearTimeout(t);//清除定

79、時器</p><p>　　dt = new Date();</p><p>　　var y=dt.getYear()+1900;//獲取年份</p><p>　　var mo=dt.getMonth()+1;//獲取月份</p><p>　　var d=dt.getDate();//獲取日期</p><p>　　var

80、 h=dt.getHours();//獲取小時數</p><p>　　var m=dt.getMinutes();//獲取分鐘數</p><p>　　var s=dt.getSeconds();//獲取秒數</p><p>　　document.getElementById("timeShow").innerHTML = "訪問時間：

81、："+y+"年"+mo+"月"+d+"日"+h+"時"+m+"分"+s+"秒";//輸出時間</p><p>　　t = setTimeout(time,1000); </p><p><b>　　}</b></p><

82、p><b>　　</script></b></p><p><b>　　7.設計效果圖</b></p><p><b>　　7.1主頁效果圖</b></p><p>　　圖7-1 主頁效果圖1</p><p>　　圖7-2 主頁效果圖2</p&g

83、t;<p>　　7.2導航測試效果圖</p><p>　　圖7-3 樹形目錄效果圖</p><p>　　7.3登錄及注冊界面</p><p>　　圖7-4 登錄頁面效果</p><p>　　圖7-5 注冊頁面效果</p><p><b>　　總 結</b></p>&

84、lt;p>　　此次課程實踐的過程中，不斷的發(fā)現問題并解決問題，讓我在這短短的一個星期里得到了極大的提高。對于局部刷新的實現采用了兩種方法，第一種是iframe結構配合js改變src的值，第二種是由innerhtml屬性來修改div里面的值，這兩種技術的運用讓網站不再繁雜，比較清爽干凈。課程實踐的目的在于提高學生的實戰(zhàn)水平，做出來的網站要認真的考慮客戶的需求，這樣才能夠在以后的工作之初，便具有優(yōu)勢。</p><p

85、>　　本次課程實踐用到的技術主要有css定義屬性，js控制事件的執(zhí)行，由正則表達式的幫助，可以實現在本地進行一些驗證，由于該學期并未學習數據庫相關內容，該網站的登錄僅僅是驗證字符串是否相等，注冊也僅僅是對規(guī)則進行驗證，在以后學習了數據庫的內容之后，使用新的開發(fā)技術，填充本次課程實踐中網站所缺失的部分，也是有必要的，只有我們用心的做自己的每一個作品，而不是在網上去復制別人的成果，我們才能有進步，只有這樣，我們才能在計算機科學與技術這

86、門專業(yè)走的更遠。</p><p><b>　　致謝</b></p><p>　　在此次課程實踐過程中，**老師對我的問題進行了不厭其煩的回答與講解，我能完成此次課程實踐與他們的幫助緊密相關，在此向他們表示感謝。</p><p><b>　　參考文獻</b></p><p>　　[1] 孫良軍.《網頁