用户名: 密码: 验证码:           网站地图 高级搜索 RSS订阅 收藏本站
Google
您的位置:首页>>图形设计>>HTML教程>>阅读资讯:详细讲解从六个方面将您的网站质量提升至最高

详细讲解从六个方面将您的网站质量提升至最高

[ 来源: | 阅读:次 | 更新日期:2007-8-28 22:55:00 | 评论 0 条 | 我要投稿 ]

在本教程中,您将学到如何将您的网站质量提升至最高。您将学习使用最新的WEB标准。还将学习如何使网站的易用性更强、更易读。 字串8

网页教学网分六个方面来讲解提高网站质量的方法。

字串8

一、标准 字串8

最重要的质量标准。

月落网

根据web标准编写您的页面有助于改善您的网站品质。 字串8


HTML 标准

XHTML 是最新的 HTML 标准,是用 XML 重新表达的 HTML 4.01。 字串5

根据 HTML 4.01 编写页面可使您的站点尽可能地接近 XHTML 标准。 月落网


CSS 标准

对于高品质的站点来说,使用层叠样式表(CSS)是将内容与样式分离的首选方式。通过使用 CSS,您能够在一个单独的文档中存储有关页面样式的所有信息。 字串7

所有现代的 web 浏览器均支持 CSS 1 和 CSS 2 标准。 月落

对于不同的浏览器,使用 CSS 都可以改进网站的品质,并提高可读性。同时还可以极大地减少您的网站开发成本。 字串5


Web 验证

web 验证工具是一种软件程序,可根据 web 标准对您的网站进行检查。

字串9

当您使用验证工具检查过HTML, XHTML 或 CSS 文档之后,验证器就会根据您选择的标准返回一系列所发现的错误。通常,验证器会返回所发现错误的行号。 字串6

请确保你在发布页面前进行验证成为一种习惯。

月落网


WAI - Web Accessibility Initiative

WAI 指的是"Web Accessibility Initiative",是由 W3C 发起的。 字串9

WAI 协调全球的组织通过六项主要的工作领域来提升因特网的可用性:技术、指导方针、工具、教育、研究以及开发。 字串8

您能够通过根据 WAI 的指导方针编写的页面,来改善网站的品质,并使得您的站点可用于更多人群(及浏览器)。

yueluo.net

二、HTML 元素

字串6

最重要的HTML元素。 字串8

对于提升 web 品质,<DOCTYPE>、<title> 以及 <h1> 都是重要的标签。

字串8


<DOCTYPE> 元素

Doctype means a "document type declaration" (DTD). 月落

所有的 HTML 和 XHTML 页面都应当使用 <Doctype> 元素来定义遵照何种 HTML 版本。 字串6

doctype 定义了您正在使用的 HTML 版本,并为浏览器提供重要的信息以便其更快速一致地呈现您的页面。

yueluo.net

文档类型声明同时也使验证软件可以对页面的语法进行检查: 字串7

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
 字串8 

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 

月落网

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 字串5 

<title> 元素

<title> 元素是最重要的 HTML 元素之一。它的主要功能是描述网页的内容。 月落网

即使标题不是网页的一个可见的部分,它对于提升网站的品质依然是重要的,这是因为它在以下位置都是可见的: 月落

  • 搜索引擎列表
  • 窗口的标题栏
  • 用户的书签中

标题应当尽可能地短,并具有可描述性。

月落网

当某个用户在 internet 上搜索网站时,大部分搜索引擎都会在搜索结果中显示出网站的标题。请确保标题与网页的内容是吻合的。这样的话用户有更多的可能通过点击这些链接来访问到你的网站。 www.yueluo.net

当用户访问您的网站时,在窗口的标题栏中标题是可见的。请确保即使窗口被最小化,标题同样能起到描述网站内容的作用。

字串6

在用户访问你的网站之后,网页的标题会存储于历史文件夹(用户甚至会把网页收藏到他的收藏夹中)。为了后续的成功访问,同样请确保标题可以清楚地描述您的网站。

字串7

优秀的标题:

<title>HTML 教程</title>
<title>XML 简介</title>
 yueluo.net 

差劲的标题:

<title>简介</title>
<title>章节 1</title>
<title>网页教学网提供网页制作教程,动态网页教程,建站指南,Flash动画,视频教程,网页特效,网页素材等。</title>
 字串7 

