在做网站的时候，许多客户要求我们介绍一下网站建设相关方面的知识。今天，为大家介绍一下一点基础知识。这样在制作网站时可以事半功倍，制作出令人满意的网站。首先将介绍网页基本知识、网页的基本构成元素、如何设计网页，接着介绍网页设计的常用软件 Dreamweaver 、Flash和 Photoshop，最后介绍动态网站技术，如网页标记语言 HTML、网页脚本语言 javascript和动态网页编程语言，为后面设计和创建完整的网站打下良好的基础。

　　一． 网页基本知识

　　1．什么是Internet

　　Internet是一个全球墟履计算机互联网骆，中文名称为"国际互联网"或"因特网"，它集现代通信技术和现代计算机技术于一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。Internet将各种各样的物理网骆联接起来，构成一个整体，而不论这些网骆类型的异同、规模的大小和地理位置的差异。 Internet是全球最大的信息资源库，几乎包括了人们生活的方方面面，如教育、科研、商业、工业、出版、文化艺术、通信、广播电视、娱乐等。经过多年的发展，互联网已经在社会的各个方面为全人类提供便利。电子邮件、即时消息、视频会议、网骆日志、网上购物等已经成为越来越多人的一种生活方式。

　　2．什么是网站

　　网站是因特网上的一个信息集中点，可以通过域名进行访问。网站要存储在独立服务器或者服务器的虚拟主机上才能按受访问。网站是有独立域名和独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件。网站不一定要有很多网页，只要有独立域名和空间，哪怕只有一个页面也叫网站。

　　3．什么是Web服务器

　　Web服务器就是在Web站点上运行的应用程序，用户只有把设计好的网页放到Web服务器上才能被其他用户浏览。Web服务器主要负责处理浏览器的请求。当用户使用浏览器请求读取 Web站点上的内容时，浏览器会建立一个 Web链接，服务器接受链接，向浏览器发送所要求的文件内容，然后断开链接。

　　4．什么是静态网页

　　网页又称 HTML文件，是一种可以在WWW上传输、能被浏览器认识和翻译成页面并显示出来的文件。 静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容，其特点如下：

　　a、网页内容不会发生变化，除非网页设计者修改了网页的空容；

　　b、不能实现和浏览网页的用户之间的交互，信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容。静态网页的浏览过程。

　　5．什么是动态网页

　　所谓动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言不同，如常见的有.asp、.jsp、.php、.perl、.cgi等形式为后缀。动态网页能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、留言板和购物系统通常用动态网页实现。 动态网页的制作比较复杂，需要用到ASP、PHP、ISP和ASP.NET等专门的动态网页设计语言。动态网页浏览过程。

　　二．网页的基本构成元素

　　1．网站Logo

　　网站Logo也称为网站标志，网站标志是一个站点的象征，也是一个站点是否正规的标志之一。网站的标志应体现该网站的特色、内容及其内在的文化内涵和理念。成功的网站标志有着独特的形象标识，在网站的推广和宣传中将起到事半功倍的效果。网站标志一般放在网站的左上角，访问者一眼就能看到它。网站标志通常有3种尺寸：88×31像素、120×60像素和120×9像素。标志的设计创意来自网站的名称和内容，大致分以下3个方面：
　　a、网站有代表墟履人物、动物、花草，可以用它们作为设计的蓝本，加以卡通化的艺术化。

　　b、对于一些专业性网站，可以用本专业有代表墟履物品作为标志，如中国银行的铜板标志、奔驰气车的方向盘标志。

　　c、最常用和最简单的方式是用自己网站的英文名称做标志。采用不同的字体、字符的变形、字符的组合可以很容易地制作出自己的标志。

　　2．网站的Banner

　　网站Banner即横幅广告，是互联网广告中最基本的广告形成。Banner可以位于网页顶部、中部或底部任意一处，一般横向贯穿整个或者大半个页面。网站Banner常见的尺寸是480×60像素或233×30像素，它使用GIF格式的图像文件，既可以使用静态图形，也可以使用动画图像。除普通GIF格式外，采用Flash能赋予Banner更强的表现力和交互内容。网站Banner首先要美观，这个小的区域如果设计得非常漂亮，让人看上去很舒服，那么即使Banner不是浏览者所要看的内容，或者是一些他们可看可不看的东西，他们也会很有兴趣地去看看，点击就是顺理成章的事情了。网站Banner还要与整个网页协调，同时又要突出、醒目，用色要同页面的主色相搭配，如主色是浅黄，广告条的用色就可以用一些浅的其他颜色，切忌用一些对比色。

　　3．导航栏

　　导航栏是网页的重要组成元素，它的任务是帮助浏览者在站点内快速查找信息。好的导航系统应该能引导浏览者浏览网页而不迷失方向。导航栏的形式多样，可以是简单的文字链接，也可以是设计精美的图片或是丰富多彩的按钮，还可以是下砬菜单导航。 一般来说，网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置一般有4种：在页面的左侧、右侧、顶部和底部。有时候在同一个页面中运用了多种导航。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用，达到页面总体的协调一致。

　　4．文本

　　网页内容是网站的灵魂，而文本又是网页内容最主要的表现形式，无论制作网页的目的是什么，文本都是网页中的最基本和必不可少的元素。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。 一个内容充实的网站必然会使用大量的文本。良好的文本格式可以创建出别具特色的网页，激发读者的兴趣。为了克服文字固有的缺点，人们赋予了文本更多的属性，如字体、字号、颜色等，通过不同格式的区别，突出显示重要的内容。此外，还可以在网页中设置各种各样的文字列表来明确表达一系列的项目。这些功能给网页中的文本增加了新的生命力。

　　5．图像

　　图像在网页中具有提供信息、展示形象、装饰网页、表达个人情趣和风格的作用。图像是文本的说明和解释，在网页适当位置放置一些图像，不仅可以使文本清晰易读，而且使得网页更加有吸引力。现在几乎所有的网站都使用图像来增加网页的吸引力。可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用得最广泛的是GIF和JPEG两种格式。

　　6．Flash动画

　　Flash动画具有简单易学、灵活多变的特点，所以受到很多网页制作人员的喜爱。它可以生成亮丽夺目的图形界面，而文件的体积一般只有5~50KB。随着Actionscript动态脚本编程语焰履发展，Flash已经不再局限于制作简单的交互动画程序，通过复杂的动态脚本编程可以制作出各种各样有趣、精彩的Flash动画。由于Flash动画具有很强的视觉冲击力和听觉冲击力，因此一些公司网站往往会采用Flash制作相关的页面，借助Flash的精彩效果吸引客户的注意力，从而达到比以往静态页面更好的宣传效果。

　　三．如何设计网页

　　网页设计是指对网站整体页面的设计，包括页面的风格、配色、布局和内容等。好的网页设计，不仅能增加网站的实用性，也可为访问者留下深刻的印象，有助于提高网站的访问量。

　　1．网页设计的任务

　　网页设计的任务，是指设计者要表现的主题和实现的功能。网站的性质不同，设计的任务也不同。从形式上，可以将网站分为以下3类。

　　a、资讯门户类站点，像新浪、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化和界面的友好等问题。

　　b、资讯和形象相结合的网站，像一些较大的公司、政务网站等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。

　　c、形象类网站，如一些中小型的企业网站。这类网站一般较小，有的只有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

　　2．网页设计的实现

　　网页设计的实现可以分为两个部分：第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成;第二部分分为网页的设计与制作这一过程是在计算机上完成的。设计网页的第一步是设计版面布局。可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像及动画，要以最适合的方式将图片和文字排放在页面的不同位置。常用的网页设计软件有Dreamweaver、Fireworks、Flash及Photoshop，这些都是很不错的网页设计软件。

　　3．网页设计的基本原则

　　网页设计是有原则的，网页设计遵循统一、连贯、分割、对比及和谐的原则。

　　统一，是指网页的整体性和一致性。网页的整体效果是至关重要的，网页中各个版块的设计风格要协调一致。

　　连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽。

　　分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使浏览者一目了然。在信息量很多时为使浏览者能够看清楚，就要注意到将画面进行有效的分割。

　　对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，如多与少、曲与直、强与弱、长与短、主与次、黑与白、动与静、美与丑等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

　　和谐是指整个页面符合美的规则，浑然一体。网页不是色彩、形状、线条等的随意混合，而是由它们有机组合而成的和谐统一体。

　　四．常用网页设计软件

　　1．网页图像设计软件Photoshop

　　2．网页动画制作软件Flash

　　3．网页编辑排版软件Dreamweaver

　　五．动态网站技术

　　1．网页标记语言HTML

　　HTML不是一种编程语言，而是一种描述墟履标记语言，用于描述超文本中内容的显示方式。如文字以什么颜色和大小来显示等，这些都是利用HTML标记完成的，其最基本的语法在内容标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠"/"。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。

　　2．网页脚本语言javascript

　　javascript是网页脚本语言，利用javascript可以轻易地制作出随鼠标飞翔的文字特效、探照灯效果、漂浮广告效果、跑马灯及显示浏览器停留的时间效果。这些特殊效果可以大大提高网页的互动性，以吸引更多的人访问网页。

　　3．动态网页编程语言

　　动态网页就是网页内含有程序代码。运行于服务器端的程序、网页和组件等都属于动态网页，它们会随不同客户、不同时间及不同需求而返回不同的内容。动态网页以.asp、.jsp、.php、.perl、.cgi等形式为后缀。

　　动态网页主要有以下的特点：

　　动态网页以数据库技术为基础，可以大大降低网站维护的工作量。

　　采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等；新闻发布系统的登录页面，输入用户名和秘码后就可以查看新闻内容。

　　动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

　　动态网页中的"？"对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

　　网站建设规范和基本流程

　　为了让网站开发能有效地进行，开发人员都必须遵循网站的开发流程。

　　一．网站建设规范

　　任何一个网站在开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和发展。由于网站项目开发的分散性、独立性、整合的交互墟氯，因此定制一套完整的约定和规则湘旅尤为重要。这些规则和约定需要与开发人员、设计人员和维护人员共同讨论定制，将来网站严格按规则或约定进行开发。

　　1．开发团队规范

　　在确定网站项目后的第一件事就是组建开发团队，根据项目的大小，团队可以有几十人，也可以是只有几个人的小团队，在团队划分中必须含有6个角色，这6个角色分别是项目经理、策划、美工、程序员、代码整合员和测试员。

    项目经理负责项目的总体设计、开发进度的定制和监控，相应的开发规范的定制和各个环节的评审工作以及协调各个成员小组之间的开发。

　　策划提供详细的策划方案和需求分析，还负责后期网站推广方面的策划。

　　美工根据策划和需求设计网站VI、界面、Logo等。

　　程序员根据项目总体设计来完成数据库和功能模块的实现。

　　代码整合员负责将程序员的代码和界面融合到一起，还可以制作网站的相关页面。

　　测试员负责测试程序。

　　2．开发工具规范

　　网站开发工具主要分为两部分，第一部分是网站前台开发工具，第二部分是网站后台开发工具。下面分别简单介绍这两部分需要使用的软件。网站前台开发主要是指网站页面的设计，包括网站整体框架建立、常用图像和Flash动画的设计等，主要使用的软件是Photoshop、Dreamweaver和Flash等。

　　3．超链接规范

　　在网页中的链接按照链接路径的不同可以分为3种形式："绝对路径"、"相对路径"和"根目录相对路径"。

　　小网站由于层次简单，文件夹结构一般不超过3层，而且网站内容和结构的改动不大，所以使用"相对路径"是完全可以胜任的。

　　当网站的规模大一些的时候，由于文件夹的结构越来越复杂，且基于模板的设计方法被广泛使用，使用"相对路径"会出现如"超链接代码过长"、"模板中的超链接在不同的文件夹结构层次中无法直接使用"等问题。此时使用"根目录相对路径"是理想的选择，它可以使超链接的指向变得绝对化，无论在网站的哪一级文件夹中，"根目录相对路径"都能够准确指向。

