个人网站的设计与制作毕业设计.docx

1、个人网站的设计与制作毕业设计 毕 业 设 计题目 个人网站的设计与制作摘 要 随着经济社会的发展，Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，网站建设和网页制作也成为计算机网络领域最热门的话题。动态网站是当前网站建设的趋势。动态网站并不是指具有动画功能的网站，而是指通过数据库进行架构的网站，它除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录等等，它实际上并不是独立存在于服务器上的网页文

2、件，只有当用户请求时服务器才返回一个完整的网页。本课题运用我们所学的ASP与数据库技术，通过Dreamweaver等相关软件来创建了一个个人网站，网站主要有：主页、个人简介、图片、日志、留言和管理几个模块。其中，个人简介是以网页的形式展示在浏览者面前的一个自我介绍，有与我相关的信息等。图片则是用来展示我们平时收集的一些照片，喜欢的明星和唯美的图片。日志是将最近网络上流行的一些文字和发生的事件展示出来。留言则是浏览者用来彼此交流的地方，浏览者可以在这里发表留言，发表的信息将展示在留言板上。管理界面则是管理员通过登录进入的界面，里面可以对网站进行管理，如：用户管理、留言管理、文章管理等。通过设计这

3、个个人网站，以达到个人推荐，展现自我的一个空间，以及为交流提供综合的网络环境，同时也为个人发展提供了一平台。关键字：动态网站；asp；数据库第一章 绪论1.1 本课题的背景及意义1.1.1 课题的背景 互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。互联网也是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来1。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存

4、和管理提供极大的方便。 Internet飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，互联网也成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，一个家庭甚至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。1.1.2 课题的意义随着Internet的迅速普及，我们已经不再满足于仅仅浏览网页，而是希望更深入地参预到网络中去，Internet的开放性使个人建立自己的网站成为可能，拥有自己的网站也

5、越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台2。从建站的实际情况出发，经过对相关网站的一番考察和分析，确立了采用asp和access数据库技术，以Dreamweaver作为开发环境，综合运用其他设计软件，最终实现个人网站的主要功能。通过设计一个个人网站，已达到个人推荐，展现自我的一个空间，个人网站为交流提供综合的网络环境，同时也为个人宣传，发展提供了一平台3。网站主要有：主页、个人简介、图片、日志、留言和管理几个模块。其中，个人简介是自我介绍，有与我相关的信息。图片则是用来展示我们平时

6、收集的一些照片。日志是展示一些优美的文章。留言则是浏览者用来彼此交流的地方，浏览者可以在这里发表留言。管理是管理员进行登录进入的界面，可以对网站进行相应的管理等功能。真正的做到“学以致用”，“把理论与实践相结合”。1.2 论文的结构 第一章，绪论，介绍了本课题的背景及意义；个人网站“我的主页”为用户提供了一个相互联系，相互交流的地方，增强了朋友之间的相互联系。第二章，介绍了个人网站开发的关键技术；如ASP，ACCESS以及Dreamweaver的简介。第三章，介绍了网站后台的环境配置，如：IIS的安装过程、站点的建立和数据源的配置。第四章，介绍了系统的需求分析、功能模块和网站的设计风格；为方便

7、用户彼此交流信息，构建“我的主页”网站，有留言板，日志，图片，个人简介等模块，以及数据表的建立。第五章，详细介绍了留言板模块的开发与实现以及后台管理界面功能的实现。第六章，介绍了网站的测试。结束语，对本设计进行了总结，提出了本设计的不足之处，并对未来发展方向做了展望。第二章 关键技术简介2.1 ASP的简介ASP技术 ASP（Active Server Pages动态网页）是微软公司推出的一种用以取代CGI（Common Gateway Interface通用网关接口）的技术。目前，Internet上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI4。简单地讲，ASP是一个

8、位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互式动态网页，包括使用HTML表单收集和处理信息，上传与下载等5。ASP文件的制作和HTML类似，且和HTML开发集成，可以在同一个过程完成，利用ASP将可以执行的脚本嵌入到HTML文件中(将HTML文件的后缀名改为.asp)，这使得HTML文件的编写与脚本的开发融合在一起6。通过ASP内置的对象、服务器组件（Server Component）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务7。ASP的特点： 1.使用VBScript、JScript等简单易懂

