CN104020984B - 一种生成静态页面的方法及装置 - Google Patents
一种生成静态页面的方法及装置 Download PDFInfo
- Publication number
- CN104020984B CN104020984B CN201310062812.4A CN201310062812A CN104020984B CN 104020984 B CN104020984 B CN 104020984B CN 201310062812 A CN201310062812 A CN 201310062812A CN 104020984 B CN104020984 B CN 104020984B
- Authority
- CN
- China
- Prior art keywords
- page
- picture
- file
- map data
- static page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Document Processing Apparatus (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开了一种生成静态页面的方法及装置；所述方法包括：将待生成静态页面的PSD文件进行切片获得一个或多个图片；解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。本申请能快速完成能兼容多种浏览器的静态页面的开发。
Description
技术领域
本发明涉及网络领域，尤其涉及一种生成静态页面的方法及装置。
背景技术
EDM(Email Direct Marketing，电子邮件直销)、论坛帖、活动页是产品运营最常使用的方式，在运营需求中占比很高。这类静态页面的共同点是生命周期短、复用性及语义化要求不高。静态页面是指无需经过服务器的编译，直接加载到客户浏览器上显示出来的页面。
目前，最常用的开发静态页面的方式有以下两种：
手动开发：人工编写代码，完成页面开发。
使用切片工具：使用photoshop自带的切片工具，完成开发。
但是，手动开发的时间成本较高，而切片工具导出的页面有浏览器兼容问题。
申请内容
本申请要解决的技术问题是提供如何快速完成能兼容多种浏览器的静态页面的开发。
为了解决上述问题，本申请提供了一种生成静态页面的方法，包括：
将待生成静态页面的PSD文件进行切片获得一个或多个图片；
解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；
导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
进一步地，所述图层信息数据为json对象。
进一步地，所述属性信息包括：
位置、宽度、高度、颜色。
进一步地，所述的方法还包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。
进一步地，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本申请还提供了一种生成静态页面的装置，包括：
切片模块，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
进一步地，所述图层信息数据为json对象。
进一步地，所述属性信息包括：
位置、宽度、高度、颜色。
进一步地，所述的装置还包括：
配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述存储模块导出所述图片是指：
所述存储模块导出图片并保存为所述配置信息中的导出图片格式。
进一步地，所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本申请的至少一个实施例能够根据PSD文件快速生成静态页面，且所生成的静态页面可兼容于多种浏览器。本申请的又一个实施例能够自行设置图片格式、导出文件类型、保存路径等。
附图说明
图1是实施例一的生成静态页面的方法的流程示意图；
图2是实施例一的一个备选方案的流程示意图；
图3是实施例二的生成静态页面的装置的示意框图；
图4是实施例二的一个备选方案中图层解析器的工作过程示意图；
图5是实施例二的一个备选方案中网页生成器的工作过程示意图。
具体实施方式
下面将结合附图及实施例对本申请的技术方案进行更详细的说明。
需要说明的是，如果不冲突，本申请实施例以及实施例中的各个特征可以相互结合，均在本申请的保护范围之内。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
实施例一，一种生成静态页面的方法，如图1所示，包括：
S101、将待生成静态页面的PSD文件进行切片获得一个或多个图片；
S102、解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
S103、将图层信息数据转换成DOM(Document Object Model，文档对象模型)结构，根据该DOM结构生成用于描述页面结构的文件；
S104、导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
本实施例中可以根据PSD文件快速生成静态页面，所述PSD文件是adobePhotoShop的专用文件格式，它保留了图层等图像文件的全部信息，其中步骤S101可以按照现有的切片技术实现。所述用于描述页面结构的文件可以为HTML(超文本标记语言)文件，也可以为XML(可扩展标记语言)文件，还可以是其它能够描述页面结构的语言所编写的文件。
现有的切片工具导出的页面一般是table布局的，由于不同浏览器对table标签的解析方式不尽相同，所以可能导致兼容问题；而本实施例是先转换为DOM结构，DOM结构中包括了页面的布局和样式等页面结构信息；再根据DOM结构生成HTML文件或其它能描述页面结构的文件；由于DOM结构符合惯常浏览器解析标准，因此生成的HTML文件和图片所组成的静态页面就可以兼容于各种浏览器。
本实施例的一个备选方案中，所述图层信息数据可以但不限于为json(JavaScript Object Notation，一种轻量级的数据交换格式)对象。
本实施例的一个备选方案中，所述属性信息可以但不限于包括：位置、宽度、高度、颜色等。
本实施例的一个备选方案中，将图层信息数据转换成DOM结构的步骤前还可以包括：去除所述图层信息数据中的冗余数据。
本实施例的一个备选方案中，所述方法还可以包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径。
该备选方案中，根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。
该备选方案中，导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。
导出文件类型包括HTML文件、XML文件等；导出图片格式包括jpg、png、gif等。
该备选方案中，所述步骤S104前还可以包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本实施例一个具体备选方案中，通过一个插件来实现上述方法，其生成静态页面的流程如图2所示，包括步骤201～208。
201、用户使用Photoshop打开PSD文件，启动插件。
202、插件显示配置窗口。
203、用户设置导出图片格式、设计稿类型(比如是在浏览器中显示的页面或是在邮件中显示的页面)、静态页面的保存路径。
204、用户完成设置后点击运行。
205、插件将用户打开的PSD文件切片，获得多个图片；解析该PSD文件的图层信息，获取各图片的属性信息(包括该图片的位置、宽度、高度、颜色等)。
206、根据属性信息生成图层信息数据，将图层信息数据转换成DOM结构，根据该DOM结构生成页面，即生成所设置的导出图片格式的图片和HTML文件，并保存到所设置的静态页面的保存路径中。
207、通知用户完成。
208、用户确认后该流程结束。
实施例二，一种生成静态页面的装置，如图3所示，包括：
切片模块31，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器32，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器33，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块34，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
本实施例的一个备选方案中，所述图层信息数据为json对象。
本实施例的一个备选方案中，所述属性信息包括：
位置、宽度、高度、颜色。
本实施例的一个备选方案中，所述图层解析器32在将图层信息数据转换成DOM结构前，还用于去除所述图层信息数据中的冗余数据。
本实施例的一个备选方案中，所述装置还包括：
配置模块35，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径。
该备选方案中，所述网页生成器33根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器33按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。
该备选方案中，所述存储模块34导出所述图片是指：
所述存储模块34导出图片并保存为所述配置信息中的导出图片格式。
该备选方案中，所述图层解析器32还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本实施例的一个备选方案中，图层解析器32的工作流程如图4所示，包括步骤401～405。
401、输入图层对象(PSD文件)。
402、检查静态页面的保存路径是否存在，如果不存在则进行步骤403；如果存在则进行步骤404。
403、创建目录，然后进行步骤404。
404、处理图层数据，包括解析属性信息和封装成图层信息数据；当所有图层处理完之后，进行步骤405。
405、输出图层信息数据；结束。
网页生成器33的工作流程如图5所示，包括步骤501～505。
501、输入图层信息数据。
502、去除所述图层信息数据中的冗余数据。
503、根据所述图层信息数据生成DOM结构。
504、根据DOM结构生成HTML文件。
505、输出HTML文件；结束。
本领域普通技术人员可以理解上述方法中的全部或部分步骤可通过程序来指令相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本申请不限制于任何特定形式的硬件和软件的结合。
当然，本申请还可有其他多种实施例，在不背离本申请精神及其实质的情况下，熟悉本领域的技术人员当可根据本申请作出各种相应的改变和变形，但这些相应的改变和变形都应属于本申请的权利要求的保护范围。
Claims (10)
1.一种生成静态页面的方法，其特征在于，包括：
将待生成静态页面的PSD文件进行切片获得一个或多个图片；
解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；
导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
2.如权利要求1所述的方法，其特征在于：
所述图层信息数据为json对象。
3.如权利要求1所述的方法，其特征在于，所述属性信息包括：
位置、宽度、高度、颜色。
4.如权利要求1所述的方法，其特征在于，还包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。
5.如权利要求4所述的方法，其特征在于，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
6.一种生成静态页面的装置，其特征在于，包括：
切片模块，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
7.如权利要求6所述的装置，其特征在于：
所述图层信息数据为json对象。
8.如权利要求6所述的装置，其特征在于，所述属性信息包括：
位置、宽度、高度、颜色。
9.如权利要求6所述的装置，其特征在于，还包括：
配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述存储模块导出所述图片是指：
所述存储模块导出图片并保存为所述配置信息中的导出图片格式。
10.如权利要求9所述的装置，其特征在于：
所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310062812.4A CN104020984B (zh) | 2013-02-28 | 2013-02-28 | 一种生成静态页面的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310062812.4A CN104020984B (zh) | 2013-02-28 | 2013-02-28 | 一种生成静态页面的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104020984A CN104020984A (zh) | 2014-09-03 |
| CN104020984B true CN104020984B (zh) | 2017-07-07 |
Family
ID=51437761
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310062812.4A Active CN104020984B (zh) | 2013-02-28 | 2013-02-28 | 一种生成静态页面的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104020984B (zh) |
Families Citing this family (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104978723B (zh) * | 2014-04-14 | 2018-04-03 | 阿里巴巴集团控股有限公司 | 一种图片处理方法和装置 |
| CN105739963B (zh) * | 2014-12-12 | 2019-03-15 | 博雅网络游戏开发（深圳）有限公司 | 生成网页的方法和装置 |
| CN107203536A (zh) * | 2016-03-16 | 2017-09-26 | 阿里巴巴集团控股有限公司 | 内容的在线浏览方法、装置及设备 |
| CN105825402A (zh) * | 2016-03-17 | 2016-08-03 | 广州筷子信息科技有限公司 | 一种广告创意元素的定向方法和装置 |
| CN106469220B (zh) * | 2016-09-09 | 2020-07-24 | 北京星选科技有限公司 | 一种生成动态效果页面的方法及*** |
| CN106777077A (zh) * | 2016-12-13 | 2017-05-31 | 网易（杭州）网络有限公司 | 网页的生成方法及装置 |
| CN107454456B (zh) * | 2017-09-06 | 2020-09-08 | 武汉斗鱼网络科技有限公司 | 一种浮层元素的管理控制方法及*** |
| CN108287707B (zh) * | 2017-09-13 | 2021-03-02 | 深圳壹账通智能科技有限公司 | Jsx文件生成方法、装置、存储介质和计算机设备 |
| CN107622134B (zh) * | 2017-10-16 | 2021-02-19 | 杭州时间线信息科技有限公司 | 一种视觉识别和人工智能相结合的自动设计排版式详情页制作方法 |
| CN108984172B (zh) * | 2018-05-31 | 2022-04-26 | 北京奇艺世纪科技有限公司 | 一种界面文件的生成方法及装置 |
| CN109710258A (zh) * | 2018-12-28 | 2019-05-03 | 北京金山安全软件有限公司 | 微信小程序界面生成的方法及装置 |
| CN110138651A (zh) * | 2019-05-17 | 2019-08-16 | 重庆八戒电子商务有限公司 | 电子邮件自动生成方法、***、介质和电子设备 |
| CN112989244A (zh) * | 2019-12-02 | 2021-06-18 | 广州凡科互联网科技股份有限公司 | 一种基于web端快捷生成H5页面的psd导入方法 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101101602A (zh) * | 2007-07-27 | 2008-01-09 | 华为技术有限公司 | 一种数据格式的校验方法及装置 |
| CN102695187A (zh) * | 2012-06-01 | 2012-09-26 | 重庆邮电大学 | 基于分布式Web的6LoWPAN协议一致性测试装置及方法 |
| US8306255B1 (en) * | 2008-08-28 | 2012-11-06 | Intuit Inc. | Snapshot-based screen scraping |
-
2013
- 2013-02-28 CN CN201310062812.4A patent/CN104020984B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101101602A (zh) * | 2007-07-27 | 2008-01-09 | 华为技术有限公司 | 一种数据格式的校验方法及装置 |
| US8306255B1 (en) * | 2008-08-28 | 2012-11-06 | Intuit Inc. | Snapshot-based screen scraping |
| CN102695187A (zh) * | 2012-06-01 | 2012-09-26 | 重庆邮电大学 | 基于分布式Web的6LoWPAN协议一致性测试装置及方法 |
Non-Patent Citations (1)
| Title |
|---|
| PSD文档信息获取与XML表达自动阅卷研究;张丽娜;《中国优秀硕士学位论文全文数据库信息科技辑》;20100715(第07期);第26-30页，第36-49页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104020984A (zh) | 2014-09-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104020984B (zh) | 一种生成静态页面的方法及装置 | |
| CN104020997B (zh) | 可扩展图形化规则应用*** | |
| US10452787B2 (en) | Techniques for automated document translation | |
| JP6748071B2 (ja) | ウェブコンテンツ生成方法およびシステム | |
| US20130191732A1 (en) | Fixed Format Document Conversion Engine | |
| CN103853806A (zh) | 一种表格转换方法及装置 | |
| CN102184266A (zh) | 一种页面与数据分离的动态wap网站自动生成方法 | |
| CN104063365B (zh) | 在pdf文档中***对象的方法 | |
| CN103383645A (zh) | 代码生成方法及*** | |
| CN103389895A (zh) | 一种前端页面的生成方法及*** | |
| CN103383691B (zh) | 一种网页的在线编辑方法和装置 | |
| CN102360274A (zh) | 一种可变数据打印的模板实现装置及其应用方法 | |
| CN107943915A (zh) | 基于html5的ofd文件在线显示的方法以及装置 | |
| CN103927385A (zh) | 数据模型的统一方法及装置 | |
| CN106933887A (zh) | 一种数据可视化方法及装置 | |
| CN108268260A (zh) | 一种基于一体化支撑技术的快速微应用组装方法 | |
| CN103019556A (zh) | 快捷帮助信息显示***和快捷帮助信息显示方法 | |
| KR101287371B1 (ko) | 웹 컨텐츠 수집방법 및 수집장치, 그 기록매체 | |
| CN102779045A (zh) | 一种界面生成方法、界面编辑器及电子设备 | |
| CN103246503A (zh) | 一种企业管理软件的应用开发架构 | |
| CN103294463A (zh) | 一种编辑***及方法 | |
| CN111708529B (zh) | 一种基于angular通过拖拽生成表单的实现方法 | |
| CN106502977A (zh) | 一种基于b/s构架的表单处理方法及表单*** | |
| CN103870543B (zh) | 一种用于文档文件重构的方法及装置 | |
| CN103365866B (zh) | 一种模块化所见即所得管理网页模板的装置及管理方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |