在跟燕青一起学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应用开发非常的重要，建议初学者务必安装！

l  英文

l  中文简体

l  法文

l  德文

l  日文

图1 Win8 ISO

用户可以根据自身的需要下载各自的语言版本，并且也能够选择32位还是64位操作系统。

在漫长的等待后，我们将ISO下载完毕，下面需要制作安装盘。有两种方法制作安装光盘：

l  将ISO刻入到DVD中，使用DVD光驱安装Windows8操作系统。比如说，使用Windows
Disc Image Burner工具制作DVD盘，具体方法可以参考：http://windows.microsoft.com/en-US/windows7/Burn-a-CD-or-DVD-from-an-ISO-file。

l  将ISO制作为U盘的image，使用U盘启动和安装。具体方法可以参考：http://www.microsoftstore.com/store/msstore/html/pbPage.Help_Win7_usbdvd_dwnTool

注意：在安装过程中，可以使用Product Key:   DNJXJ-7XBW8-2378T-X22TX-BKG7J

作为SN号。

怎么样？简单吧，不妨自己手动试试看J。

事实上，程序往往很难保证做到这一点。 为什么呢？ 我们先看一个简单的例子： 当程序使用单精度或者双精度的浮点数时， 浮点数有一定的精度的限制。 单精度的浮点数，使用23位二进制表示的尾数。 双精度浮点数，使用52位的二进制（http://en.wikipedia.org/wiki/IEEE_754-1985）。

 如果，程序中计算下面的表达式：

        double d1,d2,d3,d4,d5;
        d1 = 1e-63;
        d2 = 1;
        d3= -1;

         d4 = (d1+ d2) +d3;
        d5 = d1+ (d2 +d3);

       printf("d4=%e\n",d4);
       printf("d5=%e\n",d5);

   通常，它的结果为：
        d4=0.000000e+000
        d5=1.000000e-063

尽管数学表达上， d4 应该有和d5 完全相同的计算结果。但是，由于浮点数的有限精度，（d1+d2），在计算机的值为1. 最终，d4,d5的结果并不完全相同。

如果程序调用Intel MKL 函数，下面的一些因素，往往会对我们的计算结果产生影响：

 1> 内存对齐：我们的处理器往往提供了一些专门的指令，对16 byte 或 32 byte (AVX ) 对齐内存地址进行存取操作。 当程序运行时，对齐或不对齐输入数据的地址，运行的代码可能有略微差别。最终，程序的计算结果，可能不是完全一致。

2> 多线程的设置： Intel MKL 函数已经是多核优化后的函数，程序运行多线的数目不同，带来相应的数值精度上也会细微的误差。

 3> 针对不同处理器的优化代码： Intel MKL 能够充分利用处理器的指令集，来取得程序的最高性能。 这样在不同的处理器上， 程序运行的代码可能并不是完全一致，从而最终的的结果，可能也略有差别。

新的MKL 11.0提供了conditional bitwise reproducible (CBWR)的特性。 在满足一定的条件下，它能保证MKL函数有相同的结果。如果 1）输入/输出的数据地址按照16或 32字节对齐 （ 选择执行SSE指令需要16 byte 对齐，AVX1指令32 byte 对齐）2）运行的线程数目相同 3）在同一可执行文件中被调用， 那么Intel MKL函数可以在多次执行中，有相同的计算结果。

 程序不同处理器上运行的时候，可能运行不同的优化代码。比如， 在较旧Intel® Pentium® 4 处理器上， MKL可能运行SSE2 优化代码，而在支持的AXV指令的新的机器上，MKL 的函数可能运行AVX指令的优化代码。 这样，Intel MKL函数能够根据不同处理器的特性，提供高效的优化代码。但是，当这些代码，有不完全相同的数据处理顺序时，不完全一致的代码可能产生的最有的数值结果可能也不完全一致。 在MKL 11.0 中， 提供的一些新的函数，与环境变量。能够帮助用户来来控制取得一致的计算结果。

下面我们看一下例子：

  1> 为确保在Intel 以及Intel 兼容的支持SSE2 指令的处理上，有一致的计算结果， 我们可以将程序须设置固定的线程数目， 保证输入输出数据的地址对齐， 并调用以下的MKL 函数：

         mkl_cbwr_set(MKL_CBWR_COMPATIBLE) 或设置环境变量：MKL_CBWR_BRANCH = "COMPATIBLE"

 2>在支持SSE4.1 Intel 的处理器上， 为确保MKL 函数有相同的结果。我们可以将程序须设置固定的线程数目，保证输入输出数据的地址对齐， 并调用以下的MKL 函数： 

           mkl_cbwr_set(MKL_CBWR_SSE4_1) 或设置环境变量： MKL_CBWR_BRANCH = "SSE4_1"

需要说明的是， 如果我们选择了特定CPU优化的代码， 很自然，针对一些新的处理器，MKL 可能会有一些性能开销。 比如，对于矩阵与矩阵乘法的函数（xGEMM）, AVX 优化代码的性能有近乎SSE2优化代码的两倍性能。在支持AVX机器上，我们指定，该函数运行SSE2的代码，会有不少的性能损失。对于其他的一些例子，选择特定的优化代码，可能有10%-20%的性能开销。

相关培训材料： http://software.intel.com/en-us/articles/conditional-bitwise-reproducibility/

下载与测试Intel MKL 11.0 Beta：

坦白讲，作为一个学习了四年专业交互和界面设计本科课程的我，看到人人网Win8的Metro设计，也被深深地惊艳到了。惊艳到的不仅仅是一个一个界面，同样还有其优秀的交互设计。鉴于在博客中无法让大家感受到交互设计的部分。我就给大家列出主要界面的UI设计，配上描述的交互方式，供大家尝鲜。

郑重申明：本文仅供参考，转载请注明出处，其中涉及部分个人隐私，请勿用于其他目的。

1. 新鲜事

最左边是新鲜事，极简主义发挥到极致，背景渐变色块，优雅的微软Segoe字体，有图片的区域较大，直接显示图片，文字区域较小，配以不同颜色的色块，搭配非常简洁和干净。从未发现微软Segoe字体这么漂亮过。注意背景色块的渐变区域，如果是纯蓝色，会显得很呆板，加上一点点的渐变，和右边30%的分隔，将整个画面激活。

2. 我的照片

我的照片和最近来访在新鲜事右边，直接滑动即可看到这部分内容。每个图片会动态变化。请注意看我的照片区域的分栏设计，设计得非常精巧，中间加以宽度适中的分隔，是否想起了Van der Rohe 的名言"less is more" 。最右边的竖条照片刚好显示一张全身照，不知是巧合还是有图片识别算法进行优化排列的。

3. 最近来访

继续向右推动，就会出现这幅界面，这里面的联系人会像来回翻动，可惜无法动态展示。

4. 个人主页

依然只有色块区域，文字和图片，组成了个人主页区域。上端三个字的字体和颜色搭配得非常漂亮。依次点击可以跳到对应的界面。这边我想很多网友会拿和iOs相对比，iOs的设计理念，一般会放个Button在这里，各有各的好处，但是我想说人人网这里的设计真的很惊艳。

5. 我

点击我可以看到详细信息。在这个页面可以仔细看出背景设计的巧妙之处，仔细欣赏这个背景一会吧，真的很棒。我想这就是教科书上面说的"简约不简单"吧。

6. 浏览图片

浏览图片的界面，在前端的这个图片可以随意拖动，当拖到边框外的时候，就回到后端的页面。交互很好。这张图片来自马蜂窝的，应该不存在个人隐私的问题，大家尽可多多欣赏。哈哈。

7. 个人新鲜事

再给大家详细欣赏一下个人新鲜事页面。

8. 快速回复

快速回复非常方便。

9. 我的日志

我的日子页面，大家是否看到了本人去年9月16日发的日志？哈哈，这也算这页UI的亮点吧。

10. 我的好友页面

11. 快速分享@页面

12. 总结

已经无法用言语表达我对这个设计的喜爱了。如果你还在怀疑Windows8设计师Sam在 如何重塑信仰 中对于Win8的期待和描述，我想，这篇博客是最好的答案。

Win8 应用开发介绍（一） Win8新特性\
Win8 应用开发介绍（二） Win8应用为王\
Win8 应用开发介绍（三） Win8开发者工具\
Win8 应用开发介绍（四） Win8应用开发步骤\
Win8 应用开发介绍（五） Win8硬件支持和安全性\
Win8 应用开发介绍（六） Win8伴你随行\

1. 问题描述

Win8可是使用HTML, JavaScript方式来开发Metro Style App。那么传统的HTML网页中，加载web端的JavaScript文件采用的代码方式仍然可以使用吗？如：

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0></script>

答案是不可以，因为处于安全考虑，Win8不允许在开发Web Metro应用的时候不允许在Local context中加载一个remote URL。及即使把这个文件下载下来放在本地也是不可以的，因为它会操作HTML页面中的DOM。

在编译的时候会报错。

2.解决方法

将需要加载的页面放在Local Context的iFrame中。这样当Metro应用在运行的时候，iFrame中的页面其实可以理解为运行在Metro IE浏览器中，所以不存在Local Context不允许加载Remote URL的问题。

代码参考如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024, height=768" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <header role="banner" aria-label="Header content">
        <div class="titleArea">
            <h1 class="pageTitle win-title" role="button" aria-label="Groups" tabindex="0">
                Metro Map App</h1>
        </div>
    </header>
    <div>
      <iframe id="mapIframe" src="file:///****.html" width="1280px" height="800px"></iframe>
    </div>
</body>
</html>

src=file:///****.html 或者src=http://****.html 是需要加载web context 的页面，在相应的html文件中可以自由加载remote URL的内容。

在页面中的关系图如下：

通信

现在的问题出现了，Web Context如何和Local Context通信了。Win8 IE全面支持了HTML5，在HTML5中可以使用HTML5 postMessage method在不通的页面中进行通信。

假设我们在Local Context中新建一个button，代码如下：

<button onclick="ZoomOut();">Zoom Out</button>

在JavaScript中，添加ZoomOut函数：

<script>
function ZoomOut(dx, dy) {
    var xMsg = { method: 'zoomout' };
    mapIframe.postMessage( “ ***** Post your message ”);
}
</script>

在Web Context中，添加receiveMessage(event) 参考代码如下：

function receiveMessage(event) {
  switch (event.data.method) {

	......

    case 'zoomout':
      var currentZoom = map.getZoom();
      map.setView({ zoom: currentZoom - 1 });
      break;
  }
}

本篇完。
参考文章：http://alastaira.wordpress.com/2011/09/26/creating-a-windows-8-metro-slippy-map-application/