网页制作技术论文.docx
《网页制作技术论文.docx》由会员分享，可在线阅读，更多相关《网页制作技术论文.docx（26页珍藏版）》请在冰豆网上搜索。
网页制作技术论文
【摘要】这篇论文是关于我的一个个人网站的设计，首先我先从网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。
本论文详细的介绍了整个网站设计的全过程。
本论文的每一章都是网站建设的一个步骤，理论和实践相结合。
既有理论、又有实例，把每一章的实例合在一起，就构成一个大实例。
当然，一个好网站的整个设计过程是不能用短短的几十页纸就可以说清楚，所以，在我的这篇论文中，我详细的介绍了整个网站中最重要的部分，其中包括主页的设计和一部分链接页面的设计。
【关键词】：
设计策划网站。
.
目录
引言3
第一章本网站设计规划3
1.1本网站建设的方向和目的：
3
第二章网站设计的前期准备5
2.1软件准备和ISS5.0的安装与设置5
第三章网站的功能模块设计与实现9
3.1首页的制作过程9
3.1.1静态页面的制作9
3.1.2动态页面的制作13
3.2链接页面的制作15
3.2.1校园资讯的制作15
第四章本站数据库的设计过程17
4.1数据库设计17
4.2网站数据安全19
第五章网站20
5.1网站的测试20
5.2网站的上传21
附录26
参考文献27
引言
网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说，建设好自己的网站可以抢占新世纪发展的战略要点。
建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。
对于个人来说，建设好时间的个性化网站可以更加方便的收集信息，开展更加直接的网络交流，使用自己构筑的友善平台，我们可以为自己毕业后找工作做好充分的准备，通过自己建设的网站，用人单位可以更好的去了解你，从而给自己增加了一份很重的砝码。
在我的这个个人网站的制作过程中，我选择了我比较人主页。
第一章本网站设计规划
1.1本网站建设的方向和目的：
1.1.1网站建设目的：
网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。
任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，可以说这是网站建设的根源和核心所在。
这里就以我做的这个学生网站为实例给大家简述这个问题，如我设计的个人主页：
http:
//www.*****.com。
作为一个学生网站，我的服务群体及访问者都定位在在校学生，为学生服务就是我的这个网站的目的和方向。
从整个页面上可以看出，我的这个整个网站涉及校园新闻、考研、男生女生等等都是关于我们在校学生的。
整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。
其实任何网站都一样：
企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。
1.1.2本站明确的目的：
不同的网站目的要求通过不同的方式来实现。
一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站目的都有所不同，在整个网站的建设规划方面的要求也是肯定是大不一样的。
因此在规划我的这个网站时，我选择了和大学生的生活和学习相关联的主题。
本网站预计的用户群体：
对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览者，也就是确定自己的用户群体。
在已经确定了建设目的的前提下，应根据建站方向所会导致出现的不同用户群体的需求来规划设计整个网站。
我的这个网站就确定了以大学生为用户群体。
本网站的结构和风格：
网站的风格反映了一个网站的特色，它具有很大的代表性。
出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。
一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。
往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。
那么什么是网站的结构和风格呢？
网站的结构是连接网站内容之间的支架。
网站的结构是网站的核心和骨架，如果没有网站结构，网站将会变得一团糟。
现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。
如图所示，
我的这个网站的结构主要由学生考研、英语特区、个性女生、网络学院、校园文学、校园资讯、动漫天下等几大部分组成。
这些部分组成了我的整个网站的结构，使得整个站点不会因为内容过多而显得杂乱无章。
第二章网站设计的前期准备
2.1软件准备和ISS5.0的安装与设置
2.1.1软件准备
在网页的设计过程中，因人而宜，每个人使用的软件也许不同，如比较有名的网站设计软件有Macromedia公司出品的网页设计“三剑客”、有微软的Frontpage、还有国产的“东方网页王”等等。
在这里，我们主要说的是Macromedia公司出品的“三剑客”。
这“三剑客”包括DreamweaverMX、FireworksMX和FlashMX，其中，DreamweaverMX是网页编辑软件，FireworksMX是图形/图像处理软件，FlashMX是矢量动画编辑软件。
当然，到今天为止，Macromedia公司出品的这个“三剑客”都已经是2004版，估计2005版也应该很快出来了。
Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，它们是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。
DreamweaverMX采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。
她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由DreamweaverMX自动完成。
另外，还有一点值得说明的是，DreamweaverMX可以控制和删除冗余代码，减小网页文件的大小。
从而能够快速上传和下载。
FireworksMX的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。
它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。
FireworksMX的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。
另外，FireworksMX中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。
FlashMX是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。
FlashMX提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。
由于FlashMX采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。
在我设计我的个人网站的过程中，我选择了DreamwearMX2004和FlashMX2004和Photoshop三种软件。
因为自己向对于其它的软件来说，这三个还算是比较熟悉的。
2.1.2ISS5.0的安装与设置
在因特网/企业网上的基于浏览的开发方案中，Microsoft的IIS起到客户端与服务器端的连接作用。
当访问者在浏览器中键入对你服务器上的网页进行访问的请求，这个请求通过网络路由到服务器端，然后服务器再将它交给IIS处理。
IIS检索所请求的页，并根据请求的文件名对该网页进行相应的处理。
如果该文件是以.asp为扩展名或者该文件是某种类型的请求文件，那么IIS将对该页面上的代码进行处理。
IIS5.0是专为Windows2000设计的WEB服务器软件。
Windows2000Server在安装系统时，就以自动安装IIS5.0；但Windows2000Professional不会自动安装它。
下面就简单介绍一下在我设计过程中在Windows2000Professional上安装IIS5.0的过程。
步骤1首先，我选择“开始”—“设置”—“控制面板”，在“控制面板”中选择“添加或删除程序”后，弹出“添加/删除程序”对话框。
步骤2在左边4个可选择的导航栏中选择“添加/删除Windows组建”按扭，弹出一个新的对话框。
步骤3在显示的组建里面，选中“Internet信息服务（IIS）”组建的复选框，单击“下一步”按钮，就进入了IIS5.0的安装过程，如图所示。
步骤4等到安装完成以后，在“控制面板”里面选择“管理工具”，在打开的管理工具里面如果有“Internet服务管理器”，说明IIS5.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”作为网页首页，然后单击左边的向上和向下箭头改变默认文档的次序。
以上介绍了IIS5.0的安装和设置。
第三章本站的制作过程
3.1首页的制作过程
3.1.1静态页面的制作
这是我的这个个人网站的首页的一部分，在这个主页的上部，是有两个Flash图片做成的，如上图所示。
接下来，我就简单演示一下这个主页的制作过程。
首先，运行DreamwearMX2004，选择“文件”—“新建”—“创建基本页”如图：
选择“标准、扩展、布局”里的“布局”，接着选择旁边的“布局表格”，然后在空白页面上按我事先的规划画出如下布局：
接着，选择“布局”旁边的“绘制布局单元格”在刚刚绘制好的“布局表格”上绘制出单元格，
如果只看两幅图，似乎没什么区别，但实际这是后一幅图比前一幅多了“绘制布局单元格”，这一点是非常重要的。
接下来，回到“常用”--“标准”，选择“表格”，在最上面的布局里插入一行一列单元格，比例设为100，如图：
将光标放在插入的表格内，接着就是插入一幅Flash动画。
选择“插入”—“媒体”—“Flash”，在弹出的文件中选取我自己事先做好的Flash动画的，调整Flash动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，我通常是手动输入的。
这样，首页顶部的这个Flash动画就添加成功了。
接下来，我用同样的方法把这个动画下的另一个动画菜单添加上。
添加后的效果入图：
因为只有在浏览器中，整个Flash动画才可以被看到，所以，我就按下F12，这样就可以在浏览器中看到刚刚我做好的主页中的一部分了。
接下来，我们就来讲讲首页底部的页面的制作过程。
首先，我先把底面按和顶部一样都插入一个一行一列的，边框为0的表格，然后把光标放在表格里，设置背景图片，如图：
在设置背景图片的时候，我把选择了我自己事先做好的一幅图，接下来，就在这个表格里输入如图的文字，包括：
本站简介，本站业务...最后，我把属于我的版权信息也输入到了这个底步。
这样，整个首页的静态页面就大体做好了。
3.1.2动态页面的制作
在整个网站中，动态页面占了这个主页的大部分，在这里，我就把我的这个个人主页的动态页面的制作大体的讲解一下。
首先，我根据我的个人主页所要实现的功能我制作好了我的数据库（在第四章），接下来，我就把我设定系统的DSN（数据源名称）的方法来讲讲。
首先，我明白，DSN是用来确定数据库所在的位置以及数据库的相关属性的。
使用DSN的优点是，如果我要移动数据库档案的位置或是使用其他类型的数据库的时候，我只要重新设定DSN即可，不需要去修改原来使用的程序。
下面，我就演示我在自己的电脑上配置DSN的过程：
1.启动控制面板，双击“管理工具”下的“数据源（ODBC）”，如图所示：
2.在打开的“数据源（ODBC）”对话框中选择“系统DSN”标签，然后单击“添加”按钮，如图：
3.在弹出的“创建新数据源”对话框中，选择数据库的驱动程序为“MicrosoftAccessDriver（*.mdb）”，然后单击“完成”按钮，如图：
4.在出现的“ODBCMicrosoftAccess安装”对话框，在“数据源名”文本框中输入我的这个网站的数据库的名称：
youthfly,单击“数据库”栏中的“选择”按钮选择我的这个网站根目录中我已经建好的数据库youthfly.mdb，然后单击“确定”按钮，如图：
5.这时，我发现系统数据源名称中已经多了一个“yougthfly.mdb”，这就是我的网站要使用的数据库。
单击“完成”按钮，这样，我就完成了数据源的创建过程。
如图：
6.接下来，我要在DreamweaverMX2004中把数据库的连接完成。
运行DreamweaverMX2004，打开“应用程序”面板，然后选择“数据库”标签，如图：
单击“+”按钮，在弹出的快捷菜单中选择“数据源名称”。
随即打开“数据源名称”对话框，在“连接名称”文本框中输入“yougthfly”如图：
单击“测试”，我就可以测试数据库是否正确连接了。
单击“确定”，这样，我就完成了数据库的连接设置过程。
完成了数据库连接的设置，接下来就是把首页的部分内容和数据库相连接了。
（略）
3.2链接页面的制作
3.2.1校园资讯的制作
这个就是我的个人主页里“校园资讯”的界面，当点击右面的题目时，在网页的左边就会显示响应的内容，下面我就演示我制作这个网页的过程：
首先，在制作主页面的时候，我已经在把主页的顶部和底部制作完成后，保存为模板了，所以，在这里，我们就选择“文件”—“新建”—“模板”，然后选择我们保存过的模板。
在打开的模板中，我们把中间的空白区域划分成左右两个部分。
我们把这两个空白区域去分别保存成为两个页面，这样方便我们在后面的链接。
在右边保存的页面中，插入表格若干，
打开数据库，连接好数据库，并将数据库中的内容分别拽入到表格中的适当位置，这样，数据库中的内容就显示在右面。
接下来，我们就为右面的内容做链接。
首先，选择右面的一题目，然后在属性里的超级链接里面添入刚才保存的两个页面的左边的页面。
这样，将每个页面分别和左面的页面链接，当你点击右边的题目的时候，那么和内容相对应的题目就会在左边的页面中显示出来。
以上是我的一个链接页面的设计过程，因为链接页面较多，但大部分的制作过程都比较相似，所以我就不再讲解了。
第四章本站数据库的设计过程
4.1数据库设计
网站的数据库建设在整个网站的设计过程中占具最重要的位置，它设计的好与坏直接关系到整个网站的成败。
其中，管理系统需要考虑到三者的使用问题：
一.系统管理员二.信息发布者三.浏览者：
1．系统管理员：
系统管理员具有对整个网站发布，数据库的管理，信息管理，人员管理的最高权限。
2．信息发布者：
网站信息的发布者，他们的任务是更新网站上的信息，所以他们的权限只局限于对文章的增、删、改上。
3．浏览者：
信息的最终浏览者，他们是不具有任何权限的普通用户。
系统管理员（ADMIN）拥有最大的权限，可添加/删除任何信息，包括任何文章，任何用户。
在设计数据库过程中，必须考虑到各种信息存放，更新，查询。
所以数据库必须能最大限度的满足各种信息的输入输出。
以下为后台数据库的各表的结构和字段的分析。
Admin_id系统管理员图：
首页题目表图：
中间版块题目表图：
中间版块内容表图：
网站公告栏表图：
网站中用到的调查表图：
网站所用到的后台文件
文件名
作用与功能
备注
admin.asp
登陆
后台
index.asp
首页
admin_article.asp
管理文章
后台
Postmsg.asp
发布信息
后台
admin_vote.asp
投票管理
后台
Delartcat.asp
删除功能
后台
post.asp
发布功能
后台
youthfly.mdb
数据库文件
后台
admin_diary.asp
公告管理
后台
4.2网站数据安全
怎样防止mdb数据库被下载一直是用access的用户的一大头疾。
现在总结如下有效方法，我自己根据教程总结了以下几点，以用来保护我的个人站点：
1.修改数据库名。
这是常用方法，将数据库名该成怪异名字或长名字，以防别人猜测。
一旦被人猜到，别人还是能下载数据库文件，但几率不大。
如将数据库database.mdb改成dslfjds$^&ijjkgf.mdb等
2.修改数据库后缀。
一般改成database.asp、database.asa、database.inc、database.cgi、database.dll等等，注意要在IIS中设置这些后缀的文件不能被解析。
3.将数据库database.mdb改成#database.mdb。
这是最简单有效的办法。
分析：
假设别人得到你的数据库地址串将是：
因为#在这里起到间断符的作用，地址串遇到#号，自动认为访问地址串结束。
注意：
不要设置目录可访问。
用这种方法，不管别人用何种工具都无法下载，如flashget，网络蚂蚁等。
注：
只要数据库文件名任何地方含有'#'，别人都无法正常下载。
同理，空格号也可以起到'#'号作用，但必须是文件名中间出现空格。
4.将数据库连接文件放到其他虚拟目录下。
5.将Access数据库加密。
在我的这个个人网站的数据库中，我采用了Access数据库加密的方法来保护自己的数据库安全，这样，即使我的数据库被人下载，他仍然破解不了我的用户的密码。
第五章网站的测试与上传
5.1网站的测试
一个好的网站建设好了之后是不能立即发布的，在这之前需要进行一段时间的测试，没有经过测试的网站往往会在浏览器兼容性和显示器兼容性上出现问题。
同样由于在程序开发和页面制作的过程中难免会出现误差，所以在正式发布前通过测试找出网站的Bug（网页中的漏洞）是非常重要的一个环节，通常称此过程为捉虫。
为什么测试显得这么重要呢？
没有经过测试的页面会出现那些问题呢？
下面将从几个不同的方面来说明这些问题。
1.分辨率不同产生差异
经常上网的人可能会有这样的经历，那就是同样一个网页在不同的分辨率下会有不同的显示。
这就是由于分辨率不同所造成的。
2.浏览器不同产生的差异
显示器不同产生不同的浏览结果，浏览器版本不同也可能会使得网站的浏览效果产生差异。
同一个页面在IE和Netscape浏览器下的显示效果也可能是不同的，这些页面上的问题都是访问者可能遇到的。
网站建设者不能在页面上发布类似于“本站默认浏览器在IE5.0以上，默认显示器分辨率为800*600”的标记，反而应该想办法去适应浏览网站的访问者，而不是让访问者通过调整浏览器分辨率和显示器来适应网站。
所以，网站的测试就显的很重要了。
3.测试的项目。
在一个网站的开发过程中，网站的测试是保证整个网站整体质量的重要一环，本章将就网站的测试技术及相应的自动测试工具做一个简要的介绍。
主要就如下几个方面进行探讨：
性能测试，安全性测试，稳定性测试，浏览器兼容性测试，可用性/易用性测试，链接测试，代码合法性测试。
在我的个人网站的测试过程中，在数据库的链接，地址的链接，还有图片的相对位置都出现了许多小的错误，还好，经过我自己的修改，现在已基本消除了这种现象。
在我的整个网站的测试中，数据库的测试是最重要的，它的设计的好与坏，直接关系的整个我的个人网站的成败，所以，我在测试过程中，对数据库的测试是花费时间最长的。
5.2网站的上传
网站做好后，要上传到自己的空间里别人再可以看到，不然就像做好了一件新衣服却只放在衣柜里一样。
下面，我们就讲讲用CuteFTP这个工具上传我自己的个人网站的方法。
首先在自己的电脑装上CuteFTP这个软件，安装好后，在程序里找到并运行
。
我在网络上下载的这个软件只是个试用版。
例如这个就只能用30天。
但这并不影响我的使用，所以，我点击下一步，继续，
第一次用，出来连接向导，你可以不用它，取消就行。
当然，我也可以按提示一步步做。
主界面：
左右两部分分别表示本地硬盘和网络空间上的文件
用站点管理器建立与网络空间的连接。
各种上传工具大同小异。
新建，
输入站点信息。
然后点下面的连接。
上面显示连接情况，右边显示网络空间上的文件。
从左边找到自己电脑上已经做好的网页文件，按住后拖到右边。
出来一个小窗口，问是否上传，当然选“是”。
拖动文件夹可以上传文件夹及其中的内容。
传送完成后，右边就会显示文件了。
点右键会有一些常用功能，如删除。
到些文件传送完毕，可以关了cuteftp了。
以上就是我用cuteftp这个工具上传我的个人网页的过程，当然，上传网页不只有这一个工具，还有很多，但我是比较喜欢用cuteftp这个工具的。
附录
经过一个月的努力，我的这个个人小型网站终于做好了！
在整个网站的设计开发过程中，我虚心的向同学请教，听取他们的意见和建议，然后把他们的这些好的合理的建议和意见都在我的个人网站中体现出来。
例如，在网站的服务对象这个问题上，我就参考了同寝室的同学的意见，从而使我确定了我的这个网站的基调。
当然，在整个网站的设计过程中，困难才是我最头疼的事。
以前虽然也动手做过小型网站，但动手的次数并不多，这样就造成了我现在真的动起手来却感到陌生的原因之一。
不过还好，在我遇到困难的时候，我就向同学请教，去图书馆查资料，也拿过来别人的作品做为自己的参考，当然，最重要的是有老师的指导，在许多数据库的问题上，如果不是王老师的指导，我想我是不会那么轻易做好我的这个个人网站的后台管理的，所以，我是真的非常感谢王老师的。
总之，经过了这么长时间的努力，我的这个个人网站就算完成了。
我的这个个人网站可以说是我在大学校园里的最后一次作品了，所以在设计的过程中，我倾注了大量的心血，在五一期间，我通常是为了设计好某一页面，我都是凌晨四五点钟才休息，同时，我也放弃了五一出去游玩的想法，一心一意的扑在
升级会员 