在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率和跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率中笔者介绍了自适应的水平和垂直布局，那么还有神秘布局是程序经常遇到的呢？嗯…，猜对了，那就是居中布局。最为常见的运用场合是登录窗口，本篇博客也将以此例，讨论如何制作居中布局。

         在设计居中布局时，HTML和CSS对运行的屏幕分辨率一无所知，那么如何才能够自适应屏幕分辨率呢？非常幸运，CSS中的top和left属性能够按照百分百进行定位，对于屏幕中心点，它的位置应该是left：50%; top: 50%;。接下一个问题是：我如何制定界面的左上角坐标呢？在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率一文中，我们知道了margin属性可以制定其于边界的距离，并且让人兴奋的是，它还能够是负值！WOW，看到了胜利的曙光了吗？

在介绍CSS设置之前，不管三七二十一，我们先写个HTML的DIV吧，如图1所示

图1

图1设计了一个登录界面，笔者将具体登录内容删除，重点讲解其中心位置布局。

图2中的设置是本例的重点，它将position设置为绝对坐标（它将直接按照屏幕为中心，而不考虑其任何的子父包含关系）。因为登录界面的宽度是300个像素，高度是200个像素，所以按照中心点计算，界面应该向上偏移150个显示，向左偏移100个像素，映射到CSS的属性中，其设置为：margin-left: -150px; margin-top: -100px。为了让读者容易看清整体的布局，笔者将登录界面的背景设置为红色，在正常使用状态下，背景的设置可能是不需要的。

图2

运行一下，图3是你要的结果吗？

图3

Great！o(∩_∩)o 哈哈

居中布局相比较于跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率和跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率中的水平和垂直布局而言，它是非常简单的，但是还是有几个基本点需要注意。为此，笔者还是留一道题目加深居中布局的理解 。

题目1）如何在屏幕某个特殊部位内进行居中布局？比如说屏幕的左上角有一个500x400的区域，我需要将login界面在此区域内居中布局。

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

5.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率

6.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率

         在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率一文中，笔者主要讲述了如何通过HTML+CSS的使用，自动根据屏幕的水平分辨率进行宽度的自适应调整。本篇博客将着重讲述如何使用HTML+CSS自适应垂直方向分辨率，通过水平和垂直方向的综合使用，Win8应用程序能够非常容易地自适应不同设备分辨率变化的挑战。

         阅读跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率后，读者已经知道：在默认情况下，DIV是自动扩展其宽度以适合屏幕的实际宽度，那么在垂直方向，DIV的行为方式是否和水平一致呢？为了搞清楚这个问题，不妨我们先做个实验看看吧 。

在Study Metro App项目中，我们添加两个DIV（TopPanel和BottomPanel），如图1所示。

图1

我们在CSS文件中对TopPanel和BottomPanel进行相关的属性设置：两者都自动填充屏幕的宽度，TopPanel有固定的200个像素的高度，BottomPanel没有制定高度，笔者希望它能够自动填充剩余的屏幕高度空间。此外，为了便于观察TopPanel和BottomPanel所占用的屏幕空间，我们分别将其背景设为绿色和蓝色，如图2所示。

图2

运行一下，图3是我们预想的结果吗？

图3

很遗憾，BottomPanel仅仅占用了剩余高度的一部分，而非是我们预想的将它填满。

那么如何才能够实现我们的设计预想呢？在DIV出现之前，我们一般使用table来完成此布局，那么DIV中是否也有类似的属性来实现类是于table的功能呢？非常的幸运，在CSS属性中display：table；能够对展示做出非常好的调整。因为display：table；是设置DIV的父Panel，所以需要在TopPanel和BottomPanel下布局一个父DIV，本例中将其称为MainPanel。图4展示出如何定义HTML中MainPanel、TopPanel和BottomPanel的布局关系。

图4

CSS文件中属性的设置是关键，那么如何搞定他们呢？图5给出了一个很好的样例 ：

图5

MainPanel是table展示，TopPanel和BottomPanel都是table-row的展示。

你们是不是迫不及待的想看看结果呢？没错，我也有这种心情，让我们看看运行结果图6吧！

图6

Cool！BottomPanel非常轻松的将屏幕的剩余部分填充满，真是太棒了！

本篇博客的样例虽然非常简单，但是给出的方法将是非常有价值的，难道不是吗？为了测试一下博友是否真的懂它了，不妨做两个题目吧 。

题目1）布局要求：BottomPanel的高度为200个像素，TopPanel为自动填充剩余的屏幕高度，HTML+CSS应该如何设置？

题目2）布局要求：有三个Panel，分为上中下。上和下分别占用100个像素和200个像素，中间部分自动填充剩余的高度空间，HTML+CSS应该如何设置？

是不是非常的容易？如果是，那么恭喜你！你已经完全“懂我”了 ！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

5.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率

         在跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用一文中，我们介绍了如何在HTML中引入CSS文件，配置CSS中p元素的属性，让HTML显示更加的丰富多彩。本篇博客将继续学习如何使用CSS的属性，在水平方向布局，实现自适应屏幕水平方向分辨率的Metro Style应用。

         在HTML中，有两种方法规范化HTML元素的展现，一种是table；另外一种是div。table主要是规范数据的展现方式，它不是一种布局手段（虽然它在一定程度上能够实现布局需求），因此本篇博客将着重介绍div方式的布局。如果博友对table布局特别有偏好，请参考http://www.w3schools.com/html/html_tables.asp中关于table的文章。笔者还是按照以往的思路，从简单的例子讲解如何在水平方向自适应屏幕分辨率，布局的要求如下：屏幕分左右两块：左边一块占用水平方向200个像素点，右边一块占用屏幕剩下的水平空间。

在开始布局之前，我们先看看div在默认情况下，它是如何顺序布局的。注意：所有的代码都是在Study Metro App的工程中创建，对于如何参见Study Metro App工程，请参见跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序一文。

在default.html中添加两个部门面板：LeftPanel和RightPanel，如图1所示。

图1

在my.css中添加LeftPanel和RightPanel的CSS属性配置，如图2所示：

图2

点击Local Mechine按钮，运行项目，结果如图3所示：

图3

可以看出，在默认情况下div的布局是从上而下依次放置的。

如果我们将LeftPanel的宽度设置称200个像素，如图4所示，那么会达到我们的要求吗？

图4

不如运行一下吧 。图5是我们要的结果吗？

图5

LeftPanel在宽度上和我们的一直，但是RightPanel还是被布局在下面一个区域，这个和我们的要求不一致。可能博友会问，用水平方向的分辨率减去200个像素，不就是RightPanel的宽度像素吗？是的，完全正确，但是问题是：你知道它将会运行在哪个分辨率的机器上呢？在程序设计中，答案无法给出！

现在我们遇到了两个问题：

1）LeftPanel和RightPanel不在同一行。

2）RightPanel的宽度无法算出。

如果我们能够将上述两个问题一一解决，那么程序就能够按照要求展现出来了。

如何解决LeftPanel和RightPanel不在同一行的问题呢？

CSS中提供了一个float属性设置，它让你的div飘起来，是不是很酷 。它能够解决我们不在同一行的问题，还不赶紧看看CSS代码！在LeftPanel和RightPanel中各自添加float:
left一行，如图6所示。

图6

运行一下，解决了吗？

图7

WOW，Cool！LeftPanel和RightPanel已经处于同一行中了！

还有一个什么问题呢？嗯…，RightPanel的宽度怎么计算？

Javascript去计算？别老土了，用这个还让CSS情何以堪！

回顾一下HTML是如何布局的？先出现的先布局，后出现的后布局，… 嗯！好主意！思路豁然开朗了！不妨让RightPanel先占满空间，在左边留200个像素空间给LeftPanel，如图8所示。

图8

LowPanel的主要任务是填充水平方向的所有空间，RightPanel是填充水平方向剩余的空间，看看它的CSS是如何设置的，如图9所示。RightPanel是叠加在LowPanel之上的非float面板，想一下，为什么LowPanel和RightPanel需要float属性呢？对了，它能够解决不同行的问题！那么为什么RightPanel不需要float属性呢？对了，因为我们不希望RightPanel脱离LowPanel的控制，一旦飘了起来，若想固定住的话，需要晴空万里，无风无浪，但是现实是残酷的，难道不是吗 。LeftPanel需要左边200个像素作为其领地，OK！RightPanel通过margin-left:
200px;很大方的在其左边腾出200个像素。LowPanel很霸道，它因为先发优势，已经霸占了整行的宽度，那么LeftPanel只能通过飘起来，然后向左漂移屏幕的宽度，才能够到达其领地。float:
left; margin-left: -100%;给了它航线 ，如图9所示。

图9

运行一下，看看结果是你要的吗？

图10

O(∩_∩)o 哈哈！

不过好像高度不太对啊，应用希望是占用完整的高度！不着急，这个好办，看看图11的CSS设置吧。

图11

再运行一下，你看到了什么？

Y(^_^)Y ！

简单吗？好像是，有好像不是！没有关系，相信你按照此博客，自己实践一下，那么很多问题就很容易弄明白了，不过为了巩固所学的东西，留两个题目吧？

题目1）现在需要全屏布局3列，第1列和第3列的宽度都是200个像素，第3列自动填充满全部的剩余宽度。此外，第1，2，3列的高度都是屏幕的最大高度。

题目2）现在需要全屏布局3列，第1列的宽度是200个像素，第2列的宽度是300个像素，第3列自动填充剩余的宽度。此外，第1，2，3列的高度都是屏幕的最大高度。

如果你能够非常容易的做完题目1和2，那么你的水平布局就基本上出师了 ，加油哦！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

         在跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序一文中，我们已经用Visual Studio 2011 Beta建立了Study Metro App的项目。在运行后程序后，出现了一个非常单调的黑白文本界面，那么能否给它点缀一下呢？毕竟咱们的生活世界是色彩斑斓的 。本篇博客将介绍如何使用CSS文件来为HTML进行点缀。

         CSS是Cascading Style Sheets的缩写，对于其基本的用法，博友可以参考http://www.w3schools.com/css/，这里笔者重点于如何使用。CSS可以配置HTML的各个元素的不同属性，那么如何在Study Metro App添加CSS文件并配置元素属性呢？不妨看看笔者的操作步骤吧！

1.        
打开Study Metro App项目，在Solution Explorer中鼠标右键点击CSS文件夹，在弹出菜单中选择Add菜单，再选择New Item…子菜单，如图1所示。

图1

2.        
依次选择JavaScript菜单àStyle Sheet菜单，然后在Name中输入CSS文件名，最后点击Add按钮，如图2所示。

图2

3.        
双击Solution Explorer中的CSS文件夹，检查是否新增的my.css已经放入了Study Metro App项目中，如图3所示。

图3

4.        
打开default.html文件，将my.css文件添加到HTML的head区域。如图4所示。

图4

5.        
在body区域，将给元素p添加class名字为MyContent。虽然CSS可以制定全局的p属性，但是它会污染所有相关的p区域，对于不同的p元素属性个性化定制工作是不利的，所以建议大家为不同的HTML元素使用局部的CSS属性定制，如图5所示。

图5

6.        
打开my.css文件，为MyContent配置属性。Class名字在CSS文件中将以.开头，在此列中为.MyContent，并依次将背景色设置为红色，文字为中心对齐（默认为左边对齐），文本颜色为白色，如图6所示。

图6

7.        
点击Local Machine按钮运行项目，如图7所示

图7

看到自己的心血了吗 ? 还不错吧！

图8

博客例子虽然非常的简单，但是它完整的掩饰了如何在一个Metro Style的应用程序中添加CSS文件，并且通过CSS属性的配置来控制HTML的呈现方式，对初学者而言应该是非常有帮助的！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

         在前两篇博客跟燕青一起学Windows8应用开发：安装Windows8操作系统和跟燕青一起学Windows8应用开发：安装Visual
Studio 2011中，燕青已经搭建了Windows8应用开发的基本开发环境。本篇博客将讲述我们如何创建HTML5 Metro应用程序。

         在安装玩Windows8和Visual Studio 2011Beta后，我们可以在桌面上看到Visual Studio 2011Beta的图标，如图1所示（红色方框部分）：

图1

创建HTML5 Metro风格的项目，主要步骤如下：

1.        
双击图1红色方框部分的Visual Studio 2011Beta图标，打开Visual Studio 2011 Beta版本，如图2所示。

图2

2.        
依次点击FileàNewàProject…菜单，如图3所示

图3

3.        
依次选择JavascriptàBlank Application菜单项，并且在Name中填写上你的项目名称（在此样例中，项目名称是：Study
Metro App），然后选择OK按钮，如图4所示。

图4

4.        
如果你有源代码管理系统，请进行相关操作，否则点击Cancel按钮，如图5所示。

图5

5.        
项目创建完成后，点击Local Machine按钮，运行程序，如图6所示。

图6

你看见运行结果了吗？是的，有些简单，不过对于我们而言，已经是很不错了，难道不是吗？J

图7

         在跟燕青一起学Windows8应用开发：安装Windows8操作系统一文中，燕青已经安装了Windows8操作系统。为了能够在Windows8上开发Metro-style应用，还需要安装微软的Visual Studio 2011软件。本篇博客将讲述燕青是如何安装Visual Studio 2011 Beta版本的。

安装步骤如下：

l  打开页面http://www.microsoft.com/visualstudio/11/en-us，点击红色标注方框，如图1所示。

图1

l  点击图2中的红色方框（http://www.microsoft.com/visualstudio/11/en-us/products）

图2

l  点击图3中的红色方框（http://www.microsoft.com/visualstudio/11/en-us/downloads）

图3

l  点击图4中的Run按钮，开始下载安装。

图4

如果网友的网路速度不够快，不妨先用下载工具将Visual Studio 2011 Beta整个文件下载下来，然后在进行安装。这样做的好处是，总体安装时间较少，不至于网友干等J。

可以访问：http://www.microsoft.com/visualstudio/11/en-us/downloads#ultimate
网页，如图5所示，点击红色方框，下载完整版Visual Studio 2011 Beta版本。

图5

Visual Studio 2011对Windows8应用开发非常的重要，建议初学者务必安装！

Win8 Metro UI应用的开发是一件非常有趣的事情，特别是它使用了非常奇特的Metro UI设计。如果现有传统UI设计的应用，能够很方便的移植到Win8上，并且也能够充分利用Metro UI的魔力，那么将是非常有有意义的事情。本篇博客就是讲述，在一般情况下，如何将传统UI应用移植成Metro UI应用。

移植工作看上去比较的难，但是按照规律办事，很多事情仅仅是时间和耐心问题。网友不妨使用9步法来完成你的应用移植：

1.        
下载并安装Windows 8 Consumer Preview，下载并安装Microsoft Visual Studio 11 Express Beta。

2.        
使用Microsoft Visual Studio 11 Express Beta 创建Metro UI应用程序项目，语言可以选择你自己喜欢的C/C++、C#或者Visual Basic等。

3.        
将你要重复使用的文件夹、源代码、资源文件等拷贝到你的新项目中，并且在Solution Explorer中选择Show All Filters。

4.        
用鼠标右键选择你的文件夹、文件等，将其添加入新项目中。

5.        
使用整个项目的查找替换方法，将System.Windows替换成为Windows.UI.Xaml。

6.        
拷贝能够重复使用的XAML代码到项目的XAML文件中去（你可以根据需要创建新的XAML文件）。

7.        
编译你的项目，使用错误信息快速定位需要修改的地方。使用Windows Runtime APIs替换元代的.NET APIs。

8.        
对不能够简替换的代码部分，使用注释将其暂时屏蔽，以便日后慢慢修改。重复7和8的方法直到整个项目完全编译通过。

9.        
对暂时屏蔽的代码部分逐一解决。完成所有相关的修改后，你的移植工作基本完成，下面的工作就是解bugs了。

怎么样？是不是比较简单！还不现在动手试一试J。

Windows8 Beta版的发布为软件开发者提供了一个新的平台，它独特Metro风格的UI设计，让众多用户眼前一亮。Windows8的应用软件开发，它不仅仅能够使用当前最为火热的HTML5+CSS3+Javascript组合，而且也同时支持传统的开发语言，比如说C/C++，#C，VB等。微软的最新版本Visual Studio 2011 Beta（http://www.microsoft.com/visualstudio/11/en-us/downloads）版本也提供了HTML5的集成开发环境，并且还支持Intel ATOM CPU框架的软件优化，充分挖掘出Intel CPU的性能优势，这对于HTML5应用软件的用户体验而言是非常有帮助的。

MS Visual Studio是Windows8应用软件开发的重要工具，对于软件开发着而言，如果能够找到一个很好的MS Visual Studio插件，提供代码编写的效率，那将是非常有意义的工作。

笔者推荐一款MS Visual Studio的开发插件Visual Assist X，它能够帮助程序员快速编程和查看，能够在http://www.wholetomato.com/products/default.asp
上下载它的使用版。在http://www.wholetomato.com/
的右上角有一段视频（如图1），建议初学者仔细看一下，非常的棒！

图1

【小结】

-         
MS Visual Studio 2011支持HTML5编程，并支持Intel ATOM框架的软件优化

-         
Visual Assist X能够帮助软件开发者提高开发效率，提高一天的代码量。

普通的方法是使用微软的VS Studio，查看程序运行时候调用的DLLs。这种方法虽然能够查出所有的DLLs，但是使用麻烦，并且需要设置断点来逐一查看，比较麻烦。

那么有没有其他方法可以使用呢？

幸运的是，Dependency Walker可以帮助我们检查是否相关的文件已经查找到。网友可以从http://www.dependencywalker.com/
中下载到最新版本。

笔者打开了Windows自带的记事本应用，可以看到Notepad.exe依赖于很多系统DLLs，如图1所示。

图1

如果当前的系统缺少某个或者几个相关的DLLs，那么它将会用红色标注出来。通过它，打包人员能够比较容易理清楚哪些DLLs是需要加入打包器打包的。

【小结】

l 
VS Studio可以检查DLLs的相关性，但是缺点是比较麻烦，不直观。

l 
Dependency Walker是一个小工具能够对DLLs和EXE文件进行DLLs相关性检查，直观和易用。

笔者写文章之时，最新的Dependency Walker软件

Intel IPP和TBB能够给OpenCV带来性能上的很大提升，那么如何在编译OpenCV的时候讲其打开呢？

OpenCV轻松进阶初级篇（二）编译OpenCV中已经介绍了使用CMake工具来产生各种编译器的项目文件，那么是否可以通过它来Enabled这些Features呢？

非常的运气，在CMake的配置键值对中，我们找到了IPP和TBB的身影，如图1所示。

图1

编译步骤：

1）  使用CMake打开OpenCV的文件

2）  点击Configure按钮产生所有的键值对列表

3）  选择WITH_IPP和WITH_TBB选项，如图1红色边框所示。

4）  点击Generate按钮产生相关项目文件