課程設(shè)計(jì)--班級(jí)網(wǎng)站設(shè)計(jì)與制作

1、<p>　　《Web程序設(shè)計(jì)基礎(chǔ)》</p><p><b>　　課程實(shí)踐報(bào)告</b></p><p>　　設(shè)計(jì)題目: 《班級(jí)網(wǎng)站設(shè)計(jì)與制作》 </p><p>　　完成日期： 2015 年 1 月 3 日 </p><p>　　指導(dǎo)教師評(píng)語(yǔ):

2、 </p><p>　　____________________________________________________________________________________________________________________________________________________________________ &

3、lt;/p><p>　　__________________________________________________________________________________</p><p>　　成績(jī)（五級(jí)記分制）: _ 指導(dǎo)教師（簽字）: </p><p><b

4、>　　課程設(shè)計(jì)任務(wù)書</b></p><p>　　設(shè)計(jì)題目：班級(jí)網(wǎng)站設(shè)計(jì)與制作</p><p>　　教研室主任： 指導(dǎo)教師： 年 月 日</p><p><b&

5、gt;　　目錄</b></p><p>　　1.網(wǎng)站的結(jié)構(gòu)規(guī)劃4</p><p><b>　　2.素材的準(zhǔn)備5</b></p><p><b>　　3.站點(diǎn)建立6</b></p><p>　　4.主頁(yè)面的制作8</p><p>　　4.1主頁(yè)面結(jié)構(gòu)圖如下：

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

7、的編寫15</p><p>　　6.1導(dǎo)航代碼15</p><p>　　6.2注冊(cè)校驗(yàn)代碼15</p><p>　　6.3登錄校驗(yàn)代碼19</p><p>　　6.4時(shí)間顯示代碼20</p><p>　　7.設(shè)計(jì)效果圖22</p><p>　　7.1主頁(yè)效果圖22</p>

8、;<p>　　7.2導(dǎo)航測(cè)試效果圖23</p><p>　　7.3登錄及注冊(cè)界面23</p><p><b>　　總 結(jié)25</b></p><p><b>　　致謝26</b></p><p><b>　　參考文獻(xiàn)27</b></p>

9、<p><b>　　1.網(wǎng)站的結(jié)構(gòu)規(guī)劃</b></p><p>　　班級(jí)網(wǎng)站，主要分為登錄、注冊(cè)（僅客戶端驗(yàn)證）、班級(jí)簡(jiǎn)介、班級(jí)相冊(cè)、學(xué)習(xí)園地、班級(jí)LOGO、班級(jí)公告等七部分。規(guī)劃詳圖見(jiàn)圖1.</p><p><b>　　圖1 規(guī)劃詳圖</b></p><p><b>　　2.素材的準(zhǔn)備</b&

10、gt;</p><p>　　根據(jù)規(guī)劃圖，依次準(zhǔn)備了如下素材。</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.站點(diǎn)建

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

12、4.主頁(yè)面的制作</b></p><p>　　4.1主頁(yè)面結(jié)構(gòu)圖如下：</p><p>　　圖4—1 主頁(yè)面布局圖</p><p>　　4.2主頁(yè)面主要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{ //對(duì)左部的div樣式進(jìn)行設(shè)置</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{ //對(duì)右部的div樣式進(jìn)行設(shè)置</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{ //對(duì)中間的div樣式進(jìn)行設(shè)置</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{ //對(duì)頂部的div樣式進(jìn)行設(shè)置</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{ //對(duì)底部的div樣式進(jìn)行設(shè)置</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.二級(jí)頁(yè)面的制作</b></p><p>　　5.1 局部刷新的使用</p><p>　

22、　center區(qū)域中的內(nèi)容可實(shí)現(xiàn)局部刷新，并不會(huì)因?yàn)檫x擇某種功能而導(dǎo)致整個(gè)界面的刷新，局部刷新主要的實(shí)現(xiàn)方式是通過(guò)js改變iframe框中的src值。right區(qū)域中的內(nèi)容使用了iframe框，其中讀取了公告頁(yè)面的內(nèi)容。</p><p><b>　　5.2框架使用</b></p><p>　　班級(jí)簡(jiǎn)介、班級(jí)相冊(cè)、學(xué)習(xí)園地、班級(jí)LOGO的導(dǎo)航實(shí)現(xiàn)及center區(qū)域的模塊

