YAML中文社区

画一个框把自己装进去，虽然更安全了，却禁锢了想象，使用框架就有这种感觉。希望大家能带着批判精神去看待YAML，学习她的布局思想，但不要被框架所束缚。最近Dirk先生发布了YAML 3.3(增加了对CSS3和HTML5的一些支持)，并且4.0的开发也在进行，以下是新版本YAML说明的译文。

10月15日会发布3.3版本的YAML ，那天恰好是YAML 5周年纪念日，可以在下载页面获取。

大家对新版本有什么期望呢？在过去的一段时间里我一直在从事YAML 4.0的开发工作。虽然这个与3.0并行开发的版本还有很多工作要做，但我很清楚必须对YAML的基本结构做出一些改变(舍弃对旧版本的兼容)，才能使框架变得更好更容易使用。除了这些大的变化之外，还做了许多小的改进。这些小改进都可以被整合到YAML 3.X中，所以我决定把这些它们加入到3.3的版本中。除了潜在的维护因素，V3.3将是3.X分支的最后一个版本。这些稳定的小改进是为了顺应即将普及的HTML5和CSS3。

看完前两篇教程之后，可能大家会觉得手动创建布局太麻烦了。不过有了之前的基础，使用YAML Builder就会得心应手。

YAML Builder是强大的可视化布局工具，只需要简单的设置参数和拖拽模块就能快速创建基于YAML的布局。

一、准备工作

1. 在本站或yaml.de下载Simple Project Template，并解压到一个目录中。

2. 打开http://builder.yaml.de/，建议使用火狐或谷歌浏览器

在完成我们的基本三栏布局之后，接下来说说YAML提供的几种布局变换方法，以myproject为例。

一、修改栏目的个数和顺序

YAML的基本布局可以通过修改CSS实现多种变化，并且不需要改变(X)HTML源码的。下面实践了两种变化。

1. 改变栏目顺序。现在布局的栏目顺序是1-3-2，如果要变为2-3-1，只需修改浮动栏目的方向，编辑basemod_index.css，修改“内容区域”为如下代码。

使用YAML需要一定的HTML和CSS基础，本教程重在实践，现在开始。

这一节主要说明如何手动创建一个YAML项目。

一、下载YAML

首先下载YAML Download-Package，可以在本站或YAML官方下载最新版本。

完成之后解压下载包，会看到如下图的目录结构:

examples/包含了许多YAML布局实例，yaml/是框架目录，每个基于YAML的布局都必须包含它。其他目录可以先不了解。

接上回固定布局、流动布局、弹性布局-哪一种适合你?(上)

五、使用流动宽度页面设计

虽然流动布局表现出一些问题，但是可以使用一些技巧克服它们。

使用简单的设计

流动站点设计越少依赖图片和困难的技术，就越容易被制作和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计，可以更好的防止、发现和解决兼容性问题。

例如Smashing Magazine使用了流动页面布局，为了更简单，只让顶部的黑橘色导航可以延伸，自适应用户的分辨率。另外内容区域按照需要延伸和收缩，智能地使用CSS防止sidebar和内容产生冲突。

选择固定布局(fiexd)，流动布局(fluid/liquid)还是弹性布局(elastic)？这个问题已经困扰了网页设计师们很多年了。每种布局都有它的优点和缺点。最后的选择往往取决于需求，而不是哪个更简单。考虑到这些因素并恰当的设计，你最终能获得拥有所有优点的成功布局。