40种XHTML页面布局_呐喊网络_Whoop network For network Whoop

Whoop network For network Whoop

梓朕（Fearless·Z）写在前面的话

　　自从学习XHTML(The Extensible HyperText Markup Language 可扩展标识语言的缩写，国人将其和表现统称为CSS+DIV)以来，费尽周折，因为一直没有找到一个非常系统的、可遵循的规律来规范我在设计页面时的思维（很多设计师都是形象思维强，逻辑思维能力比较弱的，从传统绘画专业转设计职业的人更是如此）。在以前，我设计一个新页面（符合Web标准的页面）的时候，总是要不断的将想到的效果凭凑、拆散、再拼凑…当然，这样并不是我在调整视觉效果，而是在努力让我的视觉设计更易代码化，让它符合Web标准，灵感就在这样的过程中丢失了不少。经历了这样一个学习锻炼的过程，在2005年某个郁闷的夜晚我发现了它们的规律，所有的页面都可以用以下40种布局去实现，我觉得这是可以和大家分享的，因为我自己因此受益。

说明

以上都是正确的标识和CSS，并在以下浏览器测试成功 IE5.0，5.5，IE6，IE7，Opera 8.5， Firefox。

每个页面的布局都包含以下五个主要部分：头，内容，导航，额外的一些东西。每个布局共同基本标识如下：

<div id="container"> <div id="header">头</div> <div id="wrapper"> <div id="content">内容</div> </div> <div id="navigation">导航</div> <div id="extra">额外的东西</div> <div id="footer">页脚</div> </div>

有人可能会说，照你这样简单的搞法，这东西也太简单了，不能做为一个设计作品出现在网路上。我要告诉有这样想法的朋友一句话：无论我们的设计有多微妙繁琐，我们都需要有力的基石！这40个XHTML布局完全可以满足任何风格的页面设计。

我们通常将页面设计和页面制作、实现分开来考虑，但是做为一个优秀的网页设计师他会顾及到两个逻辑部分：第一部分是文字排版和色彩，而第二，就是页面布局及最终的实现。