网页制作技术论文

【摘要】这篇论文是关于我的一个个人网站的设计，首先我先从网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。本论文详细的介绍了整个网站设计的全过程。本论文的每一章都是网站建设的一个步骤，理论和实践相结合。既有理论、又有实例，把每一章的实例合在一起，就构成一个大实例。当然，一个好网站的整个设计过程是不能用短短的几十页纸就可以说清楚，所以，在我的这篇论文中，我详细的介绍了整个网站中最重要的部分，其中包括主页的设计和一部分链接页面的设计。

【关键词】：设计策划网站。

.

目录

引言 (3)

第一章本网站设计规划 (4)

1 .1 本网站建设的方向和目的： (4)

第二章网站设计的前期准备 (6)

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

第三章网站的功能模块设计与实现 (11)

3.1 首页的制作过程 (11)

3.1.1静态页面的制作 (11)

3.1.2动态页面的制作 (14)

3.2 链接页面的制作 (16)

3.2.1校园资讯的制作 (16)

第四章本站数据库的设计过程 (18)

4.1 数据库设计 (18)

4.2 网站数据安全 (20)

第五章网站 (21)

5.1 网站的测试 (21)

5.2 网站的上传 (22)

附录 (27)

参考文献 (28)

引言

引言

网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说，建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。

对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。在我的这个个人网站的制作过程中，我选择了我比较人主页。

第一章本网站设计规划

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

1.1.1网站建设目的：

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

1.1.2 本站明确的目的：

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

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

本网站的结构和风格：网站的风格反映了一个网站的特色，它具有很大的代表性。出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，

引言

因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风格呢？网站的结构是连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。

如图所示，我的这个网站的结构主要由学生考研、英语特区、个性女生、网络学院、校园文学、校园资讯、动漫天下等几大部分组成。这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。

第二章网站设计的前期准备

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

2.1.1 软件准备

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

这“三剑客”包括Dreamweaver MX、Fireworks MX和Flash MX，其中，Dreamweaver MX是网页编辑软件，Fireworks MX是图形/图像处理软件，Flash MX 是矢量动画编辑软件。当然，到今天为止，Macromedia公司出品的这个“三剑客”都已经是2004版，估计2005版也应该很快出来了。Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

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

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

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

网站设计规划

果非凡的动画。

在我设计我的个人网站的过程中，我选择了Dreamwear MX 2004和Flash MX 2004和 Photoshop三种软件。因为自己向对于其它的软件来说，这三个还算是比较熟悉的。

2.1.2 ISS 5.0的安装与设置

在因特网/企业网上的基于浏览的开发方案中，Microsoft 的IIS起到客户端与服务器端的连接作用。当访问者在浏览器中键入对你服务器上的网页进行访问的请求，这个请求通过网络路由到服务器端，然后服务器再将它交给IIS处理。IIS检索所请求的页，并根据请求的文件名对该网页进行相应的处理。如果该文件是以.asp为扩展名或者该文件是某种类型的请求文件，那么IIS将对该页面上的代码进行处理。

IIS 5.0是专为Windows 2000设计的WEB服务器软件。Windows 2000 Server 在安装系统时，就以自动安装IIS 5.0；但Windows 2000 Professional不会自动安装它。下面就简单介绍一下在我设计过程中在Windows 2000 Professional 上安装IIS 5.0的过程。

步骤 1 首先，我选择“开始”—“设置”—“控制面板”，在“控制面板”中选择“添加或删除程序”后，弹出“添加/删除程序”对话框。

步骤 2 在左边4个可选择的导航栏中选择“添加/删除Windows组建”按扭，弹出一个新的对话框。

步骤 3 在显示的组建里面，选中“Internet信息服务（IIS）”组建的复选框，单击“下一步”按钮，就进入了IIS 5.0的安装过程，如图所示。

步骤 4 等到安装完成以后，在“控制面板”里面选择“管理工具”，在打开的管理工具里面如果有“Internet 服务管理器”，说明IIS 5.0已经安装好。打开IE浏览器，然后在地址栏输入“127.0.0.1”（或者localhost），就可以看到所链节的界面。

也可以改变默认的站点位置和主页，修改步骤如下：

步骤 1 打开“Internet 服务器管理器”，弹出一个对话框如图2-5所示。

步骤 2 右键单击“默认Web站点”，在弹出的菜单里面选择“属性”项，

打开一个新的对话框如图2-6所示。

步骤 3 在图3-6所示的“Web站点”中，可以设置站点的说明、IP地址和其他一些属性。选择“主目录”标签，显示如图2-7所示界面。

步骤 4 在“主目录”选项卡中，“本地路径”的默认设置是：“C:\Inetpub\wwwroot”,为了方便以后编辑和管理网站，将其路径设置如”D:\mysite”。如图2-7所示，读者也可以根据实际情况设置为其他路径。选择“文档”标签，打开如图2-8所示界面。

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

以上介绍了IIS 5.0的安装和设置。

本站的制作过程

第三章本站的制作过程

3.1 首页的制作过程

3.1.1静态页面的制作

这是我的这个个人网站的首页的一部分，在这个主页的上部，是有两个Flash 图片做成的，如上图所示。接下来，我就简单演示一下这个主页的制作过程。首先，运行Dreamwear MX 2004，选择“文件”—“新建”—“创建基本页”如图：

选择“标准、扩展、布局”里的“布局”，接着选择旁边的“布局表格”，然后在空白页面上按我事先的规划画出如下布局：

接着，选择“布局”旁边的“绘制布局单元格”在刚刚绘制好的“布局表格”上绘制出单元格，

如果只看两幅图，似乎没什么区别，但实际这是后一幅图比前一幅多了“绘制布局单元格”，这一点是非常重要的。接下来，回到“常用”--“标准”，选择“表格”，在最上面的布局里插入一行一列单元格，比例设为100，如图：