23、和公告區(qū)域的模塊都采用了曲邊設(shè)計(jì)。主要div設(shè)置如下：</p><p>　　.box{ //對(duì)導(dǎo)航按鈕的div框進(jìn)行設(shè)置</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的樣式設(shè)置</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中的子網(wǎng)站的div的樣式設(shè)置</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框的樣式設(shè)置</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注冊(cè)頁(yè)面設(shè)計(jì)</b></p><p><b>　　

35、主要div如下：</b></p><p>　　.navigation_top{//注冊(cè)及登錄界面的頂部div設(shè)置</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、//注冊(cè)及登錄界面的center的div的樣式設(shè)置</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{ //注冊(cè)及登錄界面的center的div中的小div的樣式設(shè)置</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用來(lái)固定登錄窗口的位置</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導(dǎo)航代碼</b></p><p>　　function Classabout(){</p><p>　　document.getElementById("cc").src='class_about.html';</p><p>　　}//該代碼實(shí)現(xiàn)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注冊(cè)校驗(yàn)代碼</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!="")//帳號(hào)不為空進(jìn)行下一步判斷</p><p><b>　　{</b></p><p>　　if(password==repassword)//兩次密碼輸入一致進(jìn)行下一步判斷</p><p><b&g

63、t;　　{</b></p><p>　　if(isEmail(mail)==true)//郵箱驗(yàn)證通過(guò)進(jìn)行下一步判斷</p><p><b>　　{</b></p><p>　　if(checkidcard(card)==true)//學(xué)號(hào)判斷成功后，跳轉(zhuǎn)界面</p><p><b>　　{<

64、/b></p><p>　　alert("注冊(cè)成功，頁(yè)面將跳轉(zhuǎn)到登錄界面");</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("學(xué)號(hào)格式有誤，請(qǐng)輸入八位整數(shù)");</p><p>　　document.getElementById("card").value="";</p><p><b>　　}</

66、b></p><p><b>　　}</b></p><p><b>　　else</b></p><p>　　alert("郵箱格式有誤，請(qǐng)重新輸入");</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("帳號(hào)不能為空");</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>　　} //判斷郵箱的正則表達(dá)式</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>　　} //判斷學(xué)號(hào)的正則表達(dá)式</p><p><b>　　6.3登錄校驗(yàn)代碼</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("帳號(hào)或密碼錯(cuò)誤，請(qǐng)重新輸入");</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時(shí)間顯示代碼</b></p><p>　　<script language="javascript"

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

79、時(shí)器</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();//獲取小時(shí)數(shù)</p><p>　　var m=dt.getMinutes();//獲取分鐘數(shù)</p><p>　　var s=dt.getSeconds();//獲取秒數(shù)</p><p>　　document.getElementById("timeShow").innerHTML = "訪問(wèn)時(shí)間：

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

82、p><b>　　</script></b></p><p><b>　　7.設(shè)計(jì)效果圖</b></p><p><b>　　7.1主頁(yè)效果圖</b></p><p>　　圖7-1 主頁(yè)效果圖1</p><p>　　圖7-2 主頁(yè)效果圖2</p&g

83、t;<p>　　7.2導(dǎo)航測(cè)試效果圖</p><p>　　圖7-3 樹形目錄效果圖</p><p>　　7.3登錄及注冊(cè)界面</p><p>　　圖7-4 登錄頁(yè)面效果</p><p>　　圖7-5 注冊(cè)頁(yè)面效果</p><p><b>　　總 結(jié)</b></p>&

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

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

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