这个图别看简简单单几个色块，真正实现也不见得有多容易，得看你考虑到哪些东西。大概例子已经做出来了，提供下载 。

由于上下head跟foot两个色彩是单色的，所以要考虑自适应各种分辨率的屏幕，自适应分辨率不是百分百就够的，div的百分百布局会有很多问题。另一个是中间内容需要宽度自适应，左边side1是固定宽度，右边的side2也是固定宽度。

还有一个应该是比较难的一个问题，就是高度自适应，要保证side1红色块内容增多的时候，右边main，side2的色块也要跟着一起延伸，右边side2的内容增多，左边红色块也要跟着一起延伸，中间main的内容增加，红色块依然要继续延伸。先前也发过 关于 高度百分百引发的思考 ，有兴趣的可以去拍砖。
Read the rest of this entry »

内容组织可能对于任何好的网页设计都是最重要和最有影响力的方面。把信息组织在一个构造精美的布局里是一个网站的根基， 应该在考虑风格设计之前弄清楚。 如果没有一个好的布局， 网站看起来好像没有正确地流向，没有连接方式。

在这篇文章中， 我们将讨论八种有用的布局解决方案和技术， 这些将有助你创建一个干净的组织有序的内容布局。 这八种技术包括sliders （滑动器）, tabs（选项卡）, progressive layout （前进式布局）, structured grids（结构化网格）, modal windows（弹出窗口）, rollover elements （翻滚元素）, accordions （手风琴） and mega drop-down-menus （大的下拉菜单）.

1. Sliders and Carousels （滑动器和旋转木马） 

滑动器，也称为旋转木马， 是一种组织有序，可交互的并且可流畅表达信息的方式。 滑动器是一种非常流行的技术因为确实非常实用。你可以把大量的内容放在一个固定紧凑的区域， 如果没有滑动器， 这些内容不得不被放在页面的某些地方，在很多情况下， 你可能并没有空间给他。 当需要的时候你可能想要显示一些信息。silders 可以帮助用户一次只关注一个内容块，这很有用并且很方便。 这就是slider为什么会迟早会派上用场。
Read the rest of this entry »