摘要 本文概述了互联网站的规划与设计的方法，介绍了网站设计规划的规范,及所需的关键技术,对电信系网站的构建作了系统分析,提出了总体设计方案和制作步骤,而且论述了构建网站过程中所遇到的技术难题及解决办法。
关键词 网站规划 网站设计 网站维护 ASP
一、引言
在当今全球信息化大潮中，互联网（即因特网——Internet）异军突起，给20世纪末的人类社会增添了无限的活力，成为现代社会生活中一道亮丽的风景线。 互联网带给人们的不仅仅是技术，而是一种以信息为标志的崭新的生活方式。 他正在改变着人们的工作和生活方式。有人曾以“围城”比喻互联网，但所不同的是，“外面的人想进去，里面的人不想出来。”互联网为什么有这么大的魅力呢？这不仅与人们日益增长的文化生活有关，更重要的是与互联网的技术不断更新和革命有关。
一个网站的整体规划和设计的好坏是它发展的重要之处， 也是它吸引人们浏览的所在之处。Internet/Intranet技术的日益发展，使人们认识到了Internet/Intranet的优势，更使得数据库与web的连接成为数据库开发方面的热门技术之一。
通常情况下，通过浏览器看到的网页大多是静态的。所谓“静态”，是指网站的网页内容“固定不变”， 当浏览器通过互联网的HTTP（Hypertext Transport Protocol）协议向Web服务器请求提供网页时，服务器仅仅是将原来设计好的静态HTML文档传给浏览器。其页面内容使用的仅仅是标准的HTML代码，最多再加上流行的GIF89A 格式的动态图片，比如产生几只小猫小狗跑来跑去的动画效果。 若网站维护者要更新网页的内容，就必须手动更新所有的HTML文档。
静态网站的致命弱点就是不易维护。为了更新网页的内容， 网站维护者必须重复制作HTML文档，随着网站内容和信息量的日益扩增，可以想象这是多么复杂繁琐的工作。那么，什么是动态网站呢？所谓“动态”，并不是指放在网页上的图片会动，动态页面应具有以下几个特点：
（一）.交互性：即网页能根据客户的要求和选择而动态改变和响应，浏览器即作为客户端界面，这是今后Web发展的大势所趋。
（二）.自动更新：即无需手动更新HTML文档， 就能自动生成新的页面，从而大大减少工作量。
（三）.因时因人而变：即当不同的时间、不同的人访问同一网址时能产生不同的页面，这一点对于需要对使用者授权的网站尤其适用。
随着的Internet迅速发展，不管是专业的ISP(Internet服务提供者)和ICP(Internet内容提供者)，还是一般的政府机关、银行、交通部门、学校、医院、服务者，甚至是每个人，都在积极寻求在Internet上发布信息，提供新型的网上管理和服务。可以说，网站设计和网站的编辑正成为新兴的热门行业。
二、网站的系统分析
（一）.项目立项
我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。
（二）.客户的需求说明书
收稿日期 ： 2001年5月25
作者简介：马彦文，西北第二民族学院电子与信息工程系97通信专业学生。
第一步是需要客户提供一个完整的需求说明。很多客户对自己的需求并不是很清楚，需要您不断引导和帮助分析。有些客户可能对自己建什么样的网站根本就没有明确的目的，以及他的网站建好后来干什么也是一无所知，为了客户能有明确的目的我们需要耐心说明，仔细分析，挖掘出客户潜在的，真正的需求。这样对大家都有好处，我们的宗旨应该是“客户明明白白，双方高高兴兴。”对客户和自己都是一种负责。
配合客户写一份详细的，完整的需求说明会花很多时间，但这样做是值得的，而且一定要让客户满意，签字认可。把好这一关，可以杜绝很多因为需求不明或理解偏差造成的失误和项目失败。糟糕的需求说明不可能有高质量的网站。那么需求说明书要达到怎样的标准呢？简单说，包含下面几点：正确性：每个功能必须清楚描写交付的功能；可行性：确保在当前的开发能力和系统环境下可以实现每个需求；必要性：功能是否必须交付，是否可以推迟实现，是否可以在削减开支情况发生时"砍"掉；简明性：不要使用专业的网络术语；检测性：如果开发完毕，客户可以根据需求检测。
三、建设方案
（一）.建站理念
(1)预早筹划
设计主页未必很艰难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先 确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。
(2)尽量精简
主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务 、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难令他们深入观赏。
(3)尽量简朴
现今大部分用户那是用调制解调器接驳万维网，所以他们一般都要花很多时间等待主页传送到自己的系统。主页上的图形应力求简朴， 避免耽搁用户的时间。图像愈大、颜色愈深，传送页面的时间愈长。这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种，页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑,觉得非要放入大幅的图画不可；应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过十至十五秒，很多用户就会等得不耐烦。如果情况许可，最好先测试你的主页在稍差的条件下的传送速率，14.4千波特的调制解调器，或透过 Prodigy 等网上服务接驳万维网等。
此外、还须注意配合最低档的设备，例如标准的小型显示器，不要假设人人都用高解像度的大荧幕。运用先进浏览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。
(4)善用图像
用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。最佳的图像应集美观与传讯于一身。注意图画可以弥补文字之不足，但并不能够完全取代文字。很多用户把浏览软件设定为略去图像，以求节省时间他们只看文字。因此，制作主页时，必须注意将图像所带的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页，确保其传达到所有信息。
(5)使主页易于漫游
主页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司、产品、服务、支援等。用六至八个联接项目最为理想。
此外，你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，你必须在广度和深度之间求取平衡。如果你的网址上有太多信息，你可能要编制较长的页面或使用更多联接项目，甚至可能要建立多个主页、 使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息，肯定受用户欢迎。
假若你有充足的资源，便应找一位专家来评估你设计的主页是否方便易用。设法找一些对主页陌生的用户，来试用你的初步制成品。
(6)提网协领
主页—般须载有以下事项：
标题,此标题须清楚无误地标示你的网站。标题可以是名称、标语徽号或图像。
电子邮件地址 ,以便用户有问题时，可以通知你。
版权资料,这是适用于主页内容的版权规定。你可以在主页上标示一句简短的版权声明，用联接方法带出另—个载有详细使用条款的页面,这样可以避免主页显得乱糟糟。
联络资料 ,列出通讯地址电话号码等。
(7)循环利用现有信息
制作主页时，通常都毋须从头做起，因为有许多现成的文字、图画等资料可供我们重用，例如宣传小册、公关文件、技术手册、资料库等。很多情况下，只要用少许功夫、就可把这些材料转到网页上使用。
(8)保持新鲜感
万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来浏览不妨在页头以大字标题宣布新消息。可以定期改变主页上的图像、或更改主页的式样。趣味性的事项可以持续或自动更新、例如列出会浏览你的网站的人次。
同样，为保持新鲜感，应时刻确保主页提供的是最新信息。将更新主页信息的工作纳入既定的公关及资料编制计划内，亦即当你使用传统方法(例如新闻稿)传递的新信息时出现在你的主页上。确保连接项目运作畅顺，以免用户在荧幕上收到“无法查阅所需档案”的信息而大感没趣。
(9)贯彻诺言
做不到的事情，千万不要轻易承诺。切勿随便叫用户做出回应行动，例如要求用户填交订贷表格，除非你已制订好处理这些订单的方法和交货程序。如果在网上列出联络电话,就要确保自己能够迅速解决来电者的问题。
(10)吸引用户浏览
既然绞尽脑汁把主页弄得美观实用，没有人来欣赏就太可惜了。为吸引所有网中人来浏览，必须使主页易于寻找。通知其他网站(例如题材相关的网站)，他们可能想连接你的主页。安排将自己的网址列在所有相关的网址目录、索引、查找程序和“What’s new”页面上。尽量将网址传播开去，使之出现在 Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。
在网站上，于每个页面设置“home”按键，方便用户随时返回主页。
万维网充满生命力、正在不断演进，所以一些现时适用的经验，将来未必合用。举例来说，将来家居用户有高速线路接驳Internet，就可以消除数据传输目前的所受的限制、使主页的篇幅可以更长，页面更华丽。新的浏览功能、例如Sun的 HotJava浏览软件所提供的先进功能、将使万维网更强劲和更方便沟通。 HotJava将主页由静态的文件转为动态的实体， 提供诸如即时制作动画、背景音乐、即时存入资料(例如不断更新股票价格)、话音广播等功能、为网上用户带来更多乐趣。有好的主页，还须有精良的设备支持。网站服务器不断推陈出新，使建设网站的工作愈来愈容易。 以 S u n的Netra Internet Server为例、全套设备包括上网所需的软硬件,以及建立完善的高效能网站所需购各种软硬件设施。这些发展为万维网及其用户开拓了壮阔的前景。建设网站的上作，从未如此容易过。
（二）.网站总体设计
在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在什么样的硬件环境；需要多少人，多少时间；需要遵循的规则和标准有哪些。同时需要写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；如果有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。
在总体设计出来后，一般需要给客户一个网站建设方案。很多网页制作公司在接洽业务时就被客户要求提供方案。那时的方案一般比较笼统，而且在客户需求不是十分明确的情况下提交方案，往往和实际制作后的结果会有很大差异。所以应该尽量取得客户的理解，在明确需求并总体设计后提交方案，这样对双方都有益处。网站建设方案的包括以下几个部分：.客户情况分析；网站需要实现的目的和目标；网站形象说明；网站的栏目板块和结构；网站内容的安排，相互链接关系；使用软件，硬件和技术分析说明；开发时间进度表；宣传推广方案；维护方案；制作费用；本公司简介：成功作品，技术，人才说明等。当您的方案通过客户的认可，那么可以开始动手制作网站了。但还不是真正意义上的制作，你需要进行详细设计。
（四）.网站的制作规范探讨
(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.页面标准按800*600分辨率制作，实际尺寸为778*434px
b.每个标准页面为A4幅面大小，即8.5X11英寸
c.大banner为468*60px，小banner为88*31px。
四、网站的设计制作
1.整体形象设计
在程序员进行详细设计的同时，网页设计师开始设计网站的整体形象和首页。
整体形象设计包括标准字，Logo，标准色彩，广告语等。 首页设计包括版面，色彩，图像，动态效果，图标等风格设计，也包括banner，菜单，标题，版权等模块设计。首页一般设计1-3个不同风格。
2.开发制作
本次网站规划设计采用软件工程的设计方法，设计小组在系统分析和总体设计的基础上，将设计任务分解，分配到设计组的每个成员，各模块有设计组成员单独承担设计和调试，既有分工，又有协作，最后将各模块上载到服务器上，做链接和整体的调试。
3.调试完善
各模块初步完成后，上传到服务器，对网站进行全范围的测试。包括速度，兼容性，交互性，链接正确性，程序健壮性，超流量测试等，发现问题及时解决并记录下来。
网站建设实际上是一个不断充实和完善的过程，通过不断的发现问题，解决问题，修改，补充，使网站结构趋向合理，内容更加丰富，形式更富有感染力。
4.宣传推广
刚刚建成的网站就好像一个新注册的电话号码，没有人会自动找上门来，这时你就需要适当地做一些网站推广工作了,这里有很多方法，例如：
a.网页里设置适当的META标签；
b.交换友情链接。这是个免费而高效的办法，就好比在别人商店打上你的广告，在你的商店打上别人的广告，这样一来当网友参观别人的网站时就知道你的网站了，如果你的广告做的好，他一多半都会参观你的网站，这是件无须开支、互利互惠的好事情，推荐使用。
c. 在各大搜索网站（例如sohu.com yahoo.com）注册你的网站，这样当别人在搜索同类的信息时就会发现你的网站；
d.备新闻稿件在各新闻公告板发表；
e.合理使用Email邮件列表；
f.付费广告，这个办法最有效了，但它是付费的；
g.在论坛里贴条子。这个办法效率不高，也很累，有时也会被别人删除掉，所以不推荐。
另外还需要说明的是，请千万不要使用发垃圾邮件来推广个人主页，这样不但不会使别人喜欢你的网站，反而会引起别人的极度反感，这是一种不道德的行为。
至此，网站项目建设完毕。
Git 是一个少有的能将如此多的现代计算封装到一个程序之中的应用程序，它可以用作许多其他应用程序的计算引擎。虽然它以跟踪软件开发中的源代码更改而闻名，但它还有许多其他用途，可以让你的生活更轻松、更有条理。在这个 Git 系列中，我们将分享七种鲜为人知的使用 Git 的方法。
创建一个网站曾经是极其简单的，而同时它又是一种黑魔法。回到 Web 1.0 的旧时代（不是每个人都会这样称呼它），你可以打开任何网站，查看其源代码，并对 HTML 及其内联样式和基于表格的布局进行反向工程，在这样的一两个下午之后，你就会感觉自己像一个程序员一样。不过要让你创建的页面放到互联网上，仍然有一些问题，因为这意味着你需要处理服务器、FTP 以及 webroot 目录和文件权限。虽然从那时起，现代网站变得愈加复杂，但如果你让 Git 帮助你，自出版可以同样容易（或更容易！）。
Hugo 是一个开源的静态站点生成器。静态网站是过去的 Web 的基础（如果你回溯到很久以前，那就是 Web 的全部了）。静态站点有几个优点：它们相对容易编写，因为你不必编写代码；它们相对安全，因为页面上没有执行代码；并且它们可以非常快，因为除了在页面上传输的任何内容之外没有任何处理。
Hugo 并不是唯一一个静态站点生成器。 Grav 、 Pico 、 Jekyll 、 Podwrite 以及许多其他的同类软件都提供了一种创建一个功能最少的、只需要很少维护的网站的简单方法。Hugo 恰好是内置集成了 GitLab 集成的一个静态站点生成器，这意味着你可以使用免费的 GitLab 帐户生成和托管你的网站。
Hugo 也有一些非常大的用户。例如，如果你曾经去过 Let’s Encrypt 网站，那么你已经用过了一个用 Hugo 构建的网站。
Hugo 是跨平台的，你可以在 Hugo 的入门资源 中找到适用于 MacOS、Windows、Linux、OpenBSD 和 FreeBSD 的安装说明。
如果你使用的是 Linux 或 BSD，最简单的方法是从软件存储库或 ports 树安装 Hugo。确切的命令取决于你的发行版，但在 Fedora 上，你应该输入：
通过打开终端并键入以下内容确认你已正确安装：
这将打印 hugo 命令的所有可用选项。如果你没有看到，你可能没有正确安装 Hugo 或需要 将该命令添加到你的路径 。
要构建 Hugo 站点，你必须有个特定的目录结构，通过输入以下命令 Hugo 将为你生成它：
你现在有了一个名为 mysite 的目录，它包含构建 Hugo 网站所需的默认目录。
Git 是你将网站放到互联网上的接口，因此切换到你新的 mysite 文件夹，并将其初始化为 Git 存储库：
Hugo 与 Git 配合的很好，所以你甚至可以使用 Git 为你的网站安装主题。除非你计划开发你正在安装的主题，否则可以使用 --depth 选项克隆该主题的源的最新状态：
现在为你的网站创建一些内容：
使用你喜欢的文本编辑器编辑 content/posts 目录中的 hello.md 文件。Hugo 接受 Markdown 文件，并会在发布时将它们转换为经过主题化的 HTML 文件，因此你的内容必须采用 Markdown 格式 。
如果要在帖子中包含图像，请在 static 目录中创建一个名为 images 的文件夹。将图像放入此文件夹，并使用以 /images 开头的绝对路径在标记中引用它们。例如：
你可以在 themes.gohugo.io 找到更多主题，但最好在测试时保持一个基本主题。标准的 Hugo 测试主题是 Ananke 。某些主题具有复杂的依赖关系，而另外一些主题如果没有复杂的配置的话，也许不会以你预期的方式呈现页面。本例中使用的 Mero 主题捆绑了一个详细的 config.toml 配置文件，但是（为了简单起见）我将在这里只提供基本的配置。在文本编辑器中打开名为 config.toml 的文件，并添加三个配置参数：
在你准备发布之前不必（预先）在互联网上放置任何内容。在你开发网站时，你可以通过启动 Hugo 附带的仅限本地访问的 Web 服务器来预览你的站点。
打开 Web 浏览器并导航到 http://localhost:1313 以查看正在进行的工作。
要在 GitLab 上发布和托管你的站点，请为你的站点内容创建一个存储库。
要在 GitLab 中创建存储库，请单击 GitLab 的 “Projects” 页面中的 “New Project” 按钮。创建一个名为 yourGitLabUsername.gitlab.io 的空存储库，用你的 GitLab 用户名或组名替换 yourGitLabUsername。你必须使用此命名方式作为该项目的名称。你也可以稍后为其添加自定义域。
不要在 GitLab 上包含许可证或 README 文件（因为你已经在本地启动了一个项目，现在添加这些文件会使将你的数据推向 GitLab 时更加复杂，以后你可以随时添加它们）。
在 GitLab 上创建空存储库后，将其添加为 Hugo 站点的本地副本的远程位置，该站点已经是一个 Git 存储库：
创建名为 .gitlab-ci.yml 的 GitLab 站点配置文件并输入以下选项：
image 参数定义了一个为你的站点提供服务的容器化图像。其他参数是告诉 GitLab 服务器在将新代码推送到远程存储库时要执行的操作的说明。有关 GitLab 的 CI/CD（持续集成和交付）选项的更多信息，请参阅 GitLab 文档的 CI/CD 部分 。
你的 Git 存储库已配置好，在 GitLab 服务器上构建站点的命令也已设置，你的站点已准备好发布了。对于你的第一个 Git 提交，你必须采取一些额外的预防措施，以便你不会对你不打算进行版本控制的文件进行版本控制。
首先，将构建你的站点时 Hugo 创建的 /public 目录添加到 .gitignore 文件。你无需在 Git 中管理已完成发布的站点；你需要跟踪的是你的 Hugo 源文件。
如果不创建 Git 子模块，则无法在 Git 存储库中维护另一个 Git 存储库。为了简单起见，请移除嵌入的存储库的 .git 目录，以使主题（存储库）只是一个主题（目录）。
请注意，你 必须 将你的主题文件添加到你的 Git 存储库，以便 GitLab 可以访问该主题。如果不提交主题文件，你的网站将无法成功构建。
你也可以像使用 回收站 一样使用 trash：
现在，你可以将本地项目目录的所有内容添加到 Git 并将其推送到 GitLab：
将代码推送到 GitLab 后，请查看你的项目页面。有个图标表示 GitLab 正在处理你的构建。第一次推送代码可能需要几分钟，所以请耐心等待。但是，请不要 一直 等待，因为该图标并不总是可靠地更新。
当你在等待 GitLab 组装你的站点时，请转到你的项目设置并找到 “Pages” 面板。你的网站准备就绪后，它的 URL 就可以用了。该 URL 是 yourGitLabUsername.gitlab.io/yourProjectName。导航到该地址以查看你的劳动成果。
如果你的站点无法正确组装，GitLab 提供了可以深入了解 CI/CD 管道的日志。查看错误消息以找出发生了什么问题。
Hugo（或 Jekyll 等类似工具）只是利用 Git 作为 Web 发布工具的一种方式。使用服务器端 Git 挂钩，你可以使用最少的脚本设计你自己的 Git-to-web 工作流。使用 GitLab 的社区版，你可以自行托管你自己的 GitLab 实例；或者你可以使用 Gitolite 或 Gitea 等替代方案，并使用本文作为自定义解决方案的灵感来源。祝你玩得开心！
via: https://opensource.com/article/19/4/building-hosting-website-git
作者： Seth Kenlon 选题： lujun9972 译者： wxy 校对： wxy
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）