实例：使用Hype制作输入姓名测幸运值的网页效果（一）

Hype是一款Mac系统上，适合UI设计师、网页设计师等非专业网页制作人员快速简单制作HTML5网页的软件，它支持插入HTML代码、CSS代码和JavaScript代码，同时内嵌了各种元素，如矩形、音频、视频、文本等等，可以满足大部分人员制作网页的需求。

下面小编就利用Mac系统上的Hype 4版本，教大家如何使用Hype软件制作用户输入姓名，测试其姓名幸运值，并弹出幸运值分数的网页效果。

一、效果预览

首先对想做的效果进行预览，点击Hype上方的预览按钮，使用系统默认Safari浏览器打开此网页进行预览，如下图1。

图1：点击预览按钮

具体的预览结果如下图2所示，网页主要由一个文本框，文本框中可由用户自己输入姓名，以及一个“开始测试”的按钮组成。当用户手动在文本框中输入想要查询的姓名时，点击按钮，网页会自动弹出一个弹框，显示“你好，xxx，你的名字的幸运值为：xxx”，具体见下图2。

图2：网页效果展示

当然，大家可以花点心思，将效果做的更加炫酷，比如美化输入框和测试按钮，然后点击按钮以后，不通过弹框的方式，而是使用Hype的时间线动画制作的方式，通过炫酷的动画效果，告诉用户其幸运值。有关动画制作的相关教程，大家可以进入Hype中文网站了解更多详情，下面就跟着小编一起去看看上面的简单效果是如何做出来的吧。

二、场景制作

第一步：进行场景的制作，在Hype左侧的场景中，点击加号，如下图3，创建一个新的场景，使用该场景的默认大小来进行下面场景的设置即可。

图3：创建场景

第二步：点击“元素”按钮，然后选择“HTML小组件”，创建一个HTML组件元素，如下图4。该元素用于制作用户输入的输入框，为什么不选择创建“文本”元素呢？因为文本元素是用于创建固定文本的，如标题、网页注意事项等等，而无法用于用户的主动输入。

图4：创建HTML小组件元素

第三步：在“元素”按钮中，再创建一个按钮，大家可以选择“Button”或者是“有纹理的按钮”都可以，看个人需求喜好。

第四步：点击HTML小组件元素，可以看到元素上方有个小铅笔的图样按钮，如下图5红框，点击此按钮，编辑HTML组件的内容。

图5：编辑HTML组件内容

第六步：在HTML组件输入框中，输入如下图6所示代码。

图6：设置HTML组件内容

此时HTML组件就会变成一个“请输入你的姓名”的文本 + 用户输入框的元素了，如下图7所示。

图7： HTML组件元素展示

第七步：在按钮元素中，输入文字为“开始测试”，然后在右侧Hype元素检查器中，选择填充样式为颜色，颜色选择蓝色，如下图8。

图8：设置按钮样式

最后鼠标拖动HTML元素和按钮元素的位置，将按钮元素置于HTML元素正下方即可，最终的场景效果展示如下图9。

图9：最终场景展示

完成以后，本节的场景设置就算完成了，在下一节中，小编将带大家学习如何使用该场景，制作用户输入姓名，弹出弹框展示其幸运值的网页效果，请大家继续关注城东书院网站进行后续学习哦。