WEB个人主页课程设计.doc

此文档收集于网络，如有侵权，请联系网站删除Web应用开发技术实验报告 专业：计算机科学与技术班级： 学号： 姓名： 一、设计题目个人网站二、目的、本次设计是学生在学完ASP动态网站开发课程后的一次实践性很强的课程设计，是对ASP进行动态网站开发所学知识的综合运用。2、掌握使用ASP技术进行网站开发设计。3、通过本次实习，使学生加深所学知识内容的理解，并能积极地调动学生的学习兴趣，结合实际应用操作环境，真正做到理论与实际相结合。三、功能需求描述此网站可以对主人留言，来发表自己的心情，也可以把自己的联系方式写入其中，达到和睦相处、心灵的驿站的目的等。四、总体设计查看留言留言板添加留言主页删除添加通讯录五、详细设计（一）、我的主页此页面为网站的主页，通过发布新心情，点击通讯录可以查看通讯录好友信息，点击留言板可以查看好友留言。主要代码：个人空间 个人空间 念念不忘，必有回响。 首页 通讯录  留言板 心情：藏起来的目的就是为了被找到。 心情： 待人友善是修养，独来独往是性格。 心情：何以致契阔，绕腕双跳脱。   我 姓名：薛皓 班级：2015级计科一班 学号：201513030112 Design by：15级计科一班薛皓201513030112 jQuery(.lanmubox).slide(easing:easeOutBounce,delayTime:400); （二）、留言板1、我的留言板点击留言板标后直接进入留言板详细页面，从而看见很多朋友在此留言来吸引游客的好奇心，此页面主要应用以下知识点：1） Session 、application。2) 数据库连接主要代码：以下为数据库连接建立一个Connection对象实例db 代码留言：Connection对象与数据库建立连接，并对数据库执行添加、删除、等相关操作。AddNew是添加操作。当表单内容通过post方法提交时，asp的request对象的form方法可以取得提交数据并进行相应的操作。如留言板中的添加操作：提交数据：%高级编辑器在这里输入你的信息%接受数据： 2、我的留言界面此界面为静态页，主要应用而文本框、多行文本框等知识点，将Method的属性设置为POST。主要代码：留言板-个人空间 个人空间 念念不忘，必有回响。 首页 通讯录 留言板 当前位置： 留言板 姓名 内容 时间 提交新留言 姓名 留言内容 时间       我 姓名：薛皓 班级：2015级计科一班 学号：201513030112 Design by:15计科一班薛皓201513030112 jQuery(.lanmubox).slide(easing:easeOutBounce,delayTime:400); （三）、通讯录1、我的通讯录主要代码：1）数据库的连接2)循环的输出。 .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