网页制作的建议
2010-03-12 11:14:59 阿炯

一、内容

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的连接。在高级检索方式下,输入:
link:http://my.site.com/ANDNOTurl:http://my.site.com/
在简单查询中也可同样做到,输入:
+link:http://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 是不能观看图像的。

九、HTML超链接

1、超文本(HyperText)

标记语言的真正威力在于其收集能力,它可以将收集来的文档组合成一个完整的信息库,并且可以将文档库与世界上的其他文档集合链接起来。这样的话,读者不仅可以完全控制文档在屏幕上的显示,还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它将整个 Web 网络连接起来。

2、超链接(Hyper Link)

1.超链接定义

超链接(Hyperlink):是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。


2.超链接分类

a.按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接(相对URL),锚点链接(anchor连接)和外部链接(绝对URL)。

b.按照使用对象的不同,网页中的链接又可以分为:文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等。

c.超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接,例如我们可以实现将鼠标移动到某个文字链接上,文字就会象动画一样动起来或改变颜色的效果,也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接,顾名思义,就是没有动态效果的超链接。

3.HTML超链接语法

超链接是通过<a></a>标签来表示的,有两种使用 <a> </a>标签的方式:通过使用 href 属性 - 创建指向另一个文档的链接;通过使用 name 属性 - 创建文档内的书签。基本的超链接语法如:<a href="url">Link text</a>,其中href属性指定链接的目标URL,“Link text ” 为链接文本(即超文本),:"链文本" 不必一定是文本,图片或其他 HTML 元素都可以成为链接的对象。

锚记链接:name 属性规定锚(anchor)的名称。name 属性用于创建 HTML 内部的书签。书签不会以任何特殊方式显示,它对读者是不可见的。当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。 命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。   

3、统一资源定位符(URL)

1.URL概述

统一资源定位符(URL,Uniform Resource Locator)是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。Internet上的每一个网页都具有一个唯一的名称标识,通常称之为URL地址,这种地址可以是本地磁盘,也可以是局域网上的某一台计算机,更多的是Internet上的站点。简单地说,URL就是Web地址,俗称“网址”。

2.URL结构  

一个完整的网址,例如:http://www.w3school.com.cn/html/lastpage.html,遵守如下语法规则(URL的一般格式):
scheme://host.domain:port/path/filename

或者
protocol ://hostname[:port]/path/[;parameters][?query]#fragment(带方括号[]的为可选项)

a.Scheme(方案)或者protocol(协议):定义因特网服务的类型(协议),目前最流行的类型是 http协议。

以下是其中一些最流行的协议:
file资源是本地计算机上的文件。格式file:///

ftp通过 FTP访问资源。格式 FTP://

gopher通过 Gopher 协议访问该资源。

http通过 HTTP 访问该资源。格式 HTTP://

https通过安全的 HTTPS 访问该资源。格式 HTTPS://

mailto 资源为电子邮件地址,通过 SMTP 访问。格式 mailto:

mms 通过 支持MMS(流媒体)协议的播放该资源。(代表软件:Windows Media Player)格式 MMS://

ed2k 通过 支持ed2k(专用下载链接)协议的P2P软件访问该资源。(代表软件:电驴) 格式 ed2k://

flashget 通过 支持Flashget:(专用下载链接)协议的P2P软件访问该资源。(代表软件:快车) 格式 Flashget://

thunder 通过 支持thunder(专用下载链接)协议的P2P软件访问该资源。(代表软件:迅雷) 格式 thunder://

news通过 NNTP 访问该资源。

tencent通过支持tencent(专用聊天连接) 协议和用户对话。(代表软件:QQ、TM)格式 tencent://message/?uin=号码&Site=&Menu=yes

msnim 通过支持msnim(专用聊天连接) 协议和用户对话。(代表软件:MSN、WLM) 格式 msnim:chat?contact=邮箱地址

b.domain(域):定义因特网域名,比如:w3school.com.cn。

c.host(主机):定义此域中的主机,如果被省略,缺省的支持 http 的主机是 www。

d.port(端口):定义主机的端口号,端口号通常是被省略的,缺省的端口号是 80。

e.path(路径):定义服务器上的路径(一个辅助的路径)。如果路径被省略,资源(文档)会被定位到网站的根目录。

f.filename(文件名):定义文档的名称,缺省的文件名一般会是 default.asp 或者 index.html,或者依据 WEB 服务器设置的其他文件名。

3.绝对URL和相对URL

绝对URL是指Internet上资源的完整地址,上面的URL结构就是绝对URL地址。

相对URL:相对URL表示相对于当前文档的资源,“/”表示网站根目录,“../”表示父目录,“http://www.cnblogs.com/”表示父目录的父目录,“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL,这样域名改变了、目录改变了都不受影响。比如:

4.URL编码

URL编码是一种浏览器用来打包表单输入的格式,一般常见于浏览器地址栏目中。

为什么要对URL进行编码?  

通常如果一样东西需要编码,说明这样东西并不适合传输。原因多种多样,如Size过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义。例如Url参数字符串中使用key=value键值对这样的形式来传参,键值对之间以&符号分隔,如/s?q=abc& ie=utf-8。如果你的value字符串中包含了=或者&,那么势必会造成接收Url的服务器解析错误,因此必须将引起歧义的&和= 符号进行转义,也就是对其进行编码。又如,Url的编码格式采用的是ASCII码,而不是Unicode,这也就是说你不能在Url中包含任何非ASCII字符,例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下,中文可能会造成问题。Url编码的原则就是使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

关于具体的HTML URL 编码参考地址

5.URL的缺点

最大缺点:当信息资源的存放地点发生变化时,必须对URL作相应的改变。因此人们正在研究新的信息资源表示方法,例如:URI (Universal Resource Identifier)即“通用资源标识”(参见RFC 1630)、URN (Uniform Resource Name)即“统一资源名”和URC(Uniform Resource Citation)即“统一资源引用符”等。

参考地址