《网站资源共享课程设计报告》由会员分享，可在线阅读，更多相关《网站资源共享课程设计报告（30页珍藏版）》请在金锄头文库上搜索。
1、网站资源共享课程设计报告课程设计报告#设计题目：资源共享班 级：学 号：姓 名：指导教师：成 绩:日期:2013-01-05目标与内容:目标：布局资源共享页面，实现资源共享功能。资 源共享分为登录、前台、后台三个界面(省略 登录界面)。前台实现资源上传，上传至数据库， 后台显示上传的资源，并且能进行修改删除。(1) 学会网页页面的设计和基本布局(2) 能够使用代码布局网页(3) 使用代码实现网页功能(4) 能够将数据库和页面相连接(5) 理解网页的基本制作流程 内容：本次课程设计的我的选题是：资源共享。 实现功能：1 、前台界面点击“搜索”可以搜索共 享资源(因页面未设计，此处省略)。2 、资
2、源共享过程：输入共享的资源名、 选择专题名称、输入资源链接、选择共 享资源的分类。单机“资源上传”。完 成资源上传过程。3、前台完成资源上传过程，后台显示上 传的资源信息。单击“修改”可以修改上传资 源的信息。单击“删除”实现删除上传资源功 能。后台界面必须分页，避免页面撑破。地点与软件环境：地点：60#504机房软件环境：Microsoft Visual Studio 2005Dreamweaver CS4Photoshop CS3SQL Server Man ageme nt Studio课程设计主要内容：问题简析：一、页面设计本次课程设计 的主题有资 源共 享，会员管理，考试生成系统，留
3、言板等。首先每位同学确定自己的主题，搜集资料，整理素材，设计出符合自己主题的页面。一般分为登录界面、前台 显示界面和后台管理界面。实现前台 和后台相连接的功能。系统效果图设计：需实现的资源共享的两个界面:1、前台显示界面效果图 如图1 :恨管単一庁克丈舟理尖拿0学牛说源扶率* nWit貞怔军址I具-或；上怜图1.前台显示界 面(1 )、前台界面点击“搜索”可以搜索 共享资源。(2)、资源共享过程：输入共享的资源 名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”完成资源上传过程2、后台管理界面效果图如图2:学生筋观聂4皿e., 遂昴admin韭的雜号雀的密莊ffiTd 内 f
4、iW*占 ffipen*姑点设i ffM炊件炎31软件名Ifi作应弟软件indom忧佬大师VWM甘骗剽录敕件mnliAK压捕文件誉理猪ji拯鸭武m圉馆楚理软件Photoshop审崔制障1办竝牧件WPS Office亍人版M甘取娠程软件VCga ttJ ain13D MAX秋 at m图2.后台管理 界面后台显示上传的资源信息。可以修改上 传资源的信息，以及实现删除上传资源功能。页面设计结束之后，同学之间随 机交换设计的界面，做接下来的功能 实现部分。我将要做的是资源共享系 统。1、步骤简析布局资源共享页面，实现资源共享功 能。资源共享分为登录、前台、后台 三个界面（省略登录界面）。前台实 现资
5、源上传，上传至数据库，后台显 示上传的资源，并且能进行修改删 除。系统设计：一、 切图1、首先用Photoshop CS3进行界 面切图，将实现链接或者其他功能 的文字、图片隐藏。2、利用切图工具，根据需要将页 面切成几个小块。例如：前台显示界面根据需要可以切成如图3、4、5、6四个界面图3.页面顶部o学士资源共皐专题色莉;选择曲亨邊灑的井英:我的I陶：图4.显示页面left腔劇固IK图5.显示页面right图6.页面底部3、将页面上将要用到的图片切下 来。保存到image文件夹。二、 页面布局接下来在DreamweaverCS4中利用 css将切下来的背景图片拼接在一 起。具体的css代码如
6、下：1、前台页面布局css代码：#a background-image : url(image/1.jpg) ; width : 798px; height : 119px;#b background-i mage url(image/2.jpg) ; width : 169px; height : 441px;#c background-image :url(image/3.jpg) ; width : 621px;height : 441px; margi n-left : 169px; margin-top : -441px;#d background-ima ge: url(image
7、/4.jpg) ;width : 798px; height : 40px; 四个层的id分别为a、b、c、do 再用链接代码将css与页面连接：vli nk href =ma in l.cssrel =stylesheettype =text/css /2、后台页面布局与前台类似 后台页面布局css代码：#a background-image : url(images/1.jpg) ; width : 700px;height : 54px;#b background-imag e: url(images/2.jpg) ;width : 535px;height : 367px; #c ba
8、ckground-image : url(images/3.jpg) ;width : 151px;height : 366px; height : 24px;marg in-top : -370px; #d url(images/4.jpg) ;marg in-left : 540px;background-image : width : 700px;3、接下来再在整体的背景页面上 插入层，将一些文字，图片，按 钮等元素放入页面中。下面举一些 例子。例：插入按钮代码：vdiv style =position: absolute; width: 66px; height: 18px;z-in
9、dex: 13; left: 336px;top: 431pxid =layer13&n bsp;插入文字代码：我的资源 3、将页面上的文字，小图标等元素逐一放入页面中，调整位置，初 步完成页面布局制作数据库1、打开 SQLServer ManagementStudio， 新建数据库，命名为database ，保存 在指定的文件夹。2、新建表，在表中输入后台中需要的列 名。“序号”，“软件类型”，“软件名”。 类型都为“ nachar (50)”设置“序号”为主键。保存表为“Table 1 ”。如图7曲i 1X1 LIjI US）師今 ？： =10：3r Sirir 0 t3H -AbMa-f
10、R-v4-d-srSJ!iIMy4-CCJQ；i曰丄歎JS3f *亠I事樹起*JF iSjo=- lSc-tk-同（I i - mohuhih+.苍加英求窗B J* d帶氈謂* 二I dbc lif的 n 阳 & j_u）pj hj t* _j FJRA* _j cIMlW土 _J iirviii pir*丄H甜J j B：nJP h za itw+i 7图7.数据库 设计四、实现功能1、打开 Microsoft Visual Studio 2005,新建项目，选择“其他项目 类型一Visual Studio 解决方 案”。保存到指定文件夹。将Dreamweaver CS4中两个页面的代 码分
11、别拷贝到Solution1中。并且 将css以及所用到的image图片一 并拷贝到 Solutio n1 中。调试运 行。2、在前台“ qt.aspx.cs 中插入 代码实现前台数据上传后保存在 数据库中并能在后台显示编辑的 功能。代码如下：using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.Ul.WebControls;usingSystem.Web.Ul.WebCo n
12、trols.WebParts;using System.Web.Ul.HtmlControls;using System.Data.SqlClient;using System .IO;public partial class _Default :System.Web.UI.Pageprotected void Page_Load( objectsen der, Eve ntArgs e)protected void Button1_Click( object sen der, Eve ntArgs e)if(FileUploadl.PostedFile.FileName =string .Empty)Response.Write( alert( 请选择要 上传的文件！ ););else/获取要上传的文件的信息stri ng filepath =FileUpload1.PostedFile.FileName; / 文件 路径stri ng oldfile name = filepath.Substri ng(filepath.Lastl ndexOf ( )+1); / 文件名stri ng FileExte nsion =Path.GetExtension(oldfilename);/ 文件的扩展名
