网站建设全攻略系列之从无知到入门

发布时间：2025-09-21 12:49:24 阅读量： 0 来源： 互联网转载

　　一. 前言

　　随着互联网的不断发展和中国网络人口的日益增长，从外行到菜鸟、菜鸟到老鸟、老鸟又成为了一代大虾，(本人还只是老鸟而已，还未到大侠的境界)，其中不知道发生了多少的变化……

　　主要是内容收集分类困难，更新不便，界面过于简陋……但笔者并不气馁，驾着小猫上网找网站制作的教程，DOMN下来拌着方便面和好多个不眠之夜慢慢啃。终于黄天不负苦心人，在无数次的失败后，笔者渐渐积累起的经验反映在个人站点的不断发展中了^_^

　　由于深深地体会过自己摸索的痛苦，所以把笔者的建站心得，拿来和众多同好分享，可惜的是笔者的站点正面临全面改版，无法留下地址，供大家学习参考，水平所限文章中错误在所难免，还望高手、大侠不吝赐教^_^

　　注:笔者在这里说的网站指的是个人申请的免费主页，也就是说不具有商业性质，(其实很多提供免费主页申请服务的站点在网友申请前都有规定，禁止主页用于商业用途)，所以笔者在设计时考虑较多的是网友们兴趣爱好，而不是注重商品的展示，但总体的设计思想和某些技巧也适用于商业站点，取舍就看您的喜好了。

　　网站制作除了可以按制作的时期分为前期规划、中期制作、发布，及后期维护外，还可以按工作性质分成:结构设计、资料收集、美工设计、宣传推广等。

　　言归正传，进入主题:

　　二. 网络基础知识

　　首先来了解一下我们平时说的万维网是什么?(没学过网络知识也没关系，笔者会尽量说的浅显易懂)

　　www(world wide web)是指在internet上的许多计算机连接在一起而形成的网络，这些计算机相互或是单向的传递信息，(包括文字、程序、图像、声音和其他众多多信息)。

　　我们怎么访问这些信息呢?

　　通过URL和相关的Protocol就可以做到了。

　　URL(Uniform Resource Locator)就是统一资源地址，是URI(Universal Resource Identifier，通用资源标识)命名体系规范中的一个分支。顾名思义，URL就是帮助我们在网络上找到需要的资源的“路径”，举个例子:

　　http://www.company.com/welcome/index.html

　　这个地址说明了通过HTTP协议，能够在叫www.company.com的主机上，在路径“/welcome/”下找到一个index.html的文件。

　　Protocol(协议)里用与internet的是TCP/IP(Transmission Control Protocol/Internet Protocol,传输控制协议/网际互联协议)，TCP/IP初由DARPA(美国国防高级研究规划局)设计，用于国防相关的工程，现在被广泛的操作系统所支持，(包括Windows, NT, NetWare, Macintosh等)，成为了通用的网络协议。

　　HTTP(Hypertext Transfer Protocol，超文本传输协议)是用来在Internet上传送超文本的传送协议，它运行在TCP/IP协议之上。其他常用的协议还有文件传输协议FTP(File Transfer Protocol)、远程登录协议Telnet、NEWS以及Gopher等。

　　HTML(Hypertext Markup Language，超文本标识语言)是WWW上的发布语言、标记性语言或页面格式定义语言，可以用文本编辑器来制作，我们平时见到的网页就是HTML文件。HTML可以插入图形、音频、视频等对象，使其具有极为丰富的网页内容和很强的可观赏性，同时文件本身的体积很小(不包括插入的图像、声音之类额定文件)，非常适合在网络上传输，目前版本是4.0。

　　基础培训结束，准备进入:

　　三. 前期准备篇

　　1.HTML语言*:

　　先要学习HTML超文本语言，也许有人认为有了Frontpage2000和Dreamweaver之类的图形化网页制作工具就不再需要学习HTML语言了，其实这是个很普遍的认识误区。因为即便有强大的软件，但它们都只能自动生成很简单的HTML代码，对于想创作复杂的网页结构还不太使用。所以在很多时候，比如用FrontPage做好一个网页后，还经常需要直接在网页的HTML代码里作修改，加以完善，以求达到想要的效果。

　　另外，懂得HTML语言也可以帮助我们看懂别人做的网页里的结构和特效，从而提高自己的水平，这也是一个学习网页制作的大好机会。建议大家去学，但如果实在不愿意，笔者也不勉强。^_^

　　2.工具的选择:

　　除了学习一些基本的HTML语言知识外，一般说来还需要学习诸如:网页制作工具、图形工具、网页动画工具、FTP上传工具等常用的软件。笔者简单地来介绍一下:

　　网页制作工具:

　　Frontpage2000*是Microsoft公司的产品，包括在Office2000专业版的套装里，支持所见即所得的编辑方式，在站点的管理方面做的很出色。不需要你掌握很深的网页制作技术知识，甚至不需要你了解HTML的基本语法，很适合新手。事实上，如果你会使用MS Word的话，你很快就会学会使用FrontPage，并发现这其实是一件再简单不过的事，因它的基本使用方法和Word十分相似。

　　Dreamweaver*是Macromedia公司的产品，和FrontPage的功能类似，也是图形化的网页制作工具，还支持层的操作，并且可以避免生成冗余代码。现在，不少网站在招聘网站设计人员时，都要求应聘该职位的人员能熟练地操作Dreamweaver，所以立志于将来从事网站制作工作的朋友一定要学好Dreamweaver才行。

　　以上工具同时支持对HTML源代码进行直接编写。

　　Hotdog是纯代码工具，只支持手写HTML代码，但由于软件本身包含的了很多制作网页时要用到的基本元素，所以笔者认为还是非常顺手的，特别对于熟悉HTML语言的朋友和代码狂人来说。^_^

　　图形工具:

　　Photoshop5.5*是Adobe公司的产品，是功能非常强大的专业图形软件，可以制作任何你想要的平面效果。其中包含的ImageReady是用于网页图片制作的。缺点是体积庞大，操作比较复杂，非专业人士很难熟练掌握。

　　Paint Pro则是一款小巧玲珑、使用简便的软件，功能也很多，基本上可以满足一般的图形制作，而且大的优势是完全免费的!

　　另外，矢量图形工具有CorelDraw等，可以做出体积很小的矢量图片，缺点是网页上无法直接插入显示。

　　网页动画工具:

　　ImageReady已经介绍过了，可以制作GIF89a格式的图片。随着图片帧数的增加，动画形象会更丰满，当然体积也会更大。特点是与Photoshop交换作品方便，缺点是制作的位图体积较大。

　　Flash*是Macromedia公司的产品，与Dreamweaver和firework并称网页制作三剑客，可以非常方便地制作动画效果，并根据鼠标事件(Event)来引发一些特效，适合制作交互动画、小游戏。吸引人的还是作品SWF体积出奇的小，并且可以以插件的形式加入到网页中。通常几分钟的复杂动画才几百K，比起AVI格式真有天渊之别，很多在网上传播的流行音乐的MTV，5分钟左右连图像带歌曲也只有2、3百K，而以压缩比高著称的MP3格式光5分钟的歌曲就要4M呢!Flash在两年来迅速发展，相信成为网络上广为接受的标准格式已经为期不远了。

　　FTP上传工具:

　　制作好的网页要上传到提供给我们主页空间的服务器后，才能让网友去访问。上传工具将影响到我们对站点更新维护的效率。

　　CuteFTP:老牌的上传软件，功能强大，使用方便，支持拖放。

　　UploadNow!:中文软件，可以自动把本地站点上更新过的文件上传，避免上传没有更新过的文件，节省的上网的时间和费用。

　　WS-FTP*:速度特别快，支持拖放，对有多个站点要维护的朋友比较适用。

