上一篇：
LAYA和TypeScript制作H5入门——准备工作

一般情况下，一个H5是由多个相互关联的ui页面串联组成。遵循的大致逻辑一般是加载页面，开始页面，内容页面和结束页面。这些界面承担了用户交互的重要责任，也决定了H5的视觉效果，是H5非常重要的部分。

接下来我们开始制作H5的页面。
页面制作所需的素材可以在文档下方下载。

第一步：
点击ui编辑模块，进入页面编辑模式。开始编辑。

第二步：
在项目框里右键-新建-页面。
名字我们设置成FirstPage，页面大小设置为640*1038。

第三步：
新建页面成功后，我们可以在项目模块里看到FirstPage.ui。
在资源模块里，我们可以将系统自带的comp文件夹删除，并把我们需要的页面图片资源放到laya的assets文件夹里。

第四步：
制作页面。点击FirstPage.ui，在页面中央我们可以看到黑色的区域。这个区域是我们的页面编辑区域。在laya里，我们可以通过简单的拖拽方式，来制作页面，非常方便，也很直观。多种ui组件也可以帮助我们更好的提升效率。

1，将mainbg.png拖拽到黑色区域。并在属性面板里设置x为0，y为0。作为页面的背景。

2，将whitebuttonbg拖拽到黑色区域的特定位置。

3，在层级面板中新建ui-text组件，作为页面的标题。

4，点击第二个按钮的图片，右键，新建ui—text。这样就给按钮下面添加了一个新的text组件。这个text组件成为了image的子物体。
5，设置按钮文字的属性。使其看起来更美观。
6，继续制作游戏规则按钮。页面效果如下。
7，页面基本元素添加完毕，接下来我们需要给几个页面元素命名。方便我们之后在编写代码时，可以更加轻松地找到这些元素。点击页面任何一个元素，在属性面板里给他们增加名称。

书写名称时应当尽可能符合一个统一的规范，方便后期代码编写，并养成良好的习惯。
8，最终我们的第一个页面的命名如下：
到了这一步，工作已基本完成，但是工作尚未结束。

9. 重要的一步，保存页面并发布。
   在完成了页面之后，我们需要点击发布按钮将编辑好的页面发布出去。
   

在这个步骤中我们经历了如下过程：
第一，页面assets文件夹下的小图片将会被打包，成为atlas文件，存储到bin文件夹下面的res/atlas目录下。（这里的小图指的是长度和宽度均小于512的图片）；
*之所以打包为atlas是为了更小的体积和更高的效率。

第二，页面assets文件夹下的大图片会单独存储在bin文件夹下，生成一个与源文件夹同名的FIRST文件夹。

第三，我们制作的页面会被转化为一个名为layaUI.max.all.ts文件。存储在src文件夹下的ui文件夹里。这个ts文件里包含了我们页面所有元素的大小，位置和布局，命名动画等等信息。

自此我们的第一个页面制作完成。

请注意：
1，各个元素的位置，层级在下方的元素会显示在前面。背景图必须要在第一个位置。否则会遮挡住其他页面元素。
2，除了自己将元素拖拽到页面上，也可以将图片拖拽到层级面板下面。这时元素的坐标为x:0,y:0。
3，相似元素利用复制粘贴可以明显提高效率。

接下来我们需要开始编写代码。使得我们的页面能够显示出来。
LAYA和TypeScript制作H5入门——开始写代码。