　　当网站规模再度增长，发展成为拥有一系列子网站的网站群时，各个子网站之间的超链接就不得不采用"绝对路径"。为了方便网站群中的各个子网站共享，过去在单域名网站中以文件夹方式存放的各种公共设计资源，最好采用独立资源网站的形式进行存放，各子网站可以使用"绝对路径"对其进行调用。

　　网站的超链接设计是一个很老的话题，而且也非常重要。设计和应用超链接确实是一项对设计人员的规划能力要求非常高的工作，而且这些规划能力多数是靠经验积累来获得的，所疫篇善于和勤于总结。

　　4．文件夹和文件夹命名规范

　　文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母。文件名称统一用小写的英文字母、数字和下划结的组合。命名原则的指导思想一是使得工作组的每一个成员能够方便地理解每一个文件的意义，二是当在文件夹中使用"按名称排列"命令时，同一种大类的文件能够排列在一起，以便进行查找、修改和替换等操作。

　　5．代码设计规范

　　一个良好的程序编码风格有利于系统的维护，代码也易于阅读查错。在编写代码时应注意以下规范。

　　a． 大小写规范

　　b． 字体和格式规范

　　c． 注释规范

　　二．网站建设的基本流程

　　创建网站是一个系统工程，有一定的工作流程，只有遵循这个步骤，按部就班，才能设计出满意的网站。因此在制作网站前，先要了解网站建设的基本流程，这样才能制作出更好、更合理的网站。

　　1．网站的需求分析

　　网站的设计是展现企业形象、介绍产品和服务、体现企业发展战骆履重要途径，因此必须明确设计网站的目的和用户需求，从而做出切实可行的设计计划。要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，牢记以"消费者"为中心，而不是以"美术"为中心进行设计规划。在设计规划之初要考虑以下内容：建设网站的目的是什么？为谁提供服务和产品？企业能提供什么样的产品和服务？企业产品和服务适合什么样的表现方式？

　　2．网站整体规划

　　规划一个网站，可以用树状结构先把每个页面的内容大纲列出来。尤其当要制作一个大型网站的时候，更需要把整体架构规划好，同时要考虑到以后的扩充性，避免以后要对整个网站的结构进行更改。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色的搭配、版面布局、文字图片的运用等，只有在制作网页之前把这些方面都考虑到了，才能在制作时胸有成竹。也只有如此，制作出来的网页才能有个性、有特色、具有吸引力。

　　3．确定网站整体风格

　　网站风格设计包括网站的整体色彩、网页的结构、文本的字体和大小、背景的使用等，这些没有一定的规则，需要设计者通过各种分析决定。网页设计一般要与企业整体形象一致，要符合企业CI规范。注意网页色彩、图片的应用及版面策划，保持网页的整体一致性。一般来说，适合于网页标准色的颜色有3大系：蓝色、黄/橙色、黑/灰/白色。不同的色彩搭配会产生不同的效果，并可能影响访问者的情绪。在站点整体色彩上，要结合站点目标来确定。如果是政府网站，就要在大方、庄重、美观、严谨上多下功夫，切不可花哨；如果是个人网站，风可以采用较鲜明的颜色，设计要简单而有个性。

　　4．收集资源

　　网站的主题内容是文本、图像和多媒体等，它们构成了网站的灵魂，否则再好的结构设计都不能达到网站设计的初衷，也不能吸引浏览者。在对网站进行结构设计之后，需要对每个网页的内容进行一个大致的构思，如哪些网页需要使用模板，哪些网页需要使用特殊设计的图像，哪些网页需要使用较多的动态效果，如何设计菜单，采用什么样式的链接，网页采用什么颜色和风格，等等，这些都对资源收集具有指导性作用。

　　重要的文本：如企业简介文本，不能临时书写，要得体、简明，一般使用企业内部的宣传文字。

　　重要的图像：如企业的标志、网页的背景图像等，这些图像对于浏览者的视觉影响很大，不能草率处理。

　　库文件：对于一些常用和重要的网页对象，需要使用库文件来进行管理和使用，在设计网页之前，可以先编辑这些库文件备用。

