1、1 1 本网站设计规划 1 .1 本网站建设的方向和目的 1.1.1 网站建设目的 网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，可以说这是网站建设的根源和核心所在。这里就以我做的这个个人 网 站 为 实 例 给 大 家 简 述 这 个 问 题 ， 如 我 设 计 的 个 人 网 站 ：http:/www.liu18.tk 。作为一个个人兴趣网站，我的服务群体及访问者都定位在有广泛兴趣的网民，为网民服务就是我的这个网站的目的和方
2、向。从整个页面上可以看出，我的这个整个网站涉及新闻 资讯 、 博文天下 、 在线留言 等等都是关于 个人兴趣爱好 的。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样：企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所； 由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。 1.1.2 本站明确的目的 不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网
3、站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。因此在规划我的这个网站时，我选择了个人兴趣相关联的主题。 本网站预计的用户群体：对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。在已经确定了建设目 的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。我的这个网站就确定了以喜爱分享自己的爱好兴趣为用户群体。 本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的2 代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格
4、往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风 格呢？网站的结构是连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。 图 1-1 网站导航栏 如图所示，我的这个网站的结构主要由 首页 、 网站简介 、 资讯信息 、 博闻天下 、 精品图集 、 加入我们 、 留言中心 等几大部分组成。这些部
5、分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。 2 网站设计的前期准备 2.1 软件准备和 ISS 5.0 的安装与设置 2.1.1 软件准备 在网页的设计 过程中，因人而宜，每个人使用的软件也许不同，如比较有名的网站设计软件有 ADODB 公司出品的网页设计“三剑客”、有微软的Frontpage 、还有国产的“东方网页王”等等。在这里，我们主要说的是 ADODB公司出品的“三剑客”。 这“三剑客”包括 Dreamweaver CS4、 Fireworks CS4 和 Flash CS4，其中，Dreamweaver CS4 是网页编辑软件， Fireworks CS
6、4 是图形 /图像处理软件， Flash CS4 是矢量动画编辑软件。当然现在网页三剑客已经出来 CS4 了，新的版本功能更加 强大。 ADODB 公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，它们是 ADODB 公司专门为网页设计、制作开发3 的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。 Dreamweaver 采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由 Dreamweaver8 自动完成。另
7、外，还有一点值得说明的是， DreamweaverCS4 可以 控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。 Fireworks 的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于 WEB 应用的图形 /图象处理软件，提供了一种革命性的新方法来创建 WEB 图形，并且具有所有其他图形处理工具的诸多优点。Fireworks 最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外， Fireworks CS4 中的诸多功能都是面向 WEB 应用的，因此对于 WEB 设计新手来说也很容易学习的。 Flash
8、 是 比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。 Flash 提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。由于 Flash 采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。 在我设计我的个人网站的过程中，我选择了 DreamwearCS4 和 Flash CS4 和 Photoshop CS4 三种软件。因为自己向对于其它的软件来说，这三个还 算是比较熟悉的。由于我用 DIV+CSS 布局页面，因此为了更
9、好的实时查看网页，我一般都用记事本编写代码，然后保存为 .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 的文件系统）内置的安全特性， 建立强大、灵活而
10、安全的 Internet和 Intranet 站点。 IIS 的一个重要特性是支持 ASP。 IIS 3.0 版本以后引入了4 ASP，可以很容易的张贴动态内容和开发基于 Web 的应用程序。 IIS 的安装步骤： (1)点击：【开始】 -【控制面板】 -【添加 /删除程序】，打开“添加 /删除程序”对话框。 (2)点击左边菜单栏中“添加 /删除 Windows 组件”项，打开“ Windows 组件向导”对话框（这个过程可能要花几十秒钟 ），在对话框“组件”列表中，选中“ Internet 信息服务（ IIS）”项。 (3)将“ Windows 2000”安装盘放入光驱中，然后点击“下一步”
11、。这个步骤可能会花几分钟。 (4)点击“完成”按钮，完成 IIS 的安装。 可以添加一个默认文档作为主页。选择“添加”按钮，在弹出的对话框中输入文档名。为下一节的实例输入“ index.asp” 作为网页首页，然后单击左边的向上和向下箭头改变默认文档的次序。 2.2 系统概述 本系统开发工具是 ASP 与数据库技术， ASP 技术被广泛运用在动态网页设计中。这项技术也以 优异的性能得到了大多程序开发者的青睐。 2.2.1 开发工具 ASP 的优势 Active Server Pages： “ 动态服务器网页 ” ，一般简称为 “ASP” ， ASP之所以能受到大家的重视与使用的原因，主要在于所
12、产生的执行结果都是标准的 HTML 格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE或 Netscape）都可以正确地获得 ASP 的 “ 执行 ” 结果，并且将这 ASP 执行的结果直接在浏览器中 “ 浏览 ” ，不像 VBScript 或 JavaScript 是在客户端（ Client）的浏览器上执行，若使用 VBScript 来设计程序，客户端（ client）在 IE 浏览器中可以显示程序执行的结果，可是，客户端（ client）若使用Netscape 浏览器就无法显示 VBScript 的执行结果。 2.2.2 ASP 的特点 ASP 的特点 为： 任何开发工具皆可
13、发展 ASP， 只要使用一般的文书编辑程序，如 Windows记事本，就可以编辑。当然，其他网页发展工具，例如， FrontPage Express、 FrontPage 等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是5 使用那些所见即所得的网页编辑来写 ASP，可能会发生一些意想 不到的离奇状态。通吃各家浏览由于 ASP 程序是在网络服务器端中执行，执行结果所产生的HTML 文件适用于不同的浏览器。 1、 语言相容性 能 ASP 与所有的 ActiveX Script 语言都相容，除了可结合 HTML， VBScript、Java Script、 Active X 服务器组件来设
14、计外，并可经由 “plug -In（外挂组件模组）的方式，使用其他厂商（ Third Party）所提供的语言。 2、 隐密安全性高 如果我们在浏览器中直接查看网页的原始代码，就只能看到 HTML 文件，原始的 ASP 程序代码是看不到 的！这是 应届 ASP 程序先于网站服务（ Web Server）端执行后，将结果转换成标准 HTML 文件，再传送到客户端（ Client）的浏览器上，因此，我们所辛苦撰写的 ASP 程序并不会轻易地被看见进而被盗用。 3、 易于操控数据库 ASP 可以轻易地通过 ODBC(Open Database Connectivity)驱动程序连接各种不同的数据库，
15、例如： Access、 FoxPro、 dBase、 Oracle 等等，另外， ASP 亦可将 “ 文本文件 ” 或是 “ Excel” 文件当成数据库用。 4、 面向对象学习容易 ASP 具备 有面向对象（ object-Oriented）功能，学习容易， ASP 提供了五种方便能力强大的内建对象： Request、 Response、 Sever、 Application 以及Session，同时，若使用 ASP 内建的 “Application” 对象或 ”Session” 对象所撰写出来的 ASP 程序可以在多个网页之间暂时保存必要的信息。 5、 对象名称 功能描述 RequestR
16、esponseServerSessionApplicationObjectContext从客户端取得信息将信息送给客户端提供一些 Web 服务 器工具储存在一个 Session 内的用户信息，该信息仅可被该用户访问在一个 ASP-Application 中让不同的客户端共享信息可以用来配合 Microsoft Transaction 服务器进行分布式事务处理 。 2.3 开发工具数据库介绍 2.3.1 数据库 Access 的简介 Access 数据库是集成在 Microsoft 公司开发的产品更新换代 Office 系统6 中的集成软件 10。 ODBC（ Open Database Con
17、nectivity 开放式数据库互联）是微软推出的一种工业标准，一种开放的独立于厂商的 API 应 用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统 11。 ODBC 作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了 ODBC 接口或提供了 ODBC 支持，这其中就包括常用的 SQL SERVER、 ORACAL、 INFORMIX 等，当然也包括了 Access。 ASP 访问数据库的几种方式：在 ASP 脚本中可以通过三种方式访问数据库： IDC（ Internet Database Connector）方式； ADO（ ActiveX D
18、ata Objects）方式； RDS（ Remote Data Service）方式； 这三种访问方式对数据库的访问是由 Internet Information Server 来完成的。 Web 浏览器用 HTTP 协议向 Internet 信息服务器（ IIS）递交请求。 Internet 信息服务器执行访问数据库的操作，并以一个 HTML 格式的文档作为回答 12。在本程序中我使用的是第二种方式，即 ADO 方式。 2.3.2 SQL 语言简介 SQL 功能强大，是一种完备的数据处理语言，不仅用于数据库查询，而且用于数据库中的数据修改和更新 。 下面是一个简单 SQL 语句的例子： 我
19、们使用 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 生成包含有数据查询结
20、果的 HTML 主页返回用户端显示 。 ASP 连接数据库共有三种方式： （ 1） 基于 ODBC 数据源的连接方式 (2)基于 ODBC，但是不用数据源的连接方式 使用数据源的连接方式尽管 简单，但是需要在服务器端设置数据源。如果希望把一个程序从一个服务器移植到另一个服务器上，还需要在另一台服务器上设置数据源，比较麻烦。下面是不利用数据源的直接连接方法： 对于方式 2，通常可以利用 Server 对象的 MapPath 方法将相对路径转换为物理路径： （ 3）基于 OLE DB 的连接方式 OLE DB 是一种使用底层技术，效率更高的连接数据库的方 式，也是微软目前推崇的连接方式。 自然，方
21、式 3中也可以使用 Server.MapPath 方法将相对路径转化为物理路径： 在我的个人网站中我用的是第三种方式连接数据库。 3 网站 主要页面制作及程序设计 3.1 DIV+CSS 布局网页 3.1.1 DIV+CSS 网页布局简要介绍 在以前网站布局大都用 table 布局，现在比较流行 Div+CSS 网页布局 ，而用表格装数据。用 css 布局方便以后的改版以及其他页面布局。但 css 有一点值得注意，那就是浏览器兼容问题。比如当一个用 css 布局的网站在以 IE为内核的浏览器里显示正常，但到了火狐等其他之类的浏览器中显示就异常了。下面举一个浏览器兼容的例子方便大家理解。 图 3
22、-1 IE 中显示两色块 这是在 IE 中显示的两个方块，此时的只在红色色块中加入了 float:left;左侧浮动，而没有在蓝色方块中加入此句。下面是在火狐浏览器中显示的结果： 9 图 3-2 FF 中显示两色块 这时，由于前面区域浮动了，后面的那个区域很有可能就会和前面的区 域发生重叠并错位。 怎么才能解决这个问题，解决个浏览器兼容的问题，很容易，只需要在蓝色方块的 CSS 代码中也加入“ float:left;”，问题就解决了，加上试试，蓝色与红色显示在同一行且不重叠了。 这只是关于浏览器兼容的一个小的方面，其他的需要在开发过程中多次调试并解决。虽然如此， css 布局页面还是有很多优点
23、的。 1. 内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给 css来处理。生成的 HTML 文件代码精简，更小打开更快。 2. 改版网站更简单容易了，不用重新设计排版网页，甚至不用动原网站的任何 HTML 和程序 页面，只需要改动 CSS 文件就完成了所有改版。对于门户网站来说改版就像换衣服一样简单容易。 3. 搜索引擎更友好，排名更容易靠前。 3.1.2 本站网页布局 图 3-3 本站首页布局 这 张图可以说明 我 的 首页的网页布局。 10 DIV 结构如下 ： Body /*这是一个 HTML 元素，整个页面的最底层 */ #Container /*页面层容器 */ #He
24、ader /*页面头部 */ #Banner /* Banner */ #Nav/*导航栏 */ #Content /*页面主体 */ # contentLeft /*侧边栏 */ # contentRight/*主体内容 */ #Footer/*页面底部 */ 这是我首页的页面布局最终图 ： 图 3-4 网站首页效果 首页页面布局奠定了我其他页面的布局，其他页面都在首页的基础上或多或少的修改了一点，但整体还是和首页布局相同的。 3.2 首页 Banner 的制作 首页 Banner 很重要， Banner 主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。 我的 Banner 简洁明了，与我整个网站的 风格相一致。对于 Banner 的制作