　　3.其它技术:

　　此外，掌握少量的编程技巧和多方面的先进技术也是有益无害的。

　　首先是脚本语言JavaScript*和Vbscript，JavaScript是Netscape公司的产品，它介于JAVA和HTML之间，是基于对象(Object)和事件驱动(Event Driven)并运行于客户端的编程语言。对于新版本的Netscape Navigator和Internet Explore的兼容性都相当的好。特别是JavaScript，不允许访问本地硬盘的安全性和与操作环境无关的跨平台性也对它的推广起了很大的作用，在一定程度上可以代替JAVA完成一些网页特效。学过C、C++的朋友会觉得JavaScript是一种很容易学的脚本语言。建议先了解DHTML的对象模型再学JavaScript。

　　其次是CGI(Common Gate Interface，通用***接口)不同于JavaScript，它运行于服务器端，动态响应用户的操作(包括用户搜索、提交表单、记数器等)，可用任何编译型语言进行编写(如Delphi、C++等)。

　　ASP(Active Server Pages)是包括HTML标记、文本和脚本命令的文件，使用它可以创建动态、交互的 Web 服务器应用程序，并可以组合HTML页、脚本命令和ActiveX组件以创建交互的Web页和基于Web的功能强大的应用程序。

　　IDC(Internet Database Connector，网络数据库接口)包含于Windows NT Server里的IIS(Internet Information Server)，提供了一种网络数据库内容得以发布并可与用户交互的方法，它实际上是一个ISAPI应用程序。

　　ADO(ActiveX Data Object)可以与ASP结合，以建立提供数据资讯的网页内容，只需在网页面中执行SQL指令(Structured Query Language，结构化查询语言)，让用户在浏览器界面中输入、更新和删除Web服务器上的数据资料。

　　PHP(Hypertext Preprocessor)与IIS上的ASP相似，是一种HTML内嵌式的语言。用 PHP写出来的Web后端CGI程序，可以很轻易的移植到不同的平台上，而且是免费的。

　　XML(Extensible Markup Language，可扩展标记语言)，是SGML(Standard Generic Markup Language，标准通用标记语言)的一个子集，可以很方便对结构化数据进行描述，允许用户对自己的标记语言进行定义，实际上提供了一个直接处理Web数据的通用方法。

　　VRML(Virtual Reality Modeling Language，虚拟现实模型语言)是一种网上虚拟现实语言，可以实现实物虚拟化，由于能在电脑上虚拟真实的产品，所以对于商品展示和电子商务的发展起到很大的推动作用。

　　WML类似于HTML语言，是信息家电上网浏览所使用的，随着更多的人加入到网络中来和信息家电的普及，WML可能发展到象HTML一样成为一种标准。

　　四. 总体规划篇

　　设计网站需要考虑的因素非常多，从前期网站开发时的设计、规划，到中期的资料收集、页面美工，再后的调试、发布、宣传是一个庞大的工程，要花费大量的时间和金钱(除非想做一个临时的，只有很少网页的站点)。所以能找些志同道合的朋友一起来做比较现实，好大家有各自的特色，每人负责自己拿手的方面，管理熟悉的版面。也可以按别的标准来分工协作，比如一人收集整理资料，一人做美工，文笔出色的搞创作，外文过硬的做翻译，工作学习不怎么忙的人负责维护，站点的全局结构布局则一起讨论决定，总之各取所长，各司其职，各尽所能就是了。

　　1.站点的访客定位

　　只有确定了自己服务的对象是谁，才能有的放矢地投其所好，在内容选取、美工设计、划分栏目各方面尽力做到合理，并吸引住更多的眼球。就个人站点而言，目的大多是为了展示自我表现的风采，为众多有共同兴趣爱好的朋友(网友)提供其所需的咨询(如新闻、公告等)和资源(如计算机教程、游戏攻略、桌面屏保等)。所以把访问者定位于和自己年龄相仿的网友是比较合适的(笔者建议的范围是15~30，其中有学生和年轻的上班族，是上网的主要人群，而且对新事物充满的好奇心，估计兴趣在动漫、音乐、小说、军事、电脑、游戏等方面)，按这部分网友的兴趣把内容收集起来，加以分类整理就可以大致上确定站点的发展方向了。当然，在站点正式运作后，也可以通过调查表单和E-mail来了解访问者对站点的看法和建议，从而及时做出调整和修改，让站点更适合来访者的口味，具体方法会在下文中涉及，这里就不重复了。

　　2.站点的主题选择

　　可选择的范围很广，但建议选自己擅长的或是非常喜欢的，并且立志做到好。因为网络上各种各样的咨询信息很多，别人可以轻易的在知名站点查找几乎所有自己想要的信息，但可能要花上不少时间或只能找到一部分信息，所以我们要关注的是怎样节省网友的时间，让他能更快更便捷的找到想要的(如果能提供他找不到的部分就更好了)，这就是我们和那些知名的大站点所要竞争的地方了。

　　往往内容特别丰富多彩的站点都有一个致命的弱点，那就是查找信息困难。为什么会这样呢?其实原因很简单，正是因为注意面面俱到，使内容太多、太杂，网友查一个消息要点上很多次鼠标，而且还会象进了大观园一样找不到来时的“路”。难的是这个弱点没法克服，只能使用导航栏和有条理的索引来缓和。所以笔者不建议大家做这种“面面俱到、什么都有”的站点，就让那些有钱的大公司去做吧^_^

　　如果有时间的话，还可以自己写些文件，放上去。不管是散文、小说还是软件教程，甚至是游戏攻略也行，只要有你的特色，相信一定会被网友所接受。

　　3.站点整体风格的确定

　　知道了什么样的人会来以及要做什么样的内容，就可以确定需要什么样的风格了。如果有美工基础的话，只要再加上少许的创意，就可以做出非同一般的效果。让人看一眼就留下深刻印象的站点，无论对于吸引眼球还是增加回头率都是大有裨益的。(建议:使用FrontPage2000里设定的模版——其实就是Microsoft请专业美工师为我们设计的站点布局，而且每个模版都各具特色——相信对于网站制作的新手动手做出自己的个性，一定会有很大帮助。)

　　另外，风格(Style)是非常抽象的概念，往往要结合整个站点来看，而且不同的人的审美观都不同，对于风格的喜好也很不同。所以想使每一个人都满意是不可能的，重要的是让自己满意先(当然自己的满意有很大程度是建立在访问者满意上的)，再照顾忠实的支持者。

　　建议:如果站点内容范围不太广，属于相同的主题，可以考虑整个站点设计为同一种风格;但如果各栏目的差异很大，比如站点里既有严肃的军事栏目，同时也有轻松活泼的动漫栏目，很显然将这两者设计成各有特色的风格会更使人感觉舒适。可是不管用什么风格，都要记得风格是为主题服务的，也就是要让它做好衬托气氛的任务，而不是单纯地照搬照抄别人的特色，因为也许那并不适合你的站点。

　　4.浏览器版本和分辨率

　　不同的浏览器对网页会做出不同的显示，在Internet Explore里非常漂亮的页面，用Netscape Navigator显示可能是一团糟。所以即使在现在这种IE一统天下的时候，也要考虑少数使用NN的用户，也许他们正是你的潜在访客，你总不愿意因为自己的懒惰而失去他们吧!把每个网页都放在两种浏览器里看看，有什么问题马上解决。

　　如果考虑到IE和NN老版本的兼容性就更好了，因为有写新的网页技术(比如框架)老版本的浏览器并不支持。

　　排除在UNIX操作系统下使用的浏览器(比如Emacs-W3、Arena、Amaya等)，另外有些浏览器使用的是IE内核(很多国产的浏览器都是)，又或是市场占有率不高(比如Opera、Mozilla Milestone18等)，这里就不一一叙述了。