9、的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。 2.无须compile编译，容易编写，可在服务器端直接执行。3.使用普通的文本编辑器，如Windows的记事本，即可进行编辑设计。 4.与浏览器无关（Browser Independence），客户端只要使用可执行HTML码的浏览器，即可浏览Active Server Pages所设计的网页内容。 5.Active Server Pages能与任何ActiveX scripting语言兼容。除了可使用VB Script或JScript语言来设计外，还通过plugin的方式，使用由第三方所提供的其它脚本语言，譬如REXX 、Perl

10、、Tcl等。 6.可使用服务器端的脚本来产生客户端的脚本。 7.ActiveX Server Components（ActiveX 服务器组件）具有无限可扩充性。可以使用Visual Basic 、Java 、Visual C、COBOL等程序设计语言来编写你所需要的ActiveX Server Component8。ASP技术与其他技术相比，此技术实现比较简单、快捷，适用于小型的网络。本网站主要使用ASP技术和数据库技术，因为首先用Dreamweaver软件建立动态网站，然后与数据库进行连接，在此基础上对该网站进行详细设计，最后进行相关测试。2.2 ACCESS的简介Microsoft Ac

11、cess 2010 的特点，就在于使用简便。Access 2010 充分运用信息的力量。在追踪与共享数据，或是利用数据制作报表时，将更加轻松无负担，这些数据自然也就更具影响力。1.最好上手、最快上手。在 Access 2010 中，可以发挥社群的力量。采用其他人建立的数据库模板，并且分享独到设计。 2.使用多种数据联机，以及从其他来源链接或汇入的信息，以整合Access 报表，让阅读报表的人都能更容易掌握趋势、洞烛机先。 3.在任何地方都能存取应用程序、数据或窗体。将数据库延伸到网络上，让没有 Access 客户端的使用者，也能透过浏览器开启网络窗体与报表。 4.把亲切熟悉、赏心悦目的 Off

12、ice 主题，原汁原味地套用到 Access 客户端与网络数据库上。 5.以拖放方式为数据库加入导航功能。 6.更快、更轻松地完成工作。Access 2010 能简化寻找及使用各项功能的方式。 7.使用 IntelliSense 建立表达式，不费吹灰之力。经过简化的“表达式建立器”可以更快、更轻松地建立数据库中的逻辑与表达式。 8.以前所未有的超快速度设计宏。Access 2010 拥有面目一新的宏设计工具，可以更轻松地建立、编辑并自动化执行数据库逻辑。 9.把数据库部分转化成可重复使用的模板。重复使用由数据库的其他用户所建置的数据库组件，节省时间与心力。 10.重复使用由数据库的其他用户所建

13、置的数据库组件，节省时间与心力。可以经由网络服务通讯协议，联机到数据源9。 ACCESS 是桌面型关系数据库，适于小型的开发和小数据量的应用，部署简单方便，就一个文件。SQL SERVER 是中型DBMS，适于较大数据量和高性能要求的应用，管理相对复杂，但是功能强大，存储过程，触发器，自定义函数，定时JOB，MAIL通知等很多功能10。 2.3 Dreamweaver的简介 Dreamweaver是目前流行的一款可视化网页制作工具，具有简洁高效的设计和开发界面，它的所见即所得特性使得用户无需编写代码即可完成网页的制作，简单易用，非常适合初学者使用，同时，Dreamweaver也支持代码设计，为

14、高级程序人员提供了代码编辑环境，方便程序人员应用HTML或其他代码进行网页开发11。自Dreamweaver问世以来已更换了多个版本，而每一次升级都会给用户带来更多的惊喜，当前最新版本Dreamweaver CS5的出现同样不负众望，又在原版本的基础上增加了一些新的功能，并对一些不足之处进行了调整，从而使Dreamweaver的功能更加强大，使用起来也更加得心用手。Dreamweaver CS5的新功能如下： 1.集成CMS支持。即对WordPress、Joomla！和Drupal等内容管理系统框架的创作和测试支持。 2.CSS检查。在DreamweaverCS5中能以可是方式显示详细的CSS

