网站资源共享专业课程设计方案报告.doc

装
订
线

课程设计汇报

设计题目： 资源共享
班 级：
学 号：
姓 名：
指导老师：
成 绩：

日期：-01-05

目标和内容：

目标：
布局资源共享页面，实现资源共享功效。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传资源，而且能进行修改删除。
(1) 学会网页页面设计和基础布局.
(2) 能够使用代码布局网页.
(3) 使用代码实现网页功效.
(4) 能够将数据库和页面相连接.
(5) 了解网页基础制作步骤.
内容：
此次课程设计我选题是：资源共享。
实现功效：
1、前台界面点击“搜索”能够搜索共享资源（因页面未设计，此处省略）。
2、资源共享过程：输入共享资源名、选择专题名称、输入资源链接、选择共享资源分类。单机“资源上传”。完成资源上传过程。
3、前台完成资源上传过程，后台显示上传资源信息。单击“修改”能够修改上传资源信息。单击“删除”实现删除上传资源功效。后台界面必需分页，避免页面撑破。

地点和软件环境：
地点：60#504机房

软件环境：
Microsoft Visual Studio
Dreamweaver CS4
Photoshop CS3
SQL Server Management Studio

课程设计关键内容：
问题简析：
一、页面设计
此次课程设计专题有资源共享，会员管理，考试生成系统，留言板等。
首先每位同学确定自己专题，搜集资料，整理素材，设计出符合自己专题页面。通常分为登录界面、前台显示界面和后台管理界面。实现前台和后台相连接功效。
系统效果图设计:

需实现资源共享两个界面：
1、前台显示界面效果图 图1 ：

图1.前台显示界面
（1）、前台界面点击“搜索”能够搜索共享资源。
（2）、资源共享过程：输入共享资源名、选择专题名称、输入资源链接、选择共享资源分类。单机“资源上传”。完成资源上传过程。

2、后台管理界面效果图 图2：

图2.后台管理界面
后台显示上传资源信息。能够修改上传资源信息，和实现删除上传资源功效。

页面设计结束以后，同学之间随机交换设计界面，做接下来功效实现部分。我将要做是资源共享系统。

二、步骤简析
布局资源共享页面，实现资源共享功效。资源共享分为登录、前台、后台三个界面（省略登录界面）。前台实现资源上传，上传至数据库，后台显示上传资源，而且能进行修改删除。

系统设计：
一、 切图
1、首先用Photoshop CS3进行界面切图，将实现链接或其它功效文字、图片隐藏。
2、利用切图工具 ，依据需要将页面切成多个小块。
比如：前台显示界面依据需要能够切成图3、4、5、6四个界面

图3.页面顶部

图4.显示页面left

图5.显示页面right

图6.页面底部
3、将页面上将要用到图片切下来。保留到image文件夹。
。
二、 页面布局
接下来在Dreamweaver 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-image: url(image/4.jpg);
width:798px; height:40px;}
四个层id分别为a、b、c、d。
再用链接代码将css和页面连接：
<link href="main1.css" rel="stylesheet" type="text/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:366px;
margin-left:540px; margin-top:-370px;
}
#d{ background-image: url(images/4.jpg); width:700px; height:24px;}
3、接下来再在整体背景页面上插入层，将部分文字，图片，，按钮等元素放入页面中。下面举部分例子。

例：插入按钮代码：
<div style="position: absolute; width: 66px; height: 18px;
z-index: 13; left: 336px; top: 431px"
id="layer13">
&nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="上传" />
</div>
插入文字代码：
<div style="position: absolute; width: 61px; height: 17px; z-index: 2;
left: 34px; top: 105px" id="layer2">
<p align="center"><b><font size="2">我资源</font></b></div>

3、将页面上文字，小图标等元素逐一放入页面中，调整位置，初步完成页面布局。

三、 制作数据库
1、打开SQL Server Management Studio，新建数据库，命名为“database”，保留在指定文件夹。
2、新建表，在表中输入后台中需要列名。“序号”，“软件类型”，“软件名”。类型全部为“nachar（50）”设置“序号”为主键。保留表为“Table_1”。图7

图7.数据库设计
四、 实现功效
1、打开Microsoft Visual Studio ，新建项目，选择“其它项目类型”—“Visual Studio处理方案”。保留到指定文件夹。将Dreamweaver CS4中两个页面代码分别拷贝到Solution1中。而且将css和所用到image图片一并拷贝到Solution1中。调试运行。
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.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void Button1_Click(object sender, EventArgs e)
{

if (FileUpload1.PostedFile.FileName == string.Empty)
{
Response.Write("<script>alert('请选择要上传文件！');</script>");
}
else
{
//获取要上传文件信息
string filepath = FileUpload1.PostedFile.FileName;//文件路径
string oldfilename = filepath.Substring(filepath.LastIndexOf("\\")+1);//文件名
string FileExtension = Path.GetExtension(oldfilename); //文件扩展名
int filelength = (int)oldfilename.Length;//文件名长度
//随机生成文件名
Random Rnd = new Random();
int strRnd = Rnd.Next(1, 99);
string newfilename = 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() + FileExtension.ToLower();
//将文件上传到以目前日期命名文件夹中
string UpLoadName = DateTime.Now.Year.ToString()+"-"+DateTime.Now.Month.ToString()+"-"
+DateTime.Now.Day.ToString();
bool FileUploadPathExists = File.Exists(Server.MapPath("UpLoad"+"\\"+UpLoadName));
//指定文件夹不存在，假如不存在就创建该文件夹
if (!FileUploadPathExists)
{
Directory.CreateDirectory(Server.MapPath("UpLoad"+"\\"+UpLoadName));
}
//保留上传文件
string savapath = Server.MapPath("UpLoad" + "\\" + UpLoadName);//保留路径
string savapath1 = "UpLoad" + "\\" + UpLoadName +"\\"+ newfilename;//保留路径
FileUpload1.PostedFile.SaveAs(savapath + "\\" + newfilename);
//连接数据库字符串
string connStr = @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\database.mdf;Integrated Security=True;User Instance=True";
SqlConnection conn = new SqlConnection(connStr);
conn.Open();

string cmdtext = "insert into T_UpFile(FileName,FileLength,FileType,FilePath) values('" + newfilename + "','" + filelength + "','" + FileExtension + "','"+savapath1+"')";
SqlCommand cmd = new SqlCommand(cmdtext, conn);
try
{
cmd.ExecuteNonQuery();
System.Text.StringBuilder strMsg = new System.Text.StringBuilder();
strMsg.Append("<br><br><font color=green>成功添加，具体信息：<br>");
strMsg.Append("文件类型：" + this.FileUpload1.PostedFile.ContentType.ToString() + "<br>");
strMsg.Append("文件名：" + filepath + "<br>");
strMsg.Append("存处文件名：" + newfilename + "<br>");
//strMsg.Append("文件上传到服务器路径为：" + savapath + "<br>");
strMsg.Append("扩展名：" + FileExtension + "<br>");
strMsg.Append("大小：" + FileUpload1.PostedFile.ContentLength + "个字节</font>");
this.Label1.Text = strMsg.ToString();
}
catch (Exception error)
{
Response.Write(error.ToString());
}
finally
{
conn.Close();
}
}
}

}

3、打开后台页面，在指定层中插入控件“Gradeview”配置数据源，将数据库中数据库“database”链接到控件中。图8

图8.后台数据库绑定
到这边为止，已经实现了前台和后台相连接功效。前台上传资源已经能够上传至数据库中，而且能够在后台中修改删除等。资源共享功效已经实现。

调试运行和结果分析：
完成后资源共享系统有以下能实现以下功效：

一、 前台页面完成基础布局，搜索，上传等按钮能实现，文本框内能打字。能够选择软件分类。 图9：

图9.前台界面效果图

二、 资源共享界面关键功效就是资源上传，点击页面“浏览”弹出对话框，选择当地资源，点击“上传”能够将选择资源上传至数据库。上传资源界面 图10：

图10.资源上传
三、 资源上传成功，页面显示上传成功具体信息。图11

图11.资源上传成功

四、前台资源上传成功后，上传文件已上传至数据库，后台从数据库中调出上传文件信息，显示图12，而且能够进行编辑，删除。实现后台基础功效。

图12.后台界面效果图

课程设计小结/心得：

不知不觉,二个星期网站课程设计已经结束,回顾这一段日子,学会很多东西,了解了网页制作基础步骤和制作方法。
在设计这个网站时真体会很多东西，从一开始网页专题确实定，到主页总体设计、前台功效设计和管理、后台功效设计和管理、每个分页面设计等。整个设计过程能够说是一个艰苦而有充实学习过程，很多知识全部是第一次深入接触和学习，如ASP调试工具，基础环境配置也是第一次整体性整合和探索，对自己来说真是一个极大考验。在不停测试和学习中碰到了很多很多困难尤其是自己一个人一组，每当有不懂地方就去网上去找资料，去图书馆借参考书。
有了理论知识根本是还不够，当碰到困难时候全部有老师热心帮助。在老师指导下，经过我努力，设计准期完成了，因为时间关系和自己知识有限，系统在很多功效不是很完善，不过毕竟最终完成了整体运作，这也让我感到我付出是有收获，让我感到十分欣慰。
作为网页设计初学者，我对网页设计很感爱好，一心想完成一个美观、实用、简单留言板管理系统，包含留言板网页、留言管理网页和留言回复页面。本学期由以前学生单纯接收知识变为主动参与教学活动。在这么压力和动力下，经过自己动手、动脑，经过网络资源，老师指导，在不停发觉问题和处理问题过程中学到了很多知识，也增强了我创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我全部全身心投入，使我真正学到了网页设计知识。
假如不计划好，想做什么就做什么，是不会做得好。即使以前开发过部分小软件程序，不过总是感到所学知识和所用未能真正合二为一，经过这次课程设计，再次复习并强化了Dreamweaver CS4软件、数据库基础知识，和ASP编程技术，体会模块化设计思想。 因为时间关系，整体功效还不是很完善，管理员管理模块功效还有些欠缺，尤其是缺乏成绩管理功效。系统开发过程前也没有作过专业市场调查，资料也不够完善，考试系统定位不是很明确。 总而言之，经过参考她人成功系统，会发觉自己做系统总会和人家有差距，不管是从界面大方美观方面还是从包含到内容方面，成功作品全部做比较丰富，而自己就显有些单调了，所以我为体会到这一句话：“机会中属于有准备人”。
在具体制作过程中会出现部分问题。比如，各个软件之间会有部分兼容问题，运行环境不一样时要进行合适修改；代码编写时条理要清楚，便于以后修改和代码插入；页面布局要合理，表现人性化要求。即使基础功效已经实现，不过还是有很多地方需要完善，在以后学习中还要不停学习网站知识。