本站制作过程

将光标放在插入的表格内，接着就是插入一幅Flash动画。选择“插入”—“媒体”—“Flash”，在弹出的文件中选取我自己事先做好的Flash动画的，调整Flash 动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，我通常是手动输入的。这样，首页顶部的这个Flash 动画就添加成功了。接下来，我用同样的方法把这个动画下的另一个动画菜单添加上。添加后的效果入图：

因为只有在浏览器中，整个Flash动画才可以被看到，所以，我就按下F12，这样就可以在浏览器中看到刚刚我做好的主页中的一部分了。接下来，我们就来讲讲首页底部的页面的制作过程。

首先，我先把底面按和顶部一样都插入一个一行一列的，边框为0的表格，然后把光标放在表格里，设置背景图片，如图：

在设置背景图片的时候，我把选择了我自己事先做好的一幅图，接下来，就在这个表格里输入如图的文字，包括：本站简介，本站业务...最后，我把属于我的版权信息也输入到了这个底步。这样，整个首页的静态页面就大体做好了。

3.1.2动态页面的制作

在整个网站中，动态页面占了这个主页的大部分，在这里，我就把我的这个个人主页的动态页面的制作大体的讲解一下。首先，我根据我的个人主页所要实现的功能我制作好了我的数据库（在第四章），接下来，我就把我设定系统的DSN（数据源名称）的方法来讲讲。首先，我明白，DSN是用来确定数据库所在的位置以及数据库的相关属性的。使用DSN的优点是，如果我要移动数据库档案的位置或是使用其他类型的数据库的时候，我只要重新设定DSN即可，不需要去修改原来使用的程序。下面，我就演示我在自己的电脑上配置DSN的过程：

1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”，如图所示：

2.在打开的“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮，如图：

本站制作过程

3.在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“Microsoft Access Driver（*.mdb）”，然后单击“完成”按钮，如图：

4.在出现的“ODBC Microsoft Access 安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：youthfly,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库 youthfly.mdb，然后单击“确定”按钮，如图：

5.这时，我发现系统数据源名称中已经多了一个“yougthfly.mdb”，这就是我的网站要使用的数据库。单击“完成”按钮，这样，我就完成了数据源的创建过程。如图：

6.接下来，我要在Dreamweaver MX 2004中把数据库的连接完成。运行Dreamweaver MX 2004，打开“应用程序”面板，然后选择“数据库”标签，如图：

单击“+”按钮，在弹出的快捷菜单中选择“数据源名称”。随即打开“数据源名称”对话框，在“连接名称”文本框中输入“yougthfly”如图：

单击“测试”，我就可以测试数据库是否正确连接了。单击“确定”，这样，我就完成了数据库的连接设置过程。完成了数据库连接的设置，接下来就是把首页的部分内容和数据库相连接了。（略）

3.2 链接页面的制作

3.2.1校园资讯的制作

本站制作过程

这个就是我的个人主页里“校园资讯”的界面，当点击右面的题目时，在网页的左边就会显示响应的内容，下面我就演示我制作这个网页的过程：首先，在制作主页面的时候，我已经在把主页的顶部和底部制作完成后，保存为模板了，所以，在这里，我们就选择“文件”—“新建”—“模板”，然后选择我们保存过的模板。在打开的模板中，我们把中间的空白区域划分成左右两个部分。

我们把这两个空白区域去分别保存成为两个页面，这样方便我们在后面的链接。在右边保存的页面中，插入表格若干，

打开数据库，连接好数据库，并将数据库中的内容分别拽入到表格中的适当位置，这样，数据库中的内容就显示在右面。接下来，我们就为右面的内容做链接。首先，选择右面的一题目，然后在属性里的超级链接里面添入刚才保存的两个页面的左边的页面。这样，将每个页面分别和左面的页面链接，当你点击右边的题目的时候，那么和内容相对应的题目就会在左边的页面中显示出来。

以上是我的一个链接页面的设计过程，因为链接页面较多，但大部分的制作过程都比较相似，所以我就不再讲解了。

第四章本站数据库的设计过程

4.1 数据库设计

网站的数据库建设在整个网站的设计过程中占具最重要的位置，它设计的好与坏直接关系到整个网站的成败。其中，管理系统需要考虑到三者的使用问题：一.系统管理员二.信息发布者三.浏览者：

1．系统管理员：系统管理员具有对整个网站发布，数据库的管理，信息管理，人员管理的最高权限。

2．信息发布者：网站信息的发布者，他们的任务是更新网站上的信息，所

本站制作过程

以他们的权限只局限于对文章的增、删、改上。

3．浏览者：信息的最终浏览者，他们是不具有任何权限的普通用户。

系统管理员（ADMIN）拥有最大的权限，可添加/删除任何信息，包括任何文章，任何用户。在设计数据库过程中，必须考虑到各种信息存放，更新，查询。所以数据库必须能最大限度的满足各种信息的输入输出。

以下为后台数据库的各表的结构和字段的分析。

Admin_id 系统管理员图：

首页题目表图：

中间版块题目表图：

中间版块内容表图：

网站公告栏表图：

网站中用到的调查表图：

网站所用到的后台文件

4.2网站数据安全

怎样防止mdb数据库被下载一直是用access的用户的一大头疾。现在总结如下有效方法，我自己根据教程总结了以下几点，以用来保护我的个人站点：

1. 修改数据库名。这是常用方法，将数据库名该成怪异名字或长名字，以防别人猜测。一旦被人猜到，别人还是能下载数据库文件，但几率不大。如将数据库database.mdb改成dslfjds$^&ijjkgf.mdb等

2. 修改数据库后缀。一般改成database.asp 、database.asa、