基于asp的个人网站开发

2017-03-27

10338

1 本网站设计规划1 .1 本网站建设的方向和目的1.1.1 网站建设目的网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库

1 本网站设计规划

1 .1 本网站建设的方向和目的

1.1.1 网站建设目的

网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，可以说这是网站建设的根源和核心所在。这里就以我做的这个个人网站为实例给大家简述这个问题，如我设计的个人网站：http://www.liu18.tk 。作为一个个人兴趣网站，我的服务群体及访问者都定位在有广泛兴趣的网民，为网民服务就是我的这个网站的目的和方向。从整个页面上可以看出，我的这个整个网站涉及新闻资讯、博文天下、在线留言等等都是关于个人兴趣爱好的。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样：企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。

1.1.2 本站明确的目的

不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了个人兴趣相关联的主题。

本网站预计的用户群体：对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。在已经确定了建设目的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。我的这个网站就确定了以喜爱分享自己的爱好兴趣为用户群体。

本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的

代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风格呢？网站的结构是连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。

图1-1 网站导航栏

如图所示，我的这个网站的结构主要由首页、网站简介、资讯信息、博闻天下、精品图集、加入我们、留言中心等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。 2 网站设计的前期准备

2.1 软件准备和ISS 5.0的安装与设置

2.1.1 软件准备

在网页的设计过程中，因人而宜，每个人使用的软件也许不同，如比较有名的网站设计软件有ADODB 公司出品的网页设计“三剑客”、有微软的Frontpage 、还有国产的“东方网页王”等等。在这里，我们主要说的是ADODB 公司出品的“三剑客”。

这“三剑客”包括Dreamweaver CS4、Fireworks CS4和Flash CS4，其中，Dreamweaver CS4是网页编辑软件，Fireworks CS4是图形/图像处理软件，Flash CS4是矢量动画编辑软件。当然现在网页三剑客已经出来CS4了，新的版本功能更加强大。ADODB 公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，它们是ADODB 公司专门为网页设计、制作开发

的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver 采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweaver8自动完成。另外，还有一点值得说明的是，DreamweaverCS4可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。

Fireworks 的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB 应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB 图形，并且具有所有其他图形处理工具的诸多优点。Fireworks 最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks CS4中的诸多功能都是面向WEB 应用的，因此对于WEB 设计新手来说也很容易学习的。

Flash 是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash 提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。由于Flash 采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。

在我设计我的个人网站的过程中，我选择了DreamwearCS4和Flash CS4和 Photoshop CS4三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。由于我用DIV CSS布局页面，因此为了更好的实时查看网页，我一般都用记事本编写代码，然后保存为.asp 格式，修改时，直接将.asp 文件用记事本打开在里面修改，然后保存，最后刷新浏览器即可，方便又快捷。

2.1.2 IIS的安装与设置

IIS 是Internet Information Server的缩写，它是微软公司主推的Web 服务器，最新的版本是Windows2000里面包含的IIS 5.0，IIS 与WindowNT Server 完全集成在一起，因而用户能够利用Windows NT Server和NTFS （NT File System ，NT 的文件系统）内置的安全特性，建立强大、灵活而安全的Internet 和Intranet 站点。 IIS的一个重要特性是支持ASP 。IIS 3.0版本以后引入了

ASP ，可以很容易的张贴动态内容和开发基于Web 的应用程序。

IIS 的安装步骤：

(1)点击：【开始】->【控制面板】->【添加/删除程序】，打开“添加/删除程序”对话框。

(2)点击左边菜单栏中“添加/删除Windows 组件”项，打开“Windows 组件向导”对话框（这个过程可能要花几十秒钟），在对话框“组件”列表中，选中“Internet 信息服务（IIS ）”项。

(3)将“Windows 2000”安装盘放入光驱中，然后点击“下一步”。这个步骤可能会花几分钟。

(4)点击“完成”按钮，完成IIS 的安装。

可以添加一个默认文档作为主页。选择“添加”按钮，在弹出的对话框中输入文档名。为下一节的实例输入“index.asp ”作为网页首页，然后单击左边的向上和向下箭头改变默认文档的次序。

2.2系统概述

本系统开发工具是ASP 与数据库技术，ASP 技术被广泛运用在动态网页设计中。这项技术也以优异的性能得到了大多程序开发者的青睐。

2.2.1 开发工具ASP 的优势

