打造卓越网页设计实例，揭秘构建个人网站之道

a351910080 · 浏览 7 · 点赞 0 · 17小时前

如何构建个人网站

需注册网站域名，购置或租赁网站空间。上传内容，包括图文和视频等，即可构建个人网站。

当前市场上存在众多网站搭建工具和制作平台，挑选一个易操作的即可。网站搭建工具通常提供模板，可按行业、风格、类型挑选心仪的模板。选定后套用，网站便成功创建。

构建网站的具体流程及注意事项。

建网站的投入颇为可观。

首先，申请免费个人主页空间（当然也可申请付费的，视个人情况而定）。你可在搜索引擎中以“免费资源”为关键词搜索，在找到的网页中查看免费个人主页部分，进入提供免费个人主页的网站后，按步骤完成申请表格。然后，编辑个人网页。如果你是初学者，建议使用FrontPage，因为它是一个所见即所得的网页编辑软件，也是微软OFFICE的一个组件，使用方式与WORD有很多相似之处。最后，上传网页。请按提供个人主页空间服务的网站上的上传说明进行操作。完成这些步骤后，你的个人主页便建立了。

如何构建一个网站？

（信息来源：商翼网站策划）

一、引言

一个网站的整体规划和设计优劣，是其发展关键，也是吸引人们浏览的关键。随着Internet/Intranet技术的不断发展，人们越来越认识到其优势，数据库与web的连接也成为数据库开发领域的热门技术之一。

通常情况下，通过浏览器看到的网页大多是静态的。所谓“静态”，是指网站网页内容“固定不变”。当浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页时，服务器仅是将原本设计好的静态HTML文档传给浏览器。其页面内容使用的仅仅是标准的HTML代码，最多再加上流行的GIF89A格式的动态图片，如产生几只小猫小狗跑来跑去的动画效果。若网站维护者要更新网页内容，就必须手动更新所有的HTML文档。静态网站的致命弱点就是不易维护。为了更新网页内容，网站维护者必须重复制作HTML文档，随着网站内容和信息量的不断增加，可以想象这是多么复杂繁琐的工作。

那么，什么是动态网站呢？所谓“动态”，并非指放在网页上的图片会动，动态页面应具备以下几个特点：

（一）交互性：即网页能根据客户的要求和选择而动态改变和响应，浏览器即作为客户端界面，这是今后Web发展的大势所趋。

（二）自动更新：即无需手动更新HTML文档，就能自动生成新的页面，从而大大减少工作量。

（三）因时因人而变：即当不同的时间、不同的人访问同一网址时能产生不同的页面，这一点对于需要对使用者授权的网站尤其适用。

随着Internet的迅速发展，无论是专业的ISP（Internet服务提供者）和ICP（Internet内容提供者），还是一般的政府机关、银行、交通部门、学校、医院、服务者，甚至是每个人，都在积极寻求在Internet上发布信息，提供新型的网上管理和服务。可以说，网站设计和编辑正成为新兴的热门行业。

二、网站的系统分析

（一）项目立项

我们接到客户的业务咨询，经过双方不断的沟通和了解，并通过基本的可行性讨论，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必需人员。

（二）客户的需求说明书

第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚，需要您不断引导和帮助分析。有些客户可能对自己要建什么样的网站根本就没有明确的目的，以及他的网站建好后来干什么也是一无所知，为了客户能有明确的目的，我们需要耐心说明，仔细分析，挖掘出客户潜在的，真正的需求。这样对大家都有好处，我们的宗旨应该是“客户明明白白，双方高高兴兴。”对客户和自己都是一种负责。

配合客户写一份详细、完整的需求说明会花费很多时间，但这样做是值得的，而且一定要让客户满意，签字认可。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢？简单说，包含下面几点：正确性：每个功能必须清楚描写交付的功能；可行性：确保在当前的开发能力和系统环境下可以实现每个需求；必要性：功能是否必须交付，是否可以推迟实现，是否可以在削减开支情况发生时“砍”掉；简明性：不要使用专业的网络术语；检测性：如果开发完毕，客户可以根据需求检测。

