主页制作的50个秘诀

青华艳红 · 发表于 2009-11-8 08:26

一、内容
1、让读者有理由逗留。要把网页作得趣味盎然，引人入胜。但首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与——让读者做一些事情，如报名获取定期发送的通讯，并用某种方式报答他们的参与，如每周抽奖或给予下载一些东西的机会。
2、对访问者来说最具价值的站点是那些立刻就能让人明白哪些信息可以获取，怎样获取，以及可能还有怎样让读者来更正他自己认为有错误的地方或加上他自己的内容。
3、签上自己的名字，并展示得到的荣誉——但不要在这里弄上一个长长的签名。少许的自我宣传可能是中肯的，尤其是当你想让自己的网页具有个人特色时，但这可能会带来困窘和妨碍实质内容。你所要作的只是连接到关于作者的那一页，该页也是弃权、版权声明及类似说明的合适地方。
4、不要包括一些一般化的Web参考信息和人人都有的已不再是热点的连接。连接到Alta Vista和Yahoo可能就已足够了，否则你的外部连接应该是具有特殊意义和读者还没有遇到过的地方。
5、要是有以评论或读者意见的形式取得的肯定性的反馈，可考虑把它包括在主页之内——也许在开头的某个地方，或者作为到荣誉页的一个连接。如果做得恰到好处，可以鼓励新的访问者并使他们放心。相反，要是做得不合适，就会被认为是自我吹嘘，而真正的内容反而处于次要地位。
6、忘掉已学会的在纸上写作的大多数习惯。基于文字、面向纸张的写作所面临的任务是精心安排的叙述，在提供知识、愉悦心情或说服别人的过程当中要能保持读者的兴趣；但是文字并不是大多数Web版面的主要组成部分——即便是页面上的文字比其他元素多，也常常是其他组成部分(图像、超媒体连接)被认为比单纯的文字更重要。
7、结构至关重要。网页可能会看起来是二维的，但不应如此理解。印刷页面的原有结构在Web已不复存在；写作者得着重于文件以可见的方式表现出来的结构，因为它可能已具有更微妙的交流功能。
8、Web的读者不会去读每一个词，他们的阅读方式更近似于快速阅读而不是象读呆板的树式文件那样的逐行阅读。通过计算机屏幕阅读并不是件格外舒服的事情，因此读者希望最好能尽快得到结果。
9、在Web页面创作中读者实际上是一个配合者。除了要注意在任何类型的写作中都要考虑的词汇、语调和其他事项外，网页作者还要意识和具体考虑到读者的身体运动——按鼠标键、滚动页面、写作邮件——也是交流过程的一部分。
二、页面设计
10、有了一个HTML编辑器和几兆服务器空间并不能说马上就可以设计网页了。在开始编写文字、寻找图像和进行HTML标记之前应该先把基本的网页结构组织号。如果没什么要说的，就什么也不要说。要是开始的时候在脑子里没有一个相当明确的结构，那几乎肯定会以一团糟而告终。开始时谨慎一些，然后不停地学习,不停地改进。卸载一些你喜欢的页面，核对HTML源文件，看它是怎样写的，把它全部或部分粘贴到一个试验文件进行检验。整页地拷贝别人的东西是剽窃行为，但是向别人学习则是研究过程。
11、人们第一次进入你的主页时，他们通常不是在寻找值得阅读的地方，他们可能正在寻找可供选择的东西，以超文本术语说即是可用鼠标点取的词句、图像、按钮等等，接下来是阅读文字，选定一个可选项，按鼠标键，下页出现后又重复此过程。这里的技巧是确定阅读时按键的适当比率。提供的可选项要是太少，访问者会觉得没意思，要是太多又会吓倒别人。
12、要是页面包含的内容信息量大，在开始设计页面之前就要先确定好读者对象。对新手或新的访问者来说用一种固定的文件结构并在开始的时候给予说明是有意义的。例如，关于内容的说明表格或某种类似结构。如果你要满足知识或经验不在同一个层次的读者，提供限制性的线索可以让某些读者跳过基本内容直达目标。提供连接时要考虑到各个层次的读者。
13、不要让读者不知所措。不必非要用声音和图像充斥网页，也不要把文件做得太长以至于在装载文件时让读者等得脚后跟发凉，因此使用图像时要谨慎：大的图像显然会降低页面建立的速度，但许多需要顺序装载的小图像也会如此。

三、布局
14、别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化。
15、利用短的段落，加点列示，适当的整块引用文字，用水平线分节，用影象地图指引主要连接，使你的页面能吸引人和容易阅读。
16、不要在每一页使用风格不同的图标。
17、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。
18、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣，甚至很专业，但是装饰背景很容易使文字变得不可辨读。要把背景做得好，光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含有图像，对比度要较低才不至于过于分散读者的注意力。
19、在 IMG 行加 ALT 标记。假设标题图像显示为 The Offal Eaters’’ HomePage，你可以在括号内加上一个 ALT 标记，ALT="The Offal Eaters’’ HomePage"，直接把它加在 IMG SRC=Offal.com.uk/images/gif/home-top.gif之后。这样就会让使用基于文本的流览器的读者除了看到 [IMAGE>
以外还能看到别的一些东西，使用图形流览器的读者在图像未能成功载入之时也会看到一些东西，而你也能让自己的HTML文件相当整洁。

20、也可以在分隔条上使用ALT标记，这样就使得使用基于文本的流览器的读者能看到一些更有趣的东西，而不只是一条直线。
21、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。
22、不要让什么东西看起来象是一个按钮却不起按钮的作用。
四、HTML格式
23、应避免使用交叉标记。不同的浏览器对交叉标记的反映会不同。
24、使用交织 GIF 和 Jpeg 。因为交织图像是分级显示出来的——首先以很低的分辨率显示，然后逐步提高分辨率，直至最后达到正常显示——这种方式有时候会使较大的图像看起来好象装载得快一些(实际上并非如此，但这是一种有益的错觉)。这样也便于读者在图像装载的过程中看到它的模样，如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。
25、另一种增加可得带宽的巧妙方法是在HTML底稿中使用 Lowsrc 命令。比如说有一张400×600像素的1600万色扫描图，所占空间约为35K。使用 Paint Shop Pro 这一类的工具对原图重新取样，比如说高度为100像素(也许为了达到你自己的要求你得进行调整才能找到最合适的大小，但可以从高度除以4开始)，Paint Shop Pro 会自动计算新画面的宽度。保存新画面，它的大小现在应为6K或更小。然后在HTML文件中可以这样写上： Lowsrc命令指示浏览器在真正的画面载入以前先装载低分辨率的图像，这样就让读者清楚将会出现什么样的画面。(为确保浏览器能即时以合适的大小显示图像，高度和宽度很重要)。
26、当然，可以用 Lowsrc 提取你想要的任何图像。一条双色的“请等待下传”的信息可能只占几百字节，同时由于图像是存在浏览器的缓存区，因此可用“请等待”信息代替所有画面。当图像平静地消失于背景之中的时候，读者可以悠闲地浏览你的网页。
27、可以在一个 HTML 元素内嵌入一个连接，如：
Myheading

但不能反其道而行之，把一个标题或其他HTML元素嵌入一个连接。下面这样的结构是正式的 HTML 规定禁止的，并可能在大多数最新的浏览器下不见效果：
Myheading

五、长文件
28、当页面为单个长文件时要小心。它的传输时间明显要比较短的页面的传输时间长，即使通信速率为 28.8Kbps 的读者也可能会失去耐心。阅读大的文件时页面滚动也很困难。大的文件和较慢的装载速度可能会使人沮丧，再也不会返回到你的网点。?
29、如果你觉得文件大小很重要，不便改变，就要考虑读者将会怎样使用网页。努力确保读者浏览长文件时浏览器滚动条小的移动不会在页面上产生大的跳跃。作为一条经验规则，按一次滚动条页面移动的范围要少于一页，这样就还看得见上一个窗口的部分内容。任何比这更大的移动都会让人迷失方向。
30、要不然就把一个长文件分成几个子文件，在主页给予连接。不过要记住子页可能会成为死页——有时候命中率要低于10%。做得聪明一点，给读者一个很好的理由装入子页或给他们一个很好的理由浏览它。
31、如果页面很多，在主页给出一个内容列表或目录显然是个好办法。不要非得作成那种常规的、令人厌烦的、死板的树形布局，把它做得有趣一些，让读者有理由进入连接，帮助他们了解他们可能看不出来的内容。
32、要是你必须把所有的内容都放在一个文件里面，使用一个内容列表，从表的项目可直接跳到各部分的开头。或者做得更好，提供一个独立的文本文件用于下传——去掉所有的格式符——使下传的时间减到最少。
六、连接
33、通常的顺序文本写作与在线文件写作之间的一个主要区别是在线文件的读者可能在文件的任何一点进入该文件。尽管你已做了一个漂亮的首页作为入口，其他人可能会对你的杰作内的具体指针或子页给出连接。向这些新的访问者提供一些关于他们在什么地方以及为什么在这里的线索是有意义的。
34、从头至尾都要使用导航图标，尤其是要用“返回到首页”连接。可以在每部分都做这样做。比如在每页的顶端(或底部)都有一小串图标，第一个回到首页，第二个回到章，第三个回到节。
35、在页面上应该有一些连接帮助访问者来回跳转。总是以相同的格式把这些连接放到所有页面上，这样读者就总能知道到哪儿去找到它们以及怎样使用它们。
36、一般来说应该使用相对连接，因为：(1) 这样容易把一组文件移到另一个地方(相对路径名仍然有效)，(2) 输入量较少。在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。
37、连接到不直接相关的文件时使用绝对路径。这样以后要是把源文件移到另外的目录下就不需更改连接了。
38、确保可选择的连接清楚直观——用标题或明显相关的图像来表明它有什么内容。特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它是不是正好就在“这里”，并且连接无误。不要让连接的名称与连接的 URL 相同，这样会使读者要作的工作增加。
39、Mail to 连接中应把 e-mail 地址作为连接名称。例如，可能有一个人名和一个 e-mail 地址，人名连接到他的主页，e-mail 地址连接到 mailto。新闻组连接应当直接用组名。
40、核对 href ，不要在页内出现任何没有出路的连接，也不要让连接落掉。

七、通则
41、实际上，网页要么处于建设之中要么就是死的——如果你不更新它，并且它不是纯粹的历史资料，它马上就会变旧。“最后一次更新”记录是一个好办法。且不说别的，如果你的页面变化太少，你很快就会在读者评论中得到讽刺意见。
42、鼓励读者通过填表或发邮件反馈意见。但要准备处理随之而来的事务——要尽快地回E-mail，增加连接，修改输入错误等等。给通过 E-mail 进行评论的人回感谢信。
43、在页内告诉读者如果他们在自己的主页内设置一个指向你的连接你不会介意，并表明你也同样会设置一个指向他的主页的连接。每个人都希望有人访问自己的网页，而这种相互支持会鼓励对见解类似的网点的访问。
44、联机时间是昂贵的，而访问者的注意时间之短是众所周知的。想办法告诉读者下传要用的时间——告诉他们要出现的图像的大小或下传一个文本文件或二进制文件要用多久的时间。为把联机时间减到最少，指出你会给出FTP地点或提供到其他页的连接，读者会欣赏你的这种做法。
45、利用 Digital 的优秀检索工具 Alta Vista 找出谁已建立了指向你的Web的连接。在高级检索方式下，输入：
linkhttp://my.site.com/ANDNOTurl:http://my.site.com/
在简单查询中也可同样做到，输入：
+linkhttp://my.site.com/-url:http://my.site.com/
46、Web上的大多数写作都相当糟糕。由于多数网页都是空话连篇，自我吹嘘，编写粗糙，编辑审核也不存在，好的写作就很突出了。
47、不要忘记为你的主页加一个描述性的标题，当某个人把它保存在自己的热点目录后能知道这里是什么内容。
八、设备独立
48、HTML不包括文件显示时用到的字体、段落形式及空白信息。这正是它的意义所在，无论在什么平台上，包括文字终端，你的文件都能成功地显示出来。由此产生出最低命令标准。因此要了解不同的浏览器用不同的空白和字体。
49、假设你的页面要用某个特定的浏览器阅读时要当心。要是没有鼠标器，让别人“按这里”是不会有效的，如果你的读者使用 Internet Explorer 或Spry Mosaic，Netscape2.0 的插件就不会有效，除非你能保证读者有 Netscape 或 Internet Explorer 兼容的浏览器，否则重新调整过的图像可能会以预想不到的大小显示出来，表格也会很难看(或根本看不见)。在少数浏览器上，你根本不能看Jpeg图像。
50、不会有很多读者不能处理16位的图像，但是要注意，如果用16位(64K色)或24位(1670万色)的调色板制作精巧的背景，你可能会发现使用较老的设备的人只能跳过去。用8位图看彩色背景时会降为可怕的图形。带视卡但 RAM 少于 2M 的 PC 是不能观看图像的。

zhicheng2005168 · 发表于 2011-3-2 20:03

有容易点的学习资料吗？

jianjinhui · 发表于 2011-6-9 14:54

最近正有学习网页制作的倾向，不过不知道初学者应该怎么做哦

北极冰川 · 发表于 2011-10-17 15:53

恩有点深奥不适合初学者

Sam-W · 发表于 2012-6-4 17:36

恩有点深奥不适合初学者

梁嘉琪2013 · 发表于 2013-11-10 09:44

谢谢分享

梁嘉琪2013 · 发表于 2013-11-10 09:46

jianjinhui 发表于 2011-6-9 14:54( O4 v5 i0 Y; s) K" w( j
最近正有学习网页制作的倾向，不过不知道初学者应该怎么做哦

关于初学者关于Web资源的总结，以及大致学习步骤的建议。

简介

Web根底学问不断是建站学的主要局部，这里有从零开端的根底教程，也有对更高级内容的引见。在建站学学到的学问可以辅佐你以最低的本钱树立起一个个人网站。也为以后学习更高级的技术打下坚实的根底。希望这里的内容可以对您有用，那将是对我最大的鼓舞！下面就进入正题。

假设你想建网站，但是却对建站相关的概念一点也不理解，不知道从哪里下手。那么这篇新手建站入门文章就是为你写的。

(X)HTML

我们建议您先学习(X)HTML教程，HTML是学习其它技术的根底，可以做出根本的网页。建站学的XHMTL教程可以辅佐您理解HMTL/XHTML的根本概念，工作方式，以及比拟常用的要素。

CSS

接下来就可以学习Css了，CSS可以改动您网站的外观，让它愈加漂亮，愈加个性。经过CSS教程，你就会理解CSS的中心局部了。除了入门教程之外，我们还有一个CSS实验室，我们可以经过动态地设置元素的CSS属性，观察到各个属性的理论效果。

更多HTML与CSS

上面两个教程的目的很简单：效率第一。希望您可以在最短的时间内学会HTML和CSS中最重要的概念，最本质的工作方式以及最重要的概念。为了追求这一点，自然也有舍弃，“不够全，不够强大”。假设您想要理解关于HTML和CSS的更多信息的话，可以看一看HTML教程列表和CSS教程列表。

XHTML+CSS

XHTML+CSS理论教程则以实例的方式展现了一些HTML与CSS在网页中的应用。你可以在这里直接复制代码，应用到你的网站里，也可以经过研讨代码更深化地理解HTML和CSS。

另外给大家推荐一个通晓DIV+CSS网页款式与规划视频教程，这个教程对学习停止div+css网页标准设计非常有辅佐。div+css设计出来的网页便当管理，速度快，是将来设计的趋向。

javaScript和DOM

动态HTML的根底，同样也是AJAX的中心技术。javaScript教程方面有菜鸟的Javascript笔记，HTML DOM也是学习JavaScript的必备学问，因此我们有一个HTML DOM简介。

Web方面文章推荐与笔记

由于某些问题，个人几乎中止了对网站建立的学习，不过在学习Web学问的过程中，菜鸟遇到了很多良师普通的文章，这里就把他们分享出来。点击查看关于网页设计方面的教程文章。

后台(ASP,PHP,ASP.NET……)

理解网站后台——假设你还不是很理解什么是网站后台，就看看这篇文章吧。这个是很久以前写的，有一些理解可能深度不够，但是仅仅作为理解的文章还是足够的。

ASP,PHP,ASP.NET——几篇引见文章，里面有教程的链接。我对这几种言语根本上是浅尝辄止，都只学了一点点。

梁嘉琪2013 · 发表于 2013-11-10 20:49

谢谢分享，

		自动登录	找回密码
密码			注册

主页制作的50个秘诀

相关帖子

点评