WEB個(gè)人主頁(yè)課程設(shè)計(jì).doc

此文檔收集于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系網(wǎng)站刪除Web應(yīng)用開發(fā)技術(shù)實(shí)驗(yàn)報(bào)告 專業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)班級(jí)： 學(xué)號(hào)： 姓名： 一、設(shè)計(jì)題目個(gè)人網(wǎng)站二、目的、本次設(shè)計(jì)是學(xué)生在學(xué)完ASP動(dòng)態(tài)網(wǎng)站開發(fā)課程后的一次實(shí)踐性很強(qiáng)的課程設(shè)計(jì)，是對(duì)ASP進(jìn)行動(dòng)態(tài)網(wǎng)站開發(fā)所學(xué)知識(shí)的綜合運(yùn)用。2、掌握使用ASP技術(shù)進(jìn)行網(wǎng)站開發(fā)設(shè)計(jì)。3、通過(guò)本次實(shí)習(xí)，使學(xué)生加深所學(xué)知識(shí)內(nèi)容的理解，并能積極地調(diào)動(dòng)學(xué)生的學(xué)習(xí)興趣，結(jié)合實(shí)際應(yīng)用操作環(huán)境，真正做到理論與實(shí)際相結(jié)合。三、功能需求描述此網(wǎng)站可以對(duì)主人留言，來(lái)發(fā)表自己的心情，也可以把自己的聯(lián)系方式寫入其中，達(dá)到和睦相處、心靈的驛站的目的等。四、總體設(shè)計(jì)查看留言留言板添加留言主頁(yè)刪除添加通訊錄五、詳細(xì)設(shè)計(jì)（一）、我的主頁(yè)此頁(yè)面為網(wǎng)站的主頁(yè)，通過(guò)發(fā)布新心情，點(diǎn)擊通訊錄可以查看通訊錄好友信息，點(diǎn)擊留言板可以查看好友留言。主要代碼：個(gè)人空間 個(gè)人空間 念念不忘，必有回響。 首頁(yè) 通訊錄  留言板 心情：藏起來(lái)的目的就是為了被找到。 心情： 待人友善是修養(yǎng)，獨(dú)來(lái)獨(dú)往是性格。 心情：何以致契闊，繞腕雙跳脫。   我 姓名：薛皓 班級(jí)：2015級(jí)計(jì)科一班 學(xué)號(hào)：201513030112 Design by：15級(jí)計(jì)科一班薛皓201513030112 jQuery(.lanmubox).slide(easing:easeOutBounce,delayTime:400); （二）、留言板1、我的留言板點(diǎn)擊留言板標(biāo)后直接進(jìn)入留言板詳細(xì)頁(yè)面，從而看見(jiàn)很多朋友在此留言來(lái)吸引游客的好奇心，此頁(yè)面主要應(yīng)用以下知識(shí)點(diǎn)：1） Session 、application。2) 數(shù)據(jù)庫(kù)連接主要代碼：以下為數(shù)據(jù)庫(kù)連接建立一個(gè)Connection對(duì)象實(shí)例db 代碼留言：Connection對(duì)象與數(shù)據(jù)庫(kù)建立連接，并對(duì)數(shù)據(jù)庫(kù)執(zhí)行添加、刪除、等相關(guān)操作。AddNew是添加操作。當(dāng)表單內(nèi)容通過(guò)post方法提交時(shí)，asp的request對(duì)象的form方法可以取得提交數(shù)據(jù)并進(jìn)行相應(yīng)的操作。如留言板中的添加操作：提交數(shù)據(jù)：%高級(jí)編輯器在這里輸入你的信息%接受數(shù)據(jù)： 2、我的留言界面此界面為靜態(tài)頁(yè)，主要應(yīng)用而文本框、多行文本框等知識(shí)點(diǎn)，將Method的屬性設(shè)置為POST。主要代碼：留言板-個(gè)人空間 個(gè)人空間 念念不忘，必有回響。 首頁(yè) 通訊錄 留言板 當(dāng)前位置： 留言板 姓名 內(nèi)容 時(shí)間 提交新留言 姓名 留言內(nèi)容 時(shí)間       我 姓名：薛皓 班級(jí)：2015級(jí)計(jì)科一班 學(xué)號(hào)：201513030112 Design by:15計(jì)科一班薛皓201513030112 jQuery(.lanmubox).slide(easing:easeOutBounce,delayTime:400); （三）、通訊錄1、我的通訊錄主要代碼：1）數(shù)據(jù)庫(kù)的連接2)循環(huán)的輸出。 .auto-style1 text-align: right; font-weight: bold; font-size: larger; .auto-style4 border-style: outset; asp:SqlDataSource ID=SqlDataSource1 runat=server ConnectionString= SelectCommand=SELECT * FROM Table_1 2、添加新記錄主要代碼： 添加 .title text-align:center; font-family:Microsoft YaHei; font-size:50px; padding:60px 0 0 0; color:#ccc; body background-image:url(image/back.png);background-size:cover; .auto-style1 width: 969px; border: 5px solid #00FF00; .auto-style6 border: 3px solid #008000; width: 182px; height: 150px; font-weight: bold; font-size: larger; .auto-style7 border-style: solid; border-color: #008000; width: 618px; height: 150px; .textbox margin-left:5px; .bottom margin-left:400px; margin-top:10px; .sex1 margin-left:10px; .sex margin-left:20px; .auto-style9 border: 3px solid #008000; width: 182px; height: 50px; font-weight: bold; font-size: larger; .auto-style10 color: #A0A0A0; .auto-style11 text-decoration: none; .auto-style12 color: #000000; font-size: larger; font-weight: bold; .auto-style13 font-size: larger; color: #CCCCCC; padding:0 0 0 180px; .auto-style14 font-size: larger; color: #000000; padding: 0 0 0 180px; font-weight: bold; .auto-style15 margin-left: 5px; .auto-style16 .auto-style17 border-style: solid; border-color: #008000; width: 618px; height: 50px; 姓名 電話 E-mail ： asp:SqlDataSource ID=SqlDataSource1 runat=server ConnectionString= OnInserted=SqlDataSource1_Inserted OnInserting=SqlDataSource1_Inserting OnSelected=SqlDataSource1_Selected OnSelecting=SqlDataSource1_Selecting OnUpdated=SqlDataSource1_Updated OnUpdating=SqlDataSource1_Updating SelectCommand=SELECT * FROM Table_1  （四）部分CSS外部樣式主要代碼CSS： body text-align:center;cursor:url(images/2828.ani);#header width:1024px;height:200px;background:transparent;#name text-align:left;padding-top:50px;padding-left:25px;#miaoshu text-align:left;padding-left:25px;#left float:left;width:350px;height:200px;background:transparent;.kong float:left;width:100%;height:10px;clear:both;overflow:hidden;#index text-align:left;padding-top:10px;width:1024px;height:15px;background:transparent;ul margin:0px;list-style:none;#index li height:20px;line-height:20px;float:left;width:100px;text-align:center;list-style:none;a:link text-decoration:none;color:white;a:hover position:relative;top:1px;left:1px;color:white;text-decoration:underline; a:visited color:#9966CC;#main width:1024px;height:800px;background:#transparent;border:2px solid #999 ;#left2 float:left;width:260px;height:400px;background:#transparent;border:2px solid #999 ;.tit h4 width:260px;height:23px;background:#transparent;text-align:left;padding-top:3px;padding-left:8px;border:1px solid #999 ;#photo width:180px;height:240px;.xuxian border:1px #cccccc dotted;.word text-align:left;font:11px Arial,宋體;padding-left:33px;#right float:right;height:480px;background:#transparent;border:2px solid #999 ;.kong2 float:right;width:260px;height:10px;overflow:hidden;#left3 float:left;width:264px;height:400px;background:#transparent;overflow:hidden;border:2px solid #999 ;#jiyu text-align:left;padding-left:5px;font:15px Arial,宋體;#button text-align:right;#show text-align:left;width:260px;height:450px;.kong3 float:right;width:750px;height:10px;overflow:hidden;#right2 float:right;height:333px;background:#transparent;overflow:hidden;border:2px solid #999 ;.tit2 h4 width:748px;height:23px;background:#transparent;text-align:left;padding-top:3px;padding-left:8px;border:1px solid #999 ;#geci width:600px;height:400px