网站制作之网页技巧(制作网站页面)

编辑：rootadmin

相信众位网友在网上尽情冲浪时，一定会看到不少设计独特、创意新颖、页面诱人的个人网页，遇到这些网页你也一定会驻足停留、仔细欣赏一番，同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头。如果你确实有这个想法，那就请你继续看完下面的内容，下面提供的网页设计技巧一定会使你大饱眼福，并让你在以后设计自己的主页过程中游刃有余。好了，说了这么多，还是让我们直接切入正题，和大家一起看看笔者今天带来了哪些网页制作技巧吧：

1、设计前要有筹划

设计主页也许并不是很困难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来；之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。

2、选择内容要有新鲜感

万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变，用户很快会厌倦。因此网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。放眼望去，网上的许多个人主页简直就是"杂货店"，内容包罗万象,题材千篇一律，人人都是"软件下载",个个都有"网络导航"，从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

3、内容相对实用性大

一个网页尽管设计得趣味盎然，引人入胜，但这不是吸引用户最好的理由。要想最大限度地留住用户首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与--让读者做一些事情，如报名获取定期发送的通讯，并用某种方式报答他们的参与，如每周抽奖或给予下载一些东西的机会。

4、网页命名要简洁

由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来，用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页，在向搜索引擎提交你的网页时更容易被别人索引到。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。

5、确保页面的导览性好

主页的其中一个很重要的功能就是作为导航工具，指引用户查阅你存储在网址或其他地点的信息。因此在设计主页时，应尽量使导览过程变得很轻松。基于清晰明确和速度的考虑，主页上的超级联接内容应只限于几个高级的类别，例如公司、产品、服务等等。一般一个Ａ４页面大小的网页用六至八个超级联接比较合适。此外，你还要保证超级联接的层数不能太多，超过４层以上的联接信息将会使人感到厌烦。因此，你必须在广度和深度之间求取平衡。如果你的网址上有太多信息，你可能要制作较长的页面或使用更多联接层数，甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息，肯定受用户欢迎。

6、善用表格来布局

不要把一个网站的内容象作报告似的一二三四地罗列出来，要注意多用表格把网站内容的层次性和空间性突出显示出来，使人一眼就能看出你的网站重点突出，结构分明。

7、合理设计视觉效果

不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点--它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。另外网页设计好后，一定要在不同类型的浏览器和不同分辨率的情况下测试主页，例如许多浏览器使用×的分辨率，尽管在×高分辨率下一些Web页面看上去很具吸引力，但在×的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率和不同类型的浏览器下都能正常显示的网页。

8、排版时要注意细节

别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化。利用短的段落，加点列示，适当的整块引用文字，用水平线分节，用影象地图指引主要连接，使你的页面能吸引人和容易阅读。另外笔者提醒大家注意的是，不要把重要的内容排版放到网页的结尾，因为读者的视线可能停留在主页上面较多一点，或者有些读者没有耐心往下看那么远。

9、善用GIF和JPG格式的图象

用户在网上四处遨游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。目前因特网上大多数使用ＧＩＦ和Jpeg交互格式的图象，因为交互格式的图像是分级显示出来的--首先以很低的分辨率显示，然后逐步提高分辨率，直至最后达到正常显示--这种方式有时候会使较大的图像看起来好象装载得快一些，实际上并非如此，但这是一种有益的错觉。这样也便于读者在图像装载的过程中看到它的模样，如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。

、为图片添加文字说明

给每幅图形加上文字的说明，在出现之前就可以看到相关内容，尤其是导航按钮和大图片更应如此。这样一来，当网络速度很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，照样能阅读网页的内容，以后用户在访问你的站点时总有一种亲切感觉，认为你心细，比较善解人意，时时刻刻为他人着想，相信你的好心会有好报的。

、多使用图象缩微图

比如说有一张×像素的万色扫描图，所占空间约为K。使用PhotoShop这一类的图象编辑工具对原图进行重新取样，比如说高度为像素(为确保浏览器能即时以合适的大小显示图像，高度和宽度很重要。也许为了达到你自己的要求你得进行调整才能找到最合适的大小，但可以从高度除以4～6开始)，PhotoShop会自动计算新图象的宽度。保存新图象，它的大小现在应为8K或更小。然后在源文件中添加这样一段HTML代码：，那么浏览器在解释执行Lowsrc命令时，将要求浏览器在真正的画面载入以前先装载低分辨率的图像，这样就会让访问者清楚将会出现什么样的图片。

、不宜使用太多的动画

大家都喜欢用GIF动画来装饰网页，它的确很吸引人，但我们在选择时，是否能确定必须用GIF动画，如果答否，那么就选择静止的图片，因为它的容量要小得多。同样的尺寸的LOGO，GIF动画的容量有5K，而静止LOGO的只有3K。虽然只有2K之差，但多起来，就会影响下载的速度，所以，如果有些不是必须的，就选择最小的。

、闪烁文字不要多用

有的设计者想通过闪烁的文字来引起访问者的注意是可以被人理解的，但一个页面中最多不能有三处闪烁文字，太多了给用户一种眼花缭乱的感觉，反而会影响用户去访问该网站的其他内容，正所谓“物极必反”也。

、页面长度要适中

当一个页面很长时就应该要注意了，因为它的传输时间明显要比较短的页面的传输时间长，太长的页面传输会使访问者在等待中失去耐心。而且为了阅读这些长文本，访问者不得不使用卷滚条，从而也浪费了用户在网上冲浪的时间。如果你有大量的基于文本的文档，应当以AdobeAcrobat格式的文件形式来放置，以便你的访问者能离线阅读，从而节省宝贵的时间。

、Java程序少用为宜

不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦。

、整个页面风格要一致

你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。

、记数器能不用最好不用

由于计数器也是由程序设计成的，显示计数器的过程其实就是在执行一个程序的过程，它需要占用用户宝贵的上网时间，况且大多数浏览者认为计数器毫无意义，它们很容易被做假，浏览者也不想看广告。因此笔者建议不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务，而不是推销你自己认为重要的东西。如果你显示你的网站是多么受欢迎，你最好提供一个链接，显示访问日志。

、每个页面都要有导航标志

所有页面从头至尾都要使用导航标志，尤其是要用“返回到首页”连接。可以在每个页面都这样做。比如在每页的顶端(或底部)都有一小串图标，第一个回到首页，第二个回到章，第三个回到节。如果是图像导航按钮，那么要有清晰的标识，让人看得明白，千万别只顾视觉效果的热闹，而让人家不知东西南北；而文本导航的链接颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给读者一个清楚明白的导向。

、尽量使用相对超级连接

在制作图象或文本超级连接时，尽可能地使用相对超级连接，这是因为这样做网页的可移植性比较强，例如把一组源文件移到另一个地方时，相对路径名仍然有效，而不需要重新修改连接的目标地址；另外使用相对超级连接时输入量也较少，在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。如果是连接到不直接相关的文件时，使用绝对路径比较好，这样以后要是把源文件移到另外的目录下就不需更改连接了。

、保证超级连接直观有效

页面中的超级连接应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够很直观地从每一页上访问网站的任何部分。

另外特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它是不是正好就在“这里”，并且连接无误。不要让连接的名称与连接的URL不同，这样会使读者白白地浪费时间。

推荐整理分享网站制作之网页技巧(制作网站页面)，希望有所帮助，仅作参考，欢迎阅读内容。