`

有关YMAL布局工具介绍

阅读更多

1.1 YAML是什么?

YAML是“另一个多栏布局(Yet Another Multicolumn Layout)”的缩写。
YAML是XHTML/CSS框架
YAML可以作为开发弹性布局(流动布局)的基础,它能强有力地应对弹性容器和不同变化单元带来的挑战。

最重要的特点:

  • 两种布局方法:普通多列布局+网格(columns + grids),灵活性与易用性兼具
  • 广泛的跨浏览器兼容(IE 5.5+),在各种布局下YAML都有良好的表现
  • 尽可能小的限制使用者(布局可以使用固定宽度或者弹性宽度等)
  • 栏目在显示上和在源码中的顺序可以不同,利于SEO
  • 按功能划分样式文件,工作会更有效
  • 整合网格系统,使用子模板(subtemplate)几乎能组合成任何布局

使用YAML可以开发出常规一到三栏的流动或者固定宽度布局。每个栏目也可以通过使用子模板(subtemplate)无限的嵌套和扩大。

有两种创建布局的基本方法:

自底向上原则

最开始是一个空白页面,所有的容器必须被创建,定位并使用CSS书写样式。但基本布局还不存在。当构建布局时,设计者必须发觉所有相关的浏览器BUG,并且避免这些BUG或者使用HACK。

自顶向下原则

设计者从一个有着跨浏览器兼容性、有基本功能的模块骨架的布局开始,此布局包含所有常用的页面元素。然后按照自己的想法修改这个基础布局,最后通过移除布局中不必要的元素优化XHTML和CSS代码。

YAML基于自顶向下原则。“搭积木”和“框架”这两个词能够最好的描述YAML。

1.2 YAML不是什么?

YAML并不是一个预先完成的布局,这听起来与”自顶向下“原则原则相违背。没有对特殊设计要求的优化,无用的元素(HTML/CSS)只是多余的(就像轮船中的压仓物,应该丢弃)。

作者注释:
YAML框架提供跨浏览器兼容的基础布局以及许多有用的CSS组件,让设计者有更多时间和精力放在设计创新。如果把YAML作为一个完成了的布局重复使用,那么这些网页就像是那些连成一片的房子——千篇一律。

当然不强迫使用YAML和所有组件作为布局的初稿。实际使用YAML时保持代码简洁干净,维护和调整代码将变得更简单。布局完成后应该清除不必要的(X)HTML代码和CSS文件。

1.3 框架的优点

YAML不仅仅是简单的多栏布局,它是一个完整的布局框架,高度灵活并在真实环境条件经过测试。YAML提供不同的模块并确保他们能完美地一起工作。YAML框架的一些优点:

浏览器兼容性

YAML的组件都经过充分的测试,确保在所有现代浏览器下有相同的表现。必要的HACK也被构建进框架之中,最大程度减少各种常规布局的测试时间。

积木原理

模块化设计允许使用提供的代码特别高效的布局设计。

基本的组件结合起来形成一个基础但功能完全的布局,附加的组件用于完善或修改基础的布局。

例子包含了使用basemod.css布局以及打印样式可能的简单变化。

布局灵活

YAM不只提供一个简单的三栏布局。栏目的顺序可以任意调换,因为浮动的动态特性,很容易改为单栏或两栏的布局。栏目和布局的宽度可以使用任何量度单位定义,你甚至可以在同一页面使用各种单位。

健壮的代码

把XHTML和CSS构建成独立组件,保证了布局框架与实际内容分离。

1.4 关于版本更新

YAML框架不断地更新。每个新版本的变化和新增内容都会在更新日志中记录,如果有必要会附加文件。由于分开放置YAML与用户CSS,更新YAML会很容易。

 

 

 

对于我这种对前端CSS不熟的人来说用YMAL BUILDING来建立网页布局特别方便

 

http://builder.yaml.de/

 

这是YAML的在线生成工具的网站,用FF打开,不支持IE6

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics