网页制作实验报告

本网站是一个简单介绍一部浪漫爱情电影《夏日乐悠悠》（Love you you）的网页。通过四个子页“电影剧情”，“人物介绍”，“电影影评”，“经典台词”来让读者简单的了解这部电影。网站中的图片素材大多选自电影剧照，使读者更清晰明白的感受到该电影的独特魅力一、简述作品的创意以及采用了本课程的哪些技术。采用技术：

1、利用表格进行布局

2、网站超链接

3、图文混编和热区

4、行为和层的综合应用

网页制作实验报告

二、作品的设计步骤 (要求有每一步的过程描述和相应的截图，包括设计过程中的参数)

1. 给制结构草图：

网页制作实验报告

2. 在制作本网站前应先在电脑中创建一个名为Love you you的文件夹，然后在该文件夹中再创建一个名为images的文件夹，用于保存网站中所有用到的图像。

第 1 页共 9 页

大学计算机基础考生姓名、学号：

网页制作实验报告

4. 新建一个名为“Love you you”的站点，并保存在Love you you文件夹中。站

点-管理站点-新建-基本-站点的起名输入Love you you

网页制作实验报告

第 2 页共 9 页

大学计算机基础考生姓名、学号：

5. 站点右键------新建文件，创建首页，用表格进行布局，然后插入logo

banner，设置导航栏背景，左边导航栏背景图片以及版权信息背景图象。

第 3 页共 9 页

网页制作实验报告

大学计算机基础考生姓名、学号：

6. 创健“个人简介”子网页

网页制作实验报告

第 4 页共 9 页

网页制作实验报告

大学计算机基础考生姓名、学号：

网页制作实验报告

第 5 页共 9 页

网页制作实验报告

大学计算机基础考生姓名、学号：

第 6 页共 9 页

网页制作实验报告

三．设计者对作品自评，内容可包括设计的重点和难点，优点与缺点。并且给出作品最终效果图（自行截取反映作品整体、

关键点和特效的画面3～8张）

作品自评：

本作品是设计一个简单的让读者初步了解电影《夏日乐悠悠》（Love you you）的网页。通过四个子网页“电影剧情”“人物介绍”“电影影评”“经典台词”来简单的让读者了解电影大纲。且该网站的图片，文字等素材大部分来源于电影剧照，台词，使读者可以快速感受到该电影所具有的独特魅力同时用一系列唯美的图片为网站营造了梦幻的氛围，同时与电影主题——浪漫的爱情故事相照应。不足之处在于时间紧缺，只来得及学习dreamweaver的应用，而没学习如何在网页中插入flash，使得网站稍微单调，逊色。

“主页”效果图

“个人简介”子网页效果图

第 7 页共 9 页

网页制作实验报告

大学计算机基础考生姓名、学号：

网页制作实验报告

第 8 页共 9 页

网页制作实验报告

大学计算机基础考生姓名、学号：

网页制作实验报告

第 9 页共 9 页

网页制作实验报告

第二篇：个人网站设计实验报告

河南工程学院

实习报告

课程名称　 ASP.NET程序设计实训　

设计题目个人网站的设计与实现

系（部）　　计算机学院　

班　　级

学号

姓名

实习时间　2013.12.30－2014.1.3 　

指导教师李艳玮

20##年 1 月 3日

实习（训）报告　评　语

等级：　　　　　

评阅人：职称：

年月日

一、实训题目.............................................................................. 4

二、系统需求分析.......................................................................... 4

2.1可行性分析........................................................................ 4

2.1.1社会可行性.................................................................. 4

2.1.2技术可行性.................................................................. 4

2.1.3经济可行性.................................................................. 5

三、系统设计目标和原则.................................................................... 5

3.1设计目标.......................................................................... 5

3.2设计原则.......................................................................... 6

四、系统功能模块设计...................................................................... 6

4.1前台管理模块...................................................................... 6

4.2 后台管理模块...................................................................... 7

五、数据库设计............................................................................ 7

5.1数据库表设计...................................................................... 7

5.1.1 dbo.Logger（文章信息表）.................................................... 7

5.1.2 dbo.LoginTime（登录时间表）................................................. 8

5.1.3 dbo.MessageBoard（文章信息表）.............................................. 8

5.1.4 dbo.Mood（日志表）.......................................................... 9

5.1.5 dbo.Musics（音乐文件信息表）................................................ 9

5.1.6 dbo.users（用户登录表）..................................................... 9

六、基本程序清单......................................................................... 10

6.1 数据库连接类清单.................................................................. 10

6.2页面清单.......................................................................... 12

6.2.1登陆界面................................................................... 12