<h1> 元素

<h1> 元素用来描述网页中最上层的标题。 www.yueluo.net

由于一些浏览器会默认地把<h1>元素显示为很大的字体,因此会有一些web开发者使用<h2>元素代替<h1>元素来显示最上层的标题。这样做不会对读者产生影响,但会使那些试图“理解网页结构”的搜索引擎和其他软件感到迷惑。 字串6

请确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。

字串9

可以试着根据此模版来构造您的网页:

www.yueluo.net

详细讲解从六个方面将您的网站质量提升至最高

如果您不喜欢默认的标题字体尺寸,可以使用样式或样式表来改变。 www.yueluo.net

三、样式表

www.yueluo.net

最重要的 CSS 元素。 字串9

使用样式表对于提升网页品质至关重要。

月落


请勿使用 font 标签

应使用 CSS 来设置显示网页上的字体尺寸。请不要使用 font 标签。 月落网

使用 <font> 标签会增加文档的规模,而且使您每次改变标准文字尺寸的工作成为一场梦魇。

字串7

请设想一下下面的情况:

字串8

一天您决定修改网站中所有标题的颜色和尺寸。通过 CSS,您只需要修改一行就可以做到这一点。假如您使用了 <font>标签,那么您需要把网站中所有页面的所有标题都修改一遍。 字串5

使用样式替代 <font> 标签可使我们更轻松地为网页制作高质量的界面。 字串9


请勿使用固定的字体尺寸

不要使用固定的尺寸值。请始终使用相对的尺寸值。 月落

这项建议最重要的理由是无法通过浏览器重新调整固定尺寸的大小。

字串8

您的访问者会使用不同的设备(显示器)、不同的浏览环境(光线)以及可能的残疾(弱视)。

www.yueluo.net

例如,可以把某人的文字尺寸设置为100%(或者 medium ),主标题设置为140%(或者 x-large ),而次级的标题设置为120%(或者 large ),这样用户就可以使用浏览器来重新设定最喜欢的尺寸了。 字串6

通过调整网页的文本尺寸的功能,也可以改变打印页面的文字数目。 字串9


请勿使用很小的默认字体尺寸

一些网站会使用很小的文字尺寸,这样就可以向每张页面“塞”入更多的内容,或者使页面看上去更“时髦”。 字串6

再次重申,使用不同的设备(显示器)、不同的浏览环境(光线)以及可能的残疾(弱视),都可能对用户造成阅读障碍。 月落

请不要逼迫用户每次访问你的站点时都要放大文本的尺寸。 字串5


始终使用一致的背景颜色

大部分网页都会为不同的文本元素使用颜色。标题和链接的颜色通常与正文的文本颜色是不同的。

字串5

作为一位 web 设计者,您应当意识到的事实是,您的访问者能够修改默认的颜色选项。

字串5

如果您为 web 元素定义了颜色,那么同样应当定义背景颜色。

月落

如果不定义背景颜色,那么您的网站可能会被糟糕的颜色组合搞砸(比如红色背景上面的亮红文字,或者深色文本搭配的深色背景)。 字串9

如果您不规定背景颜色,可能会使文本很难被识别。 yueluo.net

四、可读性 字串9

如何确保站点内容更易读。 月落

留意颜色的对比

对于视力不太好的人或者对于不太好的显示设备来说,黑地白字或者白底黑字是最佳的。 yueluo.net

在亮色背景上的灰色文字,对比度是很差的: www.yueluo.net

详细讲解从六个方面将您的网站质量提升至最高 月落网

在暗色背景上的灰色文字,其对比度同样很差: 月落网

详细讲解从六个方面将您的网站质量提升至最高 月落网

某些搭配 - 比如黑色和红色,黑色和蓝色,黄色和绿色 - 都会使人产生视觉疲劳:

www.yueluo.net

详细讲解从六个方面将您的网站质量提升至最高 www.yueluo.net

这些搭配还是不错的:

字串9

详细讲解从六个方面将您的网站质量提升至最高

字串5


留意字母的间距

对于视力比较弱的读者,比较近的字母间距会带有不小的阅读困难。 字串5

字母间距适中的文本就比较容易阅读了。 字串8


留意行间距

适中的行间距易于阅读,反之,行间距太小则难以阅读: 字串6


避免奇特的字体

本文中的字体是很适合阅读的。

字串6

但是下面的字体就不同了: 字串6

详细讲解从六个方面将您的网站质量提升至最高

字串7


尽量少用斜体

普通字体易于阅读。斜体字往往难以阅读。 字串8

五、易用性 字串8

如何确保您的网页对于大多数用户和浏览器具有更强的易用性和适用性。

www.yueluo.net

能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。 字串7

残障人士指的是那些带有残疾或者身体不健康的用户。

字串9


Web Accessibility Initiative - WAI

WAI (由 W3C 在1997年发起)是一系列计划供 web 开发者、创作者以及设计者使用的指导方针 - 关于如何使内容对残障人士更易用。 月落

这些指导方针的目标是易用性(accessibility),但是也有助于使 web 内容可用于更多的浏览器(语音浏览器、移动电话、手持设备),以及更多工作于困难环境的用户(非手持式的、强光、黑暗、弱视、噪音等)。

月落网


WAI 对您的网站来说很重要吗?

是的。 月落网

每天都有百万计的残障人士在网上冲浪,并且甚至超过百万计的人们正在使用着不良的浏览器设备,或者工作在困难的环境当中。

www.yueluo.net

假如您的网站缺乏诸如可调节字体尺寸、带有文本描述的图形以及便捷的导航,那些人们就无法访问您的信息。 字串9

事实上:您的网站剥夺了这些人的权利。

yueluo.net

增强网站易用性的理由还有: 字串5

  • 可提升网站的美誉度和形象
  • 可提升户满意度
  • 可增加访问者的数量
  • 可增加访问者在站点的停留时间
  • 可增加访问者的回访数量
  • 可同样为无残疾人士增加可用性
  • 可为关闭图形功能的访问者增加可用性
  • 可为使用老式设备的人群增加可用性
  • 可使您的网站为增长速度最快的人群提供服务:老年人群

使用可调节的字体尺寸

请使用相对的字体尺寸,这样用户就能够使用浏览器菜单来改变默认的字体尺寸。

月落网

详细讲解从六个方面将您的网站质量提升至最高

使用 "alt" 属性

alt 属性允许你为图像(也可以为其它的元素)提供一条相对应的文字。 字串5

实例:

<img src="images/webjxcom.jpg" alt="webjx.com" /> 月落网 

有时候浏览器会无法显示图像。具体的原因有: 月落网

  • 用户关闭了图像显示
  • 浏览器是不支持图形显示的迷你浏览器
  • 浏览器是语音浏览器(供盲人和弱视人群使用)

如果您使用了 alt 属性,那么浏览器至少可以显示或读出有关图像的描述。 月落

六、国际化 yueluo.net

关于国际化的不同的品质问题。 字串5

网络无国界。

月落


网络无国界

With the Internet follows an absolute requirement to interchange data in a multiplicity of languages, which in turn utilize a bewildering number of characters.

H. Alvestrand, Internet工程工作小组 (IETF), 1998年1月。

yueluo.net


国际字符集

所有的 W3C 标准(自从1996年),包括 HTML、XHTML 和 XML 都定义了一个名为 Unicode (ISO 10646) 内部的内部字符集。

字串8

所有现代 web 浏览器都在原生地使用此字符集。而大多数在 internet 上传输的文档并没有使用这个 Unicode 字符集。

www.yueluo.net

正因如此,Internet 客户(浏览器)与 Internet 服务器 之间必须有一种在通信中一致使用字符集的方法。 月落网

对每个文档在用的字符集进行标记,对于提升网站的品质来说至关重要。 www.yueluo.net

请始终在 <head> 元素内 使用下面的的元元素:

字串5

<meta http-equiv="Content-Type" content="text/html;charset=X" /> 字串6 

把 X 替换为你所使用的字符集,比如ISO-8859-1、UTF-8 或者 UTF-16。 字串9


国际日期

请不要使用类似 "04-03-02" 的日期格式。

字串6

上面的日期可以表示为2004年3月2日,或者2002年3月4日,亦或者2002年4月3日。 字串6

国际标准化 (ISO) 为日期定义的国际标准格式是 "yyyy-mm-dd",yyyy 是年,mm 是月,dd 是日。

yueluo.net

如果您使用了 ISO 的格式,那么大多数访问者都能明白你的日期。 月落


Tags:网站品质,WEB标准
责任编辑:
您的评论
用户名:新注册) 密码: 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为