个人网站设计论文.docx

当页面整体布局安排好以后，再在适当的地方加上超链接与其他页面关联即可。

当然，一个漂亮的页面还离不开Javascript特效及flash动画，系统在页面中加入了日历、雪花、下雨、文字闪动等特效。

动态页面完成的主要是留言板的功能，包括留言和回复内容、留言者姓名以及留言和恢复时间存入数据库问题，留言内容显示问题，管理员登陆编辑留言板问题，管理员对留言进行回复和删除等问题。

系统主要通过WebMatrix软件利用DataAdapter方式连接到数据库对留言进行插入和显示，对于管理员编辑留言则主要通过GridView控件进行删除、回复等。

4、设计平台

由于动态网页需要在服务器端执行程序和存取数据库，因此必须安装IIS，建立网站服务器来传送网页，然后再选择合适的网页程序语言编写程序从而完成预期的功能。

由于执行ASP.NET需处于.NETFramework环境中，因此要安装.NETFramework。

安装好IIS及.NETFramework后，在Dreamweaver中预先定义一个站点，然后就可以新建、编辑、或浏览网页。

5、开发工具

此次网站设计主要基于WindowsXP操作系统，静态页面通过Dreamweaver软进行设计，动态页面通过WebMatrix软件进行设计。

网页中的图片主要通过Photoshop软件进行处理。

三、系统设计

1、系统功能模块构成及设计要点

（1）首页模块：

显示一首《热爱生命》的诗，背景为一副荷花的大背景，打开网页后会自动播放歌曲。

页面上的单选按钮可以进行中英文切换。

首页上有可以连接到其他页面的图片，当鼠标移在这些图片上时，图片会抖动，示意已经选中，点击即可连接。

a背景音乐的添加：

雨.mp3"hidden="true"autostart="true"loop="true">

b单选按钮进行中英文切换设计：

onClick="go（'index.html'）;"checked>

中文

onClick="go（'indexe.html'）;">

English

c鼠标驱动图片抖动设计：

varrector=3varstopit=0vara=1

functioninit（which）{

stopit=0shake=whichshake.style.left=0shake.style.top=0}

functionrattleimage（）{

if（（!

document.all&&!

document.getElementById）||stopit==1）return

if（a==1）shake.style.top=parseInt（shake.style.top）+rector

elseif（a==2）shake.style.left=parseInt（shake.style.left）+rector

elseif（a==3）shake.style.top=parseInt（shake.style.top）-rector

elseshake.style.left=parseInt（shake.style.left）-rector

if（a<4）a++

elsea=1

setTimeout（"rattleimage（）",50）}

functionstoprattle（which）{

stopit=1which.style.left=0

which.style.top=0}

onMouseOver="init（this）;rattleimage（）"onMouseOut="stoprattle（this）">

（2）个人信息模块：

此模块上包括了个人基本资料和生活感言。

个人基本资料包括姓名、生日、电话、住址、Email以及个人照片等，个人生活感言主要是自己生活的一些感想。

此页面还有一个“我的相册”的链接，点击可以连接到个人相册，更加深刻的了解此人。

a、滚动文字的公告栏：

varmyMainMessage="欢迎光临我的个人主页，记得给我留言哦！

谢谢！

";

varspeed=200;varscrollingRegion=50;varstartPosition=0;

functionmainTextScroller（）{

varmainMessage=myMainMessage;

vartempLoc=（scrollingRegion*3/mainMessage.length）+1;

if（tempLoc<1）{tempLoc=1}

varcounter;

for（counter=0;counter<=tempLoc;counter++）mainMessage+=mainMessage;document.mainForm.mainTextScroller.value=mainMessage.substring（startPosition,startPosition+scrollingRegion）;startPosition++;

if（startPosition>scrollingRegion）startPosition=0;

setTimeout（"mainTextScroller（）",speed）;}

（3）家乡风光模块：

此模块主要是通过文字图片对家乡法门寺从舍利塔到法门塔再到地宫进行一个相近的介绍与图片展示。

通过此网页的介绍，让浏览网页的人会有身临其境之感。

（4）大学校园模块：

按首页的大学校园可链接到大学校园模块，这个模块是介绍个人所读大学的情况，滚动的图片展示了个人所读大学——西安理工大学的学校建筑和校园风景，并为其配上学校的文字简介。

如果联网，页面上的西安理工大学文字可以连接到西安理工大学首页。

a、图片滚动效果：

（5）留言板模块：

此页面上设计来访好友留言区域，好友填写自己姓名便可给主人留言并可看到所有留言。

此页面上也设计了管理员登陆部分，输入账号“111”和密码“111”进入留言板管理页面，此页面可以对好友留言进行编辑，包括回复、删除留言等，账号密码输入错误后会有提示。