6.2.2关于我们................................................................... 15

6.2.3音乐页面................................................................... 15

七、实训总结............................................................................. 19

个人网站设计与实现

一、实训题目

个人网站设计与实现

二、系统需求分析

信息时代的今天，网络已经成为人们工作、学习的一部分，不断充实和改变着人们的生活。在网络中，一个个性化的个人网站，可以充实地表达自己的想法，通过发布日志文章展示个人能力，抒发个人情感，朋友则可以根据主题发表个人的意见，表达自己的想法，进行思想交流，乐在其中。也可以通过个人网站让朋友更加清楚的了解自己的爱好和习惯。通过网络，更加了解身边的人。

2.1可行性分析

2.1.1社会可行性

社会可行性具有比较广泛的内容，需要从政策、法律、道德、制度、等社会因素论证开发的可行性和现实性。主要是运行环境的可行性和法律可行性。本系统的运行环境是在服务器环境，前台网页设计使用的是Microsoft Visual Studio 2008，而数据库系统采用的是SQL Server 2005。所以运行环境是可行的的。本系统是自己设计编程的，所以不存在软件版权问题。

2.1.2技术可行性

技术可行性分析主要是分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。在软件方面，本系统采用的是ASP.NET进行开发，前台网页设计使用的是Microsoft Visual Studio 2008，而数据库系统采用的是SQL Server 2005。通过分析，在软、硬件方面现有工具与环境完全可以实现系统的开发，因此具有技术上的可行性。

2.1.3经济可行性

经济可行性主要是对项目的经济效益进行评价。本系统对系统开发者来说并不需要太高的成本支出，不需要什么经济成本，一般的机器上就可以进行编程，而且开发周期不需要太长，节省了人力、物力、财力资源，所以本系统在经济上是可行的。

综上所述，本系统开发目标已明确，在技术和经济等方面具备可行性，并且投入少、见效快，因此系统的开发是完全可行的。

三、系统设计目标和原则

3.1设计目标

个人网站设计与实现系统的总目标是：在计算机网络、数据库和先进的开发平台上，利用现有的软件，配置一定的硬件，开发一个具有开放体系结构的、易扩充的、易维护的、具有良好人机交互界面的个人网站，以达到个人推荐、展现自我的一个平台，为交流提供综合的网络环境，同时也为个人的宣传、发展，提供了一个平台。本系统主要实现网站设计者与访问者之间的相互交流，主要要实现以下的目标。

a. 全面展示个人网站的主题思想。

b. 通过上传个人相册，使访问者对网站建设者有进一步的了解。

c. 提供在线音乐收藏模块，使访问者可以收藏自己喜欢的音乐。

d. 通过日历可以选择日期、查看文章，并可以给网站建设者留言。

f. 通过发表我的文章，表达网站建造者的想法和观点，实现彼此间的相互交流。

e. 对音频文件进行管理，可以上传、查看、修改音频文件。

g. 对文章信息进行管理，可以选择文章类别名称、添加文章内容，并可以查询和修改文章。

h. 实现博客以及文章的搜索功能，使其能更快捷的找到想要的文章以及博客。

i. 可以注册新用户，然后登陆信息。

3.2设计原则

流畅、方便、实用。整个网站同意风格，运行没有缺陷，能让使用者用的得心应手。

四、系统功能模块设计

本系统分为前台管理模块和后台管理模块，每一个模块又有若干个子模块构成，其中前台管理模块主要包括的有：主页、日志、相册、收藏、音乐、博文、等子模块。后台管理模块主要包括的有：文章管理、相册管理、音频文件管理、博文管理、登陆新用户。具体的功能设计如下：

4.1前台管理模块

图1 前台模块管理图

4.2 后台管理模块

图2 后台模块管理图

后台管理模块的功能由网站的建设者使用，。具体的系统功能结构图如下图所示。后台管理系统模块的具体功能设计如下：

相册管理功能：主要包括有相册的分类、查看以及上传等操作。

音乐文件管理功能：主要包括的有音乐文件的添加以及搜索等操作。

新用户的注册功能：当新用户注册完之后，可以进行登录，进而访问本网站。

日志以及博文管理功能：包括有对日志以及博文的添加、编辑、查看等操作。

五、数据库设计

5.1数据库表设计

5.1.1 dbo.Logger（文章信息表）

文章信息表主要用于保存和添加的文章信息。

图3.文章信息表

5.1.2 dbo.LoginTime（登录时间表）

此表可以让使用者知道上次的登录时间。

图4.登录时间表

5.1.3 dbo.MessageBoard（文章信息表）

可以知道有哪些文章，并且知道这些文章什么时候发表的。

图5.文章信息表

5.1.4 dbo.Mood（日志表）

其主要上传日志以及上传日志的时间。

图6.日志表

5.1.5 dbo.Musics（音乐文件信息表）

音乐文件信息表主要用于保存上传的音乐文件信息。

图7.音乐文件信息表

5.1.6 dbo.users（用户登录表）

此表主要用于用户作为管理者登录。

图8.用户登录表

六、基本程序清单

6.1 数据库连接类清单

<!--

注意: 除了手动编辑文件t以外您还可以使用

Web 管理工具来配置应用程序的设置可以使用 Visual Studio 中D的Ì?

“网站À->“Asp.Net 配置选项。

设置和注释的完整列表在

machine.config.comments 中D，该文件通常位

\Windows\Microsoft.Net\Framework\v2.x\Config 中D

-->

<add name="ConnectionString" connectionString="Expression: SpaceConnectionString"

providerName="System.Data.SqlClient" />

<add name="SpaceConnectionString1" connectionString="Data Source=.\sqlexpress;Initial Catalog=Space;Integrated Security=True"

providerName="System.Data.SqlClient" />

<add name="SpaceConnectionString" connectionString="Data Source=.\sqlexpress;Initial Catalog=Space;Integrated Security=True"

providerName="System.Data.SqlClient" />

<add name="SpaceConnectionString2" connectionString="Data Source=.\sqlexpress;Initial Catalog=Space;Integrated Security=True"

providerName="System.Data.SqlClient" />

</connectionStrings>

<system.web>

<!--

设置 compilation debug="true" 将调试符号插入

已编译的页面中但由于这会

影响性能¨，因此只在¨开发过程中将此值

设置为a true。

-->

<!--

通过y<authentication> 节可以配置ASP.NET 使用的

安全身份验证模式

以标识传入的用户

-->

<!--

如果在执行请求的过程中出现未处理的错误

则通过y<customErrors> 节可以配置相应的处理步骤具体说来

开发人员通过该节可以配置

要显示的 html 错误页°

以代替错误堆栈跟踪

</customErrors>

-->

</system.web>

</configuration>

6.2页面清单

6.2.1登陆界面

登陆界面的功能是：如果用户是注册用户，通过用户名和密码都正确时，才能登陆。如果用户是非注册用户，必须先进行用户注册。

图9.登陆界面

主要代码如下：

public partial class Logon : System.Web.UI.Page

{

string strcnn = @"Data Source=.\sqlexpress;Initial Catalog=Space;Integrated Security=True";

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

Panel1.Visible = false;

Panel2.Visible = false;

}

RadioButton1.Checked = true;

}

protected void BtnLogon_Click(object sender, EventArgs e)

{

Panel1.Visible = true;

Panel2.Visible = false;

}

protected void BtnRegister_Click(object sender, EventArgs e)

{

Panel1.Visible = false;

Panel2.Visible = true;

}

protected void Submit_Click(object sender, EventArgs e)

{

//try

//{

string strSql = "select * from users where us_name=@us_name";

SqlConnection sqlcnn = new SqlConnection(strcnn);

SqlCommand sqlCmd = new SqlCommand(strSql, sqlcnn);

SqlParameter paraName = sqlCmd.Parameters.Add("@us_name", SqlDbType.VarChar, 8);

paraName.Value = Us_Name.Text.Trim();

sqlcnn.Open();

SqlDataReader sqlDr = sqlCmd.ExecuteReader(CommandBehavior.CloseConnection);

if (sqlDr.Read())

{

if (sqlDr[2].ToString() == Us_PassWord.Text.Trim())

{

string logintime;

logintime = System.DateTime.Now.ToString();

int timeID;

readTimeID();

Session["TimeID"] = int.Parse(Session["TimeID"].ToString()) + 1;

timeID = int.Parse(Session["TimeID"].ToString());

insertTime(timeID, logintime);

#region 记录访问人数

readcount();

int counts;

Session["counts1"] = int.Parse(Session["counts"].ToString()) + 1;

counts=int.Parse(Session["counts1"].ToString());

insertcount(counts);

#endregion

//Response.Write("<script>alert('登陆成功，欢迎访问！?')</script>");

Response.Redirect("Space/Index.aspx");

}

else

{ Response.Write("<script>alert('你?输入的密码不正确！请重新输入！')</script>");

Us_PassWord.Text = "";

}

sqlDr.Close();

return;}

else

{ Response.Write("<script>alert('你输入的用户名不正确！请重新输入！')</script>");

Us_PassWord.Text = "";

Us_Name.Text = "";

Us_Name.Focus();

sqlDr.Close();

return;

} }

6.2.2关于我们

