怎样制作网页

大中小文章来源：万象互联更新时间：2012-4-12 11:06:24

这一节就来说说一个网站是如何做出来的。在你开始想作网站到付诸于实施，有一个准备的过程比较重要。因为准备好了，作起来就会得心应手，作到心中有数。一般来说，作网站需要明白你要作什么样的网站。可别告诉我，你要作综合门户，虽说不是不行，但也不是现在能办到的事情。所以，花点时间想想自己想作什么样的网站。
想好了要作什么样的网站后，就要开始准备相关的材料了，比如文章，图片，视频等等，越多越好，这样选择范围也大的多。为什么要做这一步呢？我想道理很明显，准备的越充足，做起事来也越顺利。目前来说，我们能找到的材料除自己的少量以外，多数以转载为多，比如看者网络上一篇文章不错，转载过来为己所用。虽说，这网络复制是很容易的，但千万别忘记版权问题。当然，如果你仅仅因为是个人兴趣并且声明了转载的地方，那就问题不大了。不过最好能和拥有者打个招呼，一般都是会同意的。
这材料也准备好了，接下来该选择好的工具了。当然，这工具的选择是很多的。作为初学者可以使用FrontPage Express，虽说它是FrontPage的简化版，但功能一样不少，而且还是免费的。再说，这网页制作都有互通性，学会了FrontPage Express的使用，其它也大同小异。
工具也选好了，该规划网站以及设计页面的布局了。一个网站是一个整体，它所包含的网页都是互相链接起来的。从每一个页面都能跳转到另一个页面。我们知道，这作网站就象办一份杂志，杂志就该有标题，讲明这杂志是什么名字；杂志有目录，让读者可以选择感兴趣的内容直接去读；杂志还有出版者的信息。这些和作网站差不多，一个网站要包含以下内容
1.网站标题；
2.网站目录，又称导航栏；
3.网站首页，引导访问者浏览你的网站；
4.网站制作者的信息。
如图65.jpg显示了一个网站首页的组成。
这里有个概念要给大家说清楚，首页其实有两种说法：其一，服务器默认的首页，文件名称一般是：index.htm，index.html或者 default.htm。服务器是装载你的网站的地方，它们能24小时都连接在网络上。网站都有一个地址，比如：http://www.itiantao.com/。那么当你在浏览器敲入这个地址的时侯，服务器会自动寻找上面提到的三个文件，至于是那一个文件根据服务器要求会有不同；其二，网站首页，你的网站应该有个首页来引导访问者浏览站点，那么这个首页的文件名可以自行指定。比如你为网站指定首页名为:zgr.htm，那么当你要让别人访问的时侯，就得告诉它地址是：http://www.itiantao.com/index.html。目前我们制作网站的首页，都是合而为一了，即网站首页就是服务器首首页。
首页的制作很重要，而且它的样式应该和其它页面有所区别。首页上放置的都是最吸引人的东西，这样访问者才有兴趣留下来访问网站其它页面。至于首页，没有一个什么规定的样式，以能说明问题最根本。一般首页不要超过三屏，这样免得让访问者看起来很累人。
除了首页，其它的都是与首页相连接的分页了。分页的内容是从首页定义而来，比如你有个栏目是自我介绍，那么必定有个分页是关于你自己介绍的内容，那么访问者单击这一页后，就能跳转到该分页来。分页必须有个链接指向首页，这样，无论访问者如何看你的网站，它都能很容易的回到网站的首页。
这里有个建议个大家，就是在开始制作网站和网页的时侯，最好能画个图出来，把网站的结构和网页的布局都画出来，这样作起来就心中有数了。

如果你的网站最开始就构思的很复杂，可能真正作起来就很费时间，每一个链接都不能出错了，不然改起来真是很麻烦。另外，大家在作网站的时侯，应该把所有网页，图片，声音文件，视频文件都放置到一个目录里，这样当你以后发布网站的时侯，就不会显示不出内容了。比如，你的网页全部放在A目录里，但有一张图片却放置在B目录，当你发布A目录网页后，B目录的图片就不会显示出来了。因为服务器没有B目录。

经过你的努力，网站有了雏形了。接下来就该学学如何上传网页，以及维护更新和宣传网站了。

【精】网页布局设计基础
发表时间：2005年10月7日 16时50分16秒        评论/阅读(17/228)
   正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过"挑剔"的访问者。
一.网页布局的基本概念
最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。
1.页面尺寸：
如果你拥有更大的显示器，比如21英寸，那么你能在屏幕上看到更多的网页内容。但事实上不是人人都拥有这样的显示器。页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。
在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。
2.整体造型：
什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。
对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。
3.页头：
页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
4.文本：
文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚：
页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。
6.图片
图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体
除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。
二.网页布局的方法
网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：
1.纸上布局法
许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。
准备一若干张白纸和一只铅笔，你要设计一个时尚站点。
*尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。
*造型的选择：
先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。(图1,2)
考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。
　*增加页头：
图3是我们从图1和2得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。
*增加文本：
页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。
图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。
经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。
2.软件布局法
如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。
三.网页布局的技术
1.层叠样式表布局
在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
2.表格布局
表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。
3.框架布局
不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
结尾
我今天来介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，我想引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。好，就到这里。
【精】浅谈个人主页之网页优化
发表时间：2005年10月7日 16时51分55秒        评论/阅读(58/234)
    网页做的是否成功，除了要考虑外观设计，内容组织外，最重要的是当一位访客浏览你的网页时，能快速地看到内容，而不是等待，等待，再等待。
个人主页安家多在提供该项服务的服务器上，所以在硬件上我们选择的余地不多，但我们可以在软件上下功夫，提高网页的下载速度，而今天我就从以下几个方面来谈谈网页的优化问题。
一.不该要的就不要
我们在制作个人网页时，都想提供最多、最新的内容给访客，因为这是吸引他们的有力工具。但贪得无厌会使自己的网页过于臃肿，别人等待半天，什么也没有看到，所以我们在制作网页时要记住，不该要的东西就不要。这并不是一个技巧，但往往被人忽略。
在一些网页上聚集着很多小图标，也就是广告交换LOGO，大小一般为88x31，容量一般为3K在右，在有些人看来，这并不会影响下载的速度，因为它们的容量都很小。下载一个88x31的LOGO标准时间需要1秒钟，如果服务器速度有问题，很可能要2秒以上，假使你网页上有5个这样的LOGO，那么下载完全需要5-10秒，你觉得很短吗，的确是，但访客的容忍限度是20-30秒，也就是说如果在这段时间里，还没有看到网页或者网页的全部内容，那么访客很可能离去。还有一个问题是，往往有些网友放置了一些"毫无意义"的LOGO，比如IE4.0下载图标，很少有人会点击它。除非你的网页没有LOGO可用了，不然就删除这些LOGO。不管是网页制作者还是访问者，都会有这样的经验，不会完全等到页面所有内容下载完后，去选择链接单击，你设计的绚丽多姿的内容，可能别人还没有看就从他视觉里消失了，而如果有同样的选择，访客会去一连接就能出现内容的网页，而不是去你那等待。
我知道，大家都喜欢用 GIF动画来装饰网页，它的确很吸引人，但我们在选择时，是否能确定必须用GIF动画，如果答否，那么就选择静止的图片，因为它的容量要小得多。同样的 88x31的LOGO，GIF动画的容量有5K，而静止LOGO的只有3K。虽然只有2K之差，但多起来，就会影响下载的速度，所以，如果有些不是必须的，就选择最小的。同样我们在选择是否用JavaScript时，也要如此问自己，是否需要。总之，在我们制作网页时，要有"积少成多"的意识，也就是说，小的东西多起来就会变成了大的，不管是一幅图片或者一个按钮，都要把它设计到最小，这样节约下来的下载时间是很可观的，而不要把任何没有经过处理的对象放置到网页上，这点很重要。
二.图形的问题
图形是网页必须要的，一副图片完全可以表达大量文字所代表的意义，但图片也是影响网页下载速度的罪魁祸首。我们在制作网页时，GIF与JPEG是打交道最多图片格式，而在使用它们也有一些技巧。首先来简单了解一下这两种图片格式的性质。 GIF图片格式颜色允许最大256色，而JPEG允许16万色，而GIF支持动画格式，JPEG不支持，但它们都可以交织显示，也就是从模糊到清楚。了解了两种格式的性质后，在使用它们时，该怎样选择呢，专家有这样的建议，当你要显示照片或者要图片具有某种水印效果，模糊效果，那么选择JPEG，如果你需要动画、黑白图片、透明图片，那么就选择GIF。
GIF图片格式颜色最大允许256色，但在选择GIF调色板时，可以设置256颜色以下的颜色，比如188，204等，大家如果使用Photoshop这样的图片处理软件就会发现在保存GIF图片时，会让你选择保存的颜色数，一般来说，你可以选择256色以下的，因为它可以减少图片容量。
GIF图片的优势在于显示小图标时，比如公司图标，广告图标，也就是为什么现在广告LOGO都是 GIF图片格式。而在与JPEG图片相比较，当它们显示同一副图片时，会发现GIF图片格式和网页背景融合的更好，而JPEG图片会发现四周的晕边，而且 GIF可以处理成透明图片，和网页背景有更好的融合。但如果处理大的图片，会发现GIF图片的大小比保存至JPEG格式的图片要大的多，所以，处理大的图片，最好用JPEG格式，它有高的压缩比。
我们在使用这两种图片格式时，要注意图片的尺寸，选择过大的图片尺寸，会使得网页下载速度过慢，增加WEB服务器的负荷，目前网络速度慢的原因，有很大原因是访客等待图片的下载，所以，对于图片，要选择更合适的尺寸。而且在制作网页过程中，要给图片指定高度和宽度，因为有时候我们会把本来尺寸很大的图片设置成小尺寸的图片，虽然图片本身没有改变，但指定小尺寸后，就会减少下载时间。也可以在原图片下载之前，指定一个小容量的图片，因为小容量的图片会先显示，然后在显示原来的图片，如果你使用FrontPage98工具，那么可以在图片设置栏里设置，你也可以按以下HTML代码设置:<IMGSRC="1.gif"LOWSRC="2.gif">
这时候，2.gif会先1.gif显示。
目前在网络上又出现了一种图片格式-PNG，它具有以上两种图片格式的优点，无失真，高压缩，透明支持，真彩色，但因为现在的浏览器对它的支持不够，所以使用的人不是很多，但以后新的浏览器会支持它。
图片问题是网页制作中最复杂的问题，我们在利用图片时，要精，而不要随便就把没有经过处理的图片放到网页上。
三.网页设计
在浏览网页时，一般要经过：下载、完善、可视三个视觉步骤，而下载是最关键的一个步骤。如果连接半天还没有返回页面，那么访客会离开，所以，提高下载速度是网页优化的关键。在设计网页时，会利用许多老的或新的技术，但当你使用某一项技术时，有可能因为浏览器的兼容问题，会使得网页下载变得非常缓慢。有时，只出现了网页背景，内容却迟迟不出现，这就是因为浏览器在解释网页文件时，出现了问题，所以，在网页设计上一定要注意。
目前利用表格制作网页成为流行，因为它具有完备的布局功能，可以指定文档或图片在某一个地方出现。但在利用表格过程中，要注意一些问题，笔者利用FrontPage98表格功能做的一个网页，在IE4浏览器可以非常快速的浏览，但利用网景浏览器时，发现背景出现了而内容迟迟没有露面，经过分析发现是因为表格的缘故。因为表格嵌套过深，也就是在一个表格里，还包含数个其它表格，我们知道，当浏览器遇到表格时，会首先解释最里层的表格，然后再解释外层的表格，顺序是从里到外，最后再解释表格里含有的内容，也就是说，当你使用一个大的表格，而其中又包含其它表格时，浏览器的解释将变得十分麻烦，它将一层层解释表格，然后浏览器本身含有不兼容的的问题，就会照成页面内容没有出现，但数据还在传输。如果要避免这个问题，专家建议不嵌套超过三层的表格。你也可以把网页分成几个表格进行设计，比如标题导航一个表格，内容目录一个表格，然后制作信息一个表格，这样做可以使得浏览器分开解释表格，它可以解释完一个表格就出现表格里的内容，然后再解释下一个表格。
网页制作技术发展十分迅速，但相关的标准却迟迟定不下来，这当然主要是两大浏览器公司为各自利益相争的缘故，使得浏览器的兼容性大大降低，往往在某一个浏览器浏览十分好，但使用另一家浏览器时，页面是一团糟，所以，当我们制作完网页后，要进行测试，下面就谈谈这个问题。
四.测试网站
当完成网页的制作，测试网页是必须的，因为你可以首先发现网页的问题，比如下载的速度。
1.确定自己的想法
我们制作网页，会有自己的想法，比如提供给别人什么。那么，我们就要确定自己的某些想法，自己能忍受的网页下载速度是多少秒，10秒，还是30秒，再看看你的网页是否达到了这个标准，如果没有达到，分析一下，网页上什么影响了下载速度，你可以试着取消某一个图片，再看看，当然，这些测试不能在本地，而要把网页上载到服务器上。
2.人工测试网站
要测试网站，首先把网页上载到服务器上，然后打开浏览器，把缓冲里的资料全部删除。因为如果没有删除，浏览器请求页面时，会读取缓冲里已含有的内容。你也要选取所有的功能支持，比如JavaScript，CSS。然后在浏览器里填写请求的 URL，如果你有一个跑表或者某一个能够计秒的工具，在请求的开始，开始计秒，等到出现了页面的整体框架时，停止计秒，看看下载的时间。这时候，你并没有获得网页的全部内容，所以第二次测试，将是看看下载完全的网页，所需要的时间，重复以上所有过程，而到网页的内容全部下载后，停止计秒，然后再看看所花的时间，经过以上的步骤，你就会对自己网页的下载时间做到心中有数了。当然，还有些问题要注意，比如测试网站的时间，晚间就较快，而白天就较慢；还有服务器的问题，不同的浏览器，不同的调制解调器，测试网站时都要考虑，你也可以在不同条件下进行测试。当然，这些测试只能取得一个附合大多数访客的标准，要附合每一位访客的要求，那是非常困难的。
3.第三方测试
是否觉得人工测试很麻烦，那么你可以试试第三方测试，也就是请你的朋友测试，询问他们的感觉。当然，最好选择不同地域的朋友一起来测试，让他们回复你，告诉你请求网页时的时间等等，因为，做网页就是给人访问的，所以访客就是权威。
你可以试试某些网站提供的服务，只需在网站上填写一张表格，然后就可以静候网站对你的评价了，如果填写了自己的电子邮件地址，那么它会把测试结果发送到邮箱里。而该测试的内容也是丰富的，比如HTML代码是否精炼，GIF及JPEG的图片使用是否有效率等等，的确值得一试，但我们也不能完全相信，因为这种服务多数都在国外，不可避免的产生某些问题。如果需要，可以连接至某些网站进行测试:
文章写到这里，我也知道这并不是提高网页访问速度技术的全部，因为，要提高自己网页的访问速度需要自己在实践中去总结，去不停地修改。