Two-column floated layout（左右浮动布局） 引发对页面结构的选择的反思

HTML代码：

 1 <div id="wrapper">
 2   <div id="branding">
 3     
 4   </div>
 5   <div id="content">
 6     
 7   </div>
 8   <div id="mainNav">
 9     
   </div>
   <div id="footer">
     
   </div>
 </div>

The main navigation for this design will be on the left side of the page and the content will

be on the right. However, I have chosen to put the content area above the navigation in

the source order for usability and accessibility reasons. First, the main content is the most

important thing on the page and so should come first in the document. Second, there is

no point forcing screenreader users to trawl through a potentially long list of links before

they get to the content if they don’t have to.

上面的一段代码及说明摘自：Friends of ED.CSS.Mastery.Advanced.Web.Standards.Solutions.Feb.2006

Ps：菜单栏位于页面的左侧，正文内容位于右侧，下面将介绍在代码为什么选择将内容域放在导航栏的上面：1、正文

内容是页面中最重要的部分，放在上面将会优先被页面加载；2、这样不会让使用屏幕阅读器的用户，在看到正文内容

之前还得向下拖动导航链接这么长的一块距离。 以前做设计的时候从来不会考虑的这些人性化的内容，现在才真正明白

并不是页面按设计稿的样子显示出现就可以了，浏览器的兼容性是一方面，而另一方面也是大多数设计者容易忘记的一点

就是页面优化，编程与设计的目的就是让更多的人（包括有阅读障碍的人群）更多好的阅读！