一种制作页面的方法和装置的制造方法【
技术领域：
】[0001]本发明涉及网络通信领域，具体涉及一种制作页面的方法和装置。【
背景技术：
】[0002]可移植网络图形格式（PortableNetworkGraphicFormat，PNG)的名称来源于非官方的"PNG'sNotGIF"，是一种位图文件（bitmapfile)存储格式。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。[0003]在智能终端，例如智能手机、平板电脑等，应用用户教育页面一般都采用如附图1的交互设计，即，在用户教育页面中弹出一个遮罩层，给相应的点击区域添加线框和个性手写字体文字说明加以引导操作。由于遮罩层导致的效果都是基于半透明的，因此，开发者一般使用PhotoShop等工具，将格式设计稿中的图层按照需要，切割成png图片，导出成页面需要加载的图片资源。浏览器在加载这些由"线框"和"个性手写字体文字"切割成的png图片的资源时，将其渲染在图片，从而还原视觉效果，展示在浏览器窗口中。[0004]现有技术提供的制作用户教育页面的方法中，虽然"线框"和"个性手写字体文字"已经切割成png图片，但一般而言，png图片的容量(或体积)都很大，而在移动终端中，尤其是Web应用，对文件的容量或体积是十分敏感的，大量使用png图片，加大了加载时间和用户流量；另一方面，png图片为位图（bitmap)，在不同分辨率的移动终端上适配，放大或缩小时会失真。【
发明内容】[0005]本发明实施例提供一种制作页面的方法和装置，以减小页面加载时的加载时间和用户流量。[0006]本发明实施例提供一种制作页面的方法，所述方法包括：[0007]将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；[0008]加载用于制作页面的超文本标记语言HTML文件；[0009]通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。[0010]本发明另一实施例提供一种制作页面的装置，所述装置包括：[0011]字体制作模块，用于将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；[0012]第一加载模块，用于加载用于制作页面的超文本标记语言HTML文件；[0013]定位模块，用于通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。[0014]从上述本发明实施例可知，线框和/或个性化手写字体文字被制作成图案字体，再通过加载层叠样式表，将所述图案字体定位至使用HTML文件制作的页面。由于图案字体在页面中为矢量图形，而相对于位图的容量，矢量图形的容量较小，因此，与现有技术直接将位图形式的png图片加载至页面相比，本发明提供的方法大大减小了页面加载时的加载时间和用户流量，另一方面，由于矢量图形放大和缩小都不会失真，因此，也减小了图案字体嵌入页面时的适配成本。【附图说明】[0015]图1是现有技术提供的应用页面采用的交互设计示意图；[0016]图2是本发明实施例提供的制作页面的方法的基本流程示意图；[0017]图3是本发明实施例提供的制作页面的装置逻辑结构示意图；[0018]图4是本发明另一实施例提供的制作页面的装置逻辑结构示意图；[0019]图5是本发明另一实施例提供的制作页面的装置逻辑结构示意图；[0020]图6是本发明另一实施例提供的制作页面的装置逻辑结构示意图。【具体实施方式】[0021]本发明实施例提供一种制作页面的方法，所述方法包括：将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体；加载用于制作页面的超文本标记语言HTML文件；通过加载层叠样式表CSS，将所述图案字体定位至使用所述HTML文件制作的页面。本发明实施例还提供相应的制作页面的装置。以下分别进行详细说明。[0022]本发明实施例的制作页面的方法可应用于各种终端的浏览器。本发明实施例提供的制作页面的方法的基本流程可参考图2,主要包括步骤S201至步骤S203,详细说明如下：[0023]S201，将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体。[0024]用户界面设计原稿中的线框和/或个性化手写字体文字为图片，其格式是png。若直接将这些图片嵌入页面，则由于png图片容量较大，不仅加载页面时耗时过长，而且耗费用户较多的流量。为了解决上述问题，在本发明实施例中，可以将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体。由于图案字体在页面中为矢量图形，而矢量图形的容量小、缩放不失真等特点，使得嵌入了图案字体的页面在加载时时间大为减小。作为本发明一个实施例，将用于制作页面的用户界面设计原稿中图片格式的线框和/或个性化手写字体文字制作成一套图案字体包括如下步骤S2011至步骤S2013:[0025]S2011，将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片。[0026]将图片格式的线框和/或个性化手写字体文字切割成多个单独的可移植网络图形格式png图片时，可以采用常用的图形/图片处理软件，例如PhotoShop进行切割。需要说明的是，图片格式的线框和/或个性化手写字体文字被切割时，无需按照单段线段或者单个文字切割，可以是以一个线框、多个线框或几个文字为单位进行切割，即，可以将一个线框切割成单独的png图片、将多个线框切割成单独的png图片或将几个文字切割成单独的png图片。[0027]S2012,保存png图片。[0028]保存由线框和/或个性化手写字体文字切割成的多个单独的png图片，其目的是在后续步骤中，由字体软件指定为自定义字符时使用。[0029]S2013,将每个png图片指定为自定义字体字符集中的一个字符。[0030]在本发明实施例中，可以在子体软件中将每个png图片指定为自定乂子体子符集中的一个字符。自定义字体字符集构成字体资源文件的主要内容。[0031]S202,加载用于制作页面的超文本标记语言HTML文件。[0032]超文本标记语言（HyperTextMarkupLanguage,HTML)是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。使用HTML可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。其实，超文本文档本身并不真正含有其他的文档，它仅仅含有指向这些文档的指针，这些指针就是上面所说的超链接。一个标准的HTML文件由HTML元素、元素的属性和相关属性值3个基本部分组成。在本发明实施例中，用于制作页面的HTML文件包含用于制作页面的众多HTML兀素、兀素的属性和相关属性值。[0033]S203,通过加载层叠样式表CSS，将图案字体定位至使用HTML文件制作的页面。[0034]层叠样式表（CascadingStyleSheets,CSS)-种用来为结构化文档(例如，HTML文档或XML应用）添加样式(字体、间距和颜色等）的计算机语言。CSS由多组"规贝『组成，每个规则由"选择器（seIector)"、"属性（property)"和"值（value)"组成，其中，选择器(selector)通常是需要改变样式的HTML元素，属性（property)的目的在控制选择器的样式，值（value)是指属性接受的设置值，多个关键字时大都以空格隔开。[0035]作为本发明一个实施例，通过加载层叠样式表CSS，将图案字体定位至使用HTML文件制作的页面包括如下步骤S2031至步骤S2033:[0036]S2031，加载层叠样式表对应的CSS文件。[0037]实际上，CSS-般不会独立使用，而是和HTML文件一起制作网页。如前所述，CSS的作用是定义网页的外观，例如字体、颜色等，要制作外观比较好的网页，需要加载层叠样式表对应的CSS文件。[0038]S2032,根据CSS文件的外部资源请求，调用图案字体对应的字体资源文件。[0039]如前所述，字体资源文件的主要内容是自定义字体字符集。调用图案字体对应的字体资源文件的示例如下代码所示(使用CSS描述）：[0040][0041]S2033,通过构建HTML文件的文档对象模型，将图案字体嵌入至使用HTML文件制作的页面。[0042]具体地，可以通过下述步骤S20331和步骤S20332:[0043]S20331，构当前第1页1 2 3