Active Server Pages：“动态服务器网页”，一般简称为“ASP”，ASP 之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML 格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape ）都可以正确地获得ASP 的“执行”结果，并且将这ASP 执行的结果直接在浏览器中“浏览”，不像VBScript 或JavaScript 是在客户端

（Client ）的浏览器上执行，若使用VBScript 来设计程序，客户端（client ）在IE 浏览器中可以显示程序执行的结果，可是，客户端（client ）若使用Netscape 浏览器就无法显示VBScript 的执行结果。

2.2.2 ASP的特点

ASP 的特点为：

任何开发工具皆可发展ASP ，只要使用一般的文书编辑程序，如Windows 记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、 FrontPage 等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是

使用那些所见即所得的网页编辑来写ASP ，可能会发生一些意想不到的离奇状态。通吃各家浏览由于ASP 程序是在网络服务器端中执行，执行结果所产生的HTML 文件适用于不同的浏览器。

1、语言相容性能

ASP与所有的ActiveX Script语言都相容，除了可结合HTML ，VBScript 、Java Script、Active X服务器组件来设计外，并可经由“plug-In （外挂组件模组）的方式，使用其他厂商（Third Party）所提供的语言。

2、隐密安全性高

如果我们在浏览器中直接查看网页的原始代码，就只能看到HTML 文件，原始的ASP 程序代码是看不到的！这是应届ASP 程序先于网站服务（Web Server ）端执行后，将结果转换成标准HTML 文件，再传送到客户端（Client ）的浏览器上，因此，我们所辛苦撰写的ASP 程序并不会轻易地被看见进而被盗用。 3、易于操控数据库

ASP 可以轻易地通过ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Access 、FoxPro 、dBase 、Oracle 等等，另外，ASP 亦可将“文本文件”或是“Excel” 文件当成数据库用。

4、面向对象学习容易

ASP 具备有面向对象（object-Oriented ）功能，学习容易，ASP 提供了五种方便能力强大的内建对象：Request 、Response 、Sever 、Application 以及Session ，同时，若使用ASP 内建的“Application”对象或”Session”对象所撰写出来的ASP 程序可以在多个网页之间暂时保存必要的信息。

5、对象名称功能描述

RequestResponseServerSessionApplicationObjectContext 从客户端取得信息将信息送给客户端提供一些Web 服务器工具储存在一个Session 内的用户信息，该信息仅可被该用户访问在一个ASP-Application 中让不同的客户端共享信息可以用来配合Microsoft Transaction服务器进行分布式事务处理。

2.3开发工具数据库介绍

2.3.1数据库Access 的简介

Access 数据库是集成在Microsoft 公司开发的产品更新换代Office 系统

中的集成软件[10]。

ODBC （Open Database Connectivity开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的API 应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统[11]。ODBC 作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC 接口或提供了ODBC 支持，这其中就包括常用的SQL SERVER、ORACAL 、INFORMIX 等，当然也包括了Access 。

ASP 访问数据库的几种方式：在ASP 脚本中可以通过三种方式访问数据库： ✧ IDC （Internet Database Connector）方式；

✧ ADO （ActiveX Data Objects）方式；

✧ RDS （Remote Data Service）方式；

这三种访问方式对数据库的访问是由Internet Information Server来完成的。Web 浏览器用HTTP 协议向Internet 信息服务器（IIS ）递交请求。Internet 信息服务器执行访问数据库的操作，并以一个HTML 格式的文档作为回答[12]。在本程序中我使用的是第二种方式，即ADO 方式。

2.3.2 SQL语言简介

SQL 功能强大，是一种完备的数据处理语言，不仅用于数据库查询，而且用于数据库中的数据修改和更新。下面是一个简单SQL 语句的例子：

我们使用SQL 语句来从Book 中检索‘借书证号’为‘000001’的借阅者姓名：

SELECT 姓名 FROM Book WHERE借书证号 = ‘000001’

2.3.3 ASP访问数据库的原理

ASP 是服务器端的脚本执行环境，可用来产生和执行动态的高性能的WEB 服务器程序。当用户使用浏览器请求ASP 主页时，WEB 服务器响应，调用ASP 引擎来执行ASP 文件，并解释其中的脚本语言（javascript 或vbscript ），通过ODBC 连接数据库，由数据库访问组件ADO （active data objects）完成数据库操作，最后ASP 生成包含有数据查询结果的HTML 主页返回用户端显示。