15、框模型，使用户可以轻松切换CSS属性，并且无需读取代码或使用其他实用程序。 3.与Adobe Browserlab集成。可使用多个查看、诊断和比较工具预览动态网页和本地内容。 4.PHP自定义类代码提示。为自定义PHP函数显示适当的语法，可帮助用户更准确的书写代码。 5.站点特定的代码提示。可从Dreamweaver中的非标准文件和目录代码提示中受益12。第三章 后台环境配置3.1 IIS安装和配置在windows 7中实现配置IIS1.单击【开始】-【控制面板】-【程序】，打开“程序和功能”对话框。（如图3-1所示）图3-1 程序和功能对话框2.单击左边菜单栏中【打开或关闭Windows功能

16、】项，打开“Windows功能”对话框，在对话框“组件”列表中，选中“Internet信息服务（IIS）”项。（如图3-2所示）图3-2 windows功能对话框 3.选中“Internet信息服务（IIS）”项，然后单击“确定”即可。随后系统会自动弹出“正在配置组件”提示框，这时候用户需等待一段时间。 4.点击“完成”按钮，完成IIS的安装。3.2 设置数据源（ODBC）在windows 7中设置“数据源”（ODBC） 1.单击【开始】-【控制面板】-【管理工具】，打开“管理工具”对话框。（如图3-3所示）图3-3 管理工具对话框 2.在“管理工具”对话框中，选择“数据源（ODBC）”，弹出

17、“ODBC数据源管理器”对话框。（如图3-4所示）图3-4 ODBC数据源管理器 3.在弹出的“ODBC数据源管理器”对话框中，选择【系统DSN】，在右侧点击【添加】按钮，弹出【创建新数据源】对话框，在【创建新数据源】对话框中选中“Microsoft Access Driver （*.mdb）”，单击【完成】按钮。（如图3-5所示）图3-5 创建数据源4.点击【完成】按钮后，会弹出【ODBC Microsoft Access安装】对话框，设置【数据源名称】为“conm”。（如图3-6所示）图3-6 修改数据源名称5.再单击【数据库】选项下的【选择】按钮打开【选择数据库】对话框，在【选择数据库】

18、对话框中设置【数据库名称】为“conm.mdb”，【文件类型】为Access数据库（*.mdb）。（如图3-7所示）图3-7 选择数据库6.然后单击【确定】按钮回到【ODBC Microsoft Access安装】对话框，其中【数据库】参数变为所选择的数据库。 7.再单击【确定】按钮回到【ODBC数据源管理器】对话框，然后单击【确定】按钮完成设置。3.3 Dreamweaver开发站点环境 1.启动Dreamweaver，进入到工作界面，单击【站点】菜单下的【新建站点】选项，弹出【站点定义】对话框，在【站点定义】名称中输入我们的项目名称“Family”。（如图3-8所示）图3-8 定义站点2.

19、单击【下一步】，弹出【是否使用服务器技术】中，选择【是，我想使用服务器技术。】，在【那种服务器技术？】的下拉列表中选择【ASP VBScript】。（如图3-9所示）图3-9 选择服务器3.单击【下一步】，在【开发过程中，您打算如何使用您的文件？】项，选择【在本地进行编辑和测试】项，然后，在【将把文件存储在计算机上的什么位置】中选择我们的目录所在位置“D:毕业设计Family”。（如图3-10所示）图3-10 设置存储位置4.单击【下一步】，在【测试URL】设置中虚拟目录地址为默认地址，然后单击【测试URL】按钮进行测试。会弹出【URL前缀测试成功】对话框，单击【确定】。（如图3-11所示）图

