网页设计与制作实验报告

实验报告

学号: 070104021123

专业: 计算机科学与技术

班级：07计科2班

姓名: 张兆民

题目: 网页设计与制作

指导教师:郭胜

设计时间：20##年12月14日

一课程设计目的...

二、课程设计题目.... 2

三、课程设计要求.... 2

四、需求分析.... 2

五、源代码及截图.... 2

六、参考资料... 25

七、设计总结... 25

实验内容

一、课程设计的目的

本课程的设计目的是通过实践使同学们对asp.net技术有个全面的了解，通过这次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Visual Studio 20## 开发工具进行网页开发的方法；了解网页设计制作过程。了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

二、课程设计题目

网页设计与制作——登陆系统

三、课程设计要求

根据所选择的主题，设计相关的网页，要求用asp.net技术做网页。要求连数据库，实现基本功能。

四、需求分析

选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。

首先，做好需求调研。调研的主要方式是在图书馆里翻阅相关书籍。调研内容如下：

1、网站当前以及日后可能出现的功能需求。

2、对网站的性能（如访问速度）的要求和可靠性的要求。

3、确定网站维护的要求。

4、网站的实际运行环境。

5、网站页面总体风格以及美工效果。

6、主页面和次级页面数量等。

7、内容管理及录入任务的分配。

8、项目完成时间及进度。

然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

五、网站源代码

（1）登录界面：

前台设计代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

// <!CDATA[

function TABLE1_onclick() {

}

// ]]>

</script>

</head>

<body>

<div>

<br />

<tr>

<br />

</span></strong></span>

<br />

    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="X-Large"

ForeColor="Red" Text="输入密码和用户名"></asp:Label>

<br />

</td>

</tr>

<tr>

用户登陆</span> </span>

<asp:TextBox ID="txtUser" runat="server" Width="143px"></asp:TextBox></td>

</tr>

<tr>

用户密码</span>         

<asp:TextBox ID="txtPass" runat="server" TextMode="Password" Width="129px"></asp:TextBox></td>

</tr>

<tr>

<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>

<strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td>

</tr>

</table>

<br />

</div>

</form>

</body>

</html>

后台功能代码：

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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

// <!CDATA[

// ]]>

</script>

</head>

<div>

<br />

<tr>

</td>

<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>

<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>

<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">

<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>

         *性别</strong>                

<asp:RadioButton ID="male" runat="server" Checked="True" GroupName="male" Text="男" />

      <asp:RadioButton ID="female"

runat="server" GroupName="male" Text="女" /></td>

</tr>

<tr>

         *真实姓名          </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>

  <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>

<br />

</td>

</tr>

<tr>

</td>

</td>

</tr>

</table>

</div>

</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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<br />

<tr>

<br />

<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 />

</span></strong>

</td>

</tr>

<tr>

<br />

*用户名<br />

</strong>

</td>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></td>

</tr>

<tr>

<br />

*登陆密码<br />

</strong>

</td>

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td>

</tr>

<tr>

<br />

*性     别<br />

</strong>

</td>

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label></td>

</tr>

<tr>

<br />

</strong>

</td>

<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 />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="登陆" /> <br />

</td>

</tr>

<tr>

</tr>

</table>

</div>

</form>

</body>

</html>

后台功能代码：

ShopPerson_Info.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 ShopPerson_Info : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('注册成功！')</script>");

try

{

Label1.Text = Request.QueryString["uid"].ToString();

Label2.Text = Request.QueryString["pwd"].ToString();

Label3.Text = Request.QueryString["sex"].ToString();

Label4.Text = Request.QueryString["realname"].ToString();

}

catch

{

}

protected void Button1_Click(object sender, EventArgs e)

{

Response.Redirect("login.aspx");

}

截图：

（4）显示姓名界面：

前台设计代码：

Sousou.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sousou.aspx.cs" Inherits="Sousou" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<br />

<table border="1" cellpadding="1" cellspacing="1" style="border-left-color: lime;

border-bottom-color: lime; border-top-style: double; border-top-color: lime;

border-right-style: double; border-left-style: double; text-align: center; border-right-color: lime;

border-bottom-style: double">

<tr>

</td>

<br />

</td>

</td>

</tr>

<tr>

