个人主页设计与实现.doc

1、*学院 *系 毕业论文摘 要：随着Internet及信息技术的发展，计算机已被应用到社会生活的各个领域。与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出极其重要的地位，并发挥着重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同

2、地域的人们联系交流等等活动也就显的日益重要。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。论文论述了系统的开发背景和设计目标，并对系统开发所采用的技术进行相应的简单介绍。本论文以个人主页的设计与实现为例，系统介绍了网站的需求、系统分析及设计方案，实现设计的过程。 关键词：计算机； 互联网； 网站建设； 联系交流； 个人主页；目 录第一章 引言1第二章 课题研究概述22.1 课题研究现状分析22.

3、2 个人网站的研究工作22.2.1 理论研究基础22.2.2 技术层面的支持32.3 已经取得的研究成果32.4 选题的目的及意义32.5 课题研究的主要内容4第三章 前期准备53.1 梦幻网页的编织者Dreamweaver8.053.2 IIS的简要介绍63.3 ASP的简要介绍63.4 ASP访问数据库的原理7第四章 规划设计过程84.1 总体设计及功能模块划分84.2 设计制作过程94.2.1 定义一个本地站点94.2.2 设计整体布局104.2.3 首页的后续完善114.留言板的设计13第五章 小结15参考文献16致谢17第一章 引言 互联网是社会发展的必然趋势，很多人已经意识到网络的

4、强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。互联网是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。Internet飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，一个家庭甚

5、至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。第二章 课题研究概述2.1 课题研究现状分析伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。随着互联网的飞速发展，有关网络的技术也层出不穷。如今互联网上的个人网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。在hao123神话以后，网站大全类网站又再一次达到顶峰。然而这个模式拷贝成功的网站却寥寥无几。而对于技术薄弱的个人网站来说，似乎网址类网站应该是一个很好的切入点。但是由于搜索网站的

6、异军突起，网址类网站似乎变得可有可无。网页实际是一个文件，他存放在世界某个角落的某一台计算机中而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。文字与图片是构成一个网页的两个最基本的元素。可以简单的理解为：文字，就是网页的内容；图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解

7、释并生成页面。2.2 个人网站的研究工作2.2.1 理论研究基础个人网站是由个别提供的一套集博客、文章、相册、日程、通讯录、链接、调查、留言板等诸多功能于一体的网络平台。个人网站的自由、开放精神，并使之更容易操作，更具个性需求，而不需要高深的技术。它可以帮助个人进行全面的信息化，以多种形式达到对信息获取、组织、思考、表达、共享和交流的目的。以个人为中心，建立一个完全属于自己的可定制的个性化网络平台。比如来自文章的评论，留言板都可以很好的进行交流，倾听别人的声音。2.2.2 技术层面的支持随着互联网的进一步发展与成熟，网络的带宽进一步加阔，网络应用也越来越广泛。网页制作更是日新月异，层出不穷，涌

8、现了很多琳琅满目的网站，使得整个互联网多姿多彩。在进行动态网页制作的时候，通常都是使用ASP来完成。由于ASP使用方便，操作简单，很多网页设计者一直使用ASP，ASP集成在HTML和脚本语言中，其工作界面简单。因此，ASP相对于其他网页制作软件来说，易学易用，是网页制作初学者的入门软件。同时配合数据库的操作，使个人网站具有更好的网络平台和交互性。2.3 已经取得的研究成果中国互联网在近几年发展迅猛。一方面，产生了一批依赖技术领先的互联网公司，取得了成功；另一方面，互联网技术逐渐走向普及，使得行业进入门槛正在降低。目前中国网站总数已经近百万，在这里面出现了大量的个人网站，并且个人网站存在着巨大的

9、商业价值。如果能以强大的号召力，把互补的个人网站联合起来，不知道可以成立多少个门户网站，我们有理由相信，个人网站还极具潜力。2.4 选题的目的及意义随着Internet的迅速普及，我们已经不再满足于仅仅浏览网页，而是希望更深入地参与到网络中去，Internet的开放性使个人建立自己的网站成为可能，拥有自己的网站也越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。我们更需要交流，相信交流能够促进我们不断的进步，并融合别人的长处；让我们多一些渠道倾听来自不同立场的声音；设想我们的网络，当每个人都拥有个人网页，不管是否在线，我们都可以跨越时间、空间进行交流

10、。因为这个网页中拥有我所有的一切，生活、见解、知识、思想；理想状态的个人门户就是每个人的影子，他为每个人打点网络上的一切，很多志同道合的朋友会在这里与你相识相知。2.5 课题研究的主要内容互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域，包括你和我。在我们的工作、日常生活中，能够拥有一个自己的网站，已经成为不少人的希望和骄傲。就这个课题的研究，因为是个人网站，所以我只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术。第三章 前期准备 3.1 梦幻网页的编织者Dream