20、3-11 测试URL5.单击【下一步】，在远程服务器设置面板中，由于我们是在本地进行开发和测试，所以我们选择【否】。（如图3-12所示）图3-12 本地开发测试 6.单击【下一步】，单击【完成】后就建立好了这个站点。（如图3-13所示）图3-13 完成站点定义 在Dreamweaver中建立站点是一件简单而直观的事情，要知道站点的建立是使用Dreamweaver进行开发的第一步。如果没有建立好站点，那么Dreamweaver的开发功能将会不能使用。第四章 系统分析与设计现在人人都体会到了网络时代的强烈冲击，学习网络知识、学习网页设计和网站建设成为新时代的一个热点。人是社会性的动物，具有多方面的

21、欲望和追求，被人理解、被社会承认是人的高级欲望中的一种。现在畅行的个人形象设计已成为一种庞大市场就说明了这个问题。传统的个人形象展示依靠照相、录像、演讲、交谈或文字说明等形式，而个人网站是所有形式中最新颖、最直观、最有效、最综合、最高级的形式。4.1 需求分析为方便用户彼此交流信息，网站提供如下的几个模块功能。其需求描述如下： 1.主页模块：是网站的首页，通过首页可以链接到任何页面，方便、快捷。 2.个人简介：主要介绍管理员的相关信息。 3.日志模块：以列表的形式显示文章信息，这样可以在页面显示大量的日志信息。当用户找到感兴趣的文章后需要点击文章标题，会弹出相应的文章的具体内容。 4.留言模块

22、：在留言页面以表格的形式来显示用户所发送的留言。用户可以发布留言和评论留言，但管理员可以删除留言和回复留言。 5.图片模块：在图片页面以排列的方式显示图片，图片分为几种类型，可以根据自己的喜好欣赏。 6.管理模块：在这里管理员可以通过登录进入管理界面，在这里有用户管理、文章管理、留言管理。管理员可以在这里对网站进行定期的更新和维护。4.2 功能模块设计根据需求分析中的模块分类方法，可以得到系统的操作流程图。个人网站的操作流程主要在“首页处。本设计的用户分为两类：用户，管理员。用户仅有部分浏览功能；管理员具备用户的所有权限，同时还能发布文章，删除留言，修改文章，修改用户信息等。根据这些功能，设计

23、出系统的功能模块，具体的功能模块如图4-1所示图4-1 功能模块示意图4.3 确定网站风格 4.3.1 主页版块每个网站都会有一个主页，主页是进入网站后在浏览器中显示的第一个页面。为了浏览方便，所以在进行版面设计时，将本站的几个主要版块的内容都浓缩在主页的界面里，从而令用户能快速的看到用户所感兴趣的内容，节省用户浏览时间。图4-2 主页效果图4.3.2 网站字体网站字体(Font)设置是网站制作中设计师经常遇到的一个很关键的问题，每一个网站都应该仔细，认真地思考自己网站的字体，合适的网站字体能让客户对网站产生信赖感，产生一种权威感，而不合适的字体往往会使用户产生一种排斥感，和低级感。网站的字体

24、是一门学问，网站优化不能仅仅从技术角度去做，应该把网站自身的设计做好，只有这些好的基础，网站的优化，推广才会真正产生效果。网站设计中字体的使用原则： 1.不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。 2.不要用太大的字。因为版面是有限的，大字体占的版面太多也没有什么效果。 3.不要使用不停闪烁的文字。会让浏览者眼花缭乱。4.3.3 网站版块本网站主要是根据用户的需求制作的个人网站。用户可以直接浏览该网站的所有内容，也可注册用户。内容包括：主页、个人简介、日志、留言板、图片、管理等版块。(如图4-3所示)图4-3 主页导航界面就是网站给浏览者的第一印象，往往决定着网站的可看性，本站

25、的主页是通过“家”的感觉来呈现的，可以给浏览者一种温馨的感觉，会感到幸福。而导航就是通过与相关版块的联系而制作的相关联的形状，更形象生动的表现了网站的生动活泼。构建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是，确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。另外，板块的编排设置也要合理安排与划分。版块比栏目的概念要大一些，每个版块都有自己的栏目。4.4 数据库逻辑结

