在创新互联这十多年的网站建设工作中，大部分的时间都与网站建设这件事纠缠不清，最早期刚接触网站时还是用HE5 (汉书) 或Notepad 开始撰写HTML 开发网站，偶尔回想起来感觉当时写网站好辛苦，都没有设计工具或开发工具可用，不过如果换个角度想，其实当时才是最幸福的，你想想今日的网站设计即便有那么多好用的工具支援，但设计网站的过程中有变简单吗？有太多网站设计相关的问题需要被克服，像是跨浏览器兼容性的问题、互动网站的挑战、服务器端的程序开发、针对海量网站要求的架构、AJAX、JSON、HTML5、CSS3、… ，有太多东西要学了。

早期我们在外面接客户做网站时，不时会听到客户提到「做网站很简单啊，你怎么报价这么贵，我随便找个大学生就能做了，而且还能做好几页」，不过这样的话语已经不常再听到了，就是因为网站建设的过程中有太的细节需要面对，一个网站的优劣也往往取决于那些被人忽略的细节之中，因此「网站建设」已经渐渐的不再成为一个杀红了眼的红海市场，而是一个比专业、比信任、比品牌的世界。

但是网站建设极其复杂，有没有什么样的流程能够借镜或参考呢？各位到书局或网路书店搜寻网站建设或网站设计，随便都可以找到上百本至上千本的书，今天笔者希望能够提供一个网站建设的流程给各位参考，有兴趣专研的人可以依据有兴趣的领域进一步研究或了解，对于有兴趣从事网站专案管理的人来说，也可以当成一个参考的依据。

我们基本上将打造网站的过程区分为五大步骤：

1. 网站策​划

2. 网站设计

3. 程序开发

4. 发布网站

5. 内容维护

以下我针对不同的步骤逐一详加说明。

1、网站策划

网站在尚未开始制作之前，我们会在网站策划这个阶段投入许多功夫，因为网站建设需要注意的事情很多，如果一开始的需求不够明确，就很可能会导致未来在制作的过程中不断的修修改改，这这样不断修改的过程中，所增加的沟通成本非常高，其中至少包括有：

• 制作成本：沟通过程中产出任何成品所花费的成本。

• 时间成本：沟通过程中所花费的时间多寡。

• 机会成本：花时间在沟通的过程中所流失的机会。例如：往返沟通所花的时间可否去做其他更有价值的事，例如提升网站设计品质、提高网站安全性、…等。

• 情绪成本：沟通所衍生的复杂情绪以致于影响沟通的品质。

上述的成本之中，唯有「机会成本」与「情绪成本」客户最容易看不见，这两项成本如果没有好好控制，最终影响到的就是网站最后制作出来的品质，所以我们对网站策划的重视程度非常之高，经常会花费许多时间跟客户沟通与确认需求到非常详尽的地步，甚至于会先做出一个完整的假网站（或称为雏形网站）跟客户确认所有要呈现在网站上的资讯与流程栏目。

不过在正式开始网站策划之前，我们首先会做的事情是请客户提供所有想呈现在网站上的资料，并且依据这些资料跟客户一同建立起网站地图(Site Map)，用比较逻辑的方式分类与整理出客户想要呈现的资讯架构，有了这层骨架，我们再去进一步分析其他的细节，就像一棵大树一样，从树干开始，慢慢长出树枝，再慢慢长出树叶。

在分析完资讯架构之后，接下来的步骤就是规划版面配置，其中至少包括有以下任务：

● 网站导览系统规划

设计出一个好用的网站，最重要的就是设计出一个一致的选单系统，其选单系统包括有每页都有的「主选单」与内页才会出现的「次选单」，有些特殊的情况下还会设计出「第三层选单」，但是过多的层次还是有可能会让使用者迷路，因此必须要谨慎评估。

不过网站导览系统并不见得只有「选单系统」而已，任何可以协助使用者浏览整体网站，或协助他们用最短的点击数就能进入到他们想进入的页面，都属于导览系统的一部分。

● 网站使用者介面与互动方式规划

网站使用者介面规划又是另一门专业的领域，这部分规划决定了网站上的资讯要如何呈现在使用者面前，以及网站上的各种元素要如何与使用者互动，在策划的阶段，最有趣的部分就是客户想怎么改就怎么改，要怎样天马行空的想都可以，只要对使用者有益的地方都是好的，但问题就在于怎样才是好的设计！

如果是初学者，我建议各位可以先拓展使用者介面的视野，多看一些使用者介面的范例，在此我特别推荐一个不错的网站UI-Patterns.com，这网站包含了成千上百个各式不同的使用者介面范例，包含详细的使用者介面操作方式与解决的问题，甚至于可以直接在上面留言互动（仅英文），非常值得一看。