ASP 连接数据库共有三种方式：

（1）基于ODBC 数据源的连接方式

Dim conn ‘声明一个对象实例变量

Set conn=Server.CreateObject(“ADODB.Connection ”)

‘给对象实例变量赋值

Conn.Open “Dsn=address” ‘连接数据源adress

(2)基于ODBC ，但是不用数据源的连接方式

使用数据源的连接方式尽管简单，但是需要在服务器端设置数据源。如果希望把一个程序从一个服务器移植到另一个服务器上，还需要在另一台服务器上设置数据源，比较麻烦。下面是不利用数据源的直接连接方法：

< Dim conn Set conn=Server.CreateObject(“ADODB.Connection ”)

Acess Driver Conn.Open“Driver={Microsoft

(*.mdb)};Dbq=C:Inetpubwwwrootasptempchapter8�ress.mdb” >

对于方式2，通常可以利用Server 对象的MapPath 方法将相对路径转换为物理路径：

< Dim conn Set conn=Server.CreateObject(“ADODB.Connection ”)

Conn.Open“Driver={Microsoft Acess Driver (*.mdb)};Dbq=”& Server.MapPath(“ adress.mdb”)

（3）基于OLE DB的连接方式

OLE DB 是一种使用底层技术，效率更高的连接数据库的方式，也是微软目前推崇的连接方式。

Dim conn

Set conn=Server.CreateObject(“ADODB.Connection ”)

Conn.Open“Provider={Microsoft.jet.OLEDB.4.0;Data

C:Inetpubwwwrootasptempchapter8�ress.mdb”

> Source=

自然，方式3中也可以使用Server.MapPath 方法将相对路径转化为物理路径： <

Dim conn

Set conn=Server.CreateObject(“ADODB.Connection ”)

Conn.Open“Provider={Microsoft.jet.OLEDB.4.0;Data

Server.MapPath(“ adress.mdb”)

在我的个人网站中我用的是第三种方式连接数据库。 Source=”&

3 网站主要页面制作及程序设计

3.1 DIV CSS布局网页

3.1.1 DIV CSS网页布局简要介绍

在以前网站布局大都用table 布局，现在比较流行Div CSS网页布局，而用表格装数据。用css 布局方便以后的改版以及其他页面布局。但css 有一点值得注意，那就是浏览器兼容问题。比如当一个用css 布局的网站在以IE 为内核的浏览器里显示正常，但到了火狐等其他之类的浏览器中显示就异常了。下面举一个浏览器兼容的例子方便大家理解。

图3-1 IE中显示两色块

这是在IE 中显示的两个方块，此时的只在红色色块中加入了float:left;左侧浮动，而没有在蓝色方块中加入此句。下面是在火狐浏览器中显示的结果：

图3-2 FF中显示两色块

这时，由于前面区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

怎么才能解决这个问题，解决个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS 代码中也加入“float:left;”，问题就解决了，加上试试，蓝色与红色显示在同一行且不重叠了。这只是关于浏览器兼容的一个小的方面，其他的需要在开发过程中多次调试并解决。虽然如此，css 布局页面还是有很多优点的。

1. 内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给css

来处理。生成的HTML 文件代码精简，更小打开更快。

2. 改版网站更简单容易了，不用重新设计排版网页，甚至不用动原网站的任

何HTML 和程序页面，只需要改动CSS 文件就完成了所有改版。对于门户网站来说改版就像换衣服一样简单容易。

3. 搜索引擎更友好，排名更容易靠前。

3.1.2 本站网页布局

图3-3 本站首页布局

这张图可以说明我的首页的网页布局。

DIV 结构如下：

Body {} /*这是一个HTML 元素，整个页面的最底层*/

#Container {} /*页面层容器*/

#Header {} /*页面头部*/ #Banner{} /* Banner */ #Nav{}/*导航栏*/ #Content {} /*页面主体*/ # contentLeft{} /*侧边栏*/ # contentRight{}/*主体内容*/ #Footer{}/*页面底部*/

这是我首页的页面布局最终图：

图3-4 网站首页效果

首页页面布局奠定了我其他页面的布局，其他页面都在首页的基础上或多或少的修改了一点，但整体还是和首页布局相同的。

3.2 首页Banner 的制作

首页Banner 很重要，Banner 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。

我的Banner 简洁明了，与我整个网站的风格相一致。对于Banner 的制作

相关推荐