a、留言内容写入数据库并显示：

stringConStr="Provider=Microsoft.Jet.OLEDB.4.0;Data

Source="+Server.MapPath（"Minfo.mdb"）;

Conn=newOleDbConnection（ConStr）;

Conn.Open（）;

Comd=newOleDbCommand（SQLstr,Conn）;

DA1=newOleDbDataAdapter（）;

DA1.SelectCommand=Comd;

DataSetDS1=newDataSet（）;

DA1.Fill（DS1,"T1"）;

OleDbCommandBuilderCommBuild1=newOleDbCommandBuilder（DA1）;

DS1.Tables["T1"].Rows.Clear（）;

DataRowDR1=DS1.Tables["T1"].NewRow（）;

stringSj=DateTime.Now.ToString（"yy-MM-dd"）+"

"+DateTime.Now.ToString（"HH:

mm:

ss"）;//获取当前时间函数

DR1["Cl_Name"]=TextBox3.Text;

DR1["Cl_Message"]=Mes.Text;

DR1["Cl_Response"]="";

DR1["Cl_MesTime"]=Sj;

DR1["Cl_ResTime"]=whf;

DS1.Tables["T1"].Rows.Add（DR1）;

DA1.Update（DS1,"T1"）;

Conn.Close（）;

Bind（DataGrid1）;

b、管理员编辑留言板：

stringConStr="Provider=Microsoft.Jet.OLEDB.4.0;

DataSource="+Server.MapPath（"Minfo.mdb"）;

Conn=newOleDbConnection（ConStr）;

stringt=DateTime.Now.ToString（"yyyy-MM-dd"）+"

"+DateTime.Now.ToString（"HH:

mm:

ss"）;

stringSQLstr1="updateCl_Infoset[Cl_Response]='"+（（TextBox）

（GridView1.Rows[e.RowIndex].Cells[3].Controls[0]））.Text.ToString（）.

Trim（）+"',[Cl_ResTime]='"+t.Trim（）+"'where[Cl_Name]='"+GridView1.DataKeys

[e.RowIndex].Value.ToString（）+"'";

Comd=newOleDbCommand（SQLstr1,Conn）;

Conn.Open（）;

Comd.ExecuteNonQuery（）;

Conn.Close（）;

GridView1.EditIndex=-1;

Bind（GridView1）;

2、运行效果

a.首页显示效果：

中文页面：

英文页面：

b.个人信息页面显示效果：

c.个人相册页面显示效果：

d.家乡风光页面显示效果：

e.按学校远页面显示效果：

f.好友留言页面显示效果：

g.管理员编辑留言内容页面显示效果：

四、设计总结

1、系统设计自我评价

此次web程序设计课程设计，在老师的帮助和同学的相互交流下，我学会了如何建立一个相对较完整漂亮的网站。

通过这次课程设计激发自己的学习兴趣，调动了学习的自觉性及自己动脑、动手，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。

总体来说，整个学期的学习过程，我学会了很多知识，在设计网页的这几天里，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！

2、系统设计效果

这次个人网页设计相对比较成功，页面效果良好！

总体来说，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。

感谢老师、同学在这次课程设计中给我的帮助、指导。

3、存在问题

做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。

本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。

需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。

4、改进方向

整个课程设计还算成功，但由于时间较短，系统设计不是很精细，还有需要改进的地方。

首先就是中英文切换只完成了首页，如果有时间我希望能为每一页都添加英文网页。

还有就是留言板显示的问题，系统中使用表格显示留言内容，不是很美观。

如果改进了这两个问题，所建立的网站就比较完美了。

参考文献

[1]施澄钟.精通Dreamweaver8网站建设ASP.NET篇.第一版.北京:

中国青年电子出版社，2007年:

10-15页.

[2]胡崧.网页色彩与版式设计创意实战.第1版.北京:

中国青年电子出版社，2006年：

76-79页.

[3]冯沃辉，肖金秀等.精通DreamweaverMX2004网页设计经典.第1版.北京:

冶金工业出版社，2004年:

356-359页.

[4]李千目，严哲等.ASP.NET程序设计与应用开发.第1版.北京:

清华大学出版社，2004年:

13-13页,109—131页.

[5]徐燕华，孙红丽等.Web程序设计.第5版.北京:

清华大学出版社，2010年.

[6]孙素华，孙良军等.巧学巧用Dreamweaver制作网页精彩50例.第1版.北京:

人民邮电出版社，2005年:

217-245页.

[7]吴晨，孙少波，叶菀等.ASP.NET数据库项目案例导航.第1版.北京:

清华大学，2004年。

[8]http:

//