个人网页制作-论文

目 录 目 录 1 摘要 2 第一章 引言 4 第二章 需求分析 4 2.1 个人网站概序 4 2.2 软件介绍 .4 2.3 网站设计理念5 2.4 数据库的建立.5 第三章 规划设计过程 5 3.1 总体设计及功能模块划分 6 3.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.AppSettings“DBPath“)+“;“; 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); else recnum=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.Tables“content“; /显示状态 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); #endregion private void Button1_Click(object sender, System.EventArgs e) if(adminpass.Text=System.Configuration.ConfigurationSettings.AppSettings“PassWord“) OleDbCommand cmd = new OleDbCommand(“delete * from content where ID=“ + guestid.Text,conn); cmd.ExecuteNonQuery(); cmd.Dispose(); conn.Close(); conn.Dispose(); Response.Redirect(“default.aspx“); else erroradminpass.Text=“密码错误“; Repeat.ascx代码： 重复 public class repeat : System.Web.UI.UserControl public System.Web.UI.WebControls.DataList DataList1; int pagesize= System.Convert.ToInt32(System.Configuration.ConfigurationSettings.AppSettings“PageNum“); private string id; private string action; private DataTable dt; public DataTable DT set this.dt=value; get return this.dt; public string ContentID set this.id=value; get return this.id; public string Action set this.action=value; get return 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.AppSettings“DBPath“)+“;“; 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