更多内容， 推荐关注微博@云三幻z 以下是正文： 这次出的教程主要讲图文混排页，网页化PPT中目录的地位比较特殊，我们一会儿再讲。我会将网页化PPT浅析的优先级提高，换句话说，优先更新这个教程，交互动画方面暂且搁置。毕竟作为一个学生，精力有限，希望大家理解。 目录我们都接触过不少模板，很多都将目录单独列出一页，比如这种：
我并不是说这种设计不好，但是在网页中，所谓的“目录”指的则是导航栏。它是融入于网页中的，而非单独存在。所以在我们做网页化PPT时，我们也可以应用这种设计思路，将你的目录融入PPT内页之中，可以变成下面这种设计：
你看，把目录以图标的形式放置在左侧，右上角放标题，这样子来做，也就是将目录揉进了内页之中。同时在你的PPT播放过程中，观看者也可以根据你左侧图标的位置来判断你的演讲进度，给人一种确定感，让他们知道你讲到哪里，这样也会对你的演讲有所帮助。 另外一种插入式目录的设计，比如说这样：
目录在上面，原理和前面的一样。关于目录图标切换的动画，可以直接利用2016切换中的变体来实现，如果不是2016版本，那做起来就复杂点，会用到路径动画。我会在交互动画中讲到，这里就不提及了。 关于目录的插入式设计，我就讲到这里了。只是想告诉大家，在网页化的PPT里，目录是什么样子的。 图文混排页图文混排页确实是一个很大的概念。有时候以图为主，文字为辅；有时候则正好相反。而图文混排页根据用途也分为很多的方向，比如说产品介绍、人物介绍、地理说明等等。而我们在这里说到的图文混排页，也主要是跟大家说一下图片的处理方式。 还是上次的公司“藏游”。之前我们处理了它的封面，紧接着，我们就要介绍一下它的主营产品。在这里我举一例来说明，即骑行者最重要的装备——自行车。 打开的PPT是这样的：
然后我就懵逼了，界面咱就不说了，那个五大洲是什么鬼？为什么这么低级的错误还会犯？大哥你要是不找人设计是不是就打算这样交上去了？我要是你老板第二天你就要走人知道么？ 不过既然交到我手上了，那么我就有责任和义务帮他弄好。毕竟拿人钱财替人消灾嘛。 好吧，现在让我们来看看这一类图文混排怎么处理。 首先，产品是必须要突出的。上图中大家可以看到，自行车图片是白色底色，而背景是灰色，作者甚至还把图片加了一层黑边。也许他想借此突出这个图片。但是很可惜，这样做只会适得其反。我们在这里先介绍一种图片处理方法： 删除背景
同样的，我们从网上找到一张网页。今儿个手气不错，那就选它了！ 我们可以看到，右侧的大叔是一个“单纯”的人像，不像我们的自行车还有白底。这样单纯的人像应用范围很广，它没有方正的边缘，可以适配任何背景，任何底色。 我们做产品介绍的页面就是需要这样的图片！ 利用PPT内置的删除背景可以完成简单图片的抠图工作（仅在2013及以上版本有的功能），更复杂的图片请左拐找PS。
好的，现在我们把自行车抠出来了。那么怎么应用到页面里面呢？ 想想我们上一期的封面是怎么做的？ 大图+遮罩+大字标题+零部件 那么为何我们不尝试再做一次？ 想到就做，首先，咱们找一张风景图片，加遮罩，放字，还有把我们新鲜出炉的自行车放上去，然后就变成现在这样：
哎，不对，你等等。总觉得哪里怪怪的。 这个自行车其实并没有真正得到突出。你会发现在你看到这个图片的时候，你的注意力还是会放在标题那些字上。而自行车可能是你在读完字后才会注意到。 这跟我们的本意相违，所以我们要换一种解决方法。 那就是把图片放大，超出画面所能容纳的极限：
那么现在，你不得不承认，至少自行车会让你的注意力有所偏向，对吗？ 有的同学发现，除了自行车之外，我也修改了说明文字，把它变得更短了。事实上说明文字最好不要超过两排，不然在标题与说明文字的“高度”上可就起不到对比的效果了。 好了，如果把做PPT比喻为做菜的话，现在我们就要加点调料了。对，就是那些网页特有的小部件们：
PS：我将自行车左右翻转之后导致商标也……真正在实操时请注意这个问题。 我借着产品介绍页将网页化PPT如何做图文混排浅析了一下，其首要的就是注意抠图。当然，有的场景不需要如此，你可以把图片截成一个细长条形，然后采取居中排列。其他的处理方式，请自行研究。 本来该到此为止的，不过想了想，作为一个学生，我还是决定再加一点内容，献给曾经用PPT教我的老师们。 纯文字页面我们一直提倡将文字转化成图片或图形表达，所谓“一图胜千言”。但是在日常生活中总有例外，你比如说……老师做的PPT。 下面这份PPT相信学生们都不陌生，它的版式存在于你上的每一堂课中：
看了这么多年，都看习惯了，似乎下意识地认为，老师做的PPT就是这样：不停地往里面塞文字，就像是一份放大版的Word。 但是不应该是这样啊，至少说，哪怕是纯文字，也不该做的如此简陋。 不能光说不做，那么我们就开始对这页PPT进行改造，当然，也是网页化的框架。 改造之前，我们先明确一个指导思想，即改变常规的阅读方向。 首先，让我们去掉见鬼的默认主题，留下个干干净净的内容，然后改一下字体：
衬线与无衬线字体这样的小知识应该不用我多说了，后者更易阅读，更易辨识。那么接下来就是改变阅读方向的时候了：
将标题移到左侧，这样你的阅读方向就由“从上到下”变成了“从左到右”，体验会得到不小的提升。 再之后，大家注意，《西游记》是古代经典，其片段赏析更是一字不可增删。那么对于这么多字我们怎么处理？ 分栏。 把这个笨重的字体块狠狠地劈开！
只要一分栏，感觉马上就不一样了。在这里我想说一下，PPT自带的分栏功能真心不好用，大家还是用点笨办法，手动做个文本框吧。 当然不会做到这里就结束。单单一个分栏怎么能表现网页化呢？所以又到了加零件的时候了：
这是最后的成品，比起之前的页面，说是天差地别也不为过。当然了，到底这个版式配不配《西游记》这个内容……举个例子而已，不用那么较真。 所以即便是单纯的纯文字，也不要放弃治疗。纯文字页面也是大有可为的。 如果你以后当了老师，请尊重你的学生，不要再让他们看到那种简陋的PPT了。 本期浅析到此结束，荆轲刺……呃，不对，大家晚安~ 微信、微博最受欢迎的PPT学习资源分享 |
|
|
