网页设计与制作实验报告

2025-07-10

关于计算机科学专业的网页设计与制作实验报告

实验报告

学 号: 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 />

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

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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

<br />

</td>

</tr>

<tr>

<td colspan="3" style="height: 23px">

<span style="color: #ffff00"><span style="color: #0000ff">&nbsp;&nbsp; 用户登陆</span> </span>

&nbsp; &nbsp; &nbsp;&nbsp;

<asp:TextBox ID="txtUser" runat="server"

Width="143px"></asp:TextBox></td>

</tr>

<tr>

<td colspan="3">

<span style="color: #0000cc">

用户密码</span> &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;

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

</tr>

<tr>

<td colspan="3">

&nbsp;.

<asp:Button ID="Button1" runat="server" Text="注册"

OnClick="Button1_Click" ForeColor="Red" />

&nbsp; &nbsp;

<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="登陆" ForeColor="Red" />

&nbsp; &nbsp;

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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; <span style="color: #ff00ff">&nbsp; &nbsp; &nbsp;<br />

<strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 新用户注册表</strong>

&nbsp;<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">

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;*用户名 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </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 />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; *登陆密码 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </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">

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*性别</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

<asp:RadioButton ID="male" runat="server" Checked="True"

GroupName="male" Text="男" />

&nbsp;<label for=male></label>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp;&nbsp; &nbsp;<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">

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*真实姓名 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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">

&nbsp;&nbsp;<br />

&nbsp;留言板&nbsp;<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 />

&nbsp;

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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

<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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </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>&nbsp;&nbsp;

*用户名<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>&nbsp;&nbsp;

*登陆密码<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>&nbsp;&nbsp;

*性 &nbsp; &nbsp; 别<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>&nbsp; *真实姓名<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="登陆" />&nbsp;<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;


网页设计与制作实验报告.doc 将本文的Word文档下载到电脑 下载失败或者文档不完整,请联系客服人员解决!

下一篇:10年寨徐小学寒假综合实践活动方案

相关阅读
本类排行
× 游客快捷下载通道(下载后可以自由复制和排版)

下载本文档需要支付 7

支付方式:

开通VIP包月会员 特价:29元/月

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信:xuecool-com QQ:370150219