HTMLayout学习笔记
by BBDXF
一、界面篇
学习界面需要有一定的HTML、CSS认知，如果你问为什么，那就当我白说。
由于界面库官方没有给一个完善的User guide，所有的学习都靠自己，而唯一的标准教程就是SDK中给的例程，所以为了完善地学习此库，以SDK中的例程一个个解析学习。
此篇主要来解析html_samples下的界面编写，我想这是大家都非常关心的话题，所以放在第一位。（PS：由于界面编写需要很多 HTML+CSS 知识，我也是新手，没有多少这方面的学习，所以如有错误纯属正常，望谅解。）
参考文档：http://www.terrainformatica.com/wiki/h-smile/drag-n-drop?do=index
1、@font-face
此例程主要讲解字体（自定义字体）在界面中的使用。（以后若无特殊情况，都会按照以下形式【文件结构+代码+解析】组织文章）
文件结构：
NinjaLine.ttf
test.htm
代码：在Style中，插入
@font-face
{
font-family: NinjaLine;
src: url(NinjaLine.ttf);
}
p
{
font: 18pt NinjaLine;
}
解析：其中font:18pt NinjaLine; 是设置段落
之内的文字以NinjaLine字体显示。而由于这种字体没有在系统里注册，所以不能直接调用，需要按照@font-face{...}的形式给予声明（和C/C++的函数声明的感觉差不多），如果是系统里已经有的字体，如“宋体”、“楷体”等就可以不声明，直接使用。
2、@image-map
这部分讲的是@image-map的用法。
文件结构：
cmd.bat
dpi-aware.htm
rttb.png
star-1x.png
star-2x.png
test.htm
toolbar-icons.htm
第一个文件：dpi-aware.htm,讲的是关于自适应DPI的问题。
代码：
@image-map dpi-aware {
src: url(star-1x.png) 100dpi,
url(star-2x.png) ;
}
#star {
size:180dip;
background: no-repeat 50% 50%;
background-image: image-map(dpi-aware);
border:1px solid;
}
#star-no {
size:180dip;
background: no-repeat 50% 50%;
background-image: url(star-1x.png);
border:1px solid;
}
//HTML代码省略
解析：
代码中比较值得注意的就是声明了一个@image-map dpi-aware {}(不专业，但是方便理解就这么说了)，然后再#star这一块调用image-map(dpi-aware)，将它设置为背景图片。在我的电脑上运行的效果是#star和#star-no显示的是同一张图片（大家的效果都应该差不多），但是将声明的部分改为：
@image-map dpi-aware {
src: url(star-1x.png) 90dpi,
url(star-2x.png) ;
}
之后，显示的是声明的第二张图片。为什么呢？
官方给出的说明其实已经解释了这个问题，@image-map dpi-aware 声明，当被调用时，会根据电脑屏幕的DPI（每英寸点数，win7可以通过注册表 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetric\AppliedDPI查看），当电脑DPI小于设定的100dpi时，就会调用第一张图片，否则就是第二张了。总的来说，就是根据屏幕DPI自适应显示相应的图片。
第二个文件：test.htm 是关于设置样式的问题，官方没给任何解释，但是根据第三个文件内容，可以很明显地看出来，它啥也不是，就是个Test,Pass掉。
第三个文件：toolbar-icons.htm 这个文件很重要，他给我们提供了一种很方便地加载类似MFC中工具条界面的方法。
代码：
Style部分样式代码：
@image-map tb-icon
{
src:url(rttb.png);
cells:15 2;
items: ulist,
olist,
unindent,
indent,
picture,
table,
link,
align-left,
align-center,
align-right,
align-justify,
align,
fullscreen,
unfullscreen,
props,
bold,
italic,
underline,
strikethrough,
font-family,
font-size,
text-color,
text-back-color,
source;
}
toolbar {
display:block;
display-model:block-inside;
flow:horizontal; border-spacing:2px;
padding:0;
border-left: 1px solid #F4F4F4;
border-bottom: 1px solid #BBB;
background-color: #F1F1F1 #F1F1F1 #DADADA #DADADA;
}
toolbar > widget.button {
behavior:clickable;
size:21px;
padding:0;
foreground:no-repeat 50% 50%; padding:3px;
foreground-repeat:no-repeat;
background-image:none;
background-repeat:stretch;
hit-margin: 2px;
margin: 2px;
transition:none;
}
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); }
toolbar > widget.button.italic { foreground-image:image-map(tb-icon,italic); }
....(类似的省略)
Body部分Htm代码：
....其他的省略
解析：
Style部分的第一个声明@image-map和字体声明类似，声明了一个ToolBar的结构，其中，src:url(xx.png);表明Toolbar所使用的图片，一般为了美观，png要做成透明背景的。cells:15 2;表明整个Toolbar的大小为多少行多少列。items:xx1,xx2,...;表明Toolbar中有哪些项，都以名称表示，每个名称都和图片中的图标相对应。一般cells中形成的表格数一定要大于items的项目数。
toolbar{ .... }和toolbar > widget.button{....}和其类似样式的就是CSS样式了，虽然并不和平常使用的CSS完全相同，但是除了添加的一些专门适用于程序的样式之外，其他的都差不多，我只捡一些比较重要和特殊的加以说明，一般性描述的不做介绍，有问题的可以去W3CSchool和HTMLayout官网查询。
toolbar{} //设置之间的内容的样式，这种使用方法以后会很常见
display:block; //显示当前块，一般不需要设置，默认的就是这个
flow:horizontal; //水平放置其内部块，这个很重要，是HTMLayout专用的
toolbar > widget.button{} //设置内部或者有声明的块的样式，这种用法很常见,你可以根据各块的关系随意组合下去。
toolbar > widget.button：hover{} //上一个用法的扩展，表明是在上一个样式的前提下，当鼠标移到上面时，所表现的的样式，类似的还有 :active、:disable等。
behavior:clickable;//设置它对应控件的动作为可以被点击。behavior有很多动作，每一个动作的具体含义需要查阅官方的文档。
background-image:url(theme:toolbar-button-hover); //设置背景图片，重点是后面的theme主题设置，目前未找到全的列举说明，暂时明白什么意思就行了，当然也可以自己设置对应的图片。
foreground-image-transformation: colorize(#70F); //设置当每一项被至于焦点时，图片的前景颜色，通过colorize(xx)可以改变图片的显示颜色（透明的前景色）。
toolbar > widget.button.bold { foreground-image:image-map(tb-icon,bold); } //这里才是重点的重点，它将HTML中的name="bold"（.bold）对应的widget和@image-map中的图片对应起来，{}中的bold就是在声明时指定的名称。
最后是HTML部分，重点是 这表明widget控件的类型(style)为button,其名称为bold（bold这里只是表示一个名称，不是粗体的标志）,个人猜测完全可以写为这种比较正规的写法，只是样式需要做很多调整，没有官方的方法省事。值得注意的是，CSS中的名称一定要和这里的style和class对应，原因我也不用多说了。
3、abs
文档结构：
│ abs.htm
│ abspos.htm
│ abs_fix.htm
│ fix_center.htm
│ menus.htm
│ rel_abs.htm
└─images
back.png
menu-back.png
第一个文件：abs.htm 演示的是绝对位置的不同效果。
代码：
Style部分：
#abs1 {
position:relative;
overflow:auto;
height:50%;
...
}
#abs2 {
position:absolute;
width:150px;
...
}
#abs3 {
position:absolute;
width:150px;
...
}
HTML部分(只写框架)：
解析：
Style部分值得注意的就是position属性的设置，其中absolute指绝对的，relative相对的。这里的绝对是相对于当前所在的大块（母块）来说的，由于abs1的height:50%，配合overflow:auto,每次只显示一半的区块，所以拉动滑动条时它的左上角坐标是变化的，而abs2相对于他的左上角的绝对位置不变，所以abs2区块也会跟随着abs1移动。而abs3由于直接位于body之内，他的位置相对于body的左上角来绝对确定，body不变，他的位置就不会变。
做个小总结：
1、absolute：不占位、relative：有占位！position为rel的层在显示时，会占用一行！其后面的abs层只会在下一行显示出来！ position为abs的层在显示时，会与后面的重叠在一起！
2、默认情况下（不结合top等来定位），absolute（绝对定位）以父层来定位的
如上面的id为abs的层，如果不结合top等来定位，则其显示位置会随父级posi层（posi在文档左下角，其也会在左下角）
3、在结合top、bottom、right、left等属性时，absolute（绝对定位）以窗口做为定位，relative以自身的占位为基线做偏移！
4、在结合top、bottom、right、left等属性时，如果想absolute（绝对定位）能以父层做为定位基线的话，则在父层应用absolute或relativ属性就可以!
HTML部分是标准的html标记，不做解释。
第二个文件：abs_fix.htm 第一个的拓展，介绍属性position:fixed; 的用法
由于其他的都和第一个类似，不做介绍，只讲解position:fixed; 的原理。
position:fixed; 除了相对位置和绝对位置，还有一个fixed(固定的)，它用来定位一个区块相对于边框（上下左右）的位置，使用非常方便，通过它你可以很简单地将一个区块固定到右边框、上边框、下边框，而不同设置太多的代码。一般他需要left,right,top,bottom中的一个或者多个配合。如将一个区块设置为距右边框10px，上下10px,宽度100px,高度随框架变化，代码如下：
#fix {
position:fixed;
right:10px;
top:10px;
width:100px;
bottom:10px;
}
相当的方便和简单，唯一的缺点是在低版本的IE引擎(如IE6.0)，变现的不好，不过对于HTMLayout没有问题。
第三个文件：abspos.htm 这个比第一个还简单，介绍绝对位置的，略过。
第四个文件：fix_center.htm 这个和第二个类似，是它的威力加强版。呵呵，实现居中效果。这个很简单。
左右居中： left:*;right:*;
上下居中：top:*;bottom:*;
PS: 千万不要忘了设置width:属性，这应该是理所当然的，你不给人家提供宽度，如何居中！
第四个文件：menus.htm 通过定位实现菜单的样式，这个比较有意思。这个里面没有新的内容，但是需要有一定的排版美化能力，完全用css组合成的一个菜单框架，这里也只讲解思路。
代码：
Style部分：
menu {
flow:horizontal;
padding-right:100%%;
...
}
menu li{
display:block;
position:relative;
...
}
menu menu{
flow:vertical;
display:none;
...
}
menu > li:hover > menu{
display:block;
}
HTML部分：
代码解析：
先说HTML结构，先有一个