26、构设计首先创建Access数据库conm.mbd用来保存本系统的所有数据。本设计定义conm.mbd数据库中包含以下几个表：用户注册表、留言表、日志表、管理员表。下面分别介绍这几个表的结构 1.用户注册表表4-1 admin1编号字段说明数据类型1Id编号自动编号2name姓名文本3mima密码数字4sex性别文本5shengri出生日期日期/时间6work职业文本7phone联系方式数字8time时间日期/时间 2.留言表表4-2 book编号字段说明数据类型1id编号自动编号2name姓名文本3sex性别文本4work职业文本5time时间日期/时间6liuyan留言内容备注7huifu回

27、复内容备注8pinglun评论内容备注 3.日志表表4-3 rizhi2编号字段说明数据类型1Id编号自动编号2rtitle标题备注3zuozhe作者文本4nei内容备注5riqi时间日期/时间6nr主要内容备注4.管理员表表4-4 guanli编号字段说明数据类型1name管理员文本2password密码文本第五章 系统的实现该系统的实现主要包含主页，个人简介，日志，图片，留言和管理界面的制作。其中留言界面是很重要的，对与浏览页面，提供了浏览和发布信息的功能。而留言就提供了交流和动态的感觉这样就成了交互的功能。达到了沟通和交流的目的。所以，本设计最大的特点就是这个留言模块，提供了交流的设计。

28、5.1 留言板的实现5.1.1 留言板的主界面 完整的留言板具有发表留言和查看别人留言及评论留言的功能，下面有留言板页面的效果图。（如图5-1所示）图5-1 留言板效果图5.1.2 留言板主界面的制作1.在Dreamweaver中打开“gl.asp”,在右侧的【应用程序】中【数据库】的“+”在弹出的下拉列表中选择【数据源名称（DSN）】，在弹出的【数据源名称（DSN）】对话框中，设置【连接名称】为“conm”，【数据源名称（DSN）】为“conm”，单击右侧的【测试】，会弹出【成功连接脚本】对话框，表示数据库添加完成。（如图5-2所示）图5-2 连接数据源 2.在右侧的属性栏中选择【绑定】点击

29、“+”【记录集（查询）】，弹出【记录集】对话框，在其中设置【连接】为“conm”，【表格】为“book”，【列】选择【全部】，【排序】中选择【id，降序】，并单击【确定】。（如图5-3所示）图5-3 绑定记录集 3.选择【插入记录】【表单】，在表单中插入4行3列的表格，将【记录集】里的字段拖曳到相应的单元格中。然后在右侧的属性栏中选择【服务器行为】点击“+”【重复区域】，弹出【重复区域】对话框中设置【显示】为“7”条记录(根据个人喜好设置)，单击【确定】。（如图5-4所示）图5-4 重复区域 4.将光标放在下一行上，选择【插入】-【数据对象】-【显示记录计数】-【记录集导航状态】，单击【确定】

30、。再选择【插入】-【数据对象】-【记录集分页】-【记录集导航条】，【显示方式】选择【图像】。（如图5-5，图5-6所示）图5-5 记录集导航状态 图5-6 记录集导航条 5.单击【确定】，然后选中“评论”，点击【服务器行为】单击“+”选择【转到详细页面】，在【转到详细页面】对话框中设置【详细信息页】为“pl.asp”等，然后单击【确定】。（如图5-7所示）图5-7 详细页设置 6.按【Ctrl+S】保存操作，按F12，预览效果。（如图5-8，5-9所示）图5-8 留言板效果图 图5-9 留言板效果图5.1.3 发表留言界面的制作 发表留言是为浏览者可以与管理进行交流的平台，可以发表留言信息，然后在主界面上显示。（如图5-10所示）图5-10 发表留言界面 1.在Dreamweaver中打开“fb.asp”，在网页中插入表单，在表单中插入个4行2列的表格，并输入文本，并且设置它们的“文本域”与数据库中的字段相同。（如图5-11所示）图5-11 设置文本域 2.选择【绑定】点击“+”【记录集（查询）】，弹出【记录集】对话框，在其中设置【连接】为“conm”，【表格】为“book”，【排序】中选择【id，降序】，并单击【确定】。（如图5-12所示）图5-12 绑定记录集 3.选择【服务器行为】点击“+”【插入记录】，弹出【插入记录】对话框，在其中设置【连接】为“conm”，【表