原标题:当PPT遇见H5,这才是真爱!

分享作者 |孙宁

来源|hao_PPT

H5是什么?

H5是HTML5的简称

相较于传统的文图排版,具有动效流畅、排版美观、易于传播等特点,另外根据文字内容还可以加入背景音乐烘托气氛,阅读体验更加友好。

H5做起来难吗?

H5页面制作起来并不复杂

许多网站(如MAKA、易企秀等)提供了在线工具和丰富的模板,即使没有任何设计功底的小白,也可以通过拖放拉拽等操作,完成一个不错的H5作品。

在线工具是否完美?

在线工具也有不足

字体种类是一个软肋。在线工具中可供选择的字体较少。另外,在线操作也会有一些延迟,仍然比不上客户端工具那样流畅。

PPT是强大的演示和设计工具

如果将PPT与H5进行联合...

除了传统的4:3和16:9两种比例格式外,PPT还允许用户自定义画布的长宽尺寸。如果将PPT与H5进行联合,制作H5效率将会大大提高。

以下以Maka.im为例,介绍一下操作步骤。

首先在Maka网站简单注册一下,然后新建空白项目

以下以Maka.im为例,介绍一下操作步骤。

首先在Maka网站简单注册一下,然后新建空白项目

注意此处可以更换背景,比例为640*1008

按照此比例,在PPT中自定义画布尺寸

宽高设置为17cm*27cm,版式设为“空白”

下面就可以在PPT中完成排版设计,

并愉快的使用特定的字体。

在PPT中插入图片并缩放

对图片进行裁剪,符合页面大小

剪切图片

右击页面选择“设置背景格式”

填充设为“图片或纹理填充”,“插入图片来自剪贴板”

此时图片已作为背景图片

输入文字,并设置字体

以此类推,在PPT中完成其他页面制作

如果不想加入动效,只需导出图片

选择导出“所有幻灯片”

上传到Maka即可

如果想进一步添加动效,请继续往下看

右击页面选择“保存背景”,这样文字不会被保存

右击文字部分,选择“另存为图片”

存为背景透明的PNG格式

将文字导入maka(选择添加图片)

对文字(此时是图片格式)添加动效

《心的方向》

一点建议

用户在浏览H5页面时,每页停留的时间很短,所以要严格控制页面中的信息量,文字不要太多。

H5页面底部会有一个提醒用户上划的图标,构图时要尽量避开,以免遮挡。

责任编辑:

ppt加载html5,当PPT遇见H5,这才是真爱!相关推荐

  1. 【33】Android WebView加载html5 3D全景

    一.场景 最近项目在加载html5 3D全景图时遇到个系统兼容的问题,是Android4.3及其以下版本浏览器内核对html5的特性支持不全,导致加载到WebView中之后全景图放大缩小时出现图形绘制 ...

  2. django加载html5 !DOCTYPE html 的css不生效

    django加载html5(<!DOCTYPE html>)的css不生效 html5是规范前面混乱的浏览器格式而诞生的标准,它之前还有xhtml(html+xml),但是 xhtml不兼 ...

  3. Unity加载并展示PPT

    参考链接1 参考链接2 注意事项: 1.代码需要用到Aspose.Slides    System.Drawing   I18N系列的dll,工程设置为net4.0 2.对unity 版本有要求,Sy ...

  4. PPT加载宏运行教程——实现更新图片链接、另存、断开链接等功能

    版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的. 最近因为懒得手工一个个更新PPT图表,所以设置了从Excel复制粘贴图片链接到PPT的骚操作: ...

  5. wkwebview html5页面,iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    最近在项目中我们的商品详情页是一个后台返回的图片标签.需要我们自己去写一个HTML5标签进行整合,(相当于重新写了一个HTML页面) :ok_hand:那就没办法了,我就自己写一个标签咯,应该不难吧. ...

  6. android studio创建第一个安卓程序加载html5页面(一)

    前言 软件版本:android studio v1.0正式版,由于v0.x以来软件变化一直比较大,很多问题搜索的解决方案也都是v0.x版本时代的,故首先声明一下版本. 动机:由于工作中需要对移动端软件 ...

  7. uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)

    开门见山地说,在移动端开发中,80%的项目都会涉及到列表展示,而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多.本篇文章主要介绍在使用uniapp开发移动端的过程中,比较好用的一个下拉及上拉组 ...

  8. java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现(二)

    之前已经写过一篇关于上拉加载更多的文章,那个主要是根据滚动实现分页向后台发起请求实现.这次实现方式为后台返回所有需要加载的数据,前端这边做视觉上的分页效果.实现原理也是根据滚动距离触发加载更多的条件. ...

  9. 微信小程序体验版数据加载失败,打开调试模式下才可以

    检查"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"是否被勾选上,发现勾上了,我把它去了,发现数据加载不了了: 体验版是必须要把沟去掉校验域名的 ...

  10. android webview 样式解析不正确,解决Android Webview加载Html富文本,h5字体样式不起作用问题...

    问题起因:WebView作为整个页面的一个部分展示,展示的是一段H5片段(Html中body标签中的部分) 问题描述:H5前端设置好的字体大小,在WebView中展示时不起作用,导致字体大小都一样 问 ...

最新文章

  1. python os.path 模块 路径文件名 新建文件夹 文件 路径 是否存在
  2. RabbitMQ 延迟消息的极限是多少?
  3. Java SimpleTimeZone toString()方法与示例
  4. HTML5 表单元素
  5. 机房收费系统个人重构版:暮然回首,灯火阑珊
  6. Python中的*self,*self._args, **kwargs
  7. Win8.1 操作系统中无法打开IE浏览器。
  8. (2) python 使用pd.read_excel 读取excel时,选取某一列为索引
  9. 2017-01-20_dp测试
  10. 松本行弘的程序世界阅读记录
  11. 2018最新最全百度网盘限速解决方法
  12. 碰撞检测——碰撞器和物理材质
  13. AVR单片机EEPROM存储空间的初始化
  14. Could not locate executable null\bin\winutils.exe in the Hadoop binaries解决方式
  15. sincerit 小乐乐切割方块(规律+思考)
  16. 按键精灵文字识别插件_【买三赠一】iOS按键精灵VIP夏季特惠进行中
  17. Android RecyclerView万能分割线
  18. ipython和pycharm的区别_ipython和pycharm有什么区别
  19. Python语法之精妙的十个知识点(装B语法)
  20. 使用OAuth2的SSO分析

热门文章

  1. BetaFlight模块设计之十三:Gyro过滤任务分析
  2. 教你做一个最简版的倒计时计时器,新手也能秒懂。
  3. linux pbs提交作业命令,PBS Pro的安装及其作业管理命令
  4. eclipse为什么文件夹路径真实存在但运行显示路径不存在
  5. Dev-C++每次启动都提示路径库不存在
  6. python定义整型数组_Python数组定义方法
  7. OpenWRT配置 -- 网络配置network文件
  8. 粉象生活日记1:系统化打磨
  9. 死磕 Framework准没错,大把的高薪岗位等着你~
  10. JavaScript数据源版省市县三级联动