个人网页制作-论文.doc

目 录目 录1摘要2第一章 引言4第二章 需求分析42.1个人网站概序42.2 软件介绍42.3 网站设计理念52.4数据库的建立.5第三章 规划设计过程53.1总体设计及功能模块划分63.2设计制作过程7第四章 总结20第五章 致谢21参考文献：21摘要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，倍受人们的重视。为了树立个人在网络上的形象，通过设计一个个人网站，以达到个人推荐、展现自我的一个平台，个人网站为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。关键词：个人主页，HTML技术，ASP技术第一章 引言本课题的研究意义：在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，倍受人们的重视。为了树立个人在网络上的形象，通过设计一个个人网站，以达到个人推荐、展现自我的一个平台，个人网站为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。存在的问题：该网站的建设也牵涉到了动态网页的制作，这成了制作过程中的难点，就我个人而言，对动态网页的制作方面还缺少很多的理论与实际操作知识，曾经只是做一些简单的个人主页，仅此而已，需要深入的学习ASP方面内容和网页三剑客。 主要研究内容：个人网站设计使用动态网页的设计，提供日志、歌曲欣赏、访客留言等功能。第二章 需求分析2.1 个人网站概序个人网站的用途是为了促进内部交流、扩大外部影响、增进友谊、为生活增添多姿多彩的内容，让更多人了解到自己，让更多的人能够欣赏到自己喜欢的音乐，通过设计一个个人网站，以达到个人推荐、展现自我的一个平台，个人网站为交流提供综合的网络环境，同时也为个人的宣传，发展，提供了一个平台。主要是网站素材的选择与框架的搭建，一个好的网站要有许多的主页相互之间链接起来，以及其中添加一些动态、图片、声效等链接。综合地完成网站的建设才能体现主题，才能把浏览者的目光吸引到每一个主页上，内容的及时更新也是网站建设的一个主要实际问题，只有不断得到更新的主页内容才能使浏览者再次访问该网站，没有新鲜的内容素材，没有时代性的哲学理念，远远不能称得为好网站。新颖的框架结构也能使浏览者的目光更长久地被吸引，再拥有好的素材基础上，框架的搭建也是网站建设所必须考虑到的问题， 只有把这两者相结合进行周密地布置，相信建设出来的网站必然是点击率较高的网站。WEB上这种任你自由发挥，自由创意的特点确是它迅速发展起来的原因，以下是我从踏入网络之门到做主页，从简单到复杂系统规划自己的网站的过程，实现网络梦想！由于本人的知识水平有限，实际的经验也不足，所以所制作出来的作品有许多的不足和漏洞，希望老师提出宝贵的意见和批评。2.2 软件介绍 该个人网站所使用的软件有：网页三剑客，ASP程序设计语言，ACCESS数据库，PhtososhopCS。 2.3 网站设计理念及设计思路 在Internet发展迅速的今天，博客，个人空间，个人主页都是非常流行的展示自我，和联系朋友的平台，而我也即将面临毕业，大家以后的联系很可能会因为各自的事业而很少联系，每当自己工作很累的时候如果能打开自己的网站听听自己喜欢的歌曲，看到朋友的留言是一件非常舒心解累的事情，每当自己在生活上遇到心烦郁闷的事的时候，也可以在自己的个人网站上发发牢骚，让自己的心灵能够得到解放。每当自己想念家人朋友的时候，能够打开自己的个人网站看看家人朋友的照片，我相信回忆也是一件很美好的事情。所以我就想做个属于自己的个人网站。网站主页的设计主要是网页设计软件的操作与技术应用的问题。但是，要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。在动手制作之前思考整个网站的风格和创意。网站主页的风格是浏览者对整个网站的普遍的感觉，是主页的版式、色调及图文组合的高度抽象。我的个人网站的主要内容包括以下几个板块：个人网站首页，自己的资料的页面，日志心情，相册，留言板，收集，链接和登陆。 色彩，网站风格之魂、创意之先锋。主页的风格我配上比较淡的墨绿色衬托，在视觉上给人一种比较神秘的感觉，然后后面衬托一张夏之回忆的日出图。黎明，拥有一天中最纯净、最清澈、最让人激动的光线，那是生命最易受鼓舞、最能添置信心和渴望的时刻，日出象征着生命的开始而我们即将毕业对于社会我们也是一个开始。点击进入页面后，整体界面我采用的依然是淡墨绿的背景颜色而其他的颜色选择了经典黑白的主题颜色，黑白相间的调子简洁明快，给人一种大方得体的感觉，让人觉得非常的舒适，在标题栏下方的图片都是花朵树木的图片，盛开着的花朵象征着祖国以后的繁华发展寓意着我们的未来越来越美好。导航条上的字体用的是传统的黑体，其他的页面都是运用此页的模板制作。 2.4 数据库的建立 数据库：储存了动态交互所需的信息数据，用户可通过指令对其进行查询、修改、添加、删除等操作。数据库是指长期储存在计算机内的、有组织的、可共享的数据集合。数据库中的数据按一定的数据模型组织、描述和储存，具有较小的冗余度、较高的数据独立性和易扩展性，并可为各种用户共享。 数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下特点：尽可能不重复，以最优方式为某个特定组织的多种应用服务，其数据结构独立于使用它的应用程序，对数据的增、删、改和检索由统一软件进行管理和控制。从发展的历史看，数据库是数据管理的高级阶段，它是由文件管理系统发展起来的。在access中建表如下：数据库的设计只是提供了数据的类型、逻辑结构、联系、约束和存储结构等有关数据的描述。这些描述称为数据模式。要建立可运行的数据库，还需进行下列工作： 选定数据库的各种参数，例如最大的数据存储空间、缓冲决的数量、并发度等。这些参数可以由用户设置，也可以由系统按默认值设置。 定义数据库，利用数据库管理系统(DBMS)所提供的数据定义语言和命令，定义数据库名、数据模式、索引等。 准备和装入数据，定义数据库仅仅建立了数据库的框架，要建成数据库还必须装入大量的数据，这是一项浩繁的工作。在数据的准备和录入过程中，必须在技术和制度上采取措施，保证装入数据的正确性。计算机系统中原已积累的数据，要充分利用，尽可能转换成数据库的数据。 第三章 规划设计过程3.1 总体设计及功能模块划分每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。全面仔细规划架构好自己网站，不要急于求成。规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当要制作一个很大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，功能模板如下图： 个人网站关于日志相册收藏链接留言登陆各类心情日志相片Flash游戏和音乐各类网站登陆窗口 3.2 设计制作过程1、确定计划设计的风格以及中心意图2、构造总体框架3、收集网页设计制作的所有信息资料，素材。4、整理信息资料、素材。把相关的信息准备好。5、利用各种工具开始制作首页。从色彩的搭配，和总体的框架入手，有条不紊的进行。对于主页版面布局的我主要依据如下几条原则来做：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。下面的index页面就是用的这样的说明来做的，视觉的中心点做了个超链接联到下个页面，使得整体效果看上去非常明了。利用photoshop编辑图片，CKY个人网站实现的是用矩形热点工具编辑然后利用文本超链接对关于页面进行链接，其代码如下： 2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。下面的心情日志页面就是这样设计的，较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。我的心情日志里面的文章就是这样做的。将可编辑区域一，二换成自己所需要的图片，然后做的就是在可编辑区域三内编辑自己所需要的内容，关于里面内容的制作，先创建若干个模板页，再将日志的内容打入，做超链接将各网页连接好。之后在每个日志页面做好返回按纽。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。相片展示页就是按照上述方法做的，我的相册页面上文字和图片密切配合，既能活跃页面又整洁了页面，使人看上去一目了然，不会繁杂。将可编辑区域一，二换成自己所需要的图片，然后在自己的图片根目录里将自己以收集的照片新建文件夹，接着运用命令里的创建网络相册，利用fireworks,将图片都换成100*100格式大小的图片，然后在可编辑区域3内插入一个2行5列的表格，将创建好的100*100格式大小的图片插入进去，再给相片弄下名字，之后设置图片的超连接，点击小图片可以出现圆图大小的图片。在每个大图的页面做上返回按钮，系统将回到原相册页面。 关于about页面模板的做法如下：其制作方法：首先将背景色选取为墨绿色，然后插入表格，将所做好的图片依次插入，导航及logo都是自己利用photoshop制作，个人资料里的字体是汉仪丫丫体，大小24号。导航上的关于，日志，心情，相册，收集，链接，留言板，登陆都用了行为里的交换图片功能。所有的都用的居中对齐，其宽度为802。然后将该页面运用做成模板，接着设置模板的可编辑区域，此为可编辑区域一。此为可编辑区域二。此为可编辑区域三。然后利用模板制作其他页面。其他的页面就不一一做介绍，其做法都和以上一样，都是合理利用视觉的审美。留言板页面：此页面是运用asp制作的。1ASP是一个服务器的脚本环境，内嵌在HTML页面中的脚本程序在这里运行并建立Web服务器应用程序。在ASP脚本中可以通过三种方式访问数据库：传统的IDC（Internet Database Connector）、ADO（ActiveX Data Object）和RDS（Remote Data Server）。其中ADO是ASP内置的数据库存取组件，各种脚本和语言均可调用它实现对数据库的直接访问，并利用相应的数据接口显示查询结果。ADO拥有强大的活力，它是位于ODBC和OLEDB之上的高性能数据库操作接口，提供了开放的数据操作对象模型，允许开发人员使用任何语言和统一的编程模式操作各种与ODBC和OLEDB兼容的数据库，如Microsoft Access、FoxPro、Microsoft SQL Server、Oracle等。ADO的简单易行、应用广泛使之成为ASP访问数据库所采用的最佳选择。这种对数据库的访问方式是由Internet Information Server来完成的。执行过程如图所示：A）浏览器：用户通过Web浏览器用HTTP协议向Internet信息服务器（IIS）发出请求。B）服务器：服务器检查网页文件的类型，对扩展名是.asp的文件服务器调用ASP系统程序，解释执行被请求页面文件的所有脚本命令。若脚本中含有对数据库的请求，服务器就执行连接访问数据库的操作，并将结果以HTML格式送回用户浏览器作为响应。C）数据库：储存了动态交互所需的信息数据，用户可通过指令对其进行查询、修改、添加、删除等操作。然后是根据对该系统做出的整体的分析和设计，开始在FRONTPAGE环境下使用HTML、VBScript、JavaScript等语言相互嵌套进行系统开发设计，通过ADOActiveX Data Objects，将程序语言ASP与数据库ACCESS建立连接，以实现相关功能。另外辅助使用Photoshop等处理软件做界面的优化设计工作。其代码如下：private DataTable dodatabind(string sql,string countsql,int pagenum)string connstr=Provider=Microsoft.Jet.Oledb.4.0;Data Source=+ Server.MapPath(System.Configuration.ConfigurationSettings.AppSettingsDBPath)+;OleDbConnection conn=new OleDbConnection(connstr);conn.Open();/计算留言总数int recnum;OleDbCommand cmd = new OleDbCommand(countsql,conn);OleDbParameter parm=cmd.Parameters.Add(keyword,OleDbType.WChar);parm.Value=%+searchlabel.Text+%;parm.SourceVersion = DataRowVersion.Original;OleDbDataReader dr = cmd.ExecuteReader();if(dr.Read()recnum=dr.GetInt32(0);elserecnum=0;dr.Close();/计算留言总页数int allpage=(recnum%pagesize)=0)?(recnum/pagesize):(recnum/pagesize)+1);/显示留言DataSet ds=new DataSet();cmd=new OleDbCommand(sql,conn);parm=cmd.Parameters.Add(keyword,OleDbType.WChar);parm.Value=%+searchlabel.Text+%;parm.SourceVersion = DataRowVersion.Original;OleDbDataAdapter da=new OleDbDataAdapter();da.SelectCommand=cmd;int startnum=(pagenum-1)*pagesize;da.Fill(ds,startnum,pagesize,content);/Response.Write(startnum);/Response.Write(pagenum);(repeat)this.FindControl(Repeat1).DT=ds.Tablescontent;/显示状态pagesizelabel.Text=pagesize.ToString();countnum.Text=recnum.ToString();nowpagelabel.Text=pagenum.ToString();allpagenumbabel.Text=allpage.ToString();nextpage.Enabled=!(Boolean)(pagenum=allpage);prepage.Enabled=!(Boolean)(pagenum0) (repeat)this.FindControl(Repeat1).ContentID=this.id.ToString();(repeat)this.FindControl(Repeat1).Action=this.action.ToString();else Response.End();/ 在此处放置用户代码以初始化页面#region Web 窗体设计器生成的代码override protected void OnInit(EventArgs e)/ CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。/InitializeComponent();base.OnInit(e);/ / 设计器支持所需的方法 - 不要使用代码编辑器修改/ 此方法的内容。/ private void InitializeComponent() this.Button1.Click += new System.EventHandler(this.Button1_Click);this.Load += new System.EventHandler(this.Page_Load);#endregionprivate void Button1_Click(object sender, System.EventArgs e)if(adminpass.Text=System.Configuration.ConfigurationSettings.AppSettingsPassWord)OleDbCommand cmd = new OleDbCommand(delete * from content where ID= + guestid.Text,conn);cmd.ExecuteNonQuery();cmd.Dispose();conn.Close();conn.Dispose();Response.Redirect(default.aspx);elseerroradminpass.Text=密码错误;Repeat.ascx代码：重复public class repeat : System.Web.UI.UserControlpublic System.Web.UI.WebControls.DataList DataList1;int pagesize= System.Convert.ToInt32(System.Configuration.ConfigurationSettings.AppSettingsPageNum);private string id;private string action;private DataTable dt;public DataTable DTsetthis.dt=value;getreturn this.dt;public string ContentIDsetthis.id=value;getreturn this.id;public string Actionsetthis.action=value;getreturn this.action;private void Page_Load(object sender, System.EventArgs e)if(!this.IsPostBack)string connstr=Provider=Microsoft.Jet.Oledb.4.0;Data Source=+ Server.MapPath(System.Configuration.ConfigurationSettings.AppSettingsDBPath)+;OleDbConnection conn=new OleDbConnection(connstr);if(this.action=reply|this.action=del)OleDbCommand cmd = new OleDbCommand(select * from content where ID=+this.id.ToString(),conn);OleDbDataAdapter da=new OleDbDataAdapter();DataSet ds=new DataSet();da.SelectCommand=cmd;da.Fill