● 网站栏目规划

使用者要如何从你的网站从一页进入到下一页，我们都知道使用者在浏览网站时不见得都是从「首页」进入的，任何人都有可能透过搜寻引擎直接进入到你网站内的任何一页，如此一来网站策划师在规划网站栏目时，就不能预先假设网站一定是从「首页」进来的，而是从任何一页要进入到任何另一页都需要进一步规划与设计，才能做出适合使用者浏览的网站栏目规划。

2、网站设计

网站设计不仅仅只是网站的外观而已，除了比较常见的视觉设计外，还包括将网站前端、版面结构设计、CSS 样式规划、HTML 结构整理、跨浏览器兼容性问题、…等等，有些比较厉害的网站设计师还能一并设计跟网站互动的相关JavaScript 程序，不过互动程序这部分有些公司会把这些互动的开发工作交给「网站前端工程师」来处理，不一定是网站设计师的工作。

针对网站设计的部分，还是有个固定的流程来进行，要是顺序乱了，那可不见得只是苦了网站设计师而已，等到网站建设的后期才发现是网站设计的问题，到时可能连程序开发人员都会遭殃。举个例子来说，如果网站设计一开始就先制作HTML 格式的版面给客户，当客户不喜欢这个样式要修改的时候，调整HTML 不管怎么样都不会比直接用Photoshop 来调整版面来的快速，所以当然是先设计平面稿给客户确认，才会进一步将设计好的平面稿前端成HTML 格式，并用CSS 来对网站进行样式设定。

以下是我们常用的网站设计流程：