三、建设方案

（一）建站理念

(1)提前规划

设计主页未必很困难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。

(2)尽量精简

主页的作用好比一本书的封面，是为了吸引用户浏览你的网址内容。因此，主页的设计应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务、以及主页内容（即你的其他页面还载有什么资料）。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难令他们深入观赏。

主页的职能犹如一册书籍的封皮，旨在吸引访客浏览你的网站内容。因此，主页的设计应以醒目为首要，让人一目了然。切勿添加过多不必要的细节，或使画面过于繁杂。在主页上明确列出三项关键信息，例如机构名称、提供的产品或服务、以及主页内容（即你的其他页面包含哪些资料）。务必牢记，页面给人的第一印象至关重要。在网上四处浏览的人众多。如果你的主页缺乏吸引力，很难让他们深入浏览。

(3)力求简约

目前大部分用户通过调制解调器接入互联网，因此他们通常需要花费较长时间等待主页传输到自己的系统。主页上的图形应力求简约，避免耽误用户的时间。图像越大、颜色越深，传输页面的时间越长。这并非意味着你要完全舍弃图像，而是提醒你要关注使用图像所带来的影响。主页上的颜色最好不超过六十四种，页顶图像最好保持在约10KB（千字节）以下。切勿禁不住诱惑，觉得必须放入大幅的图画；应考虑只用几幅简洁有力的图像。主页整体上要能够快速传输。如果加载时间超过十至十五秒，许多用户就会感到不耐烦。如果条件允许，最好先测试你的主页在较差条件下的传输速度，例如14.4千波特的调制解调器，或通过Prodigy等网络服务接入互联网等。

此外，还须注意适应最低档的设备，例如标准的小型显示器，不要假设每个人都使用高分辨率的大屏幕。运用先进浏览软件所提供的一些尖端功能是可以的，但应确保你的主页在次一级的浏览软件上（例如某些网络服务所提供的专用浏览软件）仍可顺畅地显示。

(4)巧妙运用图像

用户在网上四处游走，你必须设法吸引并保持他们对你的主页的注意力。互联网的一个最重大资源是其多媒体能力，因此我们无论如何要充分利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其独具特色，令人过目难忘。图像的内容应具有一定的实际作用，避免虚饰浮夸。最佳的图像应集美观与传讯于一身。注意图画可以弥补文字之不足，但并不能完全取代文字。许多用户将浏览软件设置为忽略图像，以节省时间，他们只看文字。因此，在制作主页时，必须注意将图像所带的重要信息或连接其他页面的指示用文字重复表达一次。用“纯文本”模式测试已制成的主页，确保其传达所有信息。

(5)使主页易于浏览

主页的一个主要功能是作为浏览工具，引导用户查阅你存储在网站或其他地点的信息。尽量使浏览过程轻松便捷。基于清晰明确和速度的考虑，主页上的链接项目应仅限于几个高级类别，例如公司、产品、服务、支持等。使用六至八个链接项目最为理想。

此外，你提供的信息不应隐藏在层层叠叠的页面之下。穿越五个以上的链接项目已足以令人厌烦。因此，你必须在广度和深度之间寻求平衡。如果你的网站上有大量信息，你可能需要编制较长的页面或使用更多链接项目，甚至可能需要建立多个主页，使每个主页包含不同的信息。如果能够让用户在主页上通过关键字或词语查找所需信息，肯定会受到用户欢迎。

假若你有充足的资源，便应找一位专家来评估你设计的主页是否方便易用。设法找一些对主页陌生的用户，来试用你的初步成品。

(6)提供导航指引

主页通常需要包含以下内容：

标题，此标题须清晰无误地标识你的网站。标题可以是名称、标语徽标或图像。