关于我们页面主要是基本资料和个人信息。

图9.关于我们页面

6.2.3音乐页面

音乐页面功能有搜索音乐和添加歌曲功能，搜索音乐可以根据作者搜索。

图11.音乐界面

主要代码：

public partial class music : System.Web.UI.Page

{

string strcnn = @"Data Source=.\sqlexpress;Initial Catalog=Space;Integrated Security=True";

protected void Page_Load(object sender, EventArgs e)

{

GridView1.Visible = true;

AddMusic.Focus();

}

public int MusicMessage(int id, string musicID,string name)

{

SqlConnection con = new SqlConnection(strcnn);

try

{

con.Open();

SqlCommand command = new SqlCommand("insert into Musics values(@id,@musicID,@name)", con);

command.Parameters.Add("@id", System.Data.SqlDbType.Int).Value = id;

command.Parameters.Add("@musicID", System.Data.SqlDbType.NChar).Value = musicID;

command.Parameters.Add("@name", System.Data.SqlDbType.NChar).Value = name;

//command.Parameters.Add("@riqi", System.Data.SqlDbType.VarChar).Value = riqi;

int cout = command.ExecuteNonQuery();

if (cout > 0)

{

Response.Write("<script>alert('添加成功')</script>");

}

return cout;

}

catch (SqlException ex)

{

return -1;

}

finally

{

con.Close();

}

protected void AddMusic_Click(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

//int j = 1;

//if (Request.Cookies["count"] == null)

//{

// j = 1;

//}

//else

//{

// j = int.Parse(Request.Cookies["count"].Value);

//}

////string addtime = DateTime.Now.ToString();

//MusicMessage(j,MusicName.Text.ToString(), Name.Text.ToString());

//j++;

//Response.Cookies["count"].Value = j.ToString();

//Response.Cookies["count"].Expires = DateTime.Now.AddYears(1);

int musiccount = 0;

readmusicID();

musiccount = int.Parse(Request.Cookies["musicid"].Value.ToString()) + 1;

MusicMessage(musiccount, MusicName.Text.ToString(), Name.Text.ToString());

MusicName.Text = "";

Name.Text = "";

}

private void readmusicID()

{

SqlConnection con = new SqlConnection(strcnn);

con.Open();

SqlCommand comand = new SqlCommand("select * from Musics where id in(select max(id) from Musics)", con);

SqlDataReader read = comand.ExecuteReader();

while (read.Read())

{ Response.Cookies["musicid"].Value = read[0].ToString();}

con.Close();

}

protected void Find_Click(object sender, EventArgs e)

{

}

七、实训总结

通过这次实训，我体会到了自己有很多的不足。以前上机时都是照着课本上的代码编写，这次实训没有了课本的依靠感到自己专业方面的知识还是很欠缺的。通过这次实训，我熟悉掌握了ASP.NET的基本操作，包括具体界面的设计、代码的设计、Sql数据库与ASP.NET相连接方面的基本技能，从中体会到了面向对象开放软件的思想。同时，我认识到学习ASP.NET这门课程不光光只学习理论，更重要的是要实践。如果你理论知识学习的再好，不会实际操作，那也等于白费功夫。从这次的实训中，我体会到了做什么事情都要做好提前准备，这样可以达到事半功倍的效果。

通过此个人网站设计与实现系统的开发，我做到了理论联系实际，将书本上学到的知识与具体实践充分结合起来，既解决了学习中的一些问题，又进一步明确了开发管理信息系统的方法和思想；既加深了对管理信息系统的认识，又进一步巩固了以前所学的计算机软件开发方面的知识，提高了软件开发的水平，从而为今后在实际工作中更好的应用计算机进行信息管理打下了坚实的基础。

相关推荐

网页制作实验报告

第二篇：个人网站设计实验报告

一、实训题目

二、系统需求分析

2.1可行性分析

2.1.1社会可行性

2.1.2技术可行性

2.1.3经济可行性

三、系统设计目标和原则

3.1设计目标

3.2设计原则

四、系统功能模块设计

4.1前台管理模块

4.2 后台管理模块

五、数据库设计

5.1数据库表设计

5.1.1 dbo.Logger（文章信息表）

5.1.2 dbo.LoginTime（登录时间表）

5.1.3 dbo.MessageBoard（文章信息表）

5.1.4 dbo.Mood（日志表）

5.1.5 dbo.Musics（音乐文件信息表）

5.1.6 dbo.users（用户登录表）

六、基本程序清单

6.1 数据库连接类清单

6.2页面清单

6.2.1登陆界面

6.2.2关于我们

6.2.3音乐页面

七、实训总结

专栏推荐