CN104915186B

CN104915186B - 一种制作页面的方法和装置

Info

Publication number: CN104915186B
Application number: CN201410091086.3A
Authority: CN
Inventors: 李军
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2014-03-12
Filing date: 2014-03-12
Publication date: 2019-11-19
Anticipated expiration: 2034-03-12
Also published as: CN104915186A

Abstract

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

Description

一种制作页面的方法和装置

技术领域

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

背景技术

可移植网络图形格式（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是本发明实施例提供的制作页面的方法的基本流程示意图；

图3是本发明实施例提供的制作页面的装置逻辑结构示意图；

图4是本发明另一实施例提供的制作页面的装置逻辑结构示意图；

图5是本发明另一实施例提供的制作页面的装置逻辑结构示意图；

图6是本发明另一实施例提供的制作页面的装置逻辑结构示意图。

具体实施方式

本发明实施例提供一种制作页面的方法，所述方法包括：将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；加载用于制作页面的超文本标记语言HTML文件；通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。本发明实施例还提供相应的制作页面的装置。以下分别进行详细说明。

本发明实施例的制作页面的方法可应用于各种终端的浏览器。本发明实施例提供的制作页面的方法的基本流程可参考图2，主要包括步骤S201至步骤S203，详细说明如下：

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

用户界面设计原稿中的线框和/或个性化手写字体文字为图片，其格式是png。若直接将这些图片嵌入页面，则由于png图片容量较大，不仅加载页面时耗时过长，而且耗费用户较多的流量。为了解决上述问题，在本发明实施例中，可以将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体。由于图案字体在页面中为矢量图形，而矢量图形的容量小、缩放不失真等特点，使得嵌入了图案字体的页面在加载时时间大为减小。作为本发明一个实施例，将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体包括如下步骤S2011至步骤S2013：

S2011，将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片。

将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片时，可以采用常用的图形/图片处理软件，例如PhotoShop进行切割。需要说明的是，图片格式的线框和/或个性化手写字体文字被切割时，无需按照单段线段或者单个文字切割，可以是以一个线框、多个线框或几个文字为单位进行切割，即，可以将一个线框切割成单独的png图片、将多个线框切割成单独的png图片或将几个文字切割成单独的png图片。

S2012，保存png图片。

保存由线框和/或个性化手写字体文字切割成的多个单独的png图片，其目的是在后续步骤中，由字体软件指定为自定义字符时使用。

S2013，将每个png图片指定为自定义字体字符集中的一个字符。

在本发明实施例中，可以在字体软件中将每个png图片指定为自定义字体字符集中的一个字符。自定义字体字符集构成字体资源文件的主要内容。

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

超文本标记语言（Hyper Text Markup Language，HTML）是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。使用HTML可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。其实，超文本文档本身并不真正含有其他的文档，它仅仅含有指向这些文档的指针，这些指针就是上面所说的超链接。一个标准的HTML文件由HTML元素、元素的属性和相关属性值3个基本部分组成。在本发明实施例中，用于制作页面的HTML文件包含用于制作页面的众多HTML元素、元素的属性和相关属性值。

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

层叠样式表（Cascading Style Sheets，CSS）一种用来为结构化文档（例如，HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。CSS由多组“规则”组成，每个规则由“选择器（selector）”、“属性（property）”和“值（value）”组成，其中，选择器（selector）通常是需要改变样式的HTML元素，属性（property）的目的在控制选择器的样式，值（value）是指属性接受的设置值，多个关键字时大都以空格隔开。

作为本发明一个实施例，通过加载层叠样式表CSS，将图案字体定位至使用HTML文件制作的页面包括如下步骤S2031至步骤S2033：

S2031，加载层叠样式表对应的CSS文件。

实际上，CSS一般不会独立使用，而是和HTML文件一起制作网页。如前所述，CSS的作用是定义网页的外观，例如字体、颜色等，要制作外观比较好的网页，需要加载层叠样式表对应的CSS文件。

S2032，根据CSS文件的外部资源请求，调用图案字体对应的字体资源文件。

如前所述，字体资源文件的主要内容是自定义字体字符集。调用图案字体对应的字体资源文件的示例如下代码所示（使用CSS描述）：

S2033，通过构建HTML文件的文档对象模型，将图案字体嵌入至使用HTML文件制作的页面。

具体地，可以通过下述步骤S20331和步骤S20332：

S20331，构建HTML文件的文档对象模型。

