第1步创建你的设计，你会正常的网站。考虑到与触摸屏界面相关的不同的动态，让你的工作来说话-这是你的投资组合，毕竟。唯一的技术考虑，你应该知道的是，以避免在索引文件保存在子文件夹中的HTML文件- HTML5的缓存不喜欢的HTML文件的文件夹。脚本文件，图像和级联样式 表（CSS），然而，当文件夹把无一不精。

步骤2在IPAD有两种不同的屏幕方向，所以你需要决定你想要你的投资组合哪种方式。如果你想的话你会全屏，设计，1024×768的景观，并保留了iPad状态栏的能见度屏幕的顶部，设计768 X 1004的景观和1024×748的纵向或， 768×1024的画像。

第3步有一些互动与iPad和iPhone特别密切的关系，以及平板设备的总称新浪潮。这些包括捏和轻扫，并且被视为就像正常的用户事件尽可能脚本和浏览器的事件模型而言，所以他们通过Javascript中相同的方式点击或鼠标悬停都可以访问

步骤4您可以设置事件侦听器来处理使用语法window.ontouchmove个别事件。如果你不自信的Javascript直接工作，还是更喜欢工作，通过一个框架，如jQuery的，也有乐于助人的插件，允许方便地访问这些接触特定的事件。

这样的一个库是jQTouch，它提供了访问全系列触摸式的事件，以及有一个方便的辅助方法，以供离线网络应用程序的缓存，这完全符合我们的需求。我们不会使用辅助方法在这里，但要注意它的存在，因为它可以使这个过程更简单

第5步如果你设计了两个版本的纵向和横向模式网站的布局，你需要有一个代码狡猾位。您可以加载不同的CSS布局到您的网页根据设备的方向通过下列元标记在你的代码的顶部：

    （方向：纵向）的“href =”CSS / iPad的-portrait.css“>     （方向：横向）的“href =”CSS / iPad-     landscape.css“>

第6步要创建一个可安装的Web应用程序，我们对网站本身的顶部需要一些额外的资产。首先，我们要想要那个坐在iPad的跳板主屏幕作为启动按钮我们的应用程序的图标。

创建一个图标57 X 57像素，并保存为文件名苹果触摸icon.png在一个24位的PNG文件。你并不需要添加圆角或高亮效果，iPad的OS会为你做这个（除非您特别要求它不通过额外的元标记）。下面的代码添加到你的iPad图标链接到你的网站：

    的icon.png“>

第7步同样，我们可以对我们的应用程序的启动画面。这是完全可选的-应用程序会工作得很好，没有它，但启动画面增加了额外的雕琢一个不错位到最后的产品组合，特别是如果你让你的潜在客户推出了自己的应用程序。

创建一个启动画面图像1004像素高，768像素宽。将其保存为24位PNG文件的文件名splashpage.png。下面的代码添加到您的网站主页，使其作为启动图像的部分：

    HREF =“splashpage.png”>

第8步我们需要告诉了iPad，你的网站可以安装的应用程序。这很容易通过增加另一个特殊的HTML元标记的每一页的顶部完成的。添加以下代码在你的部分，使安装和匹配视到iPad的分辨率：

    含量=“是”/>     可扩展=无，宽度=设备宽度，初始规模= 1.0，    最大规模= 1.0“/>     式“内容=”黑“/>

步骤9一切准备就绪后，安装在你的iPad，但我们需要的最后一个文件来告诉Safari浏览器，该网站应被视为一个离线功能的Web应用程序在设备上。此文件被称为缓存清单，以及它的HTML5规范的一部分。缓存清单告诉浏览器如何下载的副本，并从Web应用程序启动每次带来的东西。

文件本身就是纯文本，看起来像下面的例子。请注意，您必须设置Web服务器来服务于这个文件的文本/缓存清单的特定编码。

见右上图框有关如何操作的更多信息。你需要列出的每个文件，使你的网站在缓存清单，如果Web应用程序是完全脱机功能：

CACHE MANIFEST ＃离线缓存V1 article.html ＃支持文件的CSS / styles.css的JS /的jquery.js 的js / jQTouch.jquery.js ＃图像图像/ page1.png 图像/ page2.png 图像/ page3.png 

您还需要通过改变你的HTML申报阅读链接到您的网页顶部的清单文件：

第10步上传的所有文件到你的Web服务器（或复制到您的计算机的Web服务器文件夹，如果您使用的本地计算机）。接下来，用你的iPad访问该网站，点击+按钮，在Safari浏览器界面的底部。单击添加到主屏幕按钮。Safari浏览器会下载所有的缓存清单，以及图标和启动画面中列出的文件，并使用您所创建的图标，您的主屏幕上安装一个按钮。

第11步选择从您的主屏幕设置应用程序，要么使飞行模式（如果你有一个Wi-Fi + 3G的iPad）或者关闭Wi-Fi（如果你有一个Wi-Fi的唯一模式）。这可以防止的iPad访问互联网，并测试你的web应用程序的离线性质。返回到主屏幕，按它的图标启动应用程序。你应该能够浏览各地你的投资组合没有互联网接入。现在，熄灭哇一些潜在的客户。