YAML Builder

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

一、准备工作

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

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

二、基础界面

1. 布局基本设置(LAYOUT OPTION )。可以设置0到3栏，导航样式以及边框等。

2. 布局类型设置(LAYOUT PORPERTY )。width用于固定宽度布局；min-max-width用于流动宽度布局。还可以设置布局位置，居中还是两边。

3. 栏目顺序设置(COLUMN PORPERTY )。栏目顺序和宽度的设置，只有2栏或3栏布局才处于激活状态。

4. 底部按钮。Toggle View用于切换视觉设计视图 和拖拽视图 ；Reset可以重置回基本三栏布局；Get Code用于布局完成后获取代码。

三、扩展界面

1. 可选布局元素设置(OPTIONAL LAYOUT ELEMENTS )。

2. 内容元素拖拽(DROPPABLE CONTENT ELEMENTS )。常用元素拖拽区。

3. 子模板拖拽(DROPPABLE SUBTEMPLATES )。先用Flexible Grids划分区域，在把Content Boxe放置在划分区域之中，接下来才能往里面添加内容。

4. DOTYPE设置(HTML/CSS CODE OPTIONS )。用于设置网页的DOCTYPE和选择解决IE 6 min-max-width问题的方式。

三、制作一个简单的三栏布局

了解了基本的功能之后，现在动手实践。

1. 首先设置布局的基本选项-三栏+Teaser，导航为Sliding Door，弹性宽度布局，最大宽度80em，栏目顺序2-1-3。如下图。

2. 拖拽内容。必须在拖拽视图(Construction View)下来能拖拽。所有能放置内容的容器左上角都有一个 按钮，点击它之后，容器边框变为橘黄色虚线。这时就可以从拖拽区域中选择需要的元素放置进内容容器中。

这里要强调一点，使用子模板划分区块后，必须要加上Content Boxes之后才能放置内容。

切换为视觉设计视图查看

四、获取代码

布局完成之后，我们需要把代码整合到之前下载的Simple Project Template 中。

1. 点击Builder中的Get Code。四段代码分别另存为x.html，central_x.css，basemod_x.css和patch_x.css。

2. x.html放在根目录中，按以下的顺序放其他文件。

• css/central_x.css
• css/screen/basemod_x.css
• css/patches/patch_x.css

3. 编辑x.html，修改为对应的CSS文件名。在浏览器中查看x.html，布局完成了，并且解决了布局的IE hacks。接下来按照”自顶向下原则“进行实际的设计。