电子邮件地址，以便用户有问题时，可以通知你。

联系信息，列出通讯地址、电话号码等。

(7)重复利用现有信息

在制作主页时，通常无需从头开始，因为有许多现成的文字、图片等资料可供我们重用，例如宣传册、公关文件、技术手册、数据库等。许多情况下，只需稍加修改，就可以将这些材料转换为网页上使用。

(8)保持新颖感

互联网上不断有新事物出现，每天都有新花样。如果你的主页从不改变，用户很快会感到厌倦。在主页上预告即将有新资料推出，可以吸引用户再次浏览。不妨在页头以大字标题宣布新消息。可以定期更换主页上的图像或更改主页的样式。趣味性的事项可以持续或自动更新，例如列出访问你网站的人次。

同样，为了保持新颖感，应时刻确保主页提供的是最新信息。将更新主页信息的工作纳入既定的公关及资料编制计划内，即当你使用传统方法（例如新闻稿）传递新信息时，确保这些信息也出现在你的主页上。确保链接项目运作顺畅，以免用户在屏幕上收到“无法查阅所需档案”的信息而感到失望。

(9)履行承诺

做不到的事情，千万不要轻易承诺。切勿随意要求用户做出回应行动，例如要求用户填写订单表格，除非你已制定好处理这些订单的方法和交货程序。如果在网上列出联系电话，就要确保自己能够迅速解决来电者的问题。

(10)吸引访客浏览

既然费尽心思将主页打造得美观实用，没有人来欣赏就太可惜了。为了吸引所有网民浏览，必须使主页易于寻找。通知其他网站（例如相关主题的网站），他们可能想连接你的主页。安排将自己的网址列在所有相关网址目录、索引、搜索程序和“What's new”页面上。尽量将网址传播开去，使之出现在互联网和所有传统媒体上，例如书刊广告、公关文件、宣传品等。

在网站上，为每个页面设置“home”按钮，方便用户随时返回主页。

在网站上，每个页面均设立“首页”按钮，便于用户随时回到主页面。

互联网生机勃勃、持续发展，因此，某些目前适用的经验，未来可能不再适用。例如，未来家庭用户若能接入高速网络，便能突破数据传输当前的局限，使得主页篇幅更宽广，页面更绚丽。新颖的浏览功能，如Sun的HotJava浏览软件所提供的先进特性，将使互联网更加强大且便于交流。HotJava将主页从静态文件转变为动态实体，提供如实时动画制作、背景音乐、实时存储数据（如不断更新的股票价格）、语音广播等功能，为网络用户带来更多乐趣。优秀的首页，还需有精良的设备支持。网站服务器不断推陈出新，使得网站建设变得更加简单。

（二）网站整体设计

在获得客户需求说明后，并非直接开始制作，而是需对项目进行整体设计，详细制定一份网站建设方案提交给客户。整体设计至关重要。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在何种硬件环境下；需要多少人，多少时间；需要遵循的规范和标准有哪些。同时，还需编写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；若有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。

整体设计完成后，一般需向客户提交一份网站建设方案。许多网页制作公司在洽谈业务时就被客户要求提供方案。那时的方案通常较为笼统，且在客户需求不明确的情况下提交方案，往往与实际制作后的结果存在较大差异。因此，应尽量争取客户的理解，在明确需求并完成整体设计后提交方案，这对双方都有益处。网站建设方案包括以下几个部分：客户情况分析；网站需要实现的目的和目标；网站形象说明；网站的栏目板块和结构；网站内容的安排，相互链接关系；使用软件、硬件和技术分析说明；开发时间进度表；宣传推广方案；维护方案；制作费用；公司简介：成功作品、技术、人才说明等。当您的方案获得客户的认可，便可开始动手制作网站。但此时还不是真正意义上的制作，你需要进行详细设计。

（三）网站详细设计

整体设计阶段以较为抽象概括的方式提出了解决问题的方法。详细设计阶段的任务是将方法具体化。详细设计主要针对程序开发部分。但这个阶段的任务并非真正编写程序，而是设计出程序的详细规格说明。这种规格说明的作用类似于其他工程领域中工程师经常使用的工程蓝图，它们应包含必要的细节，例如：程序界面、表单、所需数据等。程序员可以根据它们编写实际的程序代码。我们这次主要使用ASP来实现相关功能和解决问题，例如，公告板BBS、聊天室、信息发布系统、网上超市等都用ASP实现人机交互功能，其中也用到了调用数据库的技术。

ASP（Active Server Pages）是Microsoft公司推出的一种Web应用程序开发技术，也是服务器端的脚本（Script）运行环境，使用该技术可以开发动态的、交互的Web应用程序。

（四）网站制作规范探讨

（1）网站目录规范

目录建立的原则：以最少的层次提供最清晰简便的访问结构。

a.根目录。根目录指DNS域名服务器指向的索引文件的存放目录。根目录只允许存放index.html和main.html文件，以及其他必需的系统文件；

b.每个语言版本存放于独立的目录；

c.每个主要功能（主菜单）建立一个相应的独立目录；

d.当页面超过20页，每个目录下存放各自独立的images目录，共用的图片放在根目录下的images目录下；

e.所有的js文件存放在根目录下统一目录script；

f.所有的CSS文件存放在各语言版本下的style目录

g.所有的CGI程序存放在根目录并列目录cgi_bin目录

（2）文件命名规范

文件命名的原则：以最少的字母达到最容易理解的意义。

a.索引文件统一使用index.html文件名（小写）。index.html文件统一作为“桥页”制作具体内容，仅作为跳转页和meta标签页。主内容页为main.htm；

b.菜单图片名称按菜单名的英语翻译为名称。例如：关于我们aboutus；信息反馈feedback产品product；所有单英文单词文件名都必须为小写，所有组合英文单词文件名第二个起第一个字母大写；

c.所有文件名字母间连线都为下划线；

d.图片命名原则以图片英语字母为名，大小写原则同上；

e.js的命名原则以功能的英语单词为名。例如：广告条的js文件名为:ad.js

f.所有的CGI文件后缀为.cgi。

（3）链接结构规范

链接结构的原则：用最少的链接，使得浏览最有效率。首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。

（4）尺寸规范

a.页面标准按800600分辨率制作，实际尺寸为778434px；

b.每个标准页面为A4幅面大小，即8.5X11英寸；

c.大banner为46860px，小banner为8831px。

（5）首页HEAD区规范

a.公司版权注释

b.网页显示字符集

简体中文：

繁体中文：

英语：

c.网页制作者信息

d.网站简介

e.搜索关键字

f.网页的css规范

g.网页标题

四、网站的设计制作

1.整体形象设计

在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。

整体形象设计包括标准字、Logo、标准色彩、广告语等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单、标题、版权等模块设计。首页一般设计1-3个不同风格。

整体形象设计涵盖标准字体，标识，标准色调，宣传口号等。主页设计涵盖版面布局，色调，图像，动态效果，图标等风格设计，同时也包括横幅，菜单，标题，版权等模块设计。主页通常设计1-3种不同风格。

开发制作

本次网站规划采用软件工程的设计方法，设计团队在系统分析和总体设计的基础上，将任务细化，分配给每个团队成员，各模块由成员独立负责设计和调试，既有分工又有协作，最后将模块上传至服务器，进行链接和整体调试。

调试完善

各模块初步完成后，上传至服务器，对网站进行全面测试。包括速度，兼容性，交互性，链接正确性，程序稳定性，超流量测试等，发现问题及时解决并记录。

网站建设实际上是一个持续充实和完善的过程，通过不断发现问题，解决问题，修改，补充，使网站结构更加合理，内容更加丰富，形式更具吸引力。
宣传推广

