随着互联网的不断发展和中国网络人口的日益增长，从外行到菜鸟、菜鸟到老鸟、老鸟又成为了一代大虾，（本人还只是老鸟而已，还未到大侠的境界），其中不知道发生了多少的变化…… 以前是浏览别人的网站，看到整齐的文字和花花绿绿的图片，真是羡慕极了！后来呢，自学了Frontpage2000，觉得做主页其实也很容易，不就是写些文章，插点图片嘛……于是，兴致勃勃地写了个漂亮的主页，加了几个链接，通到大众软件、电脑之家……做好站点、上传、打开IE、在地址栏里打上http://www.xxx.com，再用激动到颤抖的手按下回车…… 此后鲜花掌声千千万，但麻烦也接踵而来，主要是内容收集分类困难，更新不便，界面过于简陋……但笔者并不气馁，驾着小猫上网找网站制作的教程，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("<a href=http://richardddd.easthome.net/comics/index.htm>动漫专栏</a>"); /*在“ ”里的是HTML格式的<A>元素，该元素定义了一个锚(Anchor)，也就是把“动漫专栏”作为一个超链接，“HREF”属性指定“动漫专栏”链接到的其他资源上，也就是“http://richardddd.easthome.net”。（以下相同）*/ document.write(" ");/*该行是让链接之间保持一个空格，使链接的下划线不至于连在一起。也可以把空格该成“|”等来制造各种效果*/ document.write("<a href=http://richardddd.easthome.net/game/index.htm>游戏天地</a>"); document.write(" "); document.write("<a href=http://richardddd.easthome.net/music/index.htm>音乐同人</a>"); document.write(" "); document.write("<a href=http://richardddd.easthome.net/friend/tuili/index.htm>交友直通车</a>"); 完成后，选择“文件”菜单的“另存为”，在对话框的“文件名”中输入“navigation.js”，“文件格式”里选“*.*”，于是，外接的JS脚本就写好了。 接下来就是把JS链接到我们主页的HTML源代码里了。 具体做法： 在<body>和</body>之间，选择想要让导航栏显示的地方，定位，输入： <Script language=“JavaScript” src=navigation.js></script> 保存退出。随后就是测试的工作了。双击主页，看看效果，导航栏是否出现在我们想要的位置上。效果如下： 动漫专栏 游戏天地 音乐同人 交友直通车 注意： 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．色彩的搭配 暖色系：红、橙、橙黄、黄等色彩表现温馨、和煦、热情。 中性系：黄绿、绿等色彩表现舒适、和谐。 寒色系：青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。 一般来说，学过美术的人对于色彩的选择和搭配方面比较具有优势，但这也不是绝对的，只要平时注重自己审美观的培养，即使不是专业人员一样可以有好的创作。再退一步，你不是专业人士，也没有这方面的天赋，其实也没关系，你可以使用大家一致公认的经典组合（如黑底白字），即使缺少新意，也不会让人觉得不舒服。 但必须注意的是，在整个站点的色彩选择上，应该尽量使用同一种色系的，色彩种类以不超过三、四种为界限。 适当的对比色可以增加文字的可阅读性，但如果对比太强的话，就不适于长篇文本的阅读，并会对浏览者的视力造成很大的伤害！ 5．使用CSS控制整体格式 CSS（Cascading Style sheets，层叠样式表）是为网站制作者带来福音的好东东！它最大的特点是可以使网页的内容和结构版面控制相脱离，大量的减少网页中重复使用的HTML代码，从而减小网页的体积，这对于在网上传输是非常有利的。同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能，这就意味着你可以经常地改变网站的界面（包括文字、色彩、背景图片等），而每次只需要上传一个体积很小的CSS文件就行了！ 所以，笔者在这里极力向大家推荐使用！接着就简单扼要地介绍常用功能。 具体方法： 新建一个文本文件，打开，输入： body { font-size: 10pt; //<body>标记里的字体大小为10pt； background-color: rgb(255,255,255); //网页背景颜色为白色； background-image: url('back.gif') //背景图片为与网页同一目录下的“back.gif”； } table { border: 0; //表格的边框隐藏； width: 100%; //表格宽度为100%； text-align: left; //表格文本对齐方式为靠左； } th { font-size: 11pt; //表头字体为11pt，较普通字体稍大； color: FFFFFF; //表头背景色为RGB：FFFFFF； text-align: center; //表头文本队旗方式为居中； } a {text-decoration: none} //链接无下划线； a.visited {color: rgb(153,52,43);} //点击过的链接的颜色； a.active {color: rgb(153,0,255);} //点击着的链接的颜色； A.hover { COLOR: #ffba75; //鼠标经过时链接的颜色； TEXT-DECORATION: underline //鼠标经过时链接加下划线； } 完成后，选择“文件”菜单的“另存为”，在对话框的“文件名”中输入“base.css”，“文件格式”里选“*.*”，于是，外接的CSS层叠样式表就写好了。 接着，在网页的HTML代码里的<head>和</head>之间加上： <link href="base.css" rel="stylesheet" type="text/css"> 保存退出。以后只要在CSS文件里做修改就可以使所有加了以上代码的网页自动更新了！ 6．使用表格定位 想要一张整齐的网页需要做定位工作，有人使用<DIV>和<SPAN>标记，但实际上套用表格更简单一些，虽然精确度不及前者。很多大的站点都使用表格来定位文字和图片，制作时很直观，效果不错。但值得注意的是，当你的页面很大的时候，千万别在整个网页上用一个大的表格套很多小表格！因为如果浏览器在接受数据时发现表格，就必须知道表格的结构，也就是说要把整张表格的内容都接受完毕才显示其内容，之前会给浏览者一张“白板”看，很多人因为没耐心等待而转去看其他站点了。所以分用几个小表格，让他们可以分别显示，收到多少显示多少，浏览者可以在等待的时候看先收到的部分，这样一来就增加了浏览者继续等待的信心。但是你觉得分别显示页面会破坏整体的美感，那就用大表格吧！^_^ 7．站点地图 即使导航栏条理分明，结构合理，但对于内容较多的站点来说，还是做一份站点的导航地图，才对得起访客。在站点地图里，你可以详细的介绍素有的栏目，以及每个栏目里分别包括些什么小栏目或是含有什么样的具体内容，应该尽力写得详实明了，让人有一目了然的感觉才达到我们的目的，不要担心版面不够，因为整个地图版面存在的理由就在于此（如果没有起到它应起的作用，还不如不要呢）。 8．使用模版 很多刚开始做网站的朋友往往在收集了大量的素材后，立即投入制作，生成了绝大部分成品网页，但由于经验不足或其他什么原因，做完了才发现问题，只好一个个网页的修改，结果浪费了巨大的精力。所以笔者建议：在完成了所有的构思以后，先要做一个模版网页，在这个网页里包括了所有网页的公共元素（比如LOGO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等），之后只要复制多份，填入不同的内容就相对轻松多了。 建议：如果页面太多而没有给每个网页写TITLE的话，FrontPage2000就会自动给每个网页加上按“new page 1”、“new page 2”的顺序排列的TITLE，很不美观和规范，或是使人产生“站长是个懒鬼”的想法。所以，在制作模版的时候，就可以在TITLE里加上一句无论放在哪个页面里都合适的欢迎词（比如“欢迎您的光临！”之类）。这样一来，网页才不会让人当成“半成品”来看待。^_^ 9．少用JAVA 虽然使用JAVA可以做出许多精彩的网页特效，但由于现在JAVA程序的处理速度实在让人不敢恭维，往往是等上老半天还看不到网页的内容，更有甚者，在漫长的等待后，浏览器提示APPLET不能启动。过分追求技巧和特效，结果却适得其反，把最重要的内容给拉下了，这种做法显然是不可取的。 10．控制图片的大小 除了文字说明，图片就是我们网页上最重要的内容了。许多漂亮的字体，浏览器可能并不支持，所以要用图片的方式来显示；单纯的文字网页信息量巨大，浏览者很难快速地了解网页想要表达的内容，但通过图片就能比较形象地把意思传达给浏览者了。此外统一风格（每个网页使用相同的LOGO）、美化网页（用色彩鲜艳的花边修饰网页边框、分隔大段的文本）、烘托气氛等作用也是文字说明无法做到的，特别是GIF089a格式保存的图片，不但可以制造动画效果、活泼网页的气氛，还能够在显示较大的图片时逐渐的显示，先显示分辨率比较低的图片，让浏览者有个初步了解，知道自己等待的是什么？究竟有没有必要再等待？这对于速度相对较慢的中国互联网来说是一件天大的好事。 一般来说，一张网页上的图片总体积不应该超过50KB，这样光图片的下载将花去浏览者近10秒的时间（按使用56K的MODEM计算，不过56K的MODEM在中国已经是标准配置了），而即使加上文字也多不了多少时间，对于习惯了慢如蚂蚁的网络的用户是可以接受的。因此，可以说图片是造成网页下载速度过慢的“罪魁祸首”。所以，必须在美观和速度之间做出选择，两者都要兼顾，大家自己平衡吧^_^ 11．选择使用框架 框架（FRAME）也叫帧页，是现在制作网页是较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口，每一个窗口都显示一个网页的内容，并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构，可以在上方的框架里放置网站的LOGO，在左面的框架里显示导航栏，而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。而且浏览时，可以指定链接的网页在哪个框架里显示，从而避免了网页上相同内容的重复下载，而这些内容往往是LOGO、BANNER等体积较大，需要很长下载时间的图片。这对于提高网页显示速度和网络传输效率方面都有着积极的意义。 尽管这是种方便网站设计者的技术，但对于浏览者来说就不一定了。因为框架技术是一种新兴技术，很多浏览器还不支持它，也就是是说，有一部分的浏览者并不能正常的看到你那美仑美奂的网页。所以，笔者建议：为了这些网友，尽量不要使用框架。如果实在要用，就一定要记得在框架网页的HTML代码里加上<NOFRAMES>元素，在<NOFRAMES>里可以设定当浏览器不支持框架的时候在浏览器里显示的替代内容，让没有使用最新版本的用户也可以看到网页的内容。 12．发布更新消息 更新消息可以通过多种方式传达给浏览者，最常用的就是在主页上逐条列出最新的内容，或是专门做一个“最近更新”的网页，在网页上详细地介绍最几一次、几次更新的内容，并提供通往新内容的链接。 还有一种方法用的也比较普遍，但一般需要存放站点的服务器方面支持提交表单才行。就是浏览者通过提交表单的方式，将自己具体的联系方法送到站长指定的E-MAIL、CGI、文本文件等目的地，然后再由站长定期或在更新后，向这些地址发送网站最近更新的消息，让浏览者知道是否真的有自己感兴趣的内容，是否值得花费时间和金钱去浏览你的网站。既方便了浏览者，又显得站长很专业、很尽责。 13．坚持经常更新 更新包括两方面的内容： 首先是内容，即使是内容丰富多彩的站点，也需要经常更新。因为浏览者不可能喜欢你网站所有的内容，大多数网友只喜欢其中的一小部分，而且也只浏览这一小部分，所以你要经常把新的内容加进去，来满足网友的需求。当然有会有例外，一些专门提供下载服务的站点相对而言就不是特别需要经常的更新了，因为供网友下载的大多是流行音乐的MP3、游戏DEMO、商业软件的BETA等体积很大的文件，网友光是下载这些文件就要花上很长很长的时间。记得有一次，笔者找到一个很大的MP3下载站点，一下子往网络蚂蚁里加入了近80首MP3，之后的一个月笔者就再也没去过那个站点，直到所有的MP3下载完毕为止。但如果你做的不是这样的下载站点的话（一般的个人主页也不太可能提供大量的下载，毕竟上传也要花很多人民币~~），就必须要经常更新了。 其次是维护，也可以说是对网站结构、美工方面的更新。没人会喜欢老是看到相同的页面，而且还可能是不怎么漂亮的页面。时间久了，内容多了，也会需要对站点的结构、导航做些调整的。 建议：如果真的是很忙，没时间天天更新，希望能在主页上留一个“站长自述”的版块，没天抽出一小会儿，为浏览者写几句话，甚至可以写自己的生活日记。浏览者就会觉得站长和自己距离很近，是个很亲切友好的人。 14．注意文件名的长度 一般来说，我们使用的Windows98、ME、2000、NT和Linux等操作系统均支持长文件名、大写的和中文文件名，但大多数提供免费主页的服务器都不支持长文件名大写的和中文文件名。也就是说，如果使用了服务器不支持的文件名格式，会造成你辛苦做成的网页成为“死页”，别人将无法访问这些网页，即使是你自己也不能浏览，当然你还是可以对之行使服务开放给你的FTP权利（包括改名、删除等）。 另外需要注意的是，很多服务器对于主页的命名都有特别的要求，最常见的是index.htm，其他还可能有index.html、default.htm、default.html、welcome.htm、welcome.html等。如果服务器向用户开放CGI、ASP和PHP的权限的话，还会有以asp和php3等结尾的网页名出现。 所以在不太清楚服务器情况的时候，为了避免出现无法访问的网页，最好还是使用在DOS下通用的8。3命名规则较为保险。 15．广告代码 面对中国目前不匪的上网费用，大多数的网友不是缩衣节食，就是尽力克制自己上网的冲动。但随着上网时间的增加，接触到的新事物也在不断增加，忽然有朋友发现上网也能挣些美元（不管最后是不是真的到手，但这确实是个能缓解上网费用过高的办法）。就是在自己的主页上加一段广告代码，只要访客能适时地点击广告，一个月下来，就能为站长带来那么几个美元补贴上网费，不过可能要过好几个月才能收到支票。 但需要注意的是，有些朋友为了多赚些美元，就自己拼命点击广告条，但他们不知道在极短的时间里有太大的点击率、这些点击全出自同一个IP地址，又或是你的广告条放的位置不符合广告商的要求的话，你就将收不到支票，并且会被广告公司加入黑名单。结果自然是“赔了夫人又折兵”，既赚不到美元，又花了自己的时间和精力（点击广告时花费的）。 即使靠广告条能增加收入，但也要考虑到由于大家都和你有相同的想法，所以在Internet上早就是广告满天飞了，现在的网友可是一看到广告就反感，接着是连看也不看你的网站里有些什么内容就键入别的地址了。因此很可能发生的是，放了广告代码后，非但没收到美元，反而连自己的访客也给吓走了，有句老话就是形容这种情况的：“偷鸡不成蚀把米”^_^ 可是，就算不放置为自己谋福利的广告条，但提供主页空间给你的那个网站的那个广告你还是得放在主页上的，不然的话，很可能会不经通知就删除你的主页空间哦！ 了解了以上几个方面后，再来将一些实用技巧。
1．特色ICO 每次看到好的网页总想把它保存在收藏夹里方便以后再去，但时间一久，太多的链接就让人眼花缭乱了，没办法，删！你不想让自己的网页也遭到这样的命运吧？ 具体方法： 先打开网页的HTML源文件，在<head>和</head>之间找个空的地方点一下鼠标，（千万别点在<>里），输入： <link rel="shortcut icon" href="logo.ico"> 保存退出。其中“logo.ico”替换成你自己的ICO图标文件的路径。最后记得把网页和ICO图标文件都上传到网上就行了，不过ICO的路径不要变。 这样一来，当别人把你的网页保存到收藏夹的时候看到的不再是千篇一律的HTML文件的图标了，怎么样，很跳吧？^_^ 2．设为主页 在网页显眼的地方加上“设为主页”的链接一定会增加被设为主页的机会，毕竟在IE菜单栏上操作太麻烦了，而现在只需要点击一下鼠标。 具体方法： 在网页HTML源文件的<body>和</body>之间的空白处点击鼠标，输入： <a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.sethomepage('http://www.homepage.com');">设为主页</a> 保存退出。其中的“http://www.homepage.com”替换成你自己的主页；“设为主页”替换成你想要的文字说明或是图片链接。 如果想更霸道些，就把“onclick”改成“onmouseover”试试，不过可能会引起访客的反感哦！自己衡量利弊吧^_^ 3．加入收藏夹 原理和设为主页差不多。 具体方法： 在网页HTML源文件的和之间的空白处点击鼠标，输入： <a href="javascript:window.external.AddFavorite ('http://www.favorite.com',%20'这是加到收藏夹实例')">加到收藏夹</a> 保存退出。其中的“http://www.favorite.com”替换成你自己的主页；“这是加到收藏夹实例”替换成你想要的文字说明（在收藏夹里显示的说明）；“加到收藏夹”替换成你想要的文字说明或是图片链接。 4．显示当前日期和时间 可以让来访者知道现在的时间，而且会随着系统时间随时调整。 具体方法： 在网页HTML源文件的<body>和</body>之间你想要时间显示的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- var enabled = 0; today = new Date(); var day; var date; if(today.getDay()==0) day = "星期日 " if(today.getDay()==1) day = "星期一 " if(today.getDay()==2) day = "星期二 " if(today.getDay()==3) day = "星期三 " if(today.getDay()==4) day = "星期四 " if(today.getDay()==5) day = "星期五 " if(today.getDay()==6) day = "星期六 " document.fgColor = " FF0072"; date1 =(today.getYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日 " ; date2 = day ; document.write(date1.fontsize(2)); document.write(date2.fontsize(2)); document.write("<span id='clock'></span>"); var now,hours,minutes,seconds,timeValue; function showtime(){ now = new Date(); hours = now.getHours(); minutes = now.getMinutes(); seconds = now.getSeconds(); timeValue = (hours >= 12) ? "下午 " : "上午 "; timeValue += hours+ ":"; timeValue += ((minutes < 10) ? "0" : "") + minutes + ":"; timeValue += ((seconds < 10) ? "0" : "") + seconds + ""; clock.innerHTML = timeValue; setTimeout("showtime()",100); } showtime(); --> </Script> 保存退出。这里就不要再做什么替换了。 5．显示来了几次 当访客每次来的时候，都可以知道自己究竟来的几次，他会觉得站长一直把他当作贵宾对待而心存感激，而你要做的只是加一段代码罢了^_^ 具体方法： 在网页HTML源文件的<body>和</body>之间的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- function getCookieVal(offset) {var endstr=document.cookie.indexOf(";",offset); if(endstr==-1) endstr=document.cookie.length; return unescape(document.cookie.substring(offset,endstr));} function GetCookie(name) {var arg=name+"=";var alen=arg.length; var clen=document.cookie.length;var i=0; while(i<clen) {var j=i+alen; if(document.cookie.substring(i,j)==arg) return getCookieVal(j); i=document.cookie.indexOf(" ",i)+1; if(i==0) break;} return null;} function SetCookie(name,value) {var argv=SetCookie.arguments; var argc=SetCookie.arguments.length; var expires=(2<argc)?argv[2]:null; var path=(3<argc)?argv[3]:null; var domain=(4<argc)?argv[4]:null; var secure=(5<argc)?argv[5]:false; document.cookie=name+"="+escape(value)+((expires==null)?"""; expires="+expires.toGMTString()))+((path==null)?"""; path="+path))+((domain==null)?"""; domain="+domain))+((secure==true)?"; secure":"");} var expdate=new Date(); var visits; expdate.setTime(expdate.getTime()+(24*60*60*1000*365)); if(!(visits=GetCookie("visits"))) visits=0; visits++; SetCookie("visits",visits,expdate,"/",null,false); if(document.lastModified.substring(2,3)=="/") document.write(“你已经来了”); document.write("<font color=red ><B>"+visits+"</font>"+"</B> "); document.write(“次了！”); --> </Script> 保存退出。我设置的数字字体颜色是大红，汉字颜色是默认的。 6．动态显示欢迎词 欢迎词几乎是每个网站必备的装备之一，但天天看千篇一律的“欢迎光临”之类的欢迎词，任谁都会觉得厌烦的。所以我们要做个与众不同的，能按具体情况具体分析的“智能型”欢迎词^_^ 具体方法： 在网页HTML源文件的<body>和</body>之间的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- now=new Date(),hour=now.getHours() if (hour<6){document.write("今天不上班？^_^")} else if (hour<8){document.write("早上好！上班前记得吃早餐！^_^")} else if (hour<12){document.write("不怕老板来检查吗？^_^")} else if (hour<14){document.write("午餐吃得还好吗？^_^")} else if (hour<18){document.write("下午好!")} else if (hour<22){document.write("不看电视，选择上网是明智的！^_^")} else if (hour<24){document.write("夜猫子,还不去睡？^_^")} --> </Script> 保存退出。看明白了吗？其实原理很简单，就是根据系统的时间，决定该用什么样的欢迎词，可以把时间的间隔分得更小一些，显示的欢迎词也可以更富有人情味。 7．解决乱码 大陆地区和台湾地区虽然都使用中文，但在电脑网络上的编码方式却有很大的不同，前者使用的是GB2312码（国标码），而后者用的是BIG5码（大五码），两者互相不兼容，这就使通过网络在两地之间交流变得很不方便，出现了乱码的E-mail和网页。要正确显示两种编码不但要用户的计算机安装相关软件，还要做相关设置，并且每次都要用手动切换，很不方便。其实，只要在网页中加上一行代码就至少可以避免每次手动切换的麻烦了。 具体方法： 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 保存退出。这样就可以强制浏览者用GB码来看你的网页，只要他的计算机安装了相关的IE字符包就能正常显示国标码了。如果想显示的是BIG5码，只要把“gb2312”替换成“big5”就行了。 8．禁止使用鼠标右键 使用鼠标右键可以对所浏览的网页做多项操作（比如保存图片等），如果不想自己的网页让别人“共享”的话，可以把鼠标右键的功能屏蔽掉。 具体方法： 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- function click(){ if(event.button==2){ alert(“你的鼠标功能挺多的嘛！^_^”) } } document.onmousedown=click </Script> --> 保存退出。其中“你的鼠标功能挺多的嘛！^_^”可以替换成你想要显示的警告信息。不过一定要把脚本加在<head>里，不然的话浏览者可以在网页没下载完前使用鼠标右键的。 9．自动弹出欢迎窗口 每次访问都自动弹出欢迎窗口有可能会让人心烦，但如果你觉得好就加上去。 具体方法： 在网页HTML源文件的<body>标记里的空白处点击鼠标，输入： onLoad= alert("你好，欢迎访问！") 保存退出。其中“你好，欢迎访问！”可以替换成别的欢迎词。 10．自动弹出欢送窗口 和自动弹出欢迎窗口差不多。 具体方法： 在网页HTML源文件的<body>标记里的空白处点击鼠标，输入： onUnload= alert("再见，有时间再来啊！") 保存退出。其中“再见，有时间再来啊！”可以替换成别的欢送词。 11．去除连接的下划线 链接有下划线是天经地义的事，但我们要改变它！ 具体方法： 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <style> a {text-decoration:none} </style> 保存退出。其中的“none”可以替换成“underline”，就是显示下划线。 12．标题栏跑马灯 网页的垂直版面是“寸土寸金”的宝地，往往是访客第一眼看到的内容，所以不能浪费在欢迎词和不太重要的消息发布上，那么只好来“开发”标题栏了！^_^ 具体方法： 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- var msg = "内容丰富，经常更新，时有抽奖，敬请光临！"; var speed = 300; var msgud = " " + msg; function titleScroll() { if (msgud.length msgud = msgud.substring(1, msgud.length); document.title = msgud.substring(0, msg.length); window.setTimeout("titleScroll()", speed); } --> </Script> 在网页HTML源文件的<body>标记里的空白处点击鼠标，输入： onload="window.setTimeout('titleScroll()', 500)" 保存退出。其中“内容丰富，经常更新，时有抽奖，敬请光临！”就是滚动显示的内容。 14．自动跳出别人的Frame（框架） 因为本身站点的内容太少，而把别人的网页当成自己的，并显示在自己网站的框架中的人还是大有人在的。如果你觉得这是对你劳动成果的不尊重，可以通过E-mail警告对方，也可以直接在自己的网页里加一句代码。 具体方法： 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <Script language=”JavaScript”> <!-- if (top.location !== self.location) { top.location=self.location; } --> </Script> 保存退出。 或者在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <SCRIPT language="JavaScript"> <!-- if (parent.frames.length > 0) { parent.location.href = location.href; } // --> </SCRIPT> 保存退出。 15．网页自动滚屏 在网页HTML源文件的<head>和</head>之间的空白处点击鼠标，输入： <Script language="JavaScript"> <!-- locate = 0; function scroller() {if (locate !=400 ) {locate++;scroll(0,locate); clearTimeout(timer); var timer = setTimeout("scroller()",3);timer;} } --> </script> 在网页HTML源文件的<body>标记里的空白处点击鼠标，输入： onload="scroller()" 保存退出。其中“locate！=400”控制文件的长度，“setTimeout("scroller()",3);”控制滚动的速度。 16．为图片加注释 这不但适用于图片，还可以针对网页上所有的链接，在浏览者将鼠标放在图片或链接上的时候自动显示的一小段预先准备的文本，可以是对图片本身的解释，也可以告知链接通向哪儿。 具体方法： 打开网页的HTML源文件，在<IMG>标记里加上： alt=”image information” 保存退出。其中的“image information”替换为每个图片的具体解释。 如果是文字链接需要加注释，在<a>标记里加上： title=”link information” 保存退出。其中“link information”就是注释内容。 17．显示替代图片 如果要显示的图片体积太大，可以用一个体积较小的图片在原图片位置先作替代性的显示，使浏览者可以在先看到这些信息的同时，再等待原图片的下载。