《网站资源共享课程设计报告》由会员分享，可在线阅读，更多相关《网站资源共享课程设计报告（13页珍藏版）》请在金锄头文库上搜索。
1、装订线 课程设计报告设计题目： 资源共享 班 级： 学 号： 姓 名： 指导教师： 成 绩： 日期：2013-01-05 目标与内容：目标：布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进行修改删除。(1) 学会网页页面的设计和基本布局.(2) 能够使用代码布局网页.(3) 使用代码实现网页功能.(4) 能够将数据库和页面相连接.(5) 理解网页的基本制作流程.内容：本次课程设计的我的选题是：资源共享。实现功能： 1、前台界面点击“搜索”可以搜索共享资源（因页面未设计，此处省略）。 2、资源共
2、享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”。完成资源上传过程。 3、前台完成资源上传过程，后台显示上传的资源信息。单击“修改”可以修改上传资源的信息。单击“删除”实现删除上传资源功能。后台界面必须分页，避免页面撑破。地点与软件环境：地点：60#504机房软件环境：Microsoft Visual Studio 2005Dreamweaver CS4Photoshop CS3SQL Server Management Studio课程设计主要内容：问题简析：一、页面设计本次课程设计的主题有资源共享，会员管理，考试生成系统，留言板等。首先每位同学确定
3、自己的主题，搜集资料，整理素材，设计出符合自己主题的页面。一般分为登录界面、前台显示界面和后台管理界面。实现前台和后台相连接的功能。系统效果图设计:需实现的资源共享的两个界面：1、前台显示界面效果图 如图1 ： 图1.前台显示界面（1）、前台界面点击“搜索”可以搜索共享资源。 （2）、资源共享过程：输入共享的资源名、选择专题名称、输入资源链接、选择共享资源的分类。单机“资源上传”。完成资源上传过程。 2、后台管理界面效果图 如图2： 图2.后台管理界面后台显示上传的资源信息。可以修改上传资源的信息，以及实现删除上传资源功能。页面设计结束之后，同学之间随机交换设计的界面，做接下来的功能实现部分。
4、我将要做的是资源共享系统。二、步骤简析布局资源共享页面，实现资源共享功能。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传的资源，并且能进行修改删除。系统设计：一、 切图1、首先用Photoshop CS3进行界面切图，将实现链接或者其他功能的文字、图片隐藏。2、利用切图工具 ，根据需要将页面切成几个小块。 例如：前台显示界面根据需要可以切成如图3、4、5、6四个界面 图3.页面顶部 图4.显示页面left 图5.显示页面right 图6.页面底部3、将页面上将要用到的图片切下来。保存到image文件夹。二、 页面布局接下来在Dreamweav
5、er CS4中利用css将切下来的背景图片拼接在一起。具体的css代码如下：1、前台页面布局css代码：#a background-image: url(image/1.jpg); width:798px; height:119px;#b background-image: url(image/2.jpg); width:169px; height:441px;#c background-image: url(image/3.jpg); width:621px; height:441px; margin-left:169px; margin-top:-441px;#d background-i
6、mage: url(image/4.jpg); width:798px; height:40px;四个层的id分别为a、b、c、d。再用链接代码将css与页面连接： 2、后台页面布局与前台类似。 后台页面布局css代码：#a background-image: url(images/1.jpg); width:700px; height:54px;#b background-image: url(images/2.jpg); width:535px; height:367px;#c background-image: url(images/3.jpg); width:151px; height
7、:366px; margin-left:540px; margin-top:-370px;#d background-image: url(images/4.jpg); width:700px; height:24px;3、接下来再在整体的背景页面上插入层，将一些文字，图片，按钮等元素放入页面中。下面举一些例子。例：插入按钮代码： 插入文字代码：我的资源3、将页面上的文字，小图标等元素逐一放入页面中，调整位置，初步完成页面布局。三、 制作数据库1、打开SQL Server Management Studio，新建数据库，命名为“database”，保存在指定的文件夹。2、新建表，
8、在表中输入后台中需要的列名。“序号”，“软件类型”，“软件名”。类型都为“nachar（50）”设置“序号”为主键。保存表为“Table_1”。如图7 图7.数据库设计四、 实现功能 1、打开Microsoft Visual Studio 2005，新建项目，选择“其他项目类型”“Visual Studio解决方案”。保存到指定文件夹。将Dreamweaver CS4中两个页面的代码分别拷贝到Solution1中。并且将css以及所用到的image图片一并拷贝到Solution1中。调试运行。 2、在前台“qt.aspx.cs”中插入代码实现前台数据上传后保存在数据库中并能在后台显示编辑的功能
9、。 代码如下：using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Data.SqlClient;using System.IO;public partial class _
10、Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) if ( = string.Empty) Response.Write(alert(请选择要上传的文件！);); else /获取要上传的文件的信息 string = ;/文件路径 string old = ()+1);/文件名 string = Path.GetExtension(old); /文件的扩展名 int =
11、 (int)old;/文件名长度 /随机生成文件名 Random Rnd = new Random(); int strRnd = Rnd.Next(1, 99); string new = DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + strRnd.ToString() + (); /将文件上传到以当前日期命名的文件夹中 string UpLoadName = DateTime.No
