实例：使用Hype制作浪漫表白网站（一）

经常刷抖音的小伙伴们应该都曾经遇到看到过，各种程序员的套路表白方式，通过制作一个酷炫或者浪漫的表白网站，然后发给自己的表白对象，以此来收获对方的芳心。大家或许会对此感到羡慕，但更多的是发出疑问，自己是否也能用此方式表白呢？不会做网站，敲代码怎么办呢？

下面小编使用Mac系统上的H5制作软件Hype 4版本，教大家如何通过零代码的方式，制作出一个浪漫的表白网页。小编相信，只要是自己付出真心与耐心完成的作品，都会得到对方的青睐。

第一步：进行场景的制作，在Hype左侧的场景中，点击加号，如下图1，创建一个新的场景，然后双击场景的名字，对场景进行重命名，修改场景命名为“主页场景”。

图1：创建场景

第二步：在Hype右侧的“场景检查器”中，设置场景的背景颜色，如下图2红框，让场景的颜色更加柔和好看，增加表白的成功率。

图2：设置场景的背景颜色

点击打开图4红框的颜色按钮，会出现具体的颜色选择器界面，默认的背景颜色为白色，颜色代码为“#FFFFFF”，大家在第一个选项卡中，修改此颜色代码为“#0B3443”，如下图3红框。

图3：修改颜色代码

第三步：在Hype上方的“元素”按钮中，选择图像，在场景中导入一张图像，具体操作如下图4。

图4：往场景中导入图像

导入的图像小编已经准备好了，这里放出来给大家，鼠标右键点击网页上的该图片，即可将图片另存到电脑上的指定位置啦。

图5： 导入图像

第四步：导入图像完成以后，在元素按钮中，点击文本，往图像的右侧加入文本文字，然后往文本输入框中输入自己想要输入的文本即可，这里小编输入“小姐姐，你愿意做我女朋友吗？”，具体效果如下图6。

图6：加入文本文字

从图8可以看到，默认加入的文本字体是黑色的，与背景颜色和导入的图片颜色不是很搭，因此还需要修改文字的颜色为白色。在Hype右侧“排印检查器”中，点击颜色控件按钮，然后切换到第二项的灰度模块，设置亮度为100%，即将字体颜色修改为白色，当然大家也可以直接修改颜色代码为“#FFFFFF”，直接修改字体颜色为白色。

图7：修改字体颜色为白色

该检查器中还可以设置字体的格式、大小等等，同时还可以引入外部字体，满足大家的各种需求，关于引入外部字体这部分，在Hype中文网站上也有相关教程，大家可以前去查阅了解。

第五步：准备好点击按钮的样式图片，小编制作了2张图片用于作为点击按钮，同样放出来给大家，大家截图分为2张图片后使用即可，当然也可以选择Hype内部提供的按钮。

图8：按钮图片

截图完成以后，在Hype元素按钮中导入这2张图片，并摆放好位置对齐，这样静态的场景页面就算是制作好了，完成以后的页面如下图11所示。

图9：静态场景展示

在下一节中，小编将带大家学习如何使用该场景，制作动态的一些效果，包括心形按钮上加上动画，制作一个心脏跳动效果，点击按钮弹出表白框的动态效果，再弹出烟花场景的场景跳转效果，请大家继续关注城东书院网站进行后续学习哦。