　　1024x768，800x600，640x480是使用多的三种分辨率，一个网页能在这三种分辨率里都很好的显示是好的，但如果不行的话，请先考虑800x600，因为现在大多数人都在使用它。具体做法:可以在网页里做个表格，并且把宽度设置为“100%”，而不是具体的象素值，这样一来，网页就会在不同的分辨率里自动调整。但需要注意的是，这样设置后，如果你的表格里又都是文字内容的话，只要浏览者缩小浏览器的窗口，网页上的内容可能会变得很不协调，甚至会破坏你原先所期待的效果。解决办法是在表格里插入一个宽度为800象素的图片，把表格“撑满”，当浏览器窗口再缩小的时候将会出现滚动条来代替内容上的调整。

　　5.尊重版权

　　互联网的精神是“共享”，但这并不意味着你可以随便抄袭别人的作品，因为网上的作品也是某个人或某些人辛勤劳动的成果，不管在什么情况下剽窃都是不道德的行为!甚至会引起法律问题:在外国版权问题受到重视是由来已久的，美国的MP3。COM网站因为向网友提供无版权的MP3音乐，而被唱片公司联名告上法庭;Napster公司因为发布了同名网络音乐搜索软件而被告得一败涂地，现在还在停业整顿中;中国在版权问题上的立法和执法上历来都比较薄弱，但著名的原创文学网站榕树下，和未经授权就出版榕树下网站原创作品的某家出版社对簿公堂，而法院终判决榕树下网站胜诉，就意味着中国在版权问题上也有法可依，有法必依的时代来到了。所以在转载别人作品的时候要先征得对方同意，并在网站上注明作者和其他相关信息，“先斩后奏”、甚至“光斩不奏”的做法只会害了自己!

　　五. 具体细节篇

　　1.导航栏的设计

　　每次增加新的栏目或是对原有栏目的调整，都要对所有的页面更新。刚开始可能还算轻松，因为没几个页面，但当有几十、几百个网页后，这工作量实在太大了!如果偷懒只更新几个主要的网页，访问量就会剧减。

　　笔者首先想到的是FLASH可以做出漂亮的导航按钮，所有的页都用一样的导航栏，以后只要更新这个FLASH动画就可以使整个网站的页面都得到更新。但实际使用后发现FLASH造成网页的体积过大，在加上网站LOGO，商业BANNER……使网页变的臃肿不堪。

　　这办法不太好，于是笔者又考虑做个Javascript的导航栏，体积又很小。假设我们要做一个包含“动漫专栏”、“游戏天地”、“音乐同人”、“交友直通车”四个栏目的导航栏:

　　首先是便于更新，所以要做个外接的Javascript脚本，至于用到的语句就只有document.write(“”),新建一个文本文件，打开，输入: document.write(" ");

　　document.write("动漫专栏"); /*在“ ”里的是HTML格式的元素，该元素定义了一个锚(Anchor)，也就是把“动漫专栏”作为一个超链接，“HREF”属性指定“动漫专栏”链接到的其他资源上，也就是“http://richardddd.easthome.net”。(以下相同)*/

　　document.write(" ");/*该行是让链接之间保持一个空格，使链接的下划线不至于连在一起。也可以把空格该成“|”等来制造各种效果*/

　　document.write("游戏天地");

　　document.write(" ");

　　document.write("音乐同人");

　　document.write(" ");

　　document.write("交友直通车");

　　完成后，选择“文件”菜单的“另存为”，在对话框的“文件名”中输入“navigation.js”，“文件格式”里选“*.*”，于是，外接的JS脚本就写好了。

　　接下来就是把JS链接到我们主页的HTML源代码里了。

　　具体做法:

　　在和之间，选择想要让导航栏显示的地方，定位，输入:

　　保存退出。随后就是测试的工作了。双击主页，看看效果，导航栏是否出现在我们想要的位置上。效果如下:

　　动漫专栏游戏天地音乐同人交友直通车

　　注意:

　　1.在navigation.js里，除了HTML格式本来就必须有的空格外，好不要有别的空格(包括全角的空格)或是回车，不然的话，装载网页时可能会提示出错。如果觉得语句太长，想让脚本看得清楚些而使用回车时，可以在每行末用“/”来结束，再打回车。

　　2.这个navigation.js要和网页放在同一目录下，如果要放在不同的目录，就要在网页里的那段代码里navigation.js的前面加上该文件的路径。

　　导航栏真的是网站里非常重要的一环，如果少了导航栏，你的站点将会是一个漆�的、让人摸不到东西南北的大迷宫(大家玩过仙剑吧，和那个迷宫是一样的:)。即使是经验丰富的老鸟，也会被弄得不知所措，说不定还会以为你的站点就这么一页呢。所以为了方便访问者，同时也是为了你的网站能有更多的回头客，首先就必须做出分类明确、位置醒目的导航栏，把你的站点的风采以及你自己的才华完全展现出来。其次还要保持导航栏的便于更新，因为随着时间的推移，你的站点内容会越来越丰富多彩，总得重新整理整理吧，让自己的网页随时保持在方便访问的位置，而不是层层的链接之下。想想看，要是访问者为了找到自己感兴趣的内容必须点上5、6次鼠标的话，那你肯定就失去他了。

　　2.留下联系方法

　　留下E-mail或其它联系方法(比如电话号码、联系地址等)，给了访客一个发泄对你站点的不满的机会，同时也可以方便访客通过这些渠道把网站的BUG反馈给你，之后让你能及时修改调整。

　　但建议不要留下ISP给你的E-mail信箱，因为这个信箱在邮件超出限定的容量时，要收取相当高的费用。如果你的访客中有人因为对你站点的不满，而给你发邮件****的话，你就有得受了!所以好只留免费的信箱，比如新浪网就提供容量达50M的免费信箱，即便有人攻击也没什么大不了的——用WEB方式登陆新浪后，再删除就行了，就算真的被炸了，还可以重新申请(反正不收钱)。反观攻击者，要塞满50M的邮箱也够他累的了^_^

　　如果你平时使用ICQ或是OICQ的话，不妨也把号码留在网页上，因为这种点对点的传输方式比E-mail更迅速、更直接，会使向你反馈意见的朋友觉得很亲切。

　　3.使用统一的风格

　　CI(corporate identity)意思是通过视觉来统一整体的形象，包括LOGO、色彩、广告语等可以作为标志性的东西�这原是广告学里的一个专用名词，但用在网站设计上也很恰当。背景颜色、字体颜色大小、导航栏、版权信息、标题、注脚、版面布局，甚至文字说明使用的语气这些方面都要注意前后一致，或者说前后协调。

　　4.色彩的搭配

　　暖色系:红、橙、橙黄、黄等色彩表现温馨、和煦、热情。

　　中性系:黄绿、绿等色彩表现舒适、和谐。

　　寒色系:青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。

　　一般来说，学过美术的人对于色彩的选择和搭配方面比较具有优势，但这也不是绝对的，只要平时注重自己审美观的培养，即使不是专业人员一样可以有好的创作。再退一步，你不是专业人士，也没有这方面的天赋，其实也没关系，你可以使用大家一致公认的经典组合(如黑底白字)，即使缺少新意，也不会让人觉得不舒服。

　　但必须注意的是，在整个站点的色彩选择上，应该尽量使用同一种色系的，色彩种类以不超过三、四种为界限。

　　适当的对比色可以增加文字的可阅读性，但如果对比太强的话，就不适于长篇文本的阅读，并会对浏览者的视力造成很大的伤害!

上一篇: 四种方法全面打造网站核心竞争力

下一篇: 大连网站建设后期的访问者分析

网站建设全攻略系列之从无知到入门

热门文章