189 8069 5689

wordpress作品 wordpress作品展示

如何在WordPress中嵌入Edge Animate作品

一、下载Adobe Edge Animate制作工具

成都创新互联公司是一家专业提供淮滨企业网站建设,专注与网站设计、网站制作、H5网站设计、小程序制作等业务。10年已为淮滨众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

二、下载Edge Animate示例文件

三、下载并安装Wordpress插件:Edge Suite

Edge Suite是Wordpress插件,可以帮助你把以.oam格式发布的Edge Animate作品插入到Wordpress博客文章中。你可以在下载该插件,或者直接在Wordpress管理后台搜索Edge Suite然后添加新的插件,如下图:

安装并激活后可以在Wordpress管理后台的边栏上看到“Edge Suite”菜单:如下图:

通过“Edge Suite”,可以上传Edge Animate动画,然后在Post中引用。

四、创建一篇新blog并嵌入Edge Animate作品

1、在EDGE ANIMATE中发布.OAM格式HTML5动画

启动Edge Animate,并打开SpriteSheet+Symbol+Loop项目中的Animate项目文件:Spritesheet+Loop.an 。如下图:

2、Edge Animate提供了三种方式允许你发布HTML5动画,分别是Web、Animation Deployment Package(动画部署包)、iBooks/OS X。通过菜单FilePublish Settings,可以调出发布设置(Publishing Settings),如下图:

选择“Animation Deployment Package”,指定发布目录,以及文件名,点击左下角的“Publish”按钮,Edge Animate即把html5动画发布成.oam格式文件。.oam格式文件实际上是zip格式文件(你可以把其后缀改为.zip,然后解压看其内部结构)。通常的HTML5动画要包含诸多html、js、css以及图片等资源文件,不易交换和传播。通过.oam,可以比较方便的集成在其他环境中,比如Adobe的数字出版方案DPS,以及Wordpress中。

3、通过EDGE SUITE上传到WORDPRESS中

进入Wordpress管理后台,点击边栏菜单的Edge Suite,进入Edge Suite管理界面。在该界面上,可以上传.oam文件。如下图,上传的.oam文件会在后台自动解压,上传成功后,可以看到解压的文件提示。

4、创建POST,嵌入动画。

现在,在Wordpress中创建一篇新的post。用户会注意到,在Post编辑界面的最下方出现新的Edge Suite功能,如下图。该条目提供了你上传到WordPress中所有Edge Animate动画作品的列表,每个条目的第一个数字即其id。通过改id,即可把动画内容插入到post中。比如下图中显示条目为“3-LoopAnimation Edge-69072481”,3即为其id。

5、在post中正文中,可以按照如下方式嵌入该动画:

有哪些好看的极简的 WordPress 主题

好看的主题建议用国外的,人家都是专业设计师设计的,不过使用复杂,有些人连怎么使用都不知道。我也承认国人有个别好的作品

将全景图插入到wordpress制作的网页中

方法一、将网页上传到网站目录下再通过链接来调用这个独立的页面。将连接添加至菜单(再将菜单放在网站导航上),或者放在侧栏的小工具,就可以在网站页面进行访问了。

注意事项:

1.要保证下载下来的网页可以打开,注意有无图片调用的文件夹,保证上传文件的完整性。

2.网页的编码(wordpress一般为UTF-8,国内网站多为GBK)是否和网站相同,如果不同就需要转码。用网页编辑小工具就可以进行转码(只需要另存的时候选择对应的编码就行了),这里推荐EditPlus。

3.在用EditPlus打开另存换编码的过程中,希望大家研究一下代码,更改该一下标题和一些文字信息,让它更符合自己的网站。

方面二、将网页上传到网站目录下,在wordpress文章页面编辑时通过代码(如下文红色代码)来调用这个独立的页面。

div class="title"h1电声设计(标题)/h1nbsp;/divdiv id="ff_content" class="newstext"iframe id="content01" src="/文件夹名称/文件名.html" name="content01" width="100%" height="560(调用页面的高度)" frameborder="0" scrolling="no"/iframe/div

注意事项:

1.height="560(调用页面的高度)"这个需要反复调试,最终确认合适的高度。

2.scrolling="no"表示不自适应(固定值),可以选"yes"一直自适应,"auto"自动自适应(建议)其实,这种方法还可以用来调用别人的网页,将src="你要调用的页面网址" 。


分享文章:wordpress作品 wordpress作品展示
分享链接:http://cdxtjz.cn/article/dddeppi.html

其他资讯