跟燕青一起学Windows8应用开发

安装Windows8操作系统

Windows8 Consumer Preview ISO文件现在可以在微软网站:http://windows.microsoft.com/en-US/windows-8/download 上下载到。现在支持的语言如图1所示,即: | 英文 | 中文简体 | 法文 | 德文 | 日文 ...

安装Visual Studio 2011

在跟燕青一起学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) ...

创建HTML5 Metro应用程序

跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序 在前两篇博客跟燕青一起学Windows8应用开发:安装Windows8操作系统和跟燕青一起学Windows8应用开发:安装Visual Studio 2011中,燕青已经搭建了Windows8应用开发的基本开发环境。本篇博客将讲述我们如何创建HTML5 Metro应用程序。 在安装玩Windows8和Visual Studio 2011Beta后,我们可以在桌面上看到Visual Studio 2011Beta的图标,如图1所示(红色方框部分): 图1 创建HTML5 ...

用CSS文件妆点你的应用

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

使用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所示。 ...

使用HTML+CSS自适应垂直方向分辨率

在跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率一文中,笔者主要讲述了如何通过HTML+CSS的使用,自动根据屏幕的水平分辨率进行宽度的自适应调整。本篇博客将着重讲述如何使用HTML+CSS自适应垂直方向分辨率,通过水平和垂直方向的综合使用,Win8应用程序能够非常容易地自适应不同设备分辨率变化的挑战。 阅读跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率后,读者已经知道:在默认情况下,DIV是自动扩展其宽度以适合屏幕的实际宽度,那么在垂直方向,DIV的行为方式是否和水平一致呢?为了搞清楚这个问题,不妨我们先做个实验看看吧:-)。 在Study Metro App项目中,我们添加两个DIV(TopPanel和BottomPanel),如图1所示。 ...

使用HTML+CSS制作居中布局

在跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率和跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率中笔者介绍了自适应的水平和垂直布局,那么还有神秘布局是程序经常遇到的呢?嗯…,猜对了,那就是居中布局。最为常见的运用场合是登录窗口,本篇博客也将以此例,讨论如何制作居中布局。 在设计居中布局时,HTML和CSS对运行的屏幕分辨率一无所知,那么如何才能够自适应屏幕分辨率呢?非常幸运,CSS中的top和left属性能够按照百分百进行定位,对于屏幕中心点,它的位置应该是left:50%; top: 50%;。接下一个问题是:我如何制定界面的左上角坐标呢?在跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率一文中,我们知道了margin属性可以制定其于边界的距离,并且让人兴奋的是,它还能够是负值!WOW,看到了胜利的曙光了吗?:-) 在介绍CSS设置之前,不管三七二十一,我们先写个HTML的DIV吧,如图1所示 ...

使用HTML+CSS制作三角形

在跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率、跟燕青一起学Windows8应用开发:使用HTML+CSS自适应垂直方向分辨率和跟燕青一起学Windows8应用开发:使用HTML+CSS制作居中布局中,笔者讨论了如何用HTML+CSS进行应用程序的布局。从开发角度看,这些讨论非常的有意思,但是比较枯燥。本篇博客希望讨论一些有趣的东西,特别是能够利用CSS的有趣的属性。制作三角形就是其中的一个场景,它为日后更加有趣的应用提供了基础,所以不能够轻视它的潜在价值。 可能网友会问,我能够通过HTML中的Canvas,非常轻松的搞定三角形,为什么要用笔者的方法呢?没错,你可以这么做,但是使用Canvas会在应用场合受到限制。Canvas的出发点是为程序开发人员提供画布功能,而非是为了HTML+CSS开发各个元素的组合。 长话短说,让我们看看图1中的HTML元素吧:-)。 ...

使用HTML+CSS制作Bubbles

在跟燕青一起学Windows8应用开发:使用HTML+CSS制作三角形一文中,我们已经掌握了如何使用HTML+CSS制作三角形,本篇博客将讨论如何使用这个三角形制作流行的气泡(Bubbles)部件。 在制作气泡之前,笔者假定读者已经掌握了CSS的before和after选择器,如果对CSS的这两个选择器存在疑惑,请阅读:http://www.w3schools.com/cssref/sel_before.asp和http://www.w3schools.com/cssref/sel_after.asp章节,本博客不将对此进行展开。 言归正传,请看图1中的HTML实现。 ...



作者简介

王燕青先生毕业于上海交通大学通信与信息系统专业,并获得硕士学位。他现任在英特尔® 公司开发者关系部应用工程师,专职视频、图像和英特尔新技术的咨询和优化工作。他在项目管理、嵌入式系统、图形图像和数字电视有丰富的经验,并曾就职于ATI和三星。





For more complete information about compiler optimizations, see our Optimization Notice.