[发明专利]一种制作页面的方法和装置

说明书

本发明公开了一种制作页面的方法和装置，以减小页面加载时的加载时间和用户流量。所述方法包括：将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；加载用于制作页面的超文本标记语言HTML文件；通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。本发明提供的方法大大减小了页面加载时的加载时间和用户流量，另一方面，由于矢量图形放大和缩小都不会失真，因此，也减小了图案字体嵌入页面时的适配成本。

技术领域

本发明涉及网络通信领域，具体涉及一种制作页面的方法和装置。

背景技术

可移植网络图形格式（Portable Network Graphic Format，PNG）的名称来源于非官方的“PNG's Not GIF”，是一种位图文件（bitmap file）存储格式。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

在智能终端，例如智能手机、平板电脑等，应用用户教育页面一般都采用如附图1的交互设计，即，在用户教育页面中弹出一个遮罩层，给相应的点击区域添加线框和个性手写字体文字说明加以引导操作。由于遮罩层导致的效果都是基于半透明的，因此，开发者一般使用PhotoShop等工具，将格式设计稿中的图层按照需要，切割成png图片，导出成页面需要加载的图片资源。浏览器在加载这些由“线框”和“个性手写字体文字”切割成的png图片的资源时，将其渲染在图片，从而还原视觉效果，展示在浏览器窗口中。

现有技术提供的制作用户教育页面的方法中，虽然“线框”和“个性手写字体文字”已经切割成png图片，但一般而言，png图片的容量（或体积）都很大，而在移动终端中，尤其是Web应用，对文件的容量或体积是十分敏感的，大量使用png图片，加大了加载时间和用户流量；另一方面，png图片为位图（bitmap），在不同分辨率的移动终端上适配，放大或缩小时会失真。

发明内容

本发明实施例提供一种制作页面的方法和装置，以减小页面加载时的加载时间和用户流量。

本发明实施例提供一种制作页面的方法，所述方法包括：

将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；

加载用于制作页面的超文本标记语言HTML文件；

通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。

本发明另一实施例提供一种制作页面的装置，所述装置包括：

字体制作模块，用于将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；

第一加载模块，用于加载用于制作页面的超文本标记语言HTML文件；

定位模块，用于通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。

从上述本发明实施例可知，线框和/或个性化手写字体文字被制作成图案字体，再通过加载层叠样式表，将所述图案字体定位至使用HTML文件制作的页面。由于图案字体在页面中为矢量图形，而相对于位图的容量，矢量图形的容量较小，因此，与现有技术直接将位图形式的png图片加载至页面相比，本发明提供的方法大大减小了页面加载时的加载时间和用户流量，另一方面，由于矢量图形放大和缩小都不会失真，因此，也减小了图案字体嵌入页面时的适配成本。

附图说明

图1是现有技术提供的应用页面采用的交互设计示意图；

图2是本发明实施例提供的制作页面的方法的基本流程示意图；