题目个人网站的设计与制作
摘要
随着经济社会的发展，Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，网站建设和网页制作也成为计算机网络领域最热门的话题。动态网站是当前网站建设的趋势。动态网站并不是指具有动画功能的网站，而是指通过数据库进行架构的网站，它除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录等等，它实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
本课题运用我们所学的ASP与数据库技术，通过Dreamweaver等相关软件来创建了一个个人网站，网站主要有：主页、个人简介、图片、日志、留言和管理几个模块。其中，个人简介是以网页的形式展示在浏览者面前的一个自我介绍，有与我相关的信息等。图片则是用来展示我们平时收集的一些照片，喜欢的明星和唯美的图片。日志是将最近网络上流行的一些文字和发生的事件展示出来。留言则是浏览者用来彼此交流的地方，浏览者可以在这里发表留言，发表的信息将展示在留言板上。管理界面则是管理员通过登录进入的界面，里面可以对网站进行管理，如：用户管理、留言管理、文章管理等。通过设计这个个人网站，以达到个人推荐，展现自我的一个空间，以及为交流提供综合的网络环境，同时也为个人发展提供了一平台。
关键字：动态网站；asp；数据库
目录
第一章绪论 (1)
1.1 本课题的背景及意义 (1)
1.1.1 课题的背景 (1)
1.1.2 课题的意义 (1)
1.2 论文的结构 (1)
第二章关键技术简介 (3)
2.1 ASP的简介 (3)
2.2 ACCESS的简介 (3)
2.3 Dreamweaver的简介 (4)
第三章后台环境配置 (6)
3.1 IIS安装和配置 (6)
3.2 设置数据源（ODBC） (7)
3.3 Dreamweaver开发站点环境 (9)
第四章系统分析与设计 (13)
4.1 需求分析 (13)
4.2 功能模块设计 (13)
4.3 确定网站风格 (14)
4.3.1 主页版块 (14)
4.3.2 网站字体 (15)
4.3.3 网站版块 (15)
4.4 数据库逻辑结构设计 (16)
第五章系统的实现 (18)
5.1 留言板的实现 (18)
5.1.1 留言板的主界面 (18)
5.1.2 留言板主界面的制作 (18)
5.1.3 发表留言界面的制作 (21)
5.2 后台管理界面 (23)
5.2.1 登录界面 (23)
5.2.2 管理员管理界面 (24)
5.2.3 后台管理模块设计 (25)
第六章网站的测试 (32)
结束语 (33)
致谢 (34)
参考文献 (35)
第一章绪论
1.1 本课题的背景及意义
1.1.1 课题的背景
互联网是社会发展的必然趋势，很多人已经意识到网络的强大生命力和它在未来将处于的重要地位。他们钻研并且努力进入到这一个新的空间，新的领域。以个人为中心，淡化了传统中心地位，使得我们的世界向多元化加速发展，人人都有话语权，人人都是中心。互联网也是一个互动性极强的平台，它自由、宽容、平等、共享，并使来自民间的声音参与到了构建主流话语的行动中来[1]。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。 Internet飞速发展使得网站不再仅仅为企业或公司等大型结构所拥有，互联网也成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，一个家庭甚至个人都可以拥有属于自己的网站，而在这其中，个人网站已经日渐普及，而且发展到今天，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。
1.1.2 课题的意义
随着Internet的迅速普及，我们已经不再满足于仅仅浏览网页，而是希望更深入地参预到网络中去，Internet的开放性使个人建立自己的网站成为可能，拥有自己的网站也越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台[2]。从建站的实际情况出发，经过对相关网站的一番考察和分析，确立了采用asp和access数据库技术，以Dreamweaver作为开发环境，综合运用其他设计软件，最终实现个人网站的主要功能。通过设计一个个人网站，已达到个人推荐，展现自我的一个空间，个人网站为交流提供综合的网络环境，同时也为个人宣传，发展提供了一平台[3]。网站主要有：主页、个人简介、图片、日志、留言和管理几个模块。其中，个人简介是自我介绍，有与我相关的信息。图片则是用来展示我们平时收集的一些照片。日志是展示一些优美的文章。留言则是浏览者用来彼此交流的地方，浏览者可以在这里发表留言。管理是管理员进行登录进入的界面，可以对网站进行相应的管理等功能。真正的做到“学以致用”，“把理论与实践相结合”。
1.2 论文的结构
第一章，绪论，介绍了本课题的背景及意义；个人网站“我的主页”为用
户提供了一个相互联系，相互交流的地方，增强了朋友之间的相互联系。
第二章，介绍了个人网站开发的关键技术；如ASP，ACCESS以及Dreamweaver 的简介。
第三章，介绍了网站后台的环境配置，如：IIS的安装过程、站点的建立和数据源的配置。
第四章，介绍了系统的需求分析、功能模块和网站的设计风格；为方便用户彼此交流信息，构建“我的主页”网站，有留言板，日志，图片，个人简介等模块，以及数据表的建立。
第五章，详细介绍了留言板模块的开发与实现以及后台管理界面功能的实现。
第六章，介绍了网站的测试。
结束语，对本设计进行了总结，提出了本设计的不足之处，并对未来发展方向做了展望。
第二章关键技术简介
2.1 ASP的简介
ASP技术 ASP（Active Server Pages动态网页）是微软公司推出的一种用以取代CGI（Common Gateway Interface通用网关接口）的技术。目前，Internet 上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI[4]。简单地讲，ASP是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互式动态网页，包括使用HTML表单收集和处理信息，上传与下载等[5]。ASP文件的制作和HTML类似，且和HTML开发集成，可以在同一个过程完成，利用ASP将可以执行的脚本嵌入到HTML文件中(将HTML文件的后缀名改为.asp)，这使得HTML文件的编写与脚本的开发融合在一起[6]。通过ASP内置的对象、服务器组件（Server Component）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务[7]。
ASP的特点：
1.使用VBScript、JScript等简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。
2.无须compile编译，容易编写，可在服务器端直接执行。
3.使用普通的文本编辑器，如Windows的记事本，即可进行编辑设计。
4.与浏览器无关（Browser Independence），客户端只要使用可执行HTML码的浏览器，即可浏览Active Server Pages所设计的网页内容。
5.Active Server Pages能与任何ActiveX scripting语言兼容。除了可使用VB Script或JScript语言来设计外，还通过plug－in的方式，使用由第三方所提供的其它脚本语言，譬如REXX 、Perl 、Tcl等。
6.可使用服务器端的脚本来产生客户端的脚本。
7.ActiveX Server Components（ActiveX 服务器组件）具有无限可扩充性。可以使用Visual Basic 、Java 、Visual C＋＋、COBOL等程序设计语言来编写你所需要的ActiveX Server Component[8]。
ASP技术与其他技术相比，此技术实现比较简单、快捷，适用于小型的网络。本网站主要使用ASP技术和数据库技术，因为首先用Dreamweaver软件建立动态网站，然后与数据库进行连接，在此基础上对该网站进行详细设计，最后进行相关测试。
2.2 ACCESS的简介
Microsoft Access 2010 的特点，就在于使用简便。Access 2010 充分运
用信息的力量。在追踪与共享数据，或是利用数据制作报表时，将更加轻松无负担，这些数据自然也就更具影响力。
1.最好上手、最快上手。在 Access 2010 中，可以发挥社群的力量。采用其他人建立的数据库模板，并且分享独到设计。
2.使用多种数据联机，以及从其他来源链接或汇入的信息，以整合Access 报表，让阅读报表的人都能更容易掌握趋势、洞烛机先。
3.在任何地方都能存取应用程序、数据或窗体。将数据库延伸到网络上，让没有 Access 客户端的使用者，也能透过浏览器开启网络窗体与报表。
4.把亲切熟悉、赏心悦目的 Office 主题，原汁原味地套用到 Access 客户端与网络数据库上。
5.以拖放方式为数据库加入导航功能。
6.更快、更轻松地完成工作。Access 2010 能简化寻找及使用各项功能的方式。
7.使用 IntelliSense 建立表达式，不费吹灰之力。经过简化的“表达式建立器”可以更快、更轻松地建立数据库中的逻辑与表达式。
8.以前所未有的超快速度设计宏。Access 2010 拥有面目一新的宏设计工具，可以更轻松地建立、编辑并自动化执行数据库逻辑。
9.把数据库部分转化成可重复使用的模板。重复使用由数据库的其他用户所建置的数据库组件，节省时间与心力。
10.重复使用由数据库的其他用户所建置的数据库组件，节省时间与心力。可以经由网络服务通讯协议，联机到数据源[9]。
ACCESS 是桌面型关系数据库，适于小型的开发和小数据量的应用，部署简单方便，就一个文件。SQL SERVER 是中型DBMS，适于较大数据量和高性能要求的应用，管理相对复杂，但是功能强大，存储过程，触发器，自定义函数，定时JOB，MAIL通知等很多功能[10]。
2.3 Dreamweaver的简介
Dreamweaver是目前流行的一款可视化网页制作工具，具有简洁高效的设计和开发界面，它的所见即所得特性使得用户无需编写代码即可完成网页的制作，简单易用，非常适合初学者使用，同时，Dreamweaver也支持代码设计，为高级程序人员提供了代码编辑环境，方便程序人员应用HTML或其他代码进行网页开发[11]。自Dreamweaver问世以来已更换了多个版本，而每一次升级都会给用户带来更多的惊喜，当前最新版本Dreamweaver CS5的出现同样不负众望，又在原版本的基础上增加了一些新的功能，并对一些不足之处进行了调整，从而使Dreamweaver的功能更加强大，使用起来也更加得心用手。
Dreamweaver CS5的新功能如下：
1.集成CMS支持。即对WordPress、Joomla！和Drupal等内容管理系统框架的创作和测试支持。
2.CSS检查。在DreamweaverCS5中能以可是方式显示详细的CSS框模型，使用户可以轻松切换CSS属性，并且无需读取代码或使用其他实用程序。
3.与Adobe Browserlab集成。可使用多个查看、诊断和比较工具预览动态网页和本地内容。
4.PHP自定义类代码提示。为自定义PHP函数显示适当的语法，可帮助用户更准确的书写代码。
5.站点特定的代码提示。可从Dreamweaver中的非标准文件和目录代码提示中受益[12]。
第三章后台环境配置
3.1 IIS安装和配置
在windows 7中实现配置IIS
1.单击【开始】-【控制面板】-【程序】，打开“程序和功能”对话框。（如图3-1所示）
图3-1 程序和功能对话框
2.单击左边菜单栏中【打开或关闭Windows功能】项，打开“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）”，弹出“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.再单击【数据库】选项下的【选择】按钮打开【选择数据库】对话框，在【选择数据库】对话框中设置【数据库名称】为“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.单击【下一步】，弹出【是否使用服务器技术】中，选择【是，我想使用服务器技术。】，在【那种服务器技术？】的下拉列表中选择【ASP VBScript】。（如图3-9所示）
图3-9 选择服务器
3.单击【下一步】，在【开发过程中，您打算如何使用您的文件？】项，选择【在本地进行编辑和测试】项，然后，在【将把文件存储在计算机上的什么位
置】中选择我们的目录所在位置“D:\毕业设计\Family\”。（如图3-10所示）
图3-10 设置存储位置
4.单击【下一步】，在【测试URL】设置中虚拟目录地址为默认地址，然后
单击【测试URL】按钮进行测试。会弹出【URL前缀测试成功】对话框，单击【确
定】。（如图3-11所示）
图3-11 测试URL
5.单击【下一步】，在远程服务器设置面板中，由于我们是在本地进行开发
和测试，所以我们选择【否】。（如图3-12所示）
图3-12 本地开发测试
6.单击【下一步】，单击【完成】后就建立好了这个站点。（如图3-13
所示）