　　Flash等多媒体元素：许多网站都越来越多地使用Flash等多媒体元素，这些多媒体元素在设计网页之前就需要收集妥当或者制作完成。

　　5．设计网页图像

　　在确定好网站的风格和搜集完资料后就需要设计网页图像了，网页图像设计包括网站Logo、网站字体、网站导航栏和网站首页等的设计。可以使用Photoshop或Fireworks软件来具体设计网站的图像。有经验的网页设计者通常会在使用网页制作工具制作网页之前就设计好网页的整体布局，这样在具体设计过程将会胸有成竹，大大节省工作时间。

　　设计网骆标志。标志可以是汉字、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。如网站内有代表墟履人物、动物、植物，可以用它们作为设计的标本，加以卡通化或艺术化；专业网站可疫圃本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易地制作出自己网站的英文名称作标志。

　　设计导航栏。在站点中导航栏也是一个重要的组成部分。在设计站点时，应考虑到如何使浏览者能轻松地从网站的一个页面跳转到另一个页面。

　　设计网站字体。标准字体是指用于标志和导航栏的特有字体。一般网页默认的字体是宋体。为了体现站点的与众不同和特有风格，可以根据需要选择一些特别字体。

　　设计首页。首页设计包括版面、色彩、图像、动态效果、图标等风格设计。

　　6．编辑制作网页

　　网页设计是一个复杂而细致的过程，一定要按照先大后小，先简单后复杂的顺序制作。所谓先大后小，就是在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。 根据站点目标和用户对象去设计网页的版式和安排网页内容。一般来说，至少应该哆苹些主要的页面设计好布局，确定网页的风格。 在制作网页时要灵活运用模板和库，这样可以大大提高制作效率。如果很多网页都使用相同的版面设计，就应为这个版面设计一个模板，然后就可疫圃些模板为基础创建网页。

　　7．网站维护

　　一个好的网站，仅仅一次是不可能制作完美的，由于市场环境在不断地变化，网站的内容也需要随之调整，给人常新的感觉，网站才会更加吸引访问者，这就要求对网站进行长期不间断的维护和更新。

　　网站维护一般包含以下内容：

　　内容的更新；

　　网站风格的更新；

　　网站重要页面的设计与制作：如重大事件页面、突发事件及相关周年庆祝等活动页面的设计与制作。

　　网站系统维护服务：如E-mail账号维护服务、域名维护续费服务、网站空间维护、与IDC进行联系、DNS设置、域名解析服务等。

　　8．网站推广

　　网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。网站推广的方法有很多，如到搜索引擎上注册、网站交换链接、添加广告链接等。

　　a、登录搜索引擎

　　注册到搜索引擎这是极为方便的一种宣传网站的方法。注册时尽量详细地填写网站中的一些主要信息，特别是一些关键词，尽量写通通俗化、大众化一些，如"公司资料"最好写成"公司简介"。注册分类的时候尽量分得细一些。

　　b、交换广告条

　　广告交换是宣传网站的一种较为有效的方法。在交换广告条的网页上填写一些主要的信息，如广告图片、网站地址等，之后它会要求用户将一段HTML代码加入到网站中，这样，用户的广告条就可以在这个网站上出现。

　　友情链接就是一种常见的交换广告条的推广方式，包括文字链接和图片链接。文字链接一般就是网站的名字。图片链接包括Logo的链接或Banner的链接，既为友情链接推广方式。

　　c、meta标签的使用

　　使用meta标签是简单而且有效地宣传网站的方法。不需要去搜索引擎注册就可以让客户搜索到你的网站。将下面这段代码加入到网页meta标签中：

　　网站名称，产品名称…… >

　　"content"后面填写的文字是关键词。关键词最好要大众化一些，跟企业文化、公司产品等紧秘相关，并且尽量多写一些。如公司生产的是电冰箱，则可以写电冰箱、家电、电器等。尽量将产品大类的名称都写上去。另外名称要写全，如"电冰箱"不要简写成"冰箱"。这里有个技巧，可以将一些相对关键的词重复，这样可以提高网站的排行。

 

　　现在国内有大量的网址导航类站点，如、BBS宣传、博客、微博等。