•  视觉设计（平面稿）

  客户或许看不懂程序、看不懂策划、没有逻辑，但只要是人，就会有对美感的主观判断，在这过程中，只要设计师没办法坚持自己的设计理念，开始被客户意见拖着走，这段过程就会变的非常漫长而难受，有兴趣的人可以看看以下这一则影片，就能体会我想说的：

  如果设计师过于坚持自己的设计理念不愿意妥协，也许坚持到最后的结果是专案在设计阶段就失败了，要不然就是设计师被撤换，这些都是不是建设团队乐见的。也因此视觉设计这一环可以说是蛮艰苦的工作，而这也是网站设计师经常无法平静度过的一关，在坚持与妥协之间是门很深的艺术，当然也是一门沟通与表达的艺术。

  虽然笔者本身并非视觉设计师，但在此我还是提供几个给设计师的建议，或许对正在从事网站设计的人有所帮助：

  设计师无论功力多深或多浅，一定要能对客户有效表达自己的设计理念

  多培养沟通能力，除了训练自己设计的功力外，口语表达与简报能力一样不能少

  多吸收一些设计的相关资讯，平时也要多浏览各国不错的网站，培养美感与视野

  要有笔记的习惯，把自己看到喜欢的网站记录下来，甚至于写成文章都是不错的方法

  要有自信，在客户面前表达设计理念一定要立场坚定，你越肯定的说，客户就会越容易听你的

  ● HTML 结构设计

  当网站策划的清楚且完整，资讯架构照理说会十分清晰，也因此你的网站上要怎样出现各种资讯就能被有效的分区或分类，所以在进行网站前端之前，应该先规划HTML结构，例如网站会有页首()、页尾()、然后还有导览列()或称主选单()、放置LOGO 与网站主要内容区、 …，这些不同的区域除了可以设定不同的网站元素（或称为标签）外，也应该给予适当的id 属性。

  
  

  之外，挑选适当的HTML元素(Tag)与设定正确的HTML 阶层关系也很重要，举个例子来说：如果要显示一个文章段落可以使用应该，特别标示一段文字应该用 ，要显示一个按钮且包含连结时不应该在的前后加上 元素等等，这些在网站设计的相关书籍都会提及，网站设计师必须特别注意。

  ● 网站前端、版面结构设计、CSS样式规划

  这部分也是另一门专业，有许多设计师从平面设计转向网站设计的过程中非常痛苦，因为从事平面设计很容易天马行空的想，想到什么就能透过各式设计工具做出来，但是到了网站设计的领域，还需要有很严谨的逻辑结构，才能设计出一个好的网站。

  像是网站前端的工作，有些设计师为了求方便会以

  来排版，不过新一代的网站设计师基本上都会透过CSS 进行版面配置，因为透过CSS 来进行版面配置的灵活度与网站亲和力(Accessibility) 都比较高。如果网站设计师能了解网格(Grid) 的概念，透过一些好用的CSS Framework 来设计版面，不但网站的问题会少很多，网站制作的速度也会加快，只是这部分的工作几乎都是逻辑严谨的设计，必须从视觉设计开始就必须注意才行。

  
  

  以下推荐几套不错的CSS Framework 供各位参考：

  YUI3 CSS Grids (http://developer.yahoo.com/yui/3/cssgrids/)

  Less Framework 4 (http://lessframework.com/)

  960 Grid System (http://960.gs/)

  Blueprint (http://www.blueprintcss.org/)

  Baseline (http://baselinecss.com/)

  52framework (http://www.52framework.com/)

  然而，一个妥善规划的CSS 样式表也是非常重要的事，一个好的CSS 样式表必须要有清楚的结构、良好易懂的命名规则，一切的目的就是要让整体网站的样式结构清楚易懂，让网站在后续开发的过程中能方便的使用与扩充。

  ● 跨浏览器兼容性测试

  网站设计要进入下一个阶段之前，还必须做好跨浏览器兼容性测试的工作，这个工作非常重要且必要，一个专业的网站设计必须能在各种不同的浏览器下能有一致的呈现，我们都知道要做到这一点并不容易，但是能做到多好，就是个人的功力了。

  我们曾经遇过一个专案，客户对设计的品质十分要求，因此在「视觉设计」的阶段都是客户负责的，剩下的HTML 结构设计与网站前端当然是我们的工作，由于客户端的设计师并不会设计网站，不了解网站设计有很多需要处理的细节与限制，像是跨浏览器之前的兼容性就是个非常头疼的问题，但他们要求我们设计出来的网站在指定的浏览器下连差一个Pixel 都不行，这段过程真的非常的辛苦，完全是一种艺术层级的展现。

  目前市面上主流的浏览器有好几种，像是Internet Explorer、Google Chrome、Firefox、Safari、Opera 等等，不过不同的浏览器之间多少会有些不同的特性，还有浏览器在实做HTML 、CSS 的时候也会有些小差异，这些小差异有时候很烦人，而且有许多兼容性的问题还会牵扯到CSS 与JavaScript 的状况，这部分经常会需要有多年网站设计经验的人才有办法解决，这些枝微末节的问题非常多，经验也不容易汇整，网路上虽然可以查到不少资料，但是都非常片段，只能遇到一个问题才解决一个问题，用时间换取经验。

  
  

3、程序开发

提到网站建设的程序开发，我想比较大宗的程序需求就是做内容管理，将网站上预先规划好的内容储存在资料库中，并透过一个所谓的「后端系统」或成为「内容管理系统」来管理这些储存在资料库中的资料。至于前台的部分，大多不太复杂，我们会透过开发人员将资料库中的资料读取出来，并适当的将资料放置到网站HTML里。

这时可能会有人问到，在程序开发的阶段需要对网站版面进行调整吗？我经常被问到的一种情况是，开发人员在接到网站设计师给的版型后进行套版，但是网站版型(HTML, CSS) 在套上程序之后，网站就大乱了，而大部分的网站又已经套上的程序码，不太可能再由网站设计师接手修改，最后变成是由程序设计师苦命的修正网站的HTML与CSS等等，如果网站设计师的CSS样式规划没有章法，又没有好记或容易理解的命名规则，而程序设计师在套版时并没有像网站设计师有好用的网站设计工具，你可以想见工程师在调整版面的过程中经常是痛苦的，因为他们要面对的是一连串与版面相关的细节，然后版面被调整坏了还会被PM骂说：「你为什么把网站弄乱了？」，如果问网站设计师，网站设计师还会说：「不会啊，我的版面做出来的时候是好的，是工程师把版面弄坏的。」你知道知道身为程序开发人员的苦了吧！

这个文章段落虽然是「程序开发」的部分，但是我还是要针对这种经常遇到的版面问题提醒网站设计师有以下注意事项：

• 在设计版面时，如果知道网站里有某部分资料是会随着资料库的资料多寡而异动的，建议在设计版型时可以尽量塞入假资料上去，让文字尽量填满版面，这样才不会造成因为版面在讯息量过多时导致破版（版面被破坏）的情况。

• 相对的，如果网站有某部分的内容也许会有「无资料」的情况，网站设计师也应该针对这种无资料的情况额外设计一个页面，以确保程序设计师在套版完成后不会发生破版的情况。

针对假资料的部分，笔者的部落格曾经介绍过相关好用工具，有兴趣的人可以参考以下网址：

• 介绍好用工具：乱数假文产生器（包括中文版与英文版）

• http://bit.ly/Lorem-Ipsum

在程序开发这个阶段，一些比较常见的步骤有：

• 资料库分析与设计

• 系统设计、系统架构分析

• 选择适当的开发工具( 例如Visual Studio 2010 )

• 选择适当的开发架构与程序语言( 例如ASP.NET MVC 3 与C# 4.0 )

• 后台内容管理介面开发

• 前台程序套版与UI 互动设计

• 测试与除错

  
  

4、发布网站

在网站建设并测试完成后，接下来就准备要发布网站了，你的网站要让全世界的人看见有很多种方式，像是拉专线自建机房、主机代管、专属主机、虚拟主机、网站代管、云端空间、…就是各种不同让网站上线的方式，建设的成本也不一，通常会依据客户的需求来决定用何种方式让网站上线。

另外，将网站的档案与资料库发布到远端主机的方式也有好几种，比较常见的是透过FTP上传档案，另外还有FrontPage Server Extension也是之前经常使用的上传方法，最近还有微软新一代的发布工具Web Deploy也是另一种网站发布的方式。

发布网站一般来说会有许多复杂的安装步骤与设定程序，我个人的习惯都是把安装的步骤与设定的过程做成一份巨细靡遗、图文并冒的标准作业程序（SOP），尽可能的做到「按图施工?保证成功」的水准，这样才能保障未来在重新部署网站时不会发生任何意外。

就开发工具来说，Visual Studio 2010 的单键发行(One-Click Publish)功能与微软的Web Deploy 工具就是非常适合用来简化整体网站发布的流程，像我们公司现在在替客户发行网站时，基本上真的已经做到「按下一个按键就完成网站发布的动作」，非常方便。

对于一些较为简单的网站，如果能透过Microsoft WebMatrix工具来进行网站管理，并结合Web Deploy发布方法，也能做到有效简化发布网站的复杂度。

5、内容维护

一般除了公司的形象网站外，不太可能让网站上线之后就再也不去更动它，所以当网站上线后通常会有内容维护的需求，网站上的内容非常多元，例如文字、图片、影片、动画都很有可能从网站上线后必须持续的更新，一般来说网站通常都会建设后台内容管理系统，以方便让不太熟悉网站设计的客户进行内容维护，这也是一般客户较能接受的方式，因此一个好的内容管理系统不可或缺。

除了内容更新之外，一个网站的外观看久了总会腻，所以网站上线几年后，客户通常会思考是否要将网站进行改版或对外观进行重新设计，如果网站设计的部分做的不错的话，通常不太需要更动到程序码，只要修改CSS部分，其实就能让整个网站焕然一新。

不过网站也是有生命周期的，通常过个几年客户公司的体质也变化了（变大或变小），需求通常也会与多年前不同，所以我们比较常遇到的状况都是客户要求整个网站重新打造，不仅只是网站设计的部分重新而已，也许从资讯架构的部分就完全不同，到时就要重新走一次完整的网站建设流程。

内容维护不只是「内容」而已，还有许多其他能提升网站品质的工作要做，例如网站内容的搜寻引擎好化（SEO）就需要网站管理者针对网站的内容进行关键字的规划与设计，以及控制网站与其他网站之间的连结关系，这些都会直接影响到网站导入的流量。另外，透过一些统计分析数据，也能清楚了解所有网站的访客都是从哪几页进来的、访客来自于哪些国家或地区，还能分析每天的流量多寡的变化，这些资讯都有助于网站管理者要如何对内容进行维护，未来还能当作网站改版的参考依据。

结语

讲到这里你应该可以发现网站建设不是件简单的事，要打造出一个好的网站通常需要多人同心协力，结合不同的专业知识与领域并才有可能做出一个好网站，不同的专业人才之间彼此还需要互相了解彼此之间的困难与限制，在工作上才能彼此互补，当培养出好的团队默契后，彼此之间更能够有效的专业分工，做各自擅长的工作。

在团队中维持良好的沟通品质真的非常重要，因为网站策划、网站设计、程序开发这三个阶段的工作彼此息息相关，需要非常密集的协调与沟通，如果沟通品质不佳，直接影响到的就是网站最后产出的品质。

打造好网站的过程虽然辛苦，但透过一些经验的累积与归纳出来的标准流程，还是能够有效降低网站建设的复杂度，并且确保网站建设的成果至少能有一定的水准之上。

当前题目：如何建设自己的网站？建站流程是什么？
文章地址：/news0/80000.html

成都网站建设公司_创新互联，为您提供标签优化、用户体验、网站设计、搜索引擎优化、App开发、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联