HTML文件本质上只是文本文件，只加载HTML文件不会自动形成网页，还需要构建HTML文件的文档对象模型（Document Object Model，DOM）。DOM是一种与浏览器、平台、语言无关的接口，使得用户可以访问页面其他的标准组件。可以将HTML文件的DOM理解为网页的API，它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑，例如Javascript就可以利用DOM动态地修改网页。

S20332，通过文档对象模型，调用图案字体对应的字体资源文件。

调用图案字体对应的字体资源文件在于使得浏览器在窗口中渲染自定义字体字符集中字体的样式和位置，调用图案字体对应的字体资源文件如下示例所示：

需要说明的是，上述实施例中，页面可以是用户教育页面。

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

下面对用于执行上述制作页面的方法的本发明实施例的制作页面的装置进行说明，其基本逻辑结构参考图3。为了便于说明，仅仅示出了与本发明实施例相关的部分。附图3示例的制作页面的装置可以浏览器或浏览器中的某个功能模块。附图3示例的制作页面的装置主要包括字体制作模块301、第一加载模块302和定位模块303，各模块详细说明如下：

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

用户界面设计原稿中的线框和/或个性化手写字体文字为图片，其格式是png。若直接将这些图片嵌入页面，则由于png图片容量较大，不仅加载页面时耗时过长，而且耗费用户较多的流量。为了解决上述问题，在本发明实施例中，字体制作模块301将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体。由于图案字体在页面中为矢量图形，而矢量图形的容量小、缩放不失真等特点，使得嵌入了图案字体的页面在加载时时间大为减小。

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

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

需要说明的是，以上附图3示例的制作页面的装置的实施方式中，各功能模块的划分仅是举例说明，实际应用中可以根据需要，例如相应硬件的配置要求或者软件的实现的便利考虑，而将上述功能分配由不同的功能模块完成，即将所述制作页面的装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。而且，实际应用中，本实施例中的相应的功能模块可以是由相应的硬件实现，也可以由相应的硬件执行相应的软件完成，例如，前述的字体制作模块，可以是具有执行前述将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体的硬件，例如字体制作器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备；再如前述的定位模块，可以是通过加载层叠样式表CSS，将图案字体定位至使用HTML文件制作的页面功能的硬件，例如定位器，也可以是能够执行相应计算机程序从而完成前述功能的一般处理器或者其他硬件设备（本说明书提供的各个实施例都可应用上述描述原则）。

附图3示例的字体制作模块301可以包括切割单元401、保存单元402和指定单元403，如附图4所示本发明另一实施例提供的制作页面的装置，其中：

切割单元401，用于将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片。

切割单元401将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片时，可以采用常用的图形/图片处理软件，例如PhotoShop进行切割。需要说明的是，图片格式的线框和/或个性化手写字体文字被切割时，无需按照单段线段或者单个文字切割，可以是以一个线框、多个线框或几个文字为单位进行切割，即，切割单元401可以将一个线框切割成单独的png图片、将多个线框切割成单独的png图片或将几个文字切割成单独的png图片。

保存单元402，用于保存png图片。

保存单元402保存由线框和/或个性化手写字体文字切割成的多个单独的png图片，其目的是在后续步骤中，由字体软件指定为自定义字符时使用。

指定单元403，用于将每个png图片指定为自定义字体字符集中的一个字符。

自定义字体字符集构成字体资源文件的主要内容。

附图3示例的定位模块303可以包括第二加载单元501、第一调用单元502和嵌入单元503，如附图5所示本发明另一实施例提供的制作页面的装置，其中：

第二加载单元501，用于加载层叠样式表对应的CSS文件。

实际上，CSS一般不会独立使用，而是和HTML文件一起制作网页。如前所述，CSS的作用是定义网页的外观，例如字体、颜色等，要制作外观比较好的网页，需要第二加载单元501加载层叠样式表对应的CSS文件。

第一调用单元502，用于根据CSS文件的外部资源请求，调用图案字体对应的字体资源文件。

如前所述，字体资源文件的主要内容是自定义字体字符集。第一调用单元502调用图案字体对应的字体资源文件的示例如下代码所示（使用CSS描述）：

嵌入单元503，用于通过构建HTML文件的文档对象模型，将图案字体嵌入至使用HTML文件制作的页面。

附图5示例的嵌入单元503可以包括构建单元601和第二调用单元602，如附图6所示本发明另一实施例提供的制作页面的装置，其中：

构建单元601，用于构建HTML文件的文档对象模型。

第二调用单元602，用于通过文档对象模型，调用图案字体对应的字体资源文件。

上述制作页面的装置的实施例中，页面可以是用户教育页面。

