DIV教程之使用CSS改良网站可会见性

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
<P>我不能不对我的一个客户的旧网站举行更新，使得它可以到达可会见性的尺度。对三四年前的旧代码举行发掘的设法基本没有吸引力，次要是由于我已经利用的良多编程常规已不再合用，出格是从可会见性下去讲。我已经利用相对的字体巨细，流动的页面宽度和表格来做版面计划和空间分派。像当时建构的良多网站一样，我的客户的网站利用了CascadingStyleSheets(CSS)来格局化文本。它没有利用任何CSS的加倍强无力的版面计划功效，也没有同意HTML设备自力，而这是CSS可会见性的次要长处之一。
成绩是怎样呈现的？
在我概述使网站加倍具有可会见性的办法之前，懂得当今浩瀚的会见性成绩的原因大概是很有匡助的：

• 对HTML浅薄的了解：在1990年月的互联网年夜开展时代中，一切人都入手下手建构网站。WYSIWYG编纂器使得几近每一个人都能够很简单地建构一个网站，而不必操心往进修HTML。但不幸的是，这类在利用上的便当带来了一些糟糕的代码，对可会见性形成了妨害。
  
• HTML在计划方面的范围性：开辟者和计划者常常会存心错用HTML标签，出格是<table>标签，来克制HTML在版面和计划上的范围性。这类计划体例也会带来妨害可会见性的代码。
  

甚么使得CSS更具有会见性？
CSS在1996年呈现，用来办理上述的成绩。经由过程利用CSS，你能够将一个HTML文件的内容与有关它的体现情势或作风的信息分别开来。这就使你能够使用正确的格局化并到达想要失掉的版面计划，而无需利用大概会让屏幕浏览器和专门的扫瞄器软件发生狐疑的HTML代码。
比方，固然HTML表格是用来分列表格局数据的，但他们也常常被用来分列对齐一个页面上的元素的。可是浏览器和比方语音分解器的软件请求无效的HTML代码。因而当他们碰到一个页面毛病地利用了诸如一个表格的元素，发生的了局就会让利用者感应稀里糊涂。
CSS的另外一个可会见性的长处就是它同意利用者界说他们本人的作风单，这个作风单能够与网站的作风单配合事情。因而，比方一个利用者能够设定，一切经由过程<p>标签订义的文本都应当是1.5emArial，即便这个网站的作风单暗示它应当是18pxVerdanaBold。
要注重用户界说的作风只要在用户的作风称号与HTML页面中的标签符合时才会起感化，这是很主要的。这就将确保兼容性的义务交到了开辟者的手中。比方，假如用户的作风单指定<p>标签应显现1.5emArial文本，可是HTML页面其实不利用<p>标签来从作风单中挪用一个作风（大概它利用<fontclass="bodytext">），用户关于<p>标签订义的作风将会被疏忽。因而要确保你对你的题目和段落利用尺度的HTML标签，这将削减用户界说的作风单被疏忽的时机。
入手下手
假如你是重新入手下手建构一个新的网站，那末经由过程CSS来改良可会见性就会很简单。但你仍旧能够轻松地将现有的网站变化为CSS情势。
步骤1：反省现有代码
为了更好地申明，我将用在表A中这个复杂的HTML代码来代表一个利用CSS的页面。这个例子假定页面还没有利用CSS，不外你也能够利用类似的办法来评价一个基于CSS的站点。次要的分歧点就是年夜多半的改动将产生在CSS文件中而不是HTML文件中。
步骤2：从HTML中往失落一切特别作风标签
要在这个页面中到场CSS，我起首必要往失落一切要把持内容体现的标签。样本代码利用了字体标签来界说字体表面，作风和色彩。往失落这些元素使得样本代码如表B所示。
步骤3：从HTML中往失落并交换任何错用的标签
如今我要往失落任何错用的HTML标签。在样本代码当中，一个表格用来在页面的内容创立一个15象素的边沿，代码还利用<br>标签来创立段落。
在我往失落表格和<br>标签以后，我将他们交换为得当的标签。比方，我对页面题目利用<h2>标签，用<p>标签来显现段落。利用这些尺度HTML标签使得以后的CSS的使用变得十分简单，并且与用户界说的作风单加倍兼容。如今的样本代码如表C所示。
步骤4：建构一个CSS文件来掩盖作风信息
如今我已从HTML文件中往失落了一切作风信息，我必要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩大名的文本文件，因而它能够在任何一个文本编纂器中举行创立。我利用的是DreamweaverMX。
为了使在HTML中使用CSS文件变得简单，我利用了名为p和h2的作风来对应尺度HTML标签。我利用了可变的字体巨细，使得用户能够轻松地在扫瞄器中增年夜或减少字体巨细。利用相对巨细能够避免扫瞄器对字体举行巨细的调剂（除Netscape6或今后的版本以外，它将不思索相对字体巨细）。我还在必要的中央指定了字体的品种，分量和色彩。
要从头发生由HTML标志代码创立的版面，我必要将<p>和<h2>标签设置宽度为780象素。但是，因为我们的目标是将可会见性最年夜化，因而我将往失落宽度设置使得页面能切合扫瞄器窗口的巨细。并且我将让HTML页面利用扫瞄器的缺省边沿，而不是用原始代码的<table>标签来从头创立15象素的空缺，这也使得别的比方打印机等的设备来利用它的缺省边沿设置。
表D显现了我创立的CSS文件。我将它定名为Mystylesheet.css并将它安排在网站根目次下的一个作风文件夹当中。
步骤5：在HTML文件上附加新的作风单
在创立了CSS文件以后，我在HTML文件中拔出了它的作风。由于HTML文件已包含了一切在CSS文件中援用的标签（<h2>和<p>），以是我只必要毗连到HTML文件头部的作风单上就能够了。HTML文件从CSS文件中取得作风并将他们使用到<h2>和<p>标签傍边，如表E所示。
步骤6：考证代码
全部历程的最初一个步骤就是考证HTML代码的可会见性。假如你关于CSS来讲是个老手的话，你最好对CSS代码也举行考证。有良多种的工具都能够帮你对两者举行考证。
我利用DreamweaverMX来反省我的样本代码的可会见性。你能够经由过程在文件菜单当选择CheckPage然后选择CheckAccessibility来完成。任何毛病或是告诫城市显现出来，还包含呈现地位的行号和对成绩扼要的注释。你能够在DreamweaverMX的Reference工具中找到更多关于这些毛病和告诫的内容。你只需从Dreamweaver的Windows菜单当选择Reference然后从Book菜单当选择UsableNetAccessibilityReference就能够了。
别的，WorldWideWebConsortium(W3C)供应了凌驾30个的可会见性评价工具的链接。W3C还供应了针对HTML和CSS的基于Web的收费考证器。
可会见性和复杂的办理
固然这里给出的例子是很复杂的，但它申明了使用CSS使你的站点加倍具有可会见性长短常简单的。并且，关于CSS的利用不止这一个长处罢了。
基于CSS的网站要比仅仅只要HTML的网站要好办理很多。CSS文件中的作风上的变更能够使用到全部网站中而不必要改动网站中任何的HTML文件。并且CSS的利用减少了每个HTML文件的全体文件巨细，由于一切的作风信息都存储在了CSS文件当中。
因而假如你想要改良可会见性的话，将其视为一个时机，而不是一个停滞。要懂得更多关于CSS和可会见性的内容，你能够往看一看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。


每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

可以使用 CSS 检查工具进行设计。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上