尊敬的用户！恭喜您！登陆成功！</td>

</tr>

<tr>

</td>

</tr>

<tr>

姓名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Search_button" runat="server" Text="搜索" /></td>

</tr>

<tr>

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

DataSourceID="AccessDataSource2">

<asp:BoundField DataField="name" HeaderText="姓名" SortExpression="name" />

</Columns>

</asp:GridView>

<asp:AccessDataSource ID="AccessDataSource2" runat="server" DataFile="~/App_Data/ProductShow.mdb"

SelectCommand="SELECT [name] FROM [name] ORDER BY [name], [编号] DESC, [编号]"></asp:AccessDataSource>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

后台功能代码：

Sousou.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 Sousou : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

private void DataBindgv()

{

DBAccess db = new DBAccess();

DataSet ds = db.Getds();

}

protected void Search_button_Click(object sender, EventArgs e)

{

Response.Redirect("Sousou.aspx");

string strField = TextBox1.Text.ToString().Trim();

string StrSql = "select * from Product_img where name='" + strField + "'";

DBAccess db = new DBAccess();

DataSet ds = db.Gets(StrSql);

}

截图：

（5）登录成功界面

前台设计代码：

Succeed.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="succeed.aspx.cs" Inherits="succeed" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<br />

<tr>

</td>

<br />

</td>

</td>

</tr>

<tr>

恭喜您！登陆成功！</td>

</tr>

<tr>

</td>

</tr>

<tr>

爱好：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Search_button" runat="server" OnClick="Button1_Click" Text="搜索" /></td>

</tr>

<tr>

 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" BackColor="White" BorderColor="White" BorderStyle="Ridge"

BorderWidth="2px" CellPadding="3" CellSpacing="1" DataKeyNames="id" DataSourceID="AccessDataSource1"

GridLines="None" Width="698px">

<asp:BoundField DataField="id" HeaderText="编号" InsertVisible="False" ReadOnly="True"

SortExpression="id" />

<asp:BoundField DataField="name" HeaderText="姓名" SortExpression="name" />

<asp:BoundField DataField="age" HeaderText="年龄" SortExpression="age" />

<asp:BoundField DataField="job" HeaderText="工作" SortExpression="job" />

<asp:BoundField DataField="image" HeaderText="爱好" SortExpression="image" />

</Columns>

</asp:GridView>

<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/ProductShow.mdb"

SelectCommand="SELECT * FROM [Product_img]"></asp:AccessDataSource>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

后台功能代码：

Succeed.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 succeed : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{DBAccess db = new DBAccess();

if (!IsPostBack)

{

DataBindgv();

}

string welcome = "欢迎您来到会员中心！现在时间是：" + DateTime.Now.ToString();

Response.Write(welcome);

}

private void DataBindgv()

{

DBAccess db = new DBAccess();

DataSet ds = db.Getds();

}

protected void Button1_Click(object sender, EventArgs e)

{

Response.Redirect("Sousou.aspx");

string strField = TextBox1.Text.ToString().Trim();

string StrSql = "select * from Product_img where name='" + strField + "'";

DBAccess db = new DBAccess();

DataSet ds = db.Gets(StrSql);

}

截图：

六、参考资料

《网页设计技术教材》童爱红清华大学出版社 20##年1月

《网页设计与制作（CS4中文版）》唐有明清华大学出版社 20##年4月

《网页设计与制作》蔡伯峰清华大学出版社 20##年5月

《网页设计技术》顾晓燕清华大学出版社 20009年12月

七、心得：

通过这次试验，我了解颇多。实训是培养学生综合运用所学知识,发现,提出,分析和解决实际问题,通过上机练习来培养我们自身实践能力，这次网页设计与制作就是其中之一。

回顾这次课程设计，至今我仍感慨颇多，的确，从听老师解说到开始自己制作，从理论到实践，在这几节课的实际操作过程中，不仅巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。使我懂得了理论与实际相结合才是最重要的，只有从理论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。只有把布局的基础打好，才能设计出成功的网页。

在实验过程中，也遇到了不少的麻烦。但通过自己不懈的努力，及对参考书的深入研究。一些基本的问题都得以解决。

相关推荐

网页设计与制作实验报告

六、参考资料

专栏推荐