新建的网站就像新注册的电话号码，不会有人自动找到你，这时你需要适当地进行网站推广工作，这里有多种方法，例如：

a. 在网页中设置适当的META标签；

b. 交换友情链接。这是一种免费而高效的方法，就像在别人商店打上你的广告，在你的商店打上别人的广告，这样一来，当网友访问别人的网站时就会知道你的网站，如果你的广告做得好，大部分网友都会访问你的网站，这是一件无需开支、互利互惠的好事情，推荐使用。

c. 在各大搜索引擎（例如sohu.com，yahoo.com）注册你的网站，这样当别人搜索同类信息时就会发现你的网站；

d. 在新闻公告板上发布新闻稿件；

e. 合理使用Email邮件列表；

f. 付费广告，这是最有效的方法，但需要付费；

g. 在论坛中发帖。这种方法效率不高，也很繁琐，有时也会被删除，所以不推荐。

另外，请务必不要使用发送垃圾邮件来推广个人主页，这样不但不会使别人喜欢你的网站，反而会引起别人的极度反感，这是一种不道德的行为。

至此，网站建设项目完成。
维护

网站建设完成后，并不意味着可以一劳永逸。如果网站规模较大，维护工作也是一个艰巨的任务。当网站内容变得十分庞大时，将会有无数的图片、网页文件等内容，如果其中有一个丢失或链接失败，都会导致网页错误。想想我们制作的那么多图片，如果少了一副会是什么情景？因此，我们必须确保整个网站的“健康”和完整。为了使网站健康、完整，通常在制作新网站之前，都应该在DW中建设一个“本地网站”，也就是自己电脑上的网站副本，这样可以有效减少网站错误。实际上，我们在制作网站时是先做网页后建网站，这种网站建设方法是错误的，正确的方法是先建网站后添加内容。另外，就是要经常检查网站的链接是否有误，我们可以使用DW的SITE程序的SITE菜单中的CHECK LINK SITEWIDE选项来检查网站中是否有断掉的链接，以便及时修复。

另外，我们还应该科学地存放不同类型的文件，例如将网站中的图片都放在一个文件夹里，将网页放在另一个文件夹里。如果将来网站变得很大，我们甚至需要为每个栏目建立一个文件夹，例如将有关MUSIC栏目的文件放在一个文件夹里，将PICTURES栏目的文件放在一个文件夹里，这样一来，会为我们的维护工作减少很多不必要的麻烦！

网站维护最后要说的就是网站的文件备份了，如果电脑发生故障，我们的网站就很可能要瘫痪了，所以经常备份网站文件也是很重要的。

网站成功推出后，长期的维护工作才刚刚开始，我们需要做到的是：及时响应客户反馈；例如可以采取Email自动回复功能，然后尽快解决问题，再次回复；网站流量统计分析和相应对策；尽量推广和使用您的网址；网站内容的及时更新和维护。

五、网站安全问题及对策

防火墙是阻止外部人员访问你的网络的任何设备，这个设备通常是软件和硬件的组合体，它通常根据一些规则来挑选想要或不想要的地址。

首先，绝大多数简单的身份验证过程都是以IP地址为依据的。IP地址是Internet网上最普遍的身份索引，它有静态和动态之分。静态IP地址即固定不变的IP地址；它可以是连接在Internet网上的主机地址。静态IP地址分为几类。其中一类可以通过Whois查询命令得到；并且此类地址主要是Internet网上最高层的主机的IP地址，这些主机可以是域名服务器、Web服务器和“根”主机，并且在InterNIC的Whois数据库中都有它们的注册主机名。另一类静态IP地址被分配给Internet网中的第二和第三层主机（这些机器还有固定的物理地址），然而这些机器不一定拥有注册主机名。但不管怎样，它们有注册的IP地址。动态IP地址是指每次强制分配给不同的上网主机的地址。ISP的拨号服务器中经常使用动态IP地址——节点机每次拨号上网，都会被分配一个不同的IP地址。无论IP地址是静态还是动态的，它都被用于网络传输中。

防火墙最基本的构件既不是软件也不是硬件，而是构建防火墙的人的思想。目前存在着许多类型的防火墙，每种都有各自的优缺点，最常见的一种是“网络层防火墙”。网络层防火墙通常以路由器为基础，换句话说，路由器决定“谁”和“什么”能访问你的网络。这种方案采用了一种所谓的“数据报过滤”技术，即检查到达路由器的外部数据报并作出选择的技术。

以路由器为基础的防火墙要对每个连接请求的源地址（即发出数据报的主机的IP地址）进行检查。确认了每个IP源地址后，防火墙构建者所制定的规则将被实施。基于路由器的防火墙有很快的速度，这是因为它只是简单地检查一下源地址，没有发挥路由器的真正作用，并根本不判断地址是否是假的或伪装的。然而速度的加快是有代价的，基于路由器防火墙将源地址作为索引，这就意味着带有伪造源地址的数据报能在一定程度上对你的服务器进行访问。

基于路由器的网络安全设备需对每个连接请求的源头地址（即发送数据包的主机IP地址）进行核实。核实每个IP源头地址后，防火墙制定者设定的规则将得到执行。基于路由器的网络安全设备运行迅速，因为它只是粗略地检查一下源头地址，并未充分发挥路由器的实际作用，且根本不验证地址的真伪或伪装性。然而，速度的提升是有代价的，基于路由器的网络安全设备将源头地址作为索引，这意味着带有伪造源头地址的数据包可以在一定程度上访问你的服务器。

为确保网站安全，除了在Internet服务管理器的Web站点属性中设置好目录安全性外，还应选用性能优良的防火墙软件。由于时间限制，我们本次采用了网络守护神LockDown 2000，它能清除目前已知（553种）和未知的所有木马、邮件病毒，防止网络炸弹攻击、在线检测和控制所有对本机的访问，还能追踪入侵者，留下其罪证。

LockDown2000是目前全球针对Windows操作系统最有效、最全面的安全防护软件，它能智能地追踪和识别未经授权的用户。LockDown2000能使Internet用户免受最狡猾黑客的攻击，阻止任何人非法入侵你的计算机，保护你的文件不被窥视或删除。如果你需要与他人共享资源，只需列出他们的地址，他们就可以访问你的计算机。LockDown2000的作用就像一道设置在你计算机和Internet之间的安全屏障，它会自动地为你实时监测世界各地的黑客程序。

如果你允许某些人访问你的计算机，LockDown2000会保存一份完整的记录并简要地报告连接到你的计算机的用户的身份。通过反登录，详细地记录他们连接的时间和地址情况，以及详细地记录他们在你计算机里所做的一切。

其主要功能包括：

1. 完全阻止远程用户（可能就是黑客）对你计算机系统的访问；

2. 实时监控和记录远程用户在你计算机里的活动情况；

3. 自动追踪所有连接情况，记录黑客的IP地址、域名和计算机名称；

4. 如果有人已经连接到你的计算机或正在尝试入侵，LockDown2000会用不同的声音发出警告。如果有人未经你的许可，就连接到你的计算机，它立刻会在屏幕上弹出警告窗口和实时监控窗口；

5. 完全控制Internet或局域网的任何连接情况；

6. 可以自动地任意断开与一个用户或所有用户的连接，这对于资源共享的计算机而言，至关重要；

7. 能够记录以前连接到你的计算机的用户资料，限制与你计算机连接的数目；

8. 如果你喜欢使用ICQ与外界联系，LockDown2000能够向黑客发送无效的文件包，从而使你的计算机免受黑客的ICQ炸弹攻击；

9. 可以检查并终止在你限制的程序列表中偷偷运行的任何程序，这种程序可能是一种未知的黑客程序或病毒。

此外，LockDown2000还具有易于安装、与其他程序不冲突的特点。