第8章 XHTML的示例:混合布局(第一部分)

1. 目标:制作一个混合的、过渡的布局,结合使用具有结构化的文本标记和增强型可访问性的传统表格布局技术。

  a. 用CSS来控制颜色、尺寸和元素的相关位置;

  b. 用XHTML文本和CSS来实现菜单图片的交替效果,用CSS来代替Javascript能节省带宽,增加可访问性;

 

2. 基本方法

  a. 分割表格:将版面分成两个表格能允许我们更好的运用id属性——简化CSS、增强可访问性和对每个表格做出结构性标记(id);

  b. 表格摘要属性summary:对于普通桌面浏览器不可见,但对于屏幕浏览器可以大声读出它的数值,增强可访问性;

  c. 跳过导航:跳过导航可以让使用屏幕阅读器的用户带来益处;

    (1) .hide {position:absolute; left:-9999px;},屏幕阅读器不会受布局影响;

    (2) 将导航放在内容后面,运用CSS将导航定位到顶端;

  d. 导航看不见时,用accesskey替代导航:可惜W3C并未对accesskey快捷键进行标准化,但有设计师找到了添加可视化accesskey快捷键的方式(http://alistapart.com/article/accesskeys);

  e. CSS里面使用绝对路径代替相对路径,能方面代码移植和避免一些老服务器中CSS bug;

 

3. 使用表格是为了展示:关于任何讲标准引入你工作的努力,即便是采用妥协折中的办法(使用部分表现层标记),都是值得的。

posted on 2013-04-26 23:43  BigPalm  阅读(112)  评论(0编辑  收藏  举报

导航