本发明实施例还给出一种智能终端，该智能终端可以用于实施上述实施例中提供的制作页面的方法。具体来讲：智能终端可以包括有一个或一个以上计算机可读存储介质的存储器、一个或者一个以上处理核心的处理器等部件。本领域技术人员可以理解，上述智能终端结构并不构成对智能终端的限定，可以包括更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

存储器可用于存储软件程序以及模块，处理器通过运行存储在存储器的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序（比如声音播放功能、图像播放功能等）等；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器还可以包括存储器控制器，以提供处理器对存储器的访问。

尽管未示出，智能终端还还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行述一个或者一个以上程序包含用于进行以下操作的指令：

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

假设上述为第一种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第二种可能的实施方式中，所述智能终端的存储器中，还包含用于执行以下操作的指令：

将所述图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片；

保存所述png图片；

将每个所述png图片指定为自定义字体字符集中的一个字符。

假设上述为第二种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第三种可能的实施方式中，所述智能终端的存储器中，还包含以下指令：

加载所述层叠样式表对应的CSS文件；

根据所述CSS文件的外部资源请求，调用所述图案字体对应的字体资源文件；

通过构建所述HTML文件的文档对象模型，将所述图案字体嵌入至使用所述HTML文件制作的页面。

假设上述为第三种可能的实施方式，则在第三种可能的实施方式作为基础而提供的第四种可能的实施方式中，所述智能终端的存储器中，还包含以下指令：

构建所述HTML文件的文档对象模型；

通过所述文档对象模型，调用所述图案字体对应的字体资源文件。

作为另一方面，本发明再一实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中的存储器中所包含的计算机可读存储介质；也可以是单独存在，未装配入终端中的计算机可读存储介质。所述计算机可读存储介质存储有一个或者一个以上程序，所述一个或者一个以上程序被一个或者一个以上的处理器用来执行一个制作页面的方法，所述方法包括：

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

假设上述为第一种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第二种可能的实施方式中，所述将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体，包括：

保存所述png图片；

将每个所述png图片指定为自定义字体字符集中的一个字符。

假设上述为第二种可能的实施方式，则在第一种可能的实施方式作为基础而提供的第三种可能的实施方式中，所述通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面，包括：

加载所述层叠样式表对应的CSS文件；

假设上述为第三种可能的实施方式，则在第三种可能的实施方式作为基础而提供的第四种可能的实施方式中，所述通过构建所述HTML文件的文档对象模型，将所述图案字体嵌入至使用所述HTML文件制作的页面，包括：

构建所述HTML文件的文档对象模型；

需要说明的是，上述装置各模块/单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，其带来的技术效果与本发明方法实施例相同，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器（ROM，Read Only Memory）、随机存取存储器（RAM，RandomAccess Memory）、磁盘或光盘等。

以上对本发明实施例所提供的制作页面的方法和装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims

1.一种制作页面的方法，其特征在于，所述方法包括：

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

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

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

保存所述png图片；

将每个所述png图片指定为自定义字体字符集中的一个字符。

2.根据权利要求1所述的方法，其特征在于，所述通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面，包括：

加载所述层叠样式表对应的CSS文件；

3.根据权利要求2所述的方法，其特征在于，所述通过构建所述HTML文件的文档对象模型，将所述图案字体嵌入至使用所述HTML文件制作的页面，包括：

构建所述HTML文件的文档对象模型；

4.根据权利要求1至3任意一项所述的方法，其特征在于，所述页面为用户教育页面。

5.一种制作页面的装置，其特征在于，所述装置包括：

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

其中，所述字体制作模块包括：

切割单元，用于将所述图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片；

保存单元，用于保存所述png图片；

指定单元，用于将每个所述png图片指定为自定义字体字符集中的一个字符。

6.根据权利要求5所述的装置，其特征在于，所述定位模块包括：

第二加载单元，用于加载所述层叠样式表对应的CSS文件；

第一调用单元，用于根据所述CSS文件的外部资源请求，调用所述图案字体对应的字体资源文件；

嵌入单元，用于通过构建所述HTML文件的文档对象模型，将所述图案字体嵌入至使用所述HTML文件制作的页面。

7.根据权利要求6所述的装置，其特征在于，所述嵌入单元包括：

构建单元，用于构建所述HTML文件的文档对象模型；

第二调用单元，用于通过所述文档对象模型，调用所述图案字体对应的字体资源文件。

8.根据权利要求5至7任意一项所述的装置，其特征在于，所述页面为用户教育页面。