关于计算机科学专业的网页设计与制作实验报告
实验报告
学 号: 070104021123
专 业: 计算机科学与技术
班 级:07计科2班
姓 名: 张兆民
题 目: 网页设计与制作
指 导 教 师: 郭胜
设 计 时 间:2010年12月14日
关于计算机科学专业的网页设计与制作实验报告
目 录
一 课程设计目的 ............................................
二、课程设计题目 ........................................
三、课程设计要求 ........................................
四、需求分析 ................................................ 2
五、源代码及截图 ........................................
六、参考资料 .............................................. 25
七、设计总结 .............................................. 25
关于计算机科学专业的网页设计与制作实验报告
实验内容
一、课程设计的目的
本课程的设计目的是通过实践使同学们对http://www.77cn.com.cn技术有个全面的了解,通过这次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Visual Studio 2005 开发工具进行网页开发的方法;了解网页设计制作过程。了解和熟悉网页设计的基础知识和实现技巧。 根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。
二、课程设计题目
网页设计与制作——登陆系统 三、课程设计要求
根据所选择的主题,设计相关的网页,要求用
数据库,实现基本功能。
http://www.77cn.com.cn技术做网页。要求连
四、需求分析
选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。 首先,做好需求调研。调研的主要方式是在图书馆里翻阅相关书籍。调研内容如下:
1、网站当前以及日后可能出现的功能需求。
2、对网站的性能(如访问速度)的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、项目完成时间及进度。
然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。
五、网站源代码
(1)登录界面: 前台设计代码:
Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.77cn.com.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
关于计算机科学专业的网页设计与制作实验报告
<html xmlns="http://www.77cn.com.cn/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function TABLE1_onclick() {
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<p style="text-align: center">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table border="1" cellpadding="1" cellspacing="1" style="border-right: #ff0099 thick double; border-top: #ff0099 thick double; border-left: #ff0099 thick double; border-bottom: #ff0099 thick double" id="TABLE1" onclick="return TABLE1_onclick()">
<tr>
<td colspan="3" style="background-image: url(img/0.jpg); background-color: #ffff66; height: 71px;">
<br />
<span style="color: #0000ff">设计者:张兆民<br />
<strong><span style="font-size: 16pt; color: #ff0000;">
</span></strong></span>
<br />
<br />
<br />
<br />
关于计算机科学专业的网页设计与制作实验报告
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="X-Large"
ForeColor="Red" Text="输入密码和用户名"></asp:Label>
<br />
</td>
</tr>
<tr>
<td colspan="3" style="height: 23px">
<span style="color: #ffff00"><span style="color: #0000ff"> 用户登陆</span> </span>
<asp:TextBox ID="txtUser" runat="server"
Width="143px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="3">
<span style="color: #0000cc">
用户密码</span>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password" Width="129px"></asp:TextBox></td>
</tr>
<tr>
<td colspan="3">
.
<asp:Button ID="Button1" runat="server" Text="注册"
OnClick="Button1_Click" ForeColor="Red" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="登陆" ForeColor="Red" />
<asp:Button ID="Button3" runat="server"
Text="重置" OnClick="Button3_Click" ForeColor="Red" /></td> </tr>
<tr>
关于计算机科学专业的网页设计与制作实验报告
<td colspan="3" style="text-align: center; height: 99px; background-color: #ccffff;">
<strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td>
</tr>
</table>
<br />
<br />
</p>
</p>
</form>
</body>
</html>
后台功能代码:
Login.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
string username = txtUser.Text.Trim();
string pwd = txtPass.Text.Trim();
if (username == "张兆民" && pwd == "123456")
Response.Redirect("succeed.aspx?uid="+txtUser.Text+"&txtPass="+txtPass.Text+"&txtUser="+txtUser.Text);
else
关于计算机科学专业的网页设计与制作实验报告
{
Label1.Text = "用户名或者密码有误!请重新输入!";
}
}
protected void Button3_Click(object sender, EventArgs e)
{
txtUser.Text = "";
txtPass.Text = "";
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx");
}
}
截图:
(2)新用户注册表界面:
前台设计代码: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.77cn.com.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.77cn.com.cn/1999/xhtml" >
<head runat="server">
关于计算机科学专业的网页设计与制作实验报告
<title>无标题页</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
// ]]>
</script>
</head>
<body style="background-color: #ffffff">
<form id="form1" runat="server">
<p>
<p style="text-align: center; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double;">
<br />
<br />
<br />
<br />
<table style="border-left-color: #66ff66; border-bottom-color: #66ff66;
border-top-style: solid; border-top-color: #66ff66; border-right-style: solid;
border-left-style: solid; border-right-color: #66ff66; border-bottom-style: solid; text-align: left;" id="TABLE1" onclick="return TABLE1_onclick()">
<tr>
<td style="width: 191px">
</td>
<td style="width: 468px; text-align: justify;">
<span style="color: #ff00ff"> <br />
<strong> 新用户注册表</strong>
<br />
</span>
</td>
</tr>
<tr>
<td colspan="2" style="border-left-color: #ffccff; border-bottom-color: #ffccff;
border-top-style: double; border-top-color: #ffccff;
border-right-style: double;
border-left-style: double; height: 28px; text-align: left;
border-right-color: #ffccff;
border-bottom-style: double">
<asp:Label ID="Label2" runat="server" Text="请输入您的用户名
"></asp:Label></td>
关于计算机科学专业的网页设计与制作实验报告
</tr>
<tr>
<td colspan="2" style="border-left-color: #ffccff; border-bottom-color: #ffccff;
border-top-style: double; border-top-color: #ffccff;
border-right-style: double;
border-left-style: double; height: 64px; text-align: left;
border-right-color: #ffccff;
border-bottom-style: double">
<strong style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-color: #ffccff; border-right-color: #ffccff">
*用户名 </strong>
<asp:TextBox ID="userName" runat="server" style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;
border-bottom-style: dashed"></asp:TextBox><br />
</td>
</tr>
<tr>
<td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;
border-left-style: double; height: 22px; border-right-color: #ffccff; border-bottom-style: double; text-align: left;" colspan="2">
<asp:Label ID="Label3" runat="server" Text="请填写安全密码
"></asp:Label></td>
</tr>
<tr>
<td colspan="2" style="border-left-color: #ffccff; border-bottom-color: #ffccff;
border-top-style: double; border-top-color: #ffccff;
border-right-style: double;
border-left-style: double; height: 61px; text-align: left;
border-right-color: #ffccff;
border-bottom-style: double">
<strong style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-color: #ffccff; border-right-color: #ffccff">
<br />
*登陆密码 </strong>
关于计算机科学专业的网页设计与制作实验报告
<asp:TextBox ID="Pwd" runat="server" style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066;
border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;
border-bottom-style: dashed" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="height: 22px; text-align: justify">
<strong style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-color: #ffccff; border-right-color: #ffccff">
*性别</strong>
<asp:RadioButton ID="male" runat="server" Checked="True"
GroupName="male" Text="男" />
<label for=male></label>
<asp:RadioButton ID="female"
runat="server" GroupName="male" Text="女" /></td>
</tr>
<tr>
<td style="text-align: justify; height: 26px;" colspan="2">
<strong style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-color: #ffccff; border-right-color: #ffccff">
*真实姓名 </strong><asp:TextBox ID="RealName" runat="server" style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;
border-bottom-style: dashed"></asp:TextBox></td>
</tr>
<tr>
<td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;
border-left-style: double; text-align: center; border-right-color: #ffccff; border-bottom-style: double;" colspan="2" rowspan="3">
<br />
留言板 <br />
<br />
<asp:TextBox ID="TextBox1" runat="server" Height="80px"
Width="250px"></asp:TextBox><br />
<br />
关于计算机科学专业的网页设计与制作实验报告
<asp:CheckBox ID="agree" runat="server" Text="我已经看过并同意(服务条款)" /><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" /></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" style="background-color: transparent">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
关于计算机科学专业的网页设计与制作实验报告
<tr>
<td style="width: 191px">
</td>
<td style="width: 468px">
</td>
</tr>
</table>
</p>
</p>
</form>
</body>
</html>
后台功能代码:
Default.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;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void male_CheckedChanged(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string sex = "";
if (female.Checked)
{
sex = "女";
}
关于计算机科学专业的网页设计与制作实验报告
else
{
sex = "男";
}
if (agree.Checked)
{
Response.Redirect("shopperson_Info.aspx?uid=" + userName.Text + "&pwd=" + Pwd.Text + "&sex=" + sex + "&realname=" + RealName.Text);
}
else
{
Response.Write("<script language='javascript'>alert('由于您不同意我们的《服务条款》 注册失败!'</script>)");
}
}
}
截图:
(3)注册成功界面:
前台设计代码: ShopPerson_Info.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShopPerson_Info.aspx.cs"
Inherits="ShopPerson_Info" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
关于计算机科学专业的网页设计与制作实验报告
"http://www.77cn.com.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.77cn.com.cn/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<p style="text-align: center">
<br />
<br />
<br />
<br />
<br />
<table style="border-left-color: #ff0066; border-bottom-color: #ff0066;
border-top-style: double; border-top-color: #ff0066; border-right-style: double;
border-left-style: double; border-right-color: #ff0066; border-bottom-style: double"> <tr>
<td colspan="2" style="text-align: left">
<br />
<br />
<span style="font-size: 24pt"> </span>
<strong><span style="border-left-color: #ffccff; border-bottom-color: #ffccff; color: #ff0066;
border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;
border-left-style: solid; border-right-color: #ffccff;
border-bottom-style: solid">
<span style="font-size: 24pt; border-left-color: #ffccff;
border-bottom-color: #ffccff;
border-top-style: solid; border-top-color: #ffccff;
border-right-style: solid;
border-left-style: solid; border-right-color: #ffccff;
border-bottom-style: solid">
恭喜您注册成功!</span><br />
<br />
<br />
<br />
</span></strong>
</td>
</tr>
<tr>
<td style="width: 90px; text-align: left; border-left-color: #ffccff;
关于计算机科学专业的网页设计与制作实验报告
border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;
border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;
border-bottom-style: solid;">
<br />
<strong>
*用户名<br />
</strong>
</td>
<td style="width: 374px; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td> </tr>
<tr>
<td style="width: 90px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;
border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;">
<br />
<strong>
*登陆密码<br />
</strong>
</td>
<td style="width: 374px; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;">
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td> </tr>
<tr>
<td style="width: 90px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;
border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;
border-bottom-style: solid;">
<br />
<strong>
*性 别<br />
</strong>
</td>
<td style="width: 374px; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff; border-bottom-style: solid;">
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></td> </tr>
关于计算机科学专业的网页设计与制作实验报告
<tr>
<td style="width: 90px; height: 21px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;
border-bottom-style: solid;">
<br />
<strong> *真实姓名<br />
</strong>
</td>
<td style="width: 374px; height: 21px; border-left-color: #ffccff;
border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff;
border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;">
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label></td> </tr>
<tr>
<td colspan="2" rowspan="2" style="border-left-color: #ffccff;
border-bottom-color: #ffccff;
border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;
border-left-style: solid; text-align: center; border-right-color: #ffccff; border-bottom-style: solid">
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="登陆" /> <br />
</td>
</tr>
<tr>
</tr>
</table>
</p>
</form>
</body>
</html>
后台功能代码:
ShopPerson_Info.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;