我用PPT做了一个可以互动的动态“OPPO”官网
gaoyangw 2024-11-04 12:59 22 浏览 0 评论
作为一名PPT设计狮，我经常通过各种寻求灵感。
在看到OPPO官网时，突然产生一个想法：“可以用PPT做一个网站呢？”这个想法令我兴奋起来，心动不如行动，撸起袖子加油干！
一、分析网站布局
首先，我们分析一下官网的排版布局，在banner顶部是logo和导航栏。
下滑会出现机器型号的展示。
点击导航栏会出现二级菜单，分别是手机的型号、机器展示等内容，并且有相应的动态效果。
点击主页的banner也会跳转到产品详情页。
确定了设计逻辑和风格后，我们直接开动~
二、PPT制作网页步骤
第一步：
将网站上的素材依次下载，以备后续使用。
第二步：
在PPT中临摹网站的布局，将首页的元素制作到PPT中。
我们先看一下网站的交互动画：
鼠标点击导航栏时，会下浮出一个白色矩形框，展示机器的图片，并且矩形下部的背景层会相应自动变暗。
第三步：
先插入一个“矩形”，并将矩形的大小调整为等同于页面大小，颜色填充为“白色”，轮廓设置为“无轮廓”。
我们使用“渐变工具”，来实现上部为白色，下部分为带有阴影的视觉效果。
第四步：
选中添加好的白色矩形框，在导航栏“格式”中依次点击 “形状填充”-“渐变”-“线性向上”。
第五步：
再次点击“格式”中“形状填充”-“渐变”-“其他渐变”，将渐变光圈的个数设置为2个，拖动两侧的光圈至画面的1/3处，调整透明度为40%左右。这样一个遮罩阴影效果就完成了。
第六步：
将手机模型放置在刚添加的含有阴影的矩形中，调整好位置，并使用“文本框”工具在下方注明机器型号的文字说明。
因为有多个系列的机型，为了方便后期设置动画效果，我们可以先将每个系列的机型在新的页面中编辑好（第八步再复制到刚刚建立的首页中）。
第七步：
为每一页的机型和渐变遮罩矩形背景添加动画，其中遮罩的矩形设置为“下浮动画”，手机图片设置” 上浮动画，并对每个机型的效果逐个延迟0.25s。
第八步：
将每一页的元素复制到首页，并调整好层级关系。
具体层级结构如下：
第九步：
完成后，需要给其设置一个触发器，将所有的动画通过触发器都链接为导航栏中相对应的标题中。
第十步：
再添加一个淡出消失的动画，并同样通过触发器链接至对应的标题，这样就可以实现再次点击标题栏后机型消失。
将剩下的每一导航栏标题都重复以上操作，直到全部完成。
做到上面这一步，我们在导航栏中的交互动画就全部完成了。
接下来我们补充一下网页下翻的内容。
第十一步：
在首屏下方新建一个空白页面，将网站中用到的素材进行临摹排版。
第十二步：
将翻页动画设置为“推入”。
第十三步：
对banner的链接页面进行设计制作。
新建一个空白页面，将网页banner打开后的界面素材制作进来。
因为新建的产品展示把原有的banner遮盖住，我们可以将素材拖到页面外边缘，鼠标右键单击“banner”，选择“超链接”——第三页（也就是要展示的那页）。
到这一步，我们整体的设计已经完成，下面体验一下实际效果：
鼠标点击不同导航栏，自动展示相关的产品信息，点击banner图自动跳转到产品详情页，鼠标上下滑动进行页面滚动。
如果不告诉你这是PPT制作的，你会不会相信这是用PPT实现的呢？
其实PPT一直非常强大，只要我们充分利用好每一个功能，再发挥一下我们的设计才能，相信你也能做出非常棒的PPT！
相关推荐
- 限时免费推广，就在今日闵行APP，看看你是我们等的人么?
-
为助力汽车行业复工复产，今日闵行APP特开设“车圈复工”栏目，自即日起，凡是闵行区行政区域内的汽车行业商户，可获得一次免费线上推广机会，具体操作方式如下：参与方式1.下载今日闵行APP。2.注册账户并...
- 免费推广还送礼物?!贵阳一母婴店老板疑中新型骗术
-
贵阳的蹇女士经营着一家母婴用品店，上个月初一家来自黑龙江的传媒公司找到蹇女士合作，声称不用蹇女士花一分钱，免费帮她宣传推广母婴店，真有这么好的事情吗？蹇女士告诉记者，对方提供的推广方式，是以她的母婴店...
- 网络实名制认证，对于免费网络推广有哪些要求?
-
网络实名制大都表现在网络店铺、互动类SNS平台、收款类平台、商务站点平台、门户类论坛等，只要人气旺的领域都慢慢需要实名认证或要求绑定个人联系方式。在前两年互联网运营人员提到要求网络实名制，这个提议也遭...
- 拼多多不花钱推广能做起来吗?全站推广适合长期开吗?
-
对于许多刚刚进入拼多多的商家来说，推广是一个非常重要的问题。然而，很多商家可能面临的困境是：是否可以在拼多多不花钱推广，从而做起来呢？本文将围绕这个问题进行深入探讨，为商家提供一些有效的推广方法和建议...
- 小心!免费推广不“免费”
-
年底将至各个商家为了提高曝光量使出浑身解数这就让不法分子发现了“商机”于是……...
- 免费推广营销的技巧，你学会了吗?
-
新手们刚开始接触淘宝网，相信没有足够的资金或者是不敢投入太多的资金进去，加上没有网点运营经验。因此不敢花大价钱去做一些付费的网点推广。所以小默就给大家总结了一些网店免费推广营销的技巧，提供给大家学习。...
- 新手应该学习了解的免费网络推广方法
-
这段时间以来，木偶有点忙碌，今天为大家分享一些免费的网络推广方法。尤其是针对新手来说，没有做过网络推广的人，给大家讲解下木偶个人的见解。现在互联网推广的难度是越来越大了，最重要的一个原因是效果好的...
- 邮件营销:18种免费的电子邮件营销工具
-
很多人会觉得，给客户发营销邮件没什么意义。他们会说这又贵又费时，而且不一定有回报，我不同意。邮件营销可以通过发送针对性的信息来接触客户，它功能齐全并且价格低廉。这个指南会阐述邮件营销对网店有什么用处...
- 都爱学-一个全国教育培训免费招生推广的网站
-
都爱学简介都爱学是全国教育机构培训机构发布平台，汇聚全国培训机构，培训学校、培训课程等相关信息，为全国培训学校、培训机构提供招生信息发布，为学员打造低价团课秒杀，找课程、找学校、培训机构便利服务。全国...
- 借“免费网课”向学生推广网游?这些平台回应了
-
在过去的这个假期里，上网课是学生们学习的主要方式，但也出现了不少未成年人在网课期间沉迷网游，甚至是高额网络消费的情况。记者调查发现，虎牙、斗鱼等网络平台利用免费提供的上网课渠道，向未成年人推广网络游戏...
- 扒一扒当前最靠谱实用的免费网络推广套路
-
企迪作为为北京地区的权威网站建设公司，也是互联网品牌营销推广的佼佼者，针对免费的网络推广套路那是再收悉不过了。从最简单的开始做起、从最有效率的开始做起、从最不需要花钱的开始做起；下面北京网站建设公司-...
- 借免费网课推广游戏 虎牙斗鱼等直播平台被点名
-
北京商报讯（记者郑蕊实习记者耿文婧）6月8日，央视新闻频道在报道中点名批评虎牙、斗鱼等直播平台，因为后者在免费网课渠道中推广网络游戏。此前2月，为响应教育部“停课不停学”的号召，斗鱼、虎牙等直...
- 借“免费网课”向学生推广网游?!这些平台回应了
-
在过去的这个假期里，上网课是学生们学习的主要方式，但也出现了不少未成年人在网课期间沉迷网游，甚至是高额网络消费的情况。记者调查发现，虎牙、斗鱼等网络平台利用免费提供的上网课渠道，向未成年人推广网络游戏...
- 要想提升宝贝排名，必须做好淘宝SEO
-
相信在网上开店的朋友们对淘宝SEO都不陌生。淘宝SEO对店铺流量的影响是不言而喻的，宝贝的排名能直接决定店铺的流量大小。所以要想提升宝贝排名，淘宝SEO一定好优化好。今天，星密码小默就教各位卖家们淘宝...
- 淘宝SEO应用技巧 让你日访问量大增
-
淘宝搜索引擎优化是指通过研究淘宝排名规则，把自己的产品优化成符合排名规则的产品，从而获取较好的排名。接下来衣联网小编通过研究淘宝最新排名规则，总结出影响淘宝搜索排名的因素，从而提出淘宝搜索引擎优...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)