东莞网捷网站建设技术有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

网站建设

联系方式

联系人:秦先生
电话:0769-6585788
邮箱:service@jihua0769.com

当前位置:首页 >> 新闻中心 >> 正文

网站建设中可利用CSS改善可访问性

编辑:东莞网捷网站建设技术有限公司  时间:2013/01/30  字号:
摘要:网站建设中可利用CSS改善可访问性

    CSS在1996年出现,用来解决上述的问题。通过使用CSS,可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就可以应用准确的格式化并达到想要得到的版面设计,而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。

    CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单,这个风格单可以与网站的风格单共同工作。因此,例如一个使用者可以设定,所有通过 标签定义的文本都应该是1.5em Arial,即使这个网站的风格单表示它应该是18px Verdana Bold。

    要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用,这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如,如果用户的风格单指定标签应显示1.5em Arial文本,但是HTML页面并不使用标签来从风格单中调用一个风格(也许它使用),用户对于标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签,这将减少用户定义的风格单被忽略的机会。

    如果你是从头开始建构一个新的网站,那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。

    步骤1:检查现有代码

    为了更好地说明,我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS,不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。

    步骤2:从HTML中去掉所有特殊风格标签

    要在这个页面中加入CSS,我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观,风格和颜色。去掉这些元素使得样本代码如表B所示。

    步骤3:从HTML中去掉并替换任何错用的标签

    现在我要去掉任何错用的HTML标签。在样本代码之中,一个表格用来在页面的内容创建一个15象素的边缘,代码还使用

    标签来创建段落。

    在我去掉表格和标签之后,我将他们替换为适当的标签。例如,我对页面标题使用 标签,用 标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易,而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。

    步骤4:建构一个CSS文件来覆盖风格信息

    现在我已经从HTML文件中去掉了所有风格信息,我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件,因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。

    为了使在HTML中应用CSS文件变得容易,我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小,使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整(除了Netscape 6或以后的版本之外,它将不考虑绝对字体大小)。我还在需要的地方指定了字体的种类,重量和颜色。

    要重新产生由HTML标记代码创建的版面,我需要将和 标签设置宽度为780象素。然而,由于我们的目的是将可访问性最大化,因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘,而不是用原始代码的  标签来重新创建15象素的空白,这也使得其它例如打印机等的设备来使用它的缺省边缘设置。

    表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。

    步骤5:在HTML文件上附加新的风格单

    在创建了CSS文件之后,我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签( 和 ),所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到和标签当中,如表E所示。

    步骤6:验证代码

    整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话,你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。

    我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来,还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。

    此外,World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。

    基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小,因为所有的风格信息都存储在了CSS文件之中。

上一条:网站建设吸引更多网友的方法 下一条:8个网站建设实用的ASP.NET工具