11、weaver8.0在网页制作过程中，如果采用传统的HTML编辑方法，会使得整个工作复杂冗长，因此网页开发人员通常会使用一些所见即所得的工具来进行此项工作，例如Dreamweaver、FrontPage、ASP Edit、HotDog等。在这些工具中，Microsoft公司的FrontPage属于Office套装软件之一，它的操作界面类似于Word，因此非常容易学习，但是它的操作都是基于模板的，因此灵活性不大，适合初学者学习。对想要在可视化环境下制作复杂网页的专业网页制作者来说，Dreamweaver是最佳选择，它提供给网页制作者更快速的设计、更容易的编码及整合性更强的功能。利用它可以对 Web

12、 站点、Web 页和 Web 应用程序进行设计、编码和开发。Dreamweaver 8的优越性体现在以下几个方面。(1)简洁高效的设计和开发界面：界面更易于使用，可使工作效率和工作质量均得到提高。(2)“插入”工具栏的改进：简洁高效的新外观，占用更少的工作区空间。还新增加了一个“收藏”类别，可以对“插入”工具栏进行自定义，将最常使用的对象放置在该工具栏上。(3)表格编辑可视化：在表格中进行列调整操作时能看到实际效果。(4)用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。(5)起始页：能够访问最近使用过的文件，创建新文件和访问Dreamweaver 8资源

13、。起始页会在启动Dreamweaver 8或尚未打开文档时显示。(6)保存桌面选项：可以选择当重新启动Dreamweaver 8时重新打开上一次使用的文档。(7)完全支持 Unicode：Dreamweaver 8支持 Internet Explorer所支持的所有文本编码方式。可以使用几乎所有的系统中安装的语言字体，Dreamweaver 8会正确地显示和保存这些字体。(8)安全 FTP：能够完全加密所有文件传输。(9)新式的页面布局和设计环境。(10)增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。(11)动态跨浏览器验证：在保存文档时自动检查当前文档的跨浏览

14、器兼容性问题。3.2 IIS的简要介绍IIS是Internet Information Server的缩写，它是微软公司主推的Web服务器， 最常用的版本是Windows XP里面包含的IIS5.1，IIS与Window NT Server完全集成在一起， 因而用户能够利用Windows NT Server和NTFS（NT File System，NT的文件系统）内置的安全特性， 建立强大、灵活而安全的Internet和Intranet站点。 IIS的一个重要特性是支持ASP。IIS 3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。IIS的安装步骤： (1)点击

15、：【开始】-【设置】-【控制面板】-【添加/删除程序】，打开“添加/删除程序”对话框。(2)点击左边菜单栏中“添加/删除Windows组件”项，打开“Windows组件向导”对话框（这个过程可能要花几十秒钟），在对话框“组件”列表中，选中“Internet 信息服务（IIS）”项。 (3)将“Windows XP”安装盘放入光驱中，然后点击“下一步”。这个步骤可能会花几分钟。 (4)点击“完成”按钮，完成IIS的安装。3.3 ASP的简要介绍Active Server Pages（ASP）是服务器端脚本编写环境，使用它可以创建和运行动态、交互的 Web 服务器应用程序。使用 ASP 可以组合

16、HTML页、VBScript脚本命令和JavaScript脚本命令等，以创建交互的 Web 页和基于 Web 的功能强大的应用程序。 由于脚本程序是在服务器上而不是在客户端运行，传送到浏览器上的 Web 页是在 Web 服务器上生成的。所以不必担心浏览器能否处理脚本：Web 服务器已经完成了所有脚本的处理，并将标准的 HTML 页面传输到浏览器。由于只有脚本的结果返回到浏览器，所以服务器端脚本不易被别人复制。用户看不到创建他们正在浏览的页的脚本命令。n ASP的运行环境：ASP只能用于下列Web Server IIS Microsoft Personal Web Server n ASP的编程

17、语言：ASP可以使用VBScript和JavaScript进行程序编写。ASP文件，ASP的文件后缀名为.asp，以区别于同样可以包含Script的HTML 文件。一个.asp文件是一个文本文件， 可以包括下列元素的任意组合： 文本（text） HTML标志（tags） Script命令 n ASP： 不需要任何HTML的tag,保存在文件中，起个好听的名字，文件名的后缀一定要改为.asp，然后上传到服务器上一个有执行权的目录下（例如www），接下来的问题是，怎么执行这个ASP程序。3.4 ASP访问数据库的原理ASP是服务器端的脚本执行环境，可用来产生和执行动态的高性能的WEB服务器程序。当

18、用户使用浏览器请求ASP主页时，WEB服务器响应，调用ASP引擎来执行ASP文件，并解释其中的脚本语言（Javascript或Vbscript），通过ODBC连接数据库，由数据库访问组件ADO（active data objects）完成数据库操作，最后ASP生成包含有数据查询结果的HTML主页返回用户端显示。第四章 规划设计过程4.1 总体设计及功能模块划分每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造，结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。全面仔细规划架构好自己网站，不要急于求成。规划一个网站，可以用树状结构先把每个页面的内容大

19、纲列出来，架构规划好，功能模板如下图： 个人主页关于日志相册收藏链接留言登陆各类心情日志相片Flash游戏和音乐各类网站登陆窗口4.2 设计制作过程1、确定计划设计的风格以及中心意图2、构造总体框架3、收集网页设计制作的所有信息资料，素材。4、整理信息资料、素材。把相关的信息准备好。5、利用各种工具开始制作首页。从色彩的搭配，和总体的框架入手，有条不紊的进行。4.2.1 定义一个本地站点先在我的文档里建立一个文件夹，取名为 “我的个人主页”，然后启动Dreamweaver 8程序，创建一个名为“个人主页”的站点，如图4.1所示。图4. 1站点定义本地信息在“分类”列表框中选择“站点地图布局”选

20、项，在“主页”文本框中输入“index.htm”，作为网站的主页，软件就会创建一个网页文件index.htm，当访问者输入了该站点的地址后，WWW服务器就会自动将该文件传给访问者，如图4.2所示。图4.2设定站点首页4.2.2 设计整体布局打开新建站点时新建的主页index.htm，就可以对该文件进行编辑了，首先设计页面的整体布局，主要包括设置页面标题、设定站点的布局风格、设置布局单元的大小等工作。1. 设置页面标题定义页面标题有助于站点访问者确认他们正在浏览的页。如果该页被浏览者加入收藏夹，则页面标题会在收藏夹书签列表出现。在index.htm文件窗口下工具条的“标题”文本框中输入“我的个人

21、主页”，然后该段文字就会作为该页面的标题在页面预览时在标题栏出现，如图4.3所示。图4.3设置页面标题2. 设置整体布局利用布局表格和布局单元格，绘制如图4.4所示的页面布局。图4.4页面布局4.2.3 首页的后续完善将制作好的各种动画和图片插入到网页中。在Dreamweaver中打开index.htm文件。1. 插入背景图片选择要插入背景图片的单元格，在“属性”面板中“背景”文本框中选择一个准备好的图片，作为背景图片，如图4.5所示。图4.5属性面板设置背景图片2. 插入Fireworks图片单击左上角布局单元格，选择“插入”“图像”命令，将事先利用Fireworks制作好的“logo.gi

22、f”图片插入，作为网站的Logo(标志)。3.使用层和时间轴制作动态效果选择布局第三行右边单元格，利用层和行为制作一个鼠标移到图片上图片放大的效果，具体操作步骤如下。在表格中插入一张风景图片，图片改小到和单元格一样大(可利用Photoshop或Fireworks完成图片大小修改)。单击布局工具栏上的“绘制层”按钮，绘制一个层，层比单元格大，但要刚好盖住该单元格。在层内插入该风景图片的原始大小图片。在“层”面板中将该层设为隐藏，如图4.6所示。图4.6将层设为隐藏选中单元格，在“行为”面板中单击按钮，在弹出的下拉菜单中选择“显示隐藏层”选项，在弹出的对话框中单击“显示”按钮，然后单击“确定”按钮

23、，如图4.7所示。图4.7“显示隐藏层”对话框在“行为”面板中将该行为的事件改为“onMouseOut”。选中单元格，使用中的操作打开“显示隐藏层”对话框，单击“隐藏”按钮，在“行为”面板中将该行为的事件改为“onMouseOver”，如图4.8所示。图4.8修改事件将选中对象改为层，设置层的“显示”行为事件为“onMouseover”。 保存网页，按F12键，就可以预览到该层的效果，当鼠标移动到该单元格的图上时，就会显示大图。4.留言板的设计留言板是目前最为流行的网络应用之一，使用留言板，可以为留言者提供发言的机会，让他们能够及时、准确地交换自己的观点。1) 表的说明此表用来存放给我留言版块

24、的留言人、留言标题以及留言内容，共有四个字段，其中id字段设置为主键，数据类型为自动编号，其余三个字段的数据类型均为文本。留言者提交留言内容以后就会存储到此表中，网页再通过连接数据库调用此表显示每个留言内容。2) 限制条件没有后台限制，想留言的任何访客都可以在此留言板中留言，并且能够显示出来。 字段名称数据类型字段大小允许空说明id自动编号长整型自动编号name文本50否留言姓名title文本50否留言标题body备注否留言内容表4.1 留言表5. 编辑文字在主页中选择自己喜欢的字体和颜色插入相应的文字。在最后一行布局单元格设置背景色为墨绿色，输入版权信息，选中“联系我们”文字，选择“插入”“

25、电子邮件链接”命令，输入自己的电子邮件地址。选中整个布局表格，在“属性”面板中设置“对齐方式”为“居中”，首页编辑完成，如图4.9所示。*图4.9我的作品首页的简单页面制作就完成了，接下来就是相关的二级链接网页的制作。如果想得到风格统一的二级网页文件制作，可以使用设置模板的办法实现。在此不再叙述各二级页面的制作方法。二级页面制作完成后，利用超级链接将整个网站串联起来，网页制作的工作就完成了。第五章 小结经过老师耐心细致的指导，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一个月的努力，网站的设计制作告一段落。总结这次个人主页开发制作的过程，我综合使用了各种静态网页制作方法

26、及交互式动态网站的设计制作手段，并初步掌握了利用后台程序完成网站的动态响应与生成网页的技术。同时也从中学习了对静态页面的处理风格，色彩搭配，页面导航方面有了一定经验。在设计中我深知自己掌握的知识还远远不够，掌握的理论知识应用到实践中后，总会出现这样或那样的问题。不是理论没有掌握好，而是光知道书本上的知识是远远不够的，一定要把理论知识和实践结合起来。把学到的知识应用到实践中去，多做多练，才可以把理论的精华发挥出来。知识不是知道、了解就好，一定要去应用和发展它，让它在现实生活中得到充分的应用，从而解决一些实际问题，这才是学习的根本目的。而且知识又不是单一的，它是互相联系的，学科与学科之间都有着内在

27、的联系。计算机是一门非常庞大且复杂的学科，一项课题往往需要多项技术才可以完成的。在设计阶段，通过对课题的深入分析与研究，迫使我对计算机技术有了一定的了解。在遇到问题时，得到了指导老师与同学的悉心帮助，使我感受到集体的力量是无穷的。 通过这次设计，我学会了和别人配合工作，因为一个人所学的知识不可能面面俱到的，只有通过合作，发挥自己的优点，体现团队精神，才能使工作做得更为出色。通过这次设计，我学到了许多书本上学不到的知识，增强了自己的动手能力。即将毕业的我十分珍惜这次锻炼的机会，我按部就班的完成了自己的设计任务，但由于自己的知识水平有限，仍然存在很多的不足之处，恳请老师多多指教！当今的社会是竞争的

28、社会，而人才的竞争更是竞争的焦点，毕业设计对于我们即将离校的同学来说，是离校前很好的一次很好的锻炼，使得我们各方面的能力都有了很大的提高，为我们踏出校门，走上社会增强了能力与自信！参考文献1 史维国 等编著计算机应用基础教程合肥工业大学出版社2005年8月2 刘宏 赵芸 编著网页设计与制作基础教程北京交通大学出版社2007年4月3 黄金波 编著ASP动态网页设计实用教程北京交通大学出版社2009年5月4 何海燕 李海燕 王家峰网站建设与维护项目教学校本教材2012年2月5 王建军 编著设计你的个人主页教程黑龙江出版社2001年6月6 高强 刘浩才 编著网页素材的设计简明教程新疆出版社2003年

29、5月7 甘登岱 编著网页制作三剑客培训教程机械工业出版社2005年3月8 王世良 等编著Dreamweaver 中文版网页制作教程清华大学出版社2005年10月9 吴林华 编著网站设计与维护电子工业出版社2002年12月10 马希敏 编著静态网站建设大连理工大学出版社2004年1月致谢 在此论文完成之际，感谢*老师的悉心指导。王老师认真负责的工作态度和丰富的理论和实际操作能力都使我获益匪浅。无论在理论上还是在实践中，他都给与我很大的帮助，在他的帮助下使得整个网站能及时的设计完成，并从中学到了很多以前没有学到的知识，所以，非常感谢他耐心的指导。还有，在我设计整个网站的过程中，许多同学也给了我很大的帮助，在这里我一起表示感谢。最后要感谢在这近三年的学习和生活中给予我关怀和照顾的每一位可敬的老师，感谢你们的无私奉献！感谢你们的悉心教导！感谢你们的点点滴滴！感谢母校对我们的培养！是你们，教会了我为人民服务的本领，是你们，让我懂得了做人的道理，无论以后我走到那里，我都会记得你们给予我的关怀和帮助。无论何时，我都会以我曾经是你们的学生而感到骄傲，我在这即将毕业离校的时候，衷心的祝愿各位老师工作顺利，幸福安康。同时，我也祝愿我的同学们可以找的一份好的工作，都有一个好的前程！- 17 -