个人网站设计毕业设计论文
毕业设计（论文）
题目米菲儿空间网站的设计与制作
姓名王甜
学号 310316070413
学院职业技术学院
专业计算机网络技术
2013年5月20日
成绩评议
答辩小组评议意见
摘要
随着互联网的飞速发展，电脑网络已应用到各个领域，普及到千家万户,无论是国内还是国外都迅速的发展起来。现在，网络已经成为人们快速获取信息、发布信息和传输信息的主要渠道，成为每个人生活中的一部分，同时网络也提供了一个很好的信息交换平台。
目前，网页设计和网站建设成为新时代的一个热点。网络已经渗透到各个领域，无论是企业还是个人，网络为我们提供了很好的信息交流平台。政府利用网站宣传自己的政策、企业利用网站宣传自己的形象、学校利用网站宣传自己的教育、个人利用网站展示自己的个性风采。越来越多的人都希望拥有自己的个性网站，展现自己的个性风采。通过建设个人网站，我们可以展示自己，与别人交流学习，求职等等。
本网站主要从个人网站的数据库的设计方面和网页设计三剑客入手，实现个人网站系统的主页浏览模块、后台管理员登录模块、留言板模块、前台会员登录模块、会员注册模块与身份验证模块等方面设计，从网站设计的主页、界面设计方面研究，并探讨了运用数据库技术，基于https://www.360docs.net/doc/cb1860240.html,的动态网页设计和SQLServer数据库进行个人网站的设计与实现，针对要实现这些方面的技术，此文将一一简单介绍其设计思想和设计方法。
关键词：https://www.360docs.net/doc/cb1860240.html,；SQLServer；个人网站；留言板
ABSTRACT
With the rapid speed development of Internet, the network computer network has been applied to various fields more and more, popular both in domestic and foreign families to rapid development. Now network has quick access to information, publishing information and the main channel to transmit information, become a part of life, everyone at the same time the network also provides a good information exchange platform.
At present, web design and website construction has become a focus in the new era. Network has already penetrated into every field, whether business or personal, Internet provides us with very good communication platform. Use website propaganda their government policies, enterprise use website propaganda their image, schools use website propaganda education, personal use of your own website to show your personality. More and more people want to have his own personality website, showing their own personality. Through the construction of personal website, we can show ourselves and communicate with others learning, job search, etc.
My personal website is mainly from the website database design and web design of the three musketeers, achieving personal website system backstage administrator login, message board module, member login, registration and authentication aspects such as design, from the home page of website design, interface design, research, and probes into the use of database technology, dynamic web design based on https://www.360docs.net/doc/cb1860240.html, and is essentially digital personal website design and implementation of the database, in view of the technology to achieve these aspects, this article will introduce one by one the design idea and design method.
KEY WORDS:https://www.360docs.net/doc/cb1860240.html,；SQLServer；Personal Website；Message board
目录
引言 (1)
1概述 (2)
1.1软件的选用与简介 (2)
1.2选题的目的和意义 (2)
1.3课题研究的主要简介 (2)
2设计准备 (3)
2.1设计愿望 (3)
2.2设计背景 (4)
2.3确定网站主题 (6)
2.4确定网站形象 (6)
2.5确定网站风格 (6)
2.6确定网站内容 (6)
3各模块简介 (7)
3.1首页模块 (7)
3.2我的朋友 (8)
3.3大学之旅 (8)
3.4美文欣赏 (9)
3.5可爱收藏 (9)
4具体实现与分析 (9)
4.1静态设计 (9)
4.1.1站点的建设与收集素材 (10)
4.1.2HTML语言 (10)
4.1.3用框架表格进行布局和排版 (11)
4.1.4添加网页元素 (11)
4.1.5滚动的公告 (11)
4.1.6典型的子页设计过程 (12)
4.2动态设计 (13)
4.2.1数据库的建立 (13)
4.2.2建立会员登录系统 (14)
4.2.3建立留言板模块 (18)
4.2.4后台部分 (19)
5结论 (20)
参考文献 (21)
致谢 (22)
引言
随着科技的进步、时代的发展，计算机信息行业也逐步壮大，人们也越来越离不开各种各样的信息，人们对信息的追求越来越迫切。
网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在互联网上表现出了它及其重要的地位，并发挥着及其重要的作用，无论是国内还是国外都迅速的发展和壮大，并被人们重视。网站的迷人之处在于它综合使用文本、图像、声音、动画视频信息和内容，具有丰富的多媒体表现与互动特点。毋庸置疑，网站已成为最吸引人的也是最有效的信息传递的手段与方式。随着网络技术的逐步发展，各类网站纷纷出现，个人网站也成为了一种时尚，越来越多的人希望拥有自己的网站，开辟自己在网络世界里的一片天地，展示自己的才华和风格。
网站数据库的规划设计以及网站的页面开发，都是对应网站要实现的功能而进行设计的，我将通过各种网页制作以及数据库设计工具作出能达到预期效果的数据管理系统以及网站页面，使网站管理人员更加方便的，准确的对留言板进行正确的维护和更新；使个人网站成为我们与外界沟通和交流的平台，让更多的人了解自己，在以后的社会竞争中能起到自我推荐和自我展示的作用。
1 概述
1.1软件的选用与简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver具有制作效率高、操作直观、简单易学、站点管理方便等无可比拟的控制能力优势，但它也同样存在着难以精确达到与浏览器完全一致、不能实时更新、不能对大量信息进行更改、操作不方便、页面原始代码难以控制等不足。本设计选用的是DreamweaverCS4。
ASP是一项微软公司的技术，是一种嵌入网页中的脚本，可由因特网服务执行的服务器端脚本技术。指Active Server Pages（动态服务器页面），运行于IIS之中的程序。https://www.360docs.net/doc/cb1860240.html, 的前身ASP技术，是在IIS2.0上首次推出的。本设计用的是基于C#的https://www.360docs.net/doc/cb1860240.html,技术。https://www.360docs.net/doc/cb1860240.html,是基于通用语言编译运行的程序，有着很强的适应性，C#编程语言语法灵活，功能强大，论述都基于C#的https://www.360docs.net/doc/cb1860240.html,建立气象数据库查询系统的构建与编程。https://www.360docs.net/doc/cb1860240.html,有好多优点：1、可管理性：https://www.360docs.net/doc/cb1860240.html, 使用基于文本的、分级的配置系统，简化了将设置应用于服务器环境和Web 应用程序的工作。2、安全：https://www.360docs.net/doc/cb1860240.html, 为Web 应用程序提供了默认的授权和身份验证方案。开发人员可以根据应用程序的需要很容易地添加、删除或替换这些方案。3、跟踪和调试：https://www.360docs.net/doc/cb1860240.html, 提供了跟踪服务，该服务可在应用程序级别和页面级别调试过程中启用。可以选择查看页面的信息，或者使用应用程序级别的跟踪查看工具查看信息。4、增强的性能：https://www.360docs.net/doc/cb1860240.html, 是运行在服务器上的已编译代码，与传统的Active Server Pages (ASP) 不同，https://www.360docs.net/doc/cb1860240.html, 能利用早期绑定、实时(JIT) 编译、本机和全新的缓存服务来提高性能。
1.2选题的目的和意义
随着Internet的迅速发展，我们已经不再满足于单单地进行浏览网页，而是希望我们能更深入地参预到网络中去，Internet的开放性使得个人建立自己的网站成为可能，拥有自己的个性网站也越来越成为一种网络时尚，同时创建一个能充分体现自我风格和自我特色的个人网站已经成为互联网用户的新追求。
我们更需要的是交流，交流能促进我们不断的进步，并且融合别人的长处；让我们能多一些渠道倾听来自不同立场的声音；设想一下我们的网络，当每个人都拥有个人网站，不管是否在线，我们都能跨越时间、空间进行交流，因为这个网站中拥有我所有的一切，生活、想法、知识、思想；梦想和理想的状态是个人门户也是我们每个人的影子，它为每个人打点网络上的一切，好多志同道合的朋友会在这里和你相识、相交、相知。
1.3课题研究的主要简介
现在互联网是社会发展的必然趋势，很多人已经意识到网络强大生命力和它在未来将
要处于的重要地位。他们进行钻研并且努力进入到一个新的空间、新的领域。其中包括你、我、他。
在我们的日常、工作生活当中，能够拥有一个自己的网站已经成为越来越多的人的理想和骄傲。就这个课题的研究，因为是个人的网站，所以我只选择了自己擅长和喜爱的内容，在突出自己的风格个性和特点的同时，还应用了我们所学过的的网站设计技术和数据库技术等。
2 设计准备
“个人网站要发展，要么是从我（自己）的需求出发，要么是从我周围人的需求出发。”这是国内著名的个人网站站长、手机之家站长高春辉说的。网页设计是一门新兴起的设计类，近几年来随着网络的发展而逐渐受到人们的重视，它自己本身以网络作为载体,把各种各样的信息以最快捷、方便的方式传达给大家。一个网站项目的确立一般是建立在各种各样的需求上面的，这是个人网站，所以这种需求一般来自于个人的实际需求，其中每个人的实际需求占了绝大数部分。因此如何更好地了解、分析需求，并且又能够准确、清晰地以文档的形式表达出来，保证开发过程以个人需求为目的正确项目开发方向进行。
2.1设计愿望
越来越多的人希望能够真正参与到互联网上，这就出现了越来越多的个人网站设计以及推广的工作和任务。
就我个人来说，我之所以在毕业设计的时候选择这个课题是因为我自己也想拥有一个自己的个人网站，在互联网上拥有我自己的一席之地，从而真正的参与到互联网中去，做个网络新时代的主人，同时也希望自己喜欢的一些东西能够和大家一起分享，和互联网上的朋友一起分享。
我所制作的个人网站大体可分为以下几个功能：
1.秘密收藏：
在其中展示一些我喜爱的东西，包括衣服、饰品、帽子等。和大家分享这些东西，我只想让大家进一步认识我和了解我，让一些美好的东西我们大家能共同欣赏。
2.留言板：
这是一个大家谈心交流的好地方，浏览者登录以后在留言板中，你可以畅所欲言，和大家进行交流。对我留言，写下你对本网站的意见、建议或者感受，也可以对我们感兴趣的话题来展开讨论，进行心与心的沟通。而且可以查看自己和查看别人的留言，看看别人的感受。但我增加了管理权限，我以管理员的身份可以对新加入的新内容进行管理，即允许其加入和允许对其进行删除操作等。欢迎大家来这里留言哦！
3.会员登录：
在这里可以进行会员登录操作，如果用户还没有注册也可以进行注册然后再登录。在这里如果你忘记了自己的密码还可以进行找回密码的操作，并且可以修改和查看自己的相关信息。登录后就可以进行留言操作。非常灵活，为会员提供了很大的方便。
4.个人信息：
在这里，浏览者可以看到我自己的个人相关信息，包括兴趣爱好、籍贯、缺点及喜爱的明星和喜爱的小动物。欢迎大家浏览我的个人信息！
2.2设计背景
使用工具简介:
IIS的简要介绍:
IIS是Internet Information Server的缩写，它是微软公司主推的一种Web服务器，最新的版本是Windows2000/2003server里面包含的IIS 5.0或IIS 6.0，IIS与Window2000/2003 Server完全集成在一起，因而用户能够利用Windows 2000/2003 Server和NTFS（NT File System，NT的文件系统）内置的安全特性，建立强大、灵活又安全的Internet和Intranet 站点。IIS的一个重要特性是支持ASP。IIS 3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。如果是其他的Windows操作系统则需要用户手动安装IIS。下面以Windows XP 为例，说明IIS的安装步骤：
IIS的安装步骤：
1.依次打开：【控制面板】->【添加/删除程序】->【添加/删除Windows组件】，勾选【Internet 信息服务（IIS）】，然后单击信息按钮。
2.在打开的【Internet信息服务（IIS）】对话框中勾选所有项。
3.单击“确定”按钮后，再单击“下一步”按钮。在光驱中放入Windows XP的安装盘，安装完毕后，可以测试一下安装是否成功，在浏览器地址栏中输入”http://localhost”,如果安装成功则会出现欢迎画面。
https://www.360docs.net/doc/cb1860240.html,的简要介绍:
Active Server Pages（ASP）是服务器端脚本编写环境，使用它可以创建和运行动态、交互的Web 服务器应用程序。使用ASP 还可以组合HTML页、VBScript脚本命令和JavaScript脚本命令等，是创建交互的Web 页和基于Web 的功能强大的应用程序。
由于脚本程序是在服务器上运行而不是在客户端上运行，所以传送到浏览器上的Web 页是在Web 服务器上生成的，所以不必担心浏览器能否处理脚本。Web 服务器已经完成
了所有脚本的处理，并将标准的HTML 页面传输给浏览器。由于只有脚本的结果返回到浏览器，所以服务器端的脚本不容易被别人复制。用户并看不到创建他们正在浏览的页的脚本命令。
☆ ASP的运行环境：ASP只能用于下列Web Server
?IIS
?Microsoft Personal Web Server
☆ ASP的编程语言：ASP可以使用VBScript和JavaScript进行程序的编写。
☆ ASP文件，ASP的文件后缀名为.ASP，用以区别于同样可以包含Script的HTML 文件。
一个*.ASP文件是一个文本文件，可以包括下列元素的任意组合：
?文本（text）
?HTML标志（tags）
?Script命令
☆ ASP：不需要任何HTML的tag保存在文件中，起一个见名知意的名字，文件的后缀一定要改为.ASP ，然后再上传到服务器上一个有执行权的目录下（例如wwwroot）。
ASP访问数据库的原理
ASP是服务器端脚本执行的环境，可用来产生和执行动态的高性能的WEB服务器程序。当用户使用浏览器来请求ASP主页时，WEB服务器作出响应，调用ASP引擎来执行ASP文件，并解释其中的脚本语言（javascript或vbscript），并通过ODBC连接数据库，由数据库访问组件ADO（active data objects）完成数据库操作，最后ASP生成包含有数据查询结果的HTML主页返回用户端并显示。
SQL Server的简要介绍：
SQL Server是微软公司开发的数据库产品，SQL Server2000被广泛使用，很多电子商务网站、企业的内部信息化平台等等都是基于SQL Server产品的。今天的商业环境要求不同类型的数据库的性能、可伸缩性及可靠性是基本的要求，而进入市场时间也非常的关键。除了这些核心企业品质外，SQL Server2000还为数据库的管理和分析提供了方便，非常灵活和易于操作。我此次的毕业设计就选用的是SQL Server2000。
完全的Web支持:
SQL Server2000提供了Web以标准为基础的扩展数据库编程功能。丰富的XML和Internet标准支持允许使用内置的存储过程以XML的格式轻松存储和检索数据。还可以使用XML更新程序，更容易地进行插入、更新和删除记录的操作。
2.3确定网站主题
做网站，首先必须要解决的就是网站内容的问题，即是确定网站的主题。如果自己在某些方面越有兴趣，或掌握的资料越多，就可以做一个自己感兴趣的东西。你可以有自己的见解，做出自己的特色网站。当然，也可以推销自己，让别人了解自己，和别人进行沟通和交流，展示一些自己的东西，让大家更好地了解自己。对于内容主题的选择，要做到小而精，即主题定位要小，且内容要精。不要去试着作一个包罗万象的站点，这往往会失去你的网站的特色，也会带来很大的劳动，给网站的及时更新带来更大的困难。我的网站主题是以我个人相关的资料来制作的，介绍了我自己。
2.4确定网站形象
网站形象的设计可以从网站的LOGO、网站的色彩、网站的字体宣传语等这些方面着手。
网站色彩，网站给人的第一印象来自于视觉的冲击，不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”指的是能体现网站形象和延伸内涵的色彩，给人们一种以整体统一的感觉。我个人网站的色彩是以浅蓝色色为主，浅蓝色的字体和浅色的图像给人一种舒服的感觉，仿佛生活在虚幻的世界里。
网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的一些特有字体。为了体现网站所特有的风格，可以根据自已的网站所表达的内涵，选择更贴切的字体。我的个人网站的标准字体是华文彩体。给人一种沉稳而不失俏皮的感觉。
2.5确定网站风格
风格是抽象的，指网站的整体形象给浏览者留下的综合感受。这个“整体形象”包括网站的LOGO、网站的色彩、网站的字体、网站的标语等许多因素。网站是可以平易近人的、生动活泼的，也可以是严肃专业的。但不管是在色彩、技术、文字、布局、还是交互方式上，只要能由此让浏览者明确的看出这是你的网站所独有的，这就形成了一种风格。
风格是有人性的，它通过网站的色彩、技术、文字、布局、交互方式等可以综合概括出一个网站的自己的个性；我的网站风格是以舒服为主，给人一种舒舒服服的感觉。
2.6确定网站内容
我的个人网站大体上包括了一些内容：首页、我的朋友、美文欣赏、大学之旅、秘密收藏、会员登录、会员注册、留言板等网站常用内容，方便的大家的浏览。
3 各模块简介
一个网站的首页其实是一个文档，当一个网站服务器收到一台电脑上网络浏览器的信息连接请求时，便会向这台电脑发送这个文档。当在浏览器的位址列输入域名，而并未指向特定目录或档案时，通常浏览器会打开网站的首页。
网站首页往往会被编辑的很易于了解该网站所提供的所有资讯，并引导互联网用户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容，我的个人网站的首页给大家一目了然的感觉，打开首页就可以了解我的个人网站的设计风格还可以看到一些特定的功能，大家可以尽情地浏览其中的信息。首页的大致图如下图3.1所示：
图3.1首页框图展示
首页框图展示了我的整个设计页面的架构，主要包括首页、我的朋友、大学之旅、美文欣赏、秘密收藏和用户登录这几部分，给浏览者一种一目了然的感觉。点击每一部分可以进入相应的界面，可以具体浏览其中的信息。而且左边有滚动字幕，点击可以浏览具体的内容。欢迎大家浏览！
3.1首页模块
介绍了一些关于我自己的基本信息，比如姓名、生日、兴趣爱好等。希望大家可以进一步的了解我。如下图3.2所示：
图3.2首页模块展示
3.2我的朋友
介绍了我和我的朋友的一些事和一些去过的地方，里面有我和朋友照片，大家可以参考一下。这里面有我的高中同学和大学同学还有我的闺蜜。
第一页用了一个滚动的图片展示了我和我的朋友们在一起的照片，下面写了一些关于赞美朋友的话语。记得有个人说过情人是一时的，而朋友却是一辈子的，那些深重的友情永远都会埋在我们的心底，永远都不会磨灭。所以我愿意把它拿出来跟大家一起分享，让我们共同珍惜我们的友谊。
第二页用FireWorks做了一个胶卷型的流动的照片，显示了一些我的朋友们。那些美丽的时刻我将永远把它留下来。第三页显示了我的大学的朋友们，他们给我大学的生活留下了美好的记忆。
3.3大学之旅
在这里介绍了一部分我在上大学期间去过的一些地方，拍下了一些优美的风景，那些给我留下美好回忆的地方我都把他们记载下来。里面有照片和文字简介，大家可以做个参考，也去欣赏那里的优美风景。
第一页插入了一个spry折叠面板，介绍了去保定满城汉墓旅游时的一些照片。并且介绍了一些关于满城汉墓的一些信息。
第二页插入了几张去石家庄空中花园游玩时的照片，并附加了空中花园的一些相关信息。第三页介绍了竞秀公园，并插入了几张竞秀公园的照片，也对竞秀公园作了简单的介
绍。
3.4美文欣赏
在美文欣赏这部分中列举出了几篇优美的文章供浏览者欣赏。
这些文章中有讲述关于人生哲理的，讲述了人生的悲欢离合，人生旅途的不顺利；有关于爱情的，介绍了男女之间刻骨铭心的感人爱情故事；还有介绍关于朋友之间的深厚友谊以及一些励志的文章，激励那些正在追逐梦想的人有一颗不怕失败、永不言败、愈挫愈勇的心。
以上都是本人认为比较优美的文章，希望浏览者也喜欢！
左边是滚动的字幕，也是优美的文章，大家点击直接可以欣赏。如下图3.3所示：
图3.3 美文欣赏展示
3.5可爱收藏
在可爱收藏这部分中展示了一些可爱的衣服、帽子、项链、耳环等首饰。并使用到了Dreamweaver中的鼠标经过图像技术，是浏览者有一种变幻感！为那些爱美的朋友们提供了一个参考。
其中里面还有一些模特的展示，可以看见模特穿上那些衣服的效果，使爱美丽的朋友们对那些衣服的样式有一个更清晰的认知。这些衣服、帽子和首饰等都是本人自己喜欢的，希望大家也喜欢。
如果大家有更好更漂亮的衣服、帽子、首饰等，欢迎给我留言，让我们大家一起来分享这些。
4 具体实现与分析
4.1静态设计
先用Dreamweaver进行布局和排版。
4.1.1站点的建设与收集素材
创建本地站点的具体操作步骤如下：
要制作一个网站，第一步操作都是一样的，就是要创建一个“站点”，这样可以使整个网站的结构清晰地展现在面前，避免了以后复杂的管理。打开Dreamweaver从菜单中选择“站点/新建站点”在弹出的对话框中填写目录和指定文件夹，输入站点名称和默认的存放图像的位置。在文本框中输入自己已经想好的网站名称“个人网站”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。”单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点文件的本地副本。单击该文本框后面的文件夹图标，新建并指定一个空的文件夹“E:/web555”。之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，这样，一个站点就算建好了。
收集素材：
收集一些网站所需要的素材，比如图片、动画、文字等。做网站前的一些准备工作也是很重要的。只有有了充足的准备我们才能把网站做好。因此在做网站前我们必须把做网站的过程中可能所需的所有的材料都准备好，这样才能做出让自己和大家都满意的网站，而不至于在做的过程中乱了手脚。图片的LOGO如下图4.1所示：
图4.1 LOGO图展示
4.1.3 HTML语言
要想建出专业的Web页面，就要学会利用HTML来编写网页。HTML(Hypertext Markup Language)超文本标记语言，是用于编写网页的主要语言。它是纯文本的类型的语言，语法非常的简单。它通过对各种标记、元素、属性、对象等的设置来建立与图形、声音、视频
等多媒体信息以及对其它超文本的链接。一般典型网页应该包括如下HTML代码：
……
其中，
4.1.4用框架表格进行布局和排版
主页面使用的是上方固定，左侧嵌套的框架共四个网页。然后在main、top和left每个网页中又嵌套了一个表格那是整个版面看起来更加整齐、清晰。
Top中的表格用来组织页面头部的元素（下称“头表格”），在设计视图下将鼠标光标置于网页编辑区，点击“插入”→“表格”，设置2行、3列的表格，“表格宽度”1000像素，“边框粗细”为1，点击确定。选中表格在属性控制面板中设置对齐方式为“居中对齐”。
然后再将第二行单元格合并。并插入所需要的元素。
Left中再插入一个2行1列的表格，用来组织左边页面的主体内容，其它属性同头表格。
再填入所需内容，并加入超链接。
最后再在Main网页中插入一个1行2列的表格，用来组织页面的主要内容元素。“边框粗细”为1，设置表格为显示边框。
4.1.5添加网页元素
利用设置表格图片、插入图片等形式添加网页图片元素。利用键盘输入或复制粘贴等方式添加文字，文字颜色设置为红色。
4.1.6滚动的公告