个人网站设计论文.docx

绪论随着Internet在中国的迅速发展，人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便，同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度。本文主要利用Dreamweaver页面设计软件和WebMatrix软件设计了一个积聚个人风格的个人网站，虽然还有一些不足之处，但页面整体比较美观大方，具有个人风格，效果良好。一、 任务分析我的个人网站的主旨在于从各个方面全面的介绍我自己，展示自己。为此，所建网页中须包括个人基本信息页面，包括自己的姓名、生日、住址、联系方式、相册等内容。除此之外，可以适当添加自己家乡的风光、就读的大学、留言板等页面。二、 方案设计 为了通过个人网站从各个方面全面的介绍自己，展示自己，系统加入了个人信息模块、个人家乡风光模块、个人所读大学校园模块及来访好友留言模块等。网站里的每一个网页都有统一的风格， 让浏览者通过个人信息、家乡、学校、好友留言全面了解自己。所有页面均附有导航菜单，无论浏览者在那个页面均可通过导航连接到其他页面。1、 系统框图个人网站 留言板大学校园首页个人信息家乡风光 个人资料及生活感悟相册好友留言管理员登录编辑留言 系统框图 如图所示，系统主要有首页、个人信息、家乡风光、大学校园以及留言板五个模块。个人信息包括个人基本资料、生活感悟以及个人相册部分。留言板设计为两个页面，一个是好友留言的页面，好友可直接留言。另外一个是管理员管理页面，管理员可通账号（“111”）密码（“111”）登录，对好友留言进行回复及删除等操作。2、 内容规划首页主要是为了连接其他模块，所以比较简单，包括连接到其他模块的的导航菜单，用一幅荷花图片作为背景，并未其配上了音乐，首页的右上角是一个单选按钮的链接，可以进行中英文切换。按首页的个人信息可链接到个人信息模块，这个模块主要有人基本资料、个人生活感言等。此页面还有一个“我的相册”的链接，点击可以连接到个人相册，更加深刻的了解此人。按首页的家乡风光可链接到家乡风光模块，这个模块主要是通过文字图片对家乡法门寺从舍利塔到法门塔再到地宫进行一个相近的介绍与图片展示。按首页的大学校园可链接到大学校园模块，这个模块是介绍个人所读大学的情况，滚动的图片展示了个人所读大学西安理工大学的学校建筑和校园风景，并为其配上学校的文字简介。按首页的留言板可链接到留言板模块，在留言板上设计来访好友留言区域，好友填写自己姓名便可给主人留言并可看到所有留言。此页面上也设计了管理员登陆部分，进入留言板管理页面，此页面可以对好友留言进行编辑。所有页面均附有导航菜单，无论浏览者在那个页面均可通过导航连接到其他页面。3、 技术路线整个网站总共有九个网页，包括七个html静态页面和两个aspx动态页面。对于静态的页面主要使用Dreamweaver网页设计软件进行设计，并配合Photoshop图像处理软件美化页面插图。对于动态页面主要采用WebMatrix软件和Dreamweaver设计软件设计，由于WebMatrix软件对页面美化功能较弱，所以通过Dreamweaver设计软件先将页面进行布局安排图片插入等操作，然后将页面保存为aspx格式在WebMatrix软件中进行与数据库链接等功能的实现。 一个整齐、美观的页面离不开表格的控制，通常处理好表格的安排对页面布局安排有重要作用。在Dreamweaver中通过“插入表格”即可在页面加入表格。然后页面布局则以表格外沿为标准进行安排。在页面加入图片后，如果还想在图片上加入文字，就得用到标签了，在Dreamweaver中通过“插入布局对象层”即可在页面中加入层，层可以使插入的图片文字等对象在页面上随意移动，使用很是方便。当页面整体布局安排好以后，再在适当的地方加上超链接与其他页面关联即可。当然，一个漂亮的页面还离不开Javascript特效及flash动画，系统在页面中加入了日历、雪花、下雨、文字闪动等特效。动态页面完成的主要是留言板的功能，包括留言和回复内容、留言者姓名以及留言和恢复时间存入数据库问题，留言内容显示问题，管理员登陆编辑留言板问题，管理员对留言进行回复和删除等问题。系统主要通过WebMatrix软件利用DataAdapter方式连接到数据库对留言进行插入和显示，对于管理员编辑留言则主要通过GridView控件进行删除、回复等。4、设计平台由于动态网页需要在服务器端执行程序和存取数据库，因此必须安装IIS，建立网站服务器来传送网页，然后再选择合适的网页程序语言编写程序从而完成预期的功能。由于执行ASP.NET需处于.NET Framework环境中，因此要安装.NET Framework。安装好IIS及.NET Framework后，在Dreamweaver中预先定义一个站点，然后就可以新建、编辑、或浏览网页。5、开发工具此次网站设计主要基于Windows XP操作系统，静态页面通过Dreamweaver软进行设计，动态页面通过WebMatrix软件进行设计。网页中的图片主要通过Photoshop软件进行处理。三、 系统设计1、 系统功能模块构成及设计要点(1) 首页模块：显示一首热爱生命的诗，背景为一副荷花的大背景，打开网页后会自动播放歌曲。页面上的单选按钮可以进行中英文切换。首页上有可以连接到其他页面的图片，当鼠标移在这些图片上时，图片会抖动，示意已经选中，点击即可连接。a背景音乐的添加： b单选按钮进行中英文切换设计：function go(HrefName) window.location.href = HrefName; 中文English c鼠标驱动图片抖动设计： var rector=3 var stopit=0 var a=1 function init(which) stopit=0 shake=which shake.style.left=0 shake.style.top=0 function rattleimage() if (!document.all&!document.getElementById)|stopit=1) return if (a=1) shake.style.top=parseInt(shake.style.top)+rector else if (a=2) shake.style.left=parseInt(shake.style.left)+rector else if (a=3) shake.style.top=parseInt(shake.style.top)-rector else shake.style.left=parseInt(shake.style.left)-rector if (a4) a+ else a=1 setTimeout(rattleimage(),50) function stoprattle(which)stopit=1 which.style.left=0 which.style.top=0 .shakeimage position:relative (2)个人信息模块：此模块上包括了个人基本资料和生活感言。个人基本资料包括姓名、生日、电话、住址、Email以及个人照片等，个人生活感言主要是自己生活的一些感想。此页面还有一个“我的相册”的链接，点击可以连接到个人相册，更加深刻的了解此人。a、滚动文字的公告栏：var myMainMessage= 欢迎光临我的个人主页，记得给我留言哦！谢谢！ ;var speed=200; var scrollingRegion=50; var startPosition=0;function mainTextScroller() var mainMessage=myMainMessage; var tempLoc=(scrollingRegion*3/mainMessage.length)+1; if (tempLoc1) tempLoc=1var counter;for(counter=0;counterscrollingRegion) startPosition=0;setTimeout(mainTextScroller(),speed); (3) 家乡风光模块：此模块主要是通过文字图片对家乡法门寺从舍利塔到法门塔再到地宫进行一个相近的介绍与图片展示。通过此网页的介绍，让浏览网页的人会有身临其境之感。 (4) 大学校园模块：按首页的大学校园可链接到大学校园模块，这个模块是介绍个人所读大学的情况，滚动的图片展示了个人所读大学西安理工大学的学校建筑和校园风景，并为其配上学校的文字简介。如果联网，页面上的西安理工大学文字可以连接到西安理工大学首页。a、图片滚动效果： var speed3=20/速度,数值越大越慢demo2.innerHTML=demo1.innerHTMLfunction Marquee()if(demo2.offsetWidth-demo.scrollLeft=0) demo.scrollLeft-=demo1.offsetWidthelse demo.scrollLeft+var MyMar=setInterval(Marquee,speed3) demo.onmouseover=function() clearInterval(MyMar) demo.onmouseout=function() MyMar=setInterval(Marquee,speed3) (5) 留言板模块：此页面上设计来访好友留言区域，好友填写自己姓名便可给主人留言并可看到所有留言。此页面上也设计了管理员登陆部分，输入账号“111”和密码“111”进入留言板管理页面，此页面可以对好友留言进行编辑，包括回复、删除留言等，账号密码输入错误后会有提示。a、留言内容写入数据库并显示：string ConStr=Provider=Microsoft.Jet.OLEDB.4.0;Data Source=+Server.MapPath(Minfo.mdb);Conn=new OleDbConnection(ConStr);Conn.Open();Comd = new OleDbCommand(SQLstr, Conn);DA1= new OleDbDataAdapter();DA1.SelectCommand = Comd;DataSet DS1 = new DataSet();DA1.Fill(DS1,T1);OleDbCommandBuilder CommBuild1 = new OleDbCommandBuilder(DA1); DS1.TablesT1.Rows.Clear();DataRow DR1=DS1.TablesT1.NewRow();string Sj=DateTime.Now.ToString(yy-MM-dd)+ +DateTime.Now.ToString(HH:mm:ss); /获取当前时间函数DR1Cl_Name =TextBox3.Text;DR1Cl_Message = Mes.Text;DR1Cl_Response = ;DR1Cl_MesTime = Sj;DR1Cl_ResTime = whf ;DS1.TablesT1.Rows.Add(DR1);DA1.Update(DS1,T1);Conn.Close();Bind(DataGrid1);b、管理员编辑留言板：string ConStr=Provider=Microsoft.Jet.OLEDB.4.0;Data Source=+Server.MapPath(Minfo.mdb);Conn = new OleDbConnection(ConStr); string t=DateTime.Now.ToString(yyyy-MM-dd)+ +DateTime.Now.ToString(HH:mm:ss);string SQLstr1=update Cl_Info set Cl_Response=+(TextBox)(GridView1.Rowse.RowIndex.Cells3.Controls0).Text.ToString().Trim()+,Cl_ResTime=+t.Trim()+whereCl_Name=+GridView1.DataKeyse.RowIndex.Value.ToString()+;Comd = new OleDbCommand(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、 存在问题做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景