H5页面设计使用教程：如何设置自动翻页
《H5移动页面设计与制作》教案
尊师重教。提醒学生进入上课状态。
情境引入
引入：
清明节前夕，工作室接到一个粽子的产品推广工作单，作为工作室负责人的你希望制作一个简单的H5进行推广该产品。
工作情景描述带领学生快速进入学习状态。
倾听任务
通过工作情景描述使学生快速进入学习状态。
明确任务要求
熟悉工作页中的“工作情境描述”，初步了解本任务的内容
4.运用行为工具设置定时器。
教学环节
教学内容
教师活动
学生活动
设计意图
课堂组织
检查学生出勤和精神状态。
向孔老夫子行鞠躬礼。师生互相问候。
调动学生激情，调节课堂气氛。
师生互相问候
师生互相问候
尊师重教。提醒学生进入上课状态。
情境引入
引入：
XX公司周年庆活动，希望制作一个抽奖性质的H5,要求活动新颖互动性强。
课后反思
真实的企业任务，让学生上课如上岗、学习过程即工作过程，创设工作室情境，采用绩效考核激发学生学习积极性，让岗位活动教学化，教学效果发生很大变化；
“学习任务一 制作HTML5展示动画教案
一体化课程
H5移动页面设计与制作
学习任务
任务一：制作HTML5展示动画
教学时数
72
上课日期
2019.2.26
周次
指导学生完成任务
创建文档
检查学生知识掌握情况
检查控制
根据计划实施要求，小组内互相检查，修改。
巡回指导
互相检查，讨论，修改
巩固知识的掌握
总结评价
1.请小组成员进行作品展示
2.评价总结
1.组织各小组进行作品展示
2.进行总结、分享、改进
1.各小组选出最优作品进行作品展示
iH5高级教程：H5创意展示,3D翻书特效
iH5高级教程:H5创意展示，3D翻书特效3D电视电影已经成为一种人们生活中的一种习惯，电子书配上3D也让我们有更好的体验，下面教大家来制作一个非常简单的3D翻书。
步骤：第一步：添加滑动时间轴选中舞台，点击工具栏里的“滑动时间轴”图标，在舞台上画出一个框，然后点击滑动时间轴设置滑动时间轴的宽高和舞台的宽高一样。
第二步:滑动时间轴的设置1.选中滑动时间轴，点击工具栏透明按钮工具，在舞台中央位置上画一个框,作为3D旋转的父对象。
在滑动时间轴下设置透明按钮作为3D旋转的父对象,是为了图片旋转设置视距,视距越大，3D旋转的效果越不明显。
2.选中3D旋转父对象，点击透明按钮工具,在舞台左上角添加透明按钮，透明按钮的中间与舞台左侧边缘重合。
（为了观察舞台外的素材,舞台属性面板剪切设为NO）3.选中透明按钮,添加一张图片，图片设置宽高和舞台一样,透明按钮设置个颜色通过观察透明按钮和图片,可以发现图片左侧边缘刚好在透明按钮的中间,这样设置就可以保证以图片的边缘旋转。
4.选中图片，添加轨迹,点ADD添加关键帧，在时间轴窗口的第一个框里输入2，点回车，小黑块到达2秒位置，图片属性面板的Y轴旋转设置为—90度，点击ADD添加关键帧。
通过透明按钮旋转带动图片的旋转，透明按钮的Y轴旋转随着时间轴的播放从0变成—90度,给透明按钮设置个颜色通过观察透明按钮和图片的Y轴,就可以发现我们的图片刚好在透明按钮的中心，这是因为我们的旋转是以透明按钮的中心来旋转的，这样设置就可以保证我们是以图片的边缘旋转.第三步：依次设置其他按钮,添加其他透明按钮,和第一个按钮设置方法一样，只是时间轴上的时间不同,按顺序累加.最后一张图片不需要旋转翻页，所以不需要透明按钮。
第四步：选中最后一张图片,点击文本工具,输入BACK，选中文本，添加事件。
触发条件手指按下，目标对象滑动时间轴，目标动作跳至某时刻。
时间0。
即翻页到最后一页,点击BACK，回到第一页。
木疙瘩快速入门：制作翻页动画
⽊疙瘩快速⼊门：制作翻页动画
1.2.4 快速⼊门：制作翻页动画
添加新页⾯：点击“添加新页⾯”按钮，可添加⼀个新空⽩页⾯。
图1.2-26
复制页⾯：点击“复制页⾯”按钮，可复制⼀个与上页⾯完全相同的页⾯，包括素材及其动画效果。
图1.2-27
替换背景图⽚：选中复制的第2页，选中舞台上的背景图⽚素材，点击属性栏内的“编辑”按钮，在弹出的“媒体库”对话框中选择要更替的图⽚素材，点击“添加”按钮，替换原有图⽚。
图1.2-28
图1.2-29
同理复制第3页⾯，替换背景图⽚。
点击保存并预览效果。
图1.2-30
注：若在预览中出现某素材动画效果不断循环重复的情况，可在上⽅菜单栏选择“动画”→去掉“循环”效果。
图1.2-31
图1.2-32
制作翻页效果：在“翻页”菜单栏内设置翻页属性：翻页效果：三维翻转；退出效果：⽆；翻页⽅向：左右翻页；循环：是；翻页时间：600毫秒；保存并预览效果。
图1.2-33。
iH5基础教程：添加H5页面、翻页特效
iH5基础教程：添加H5页面、翻页特效方法/步骤
第一步：添加素材
1、准备好喜欢的背景音乐和5张图片
2、将准备好的背景音乐和图片拖到白色区域当中
第三步：添加页面
1、在对象树中选中舞台
2、点击页面工具，添加5个页面
第四步：图片分别添加到5个页面中
1、选中图片1 Ctrl+X
2、选中页面1 Ctrl+V
第五步：音乐播放设置
1、选中音乐
2、把它的自动播放属性设为YES
第六步：预览
1、舞台属性面板滑动翻页默认是上下（跟随）
2、网页上方点击预览
3、填写标题和描述
4、点击确定就可以预览作品
其他翻页方式
1、舞台属性面板滑动页面选择上下（触发）
2、页面1属性面板翻页效果处选择不同的效果
重点控件：页面、音频
知识点：
1、舞台属性面板滑动页面选择上下跟随或左右跟随，预览时翻页是默认的翻页效果。
2、舞台属性面板滑动页面选择上下触发或左右触发，页面的属性面板处可选择不同的向前向后翻页效果，预览时翻页就显示你所选择的效果。
3、舞台属性面板滑动页面选择无，则不能滑动翻页，需要添加事件跳转页面。
vue-awesome-swiper基于vue实现h5滑动翻页效果【推荐】
vue-awesome-swiper基于vue实现h5滑动翻页效果【推荐】说到h5的翻页，很定第⼀时间想到的是swiper。
但是我当时想到的却是，vue⾥边怎么⽤swiper？！vue-awesome-swiper就是其中⼀个前辈们产出的结晶。
就看⾸尾两个单词，就知道他是vue和swiper的爱情之⼦了。
官⽹是中⽂⽂档，妈妈再也不⽤担⼼我读api啦。
“基于 Swiper4、适⽤于 Vue 的轮播组件”。
在产品催着进度的紧张环境下，在四处搜寻解决⽅案的情况下，这句话简直发着光啊。
具体怎么⽤，官⽅⽂档写的很清楚，但我还是想记录下来，好再普及⼀波。
⼀、天才第⼀步，这⾥没有纸尿裤（(⊙﹏⊙) 好像暴露了年龄...）准备⼀个基于vue-cli的项⽬(或者你⾃⼰的脚⼿架，whatever),没有准备的请移驾vue-cli教程：⼆、在项⽬⽬录下，往node_modules⾥安装插件vue-awesome-swiper（可以在项⽬⽬录内，shift+⿏标右键，选择"在此处打开命令窗⼝"），注释：我这⾥window电脑安装了，所有右键出现的可能和没安装的不⼀样，实在找不到的看这⼀篇教程：gulp安装流程、使⽤⽅法及CMD常⽤命令导览然后输⼊下边的安装插件命令npm i --s vue-awesome-swiper三、第三步我们依旧没有天才牌裤⼦，所以还是⾃⼰⼀步⼀步稳稳⾛。
1．插件安装后就是引⽤插件了，main.js内部分三步⾛：(1) 引⽤插件：mainjs注册vas(2) 注册插件注册后未use控制台就警告了通过全局⽅法 e() 使⽤插件后可以了使⽤后控制台⽆错了(3) 插件样式（也可以⾃⼰写，不⽤⼈家的）2．vue项⽬中使⽤：(1) 准备-templatenew a project准备⼀个空项⽬初始化html-空结构(2) 引⼊-import(3) 注册组件-components(4) 配置-js（具体配置和swiper的⼀摸⼀样，看swiper官⽹即可。
h5页面设计规范
h5页面设计规范H5页面设计规范是指在H5页面设计过程中需要遵循的一些标准和指导方针，以保证页面的可用性、可访问性和用户体验。
下面是H5页面设计规范的一些重要原则和要点。
1. 页面布局：H5页面设计应该采用响应式设计，适应不同的屏幕尺寸和设备。
布局应简洁清晰，内容层次结构明确，能够引导用户浏览页面。
2. 导航设计：导航在H5页面设计中起到引导用户、提供页面结构的作用。
导航应该明确、简洁，能够在不同页面之间进行切换。
用户应能够清楚地知道当前所处页面和能够访问的其他页面。
3. 文字排版：文字在H5页面中起到传达信息的作用。
文字内容应简洁明了，正文应该易读，字体大小适宜，避免过于小号或过于大号影响用户阅读。
针对不同屏幕尺寸，可以使用响应式设计或者采用自适应字号。
4. 图片和图标使用：合适的图片和图标能够提高页面的美观性和易用性。
图片应该清晰，符合页面主题，避免过大的图片导致页面加载缓慢。
图标应该简洁明了，能够快速传达意思。
5. 色彩搭配：色彩在H5页面设计中起到吸引用户、传递情感、提升品牌认知度的作用。
色彩搭配应合理，遵循品牌色彩和用户体验的原则。
颜色应该适合不同目标用户的喜好和文化习惯，避免过于鲜艳的颜色导致视觉疲劳。
6. 交互设计：交互设计是指用户与页面进行交互的过程。
交互设计应该简单明了，能够提供良好的用户体验。
按钮和链接应该明确，能够引导用户进行下一步操作。
动画和过渡效果可以使用，但不宜过多，以避免分散用户注意力。
7. 响应式设计：响应式设计是指页面能够根据不同设备和屏幕尺寸自动调整布局和样式。
响应式设计应兼顾不同屏幕尺寸下的可用性和用户体验。
页面内容和功能应在不同设备上有相似的呈现效果，但不需要完全一致。
8. 页面性能：H5页面应该加载速度快、流畅，以提供良好的用户体验。
页面应该尽量减少使用大量图片、视频等资源，压缩和优化图片等资源，减少页面的加载时间。
避免使用过多的特效和动画，以减少页面的复杂度。
H5 页面设计与制作
2.3 设计与制作H5的基本规范
2. H5的页面适配 H5的页面适配包括H5工具的自动适配、页面安全区的设置以及 H5其他设备的处理3个方面。
2.3 设计与制作H5的基本规范
（1）H5工具的自动适配 H5的在线制作工具本身就具备自动适配的功能，因此最主流的 尺寸虽然是根据iPhone5的手机屏幕尺寸而来，也可以保证对于大多 数手机的自动满屏适配。
围住神经猫
博雅：看你有多色
1.2 H5的发展
3. 绽放阶段 2015年～2016年是H5的全面绽放阶段。在这一阶段中的H5交互设 计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5 的意愿。
豆瓣：我们的精神世界
淘宝×京东：造物节邀请函
讯极光计划：记忆重构
1.2 H5的发展
4. 成熟阶段 2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成 熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一 种是纯视频类H5，另一种是测试类H5。
掌握H5的定义 了解H5的发展 了解H5的特点 熟悉H5的应用 熟悉H5的类型
1.1 H5的定义
H5指的是移动端上基于HTML5技术的交互动态网页，是用于移 动互联网的一种新型营销工具，通过移动平台（如微信）传播。
网易云音乐：你的荣格心理原型
PUPUPULA：2018汪年全家福 我是创益人×腾讯广告×腾讯基金 会：敦煌数字修复
1.2 H5Байду номын сангаас发展
开始阶段 引爆阶段 绽放阶段 成熟阶段
1.2 H5的发展
1. 开始阶段 H5的开始可以追溯到2014 年，其最初的呈现状态和PPT类 似，将经过简单设计的静态页面 设置成滑动翻页效果，常用于婚 礼邀请、企业招聘等。
MAKA H5制作流程及相关操作指南
（PS：版式库里面带有会员免费使用标识，会员都是可以正常使用。会员用户遇到可以未付费情况的话，可以先点击右上角保存之后再进行使用即可。）
Step6 -调整页面和编辑背景
1.在画布左侧，可按需求点击【复制该页面】和【删除该页面】，或点击【上移一页】、【下移一页】调整页面顺序。
Step11-查看作品流量和访问数据
1.在官方平台首页，点击右上角的【作品管理】，进入作品管理页面。
2.将鼠标移至要查看数据的作品封面的右上角，在弹出菜单栏中选择【数据统计】，进入作品数据页面。
3.选择查看的数据，包括数据总览、传播数据（PV、UV和分享数据）、访客分析（微信内的访问来源比例、设备分布、地区分布），以及表单收集（带有报名表单组件的作品可在此查看表单收集到的用户信息）。
2.如果想上传自己的音乐，点击【上传音乐】，即可上传自己喜欢的音乐。上传的话需要小于4M的MP3格式的音乐。
Q1：怎么实现音乐的自动循环播放？
A1：添加的背景音乐默认为自动并循环播放。如果添加音乐后不会自动播放，首先建议您确认一下手机是否开了静音模式，或调整音量大小；另外，切换一下网络，排除网络不稳定从而影响到音乐载入的情况；若同一个作品在安卓手机能自动播放而在iPhone不能，请确认这首背景音乐是否在苹果设备上兼容。
“速度”是指元素完成整个动作需要的时间长度；
“延迟”是说翻到这个页面之后，什么时间这个元素开始动。
通过设置“延迟”，可以调整元素的出场顺序，延迟时间越短的元素出场越早，反之亦然。
Step9 -添加报名表单等互动功能
1.可点击导航栏的【互动功能】，点击【表单】样式添加至画布。并在右侧样式栏修改和编辑报名表单，用于收集用户报名的信息。
移动端H5页面返回并刷新页面（BFcache）的方法
移动端H5页⾯返回并刷新页⾯（BFcache）的⽅法项⽬中的需求：点击浏览器中的返回按钮，要让页⾯重新加载资源。
因为这部分的资源每次去加载的内容都不⼀样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很⼩了；⽽如果⽤户看完了这部分内容，再返回来的时候，这个地⽅换成了新的内容，这样就能体现这部分的价值了。
⽽对于浏览器来说，⼤部分浏览器的返回是直接使⽤缓存的，不会执⾏任何的javascript代码。
原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之⼀——Back-Forward Cache(简称bfcache)什么是bfcache？bfcache，即back-forward cache，可称为“往返缓存”，可以在⽤户使⽤浏览器的“后退”和“前进”按钮时加快页⾯的转换速度。
这个缓存不仅保存页⾯数据，还保存了DOM和JS的状态，实际上是将整个页⾯都保存在内存⾥。
如果页⾯位于bfcache中，那么再次打开该页⾯就不会触发onload事件pageshow事件这个事件在⽤户浏览⽹页时触发，pageshow 事件类似于 onload 事件，onload 事件在页⾯第⼀次加载时触发， pageshow 事件在每次加载页⾯时触发，即 onload 事件在页⾯从浏览器缓存中读取时不触发。
pagehide事件该事件会在⽤户离开⽹页时触发。
离开⽹页有多种⽅式。
如点击⼀个链接，刷新页⾯，提交表单，关闭浏览器等。
pagehide 事件有时可以替代 unload事件，但 unload 事件触发后⽆法缓存页⾯。
persisted属性pageshow事件和pagehide事件的event对象还包含⼀个名为persisted的布尔值属性。
对于pageshow事件，如果页⾯是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
对于pagehide事件，如果页⾯在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。
h5使用方法
h5使用方法
H5（HTML5）是一种用于创建网页内容和应用程序的标准。
它提供了许多新的功能和语义元素，使开发者能够更好地构建现代化的网页。
以下是使用H5的基本方法：
1.创建H5文件
首先，您需要创建一个H5文件。
您可以使用任何文本编辑器，如记事本、Sublime Text或Visual Studio Code等。
将文件保存为以`.html`为扩展名的文件。
2.编写H5代码
在H5文件中，您可以编写HTML、CSS和JavaScript代码来定义网页的结构、样式和行为。
HTML：使用HTML标签来定义网页的结构，如标题、段落、链接、图像等。
CSS：使用CSS样式规则来定义网页的外观和布局。
JavaScript：使用JavaScript代码来实现交互和动态效果。
3.运行H5文件
您可以在Web浏览器中打开H5文件来查看网页的效果。
只需双击H5文件，它将在默认浏览器中打开。
4.学习和掌握H5特性
H5提供了许多新的特性和语义元素，如音视频播放、Canvas绘图、本地存储、地理定位等。
您可以通过学习相关的教程和文档，掌握这些特性并将其应用到您的网页中。
5.使用H5框架和工具
除了原生的H5，还有许多优秀的H5框架和工具可供使用，如Bootstrap、React、Vue.js等。
这些框架和工具可以帮助您更高效地构建和管理网页项目。
总结起来，使用H5的方法包括创建H5文件、编写H5代码、运行H5文件、学习和掌握H5特性，以及使用H5框架和工具。
不断学习和实践，您将能够灵活运用H5来开发出丰富多样的网页和应用程序。
iH5高级教程：H5交互菜单,流动的按钮特效
iH5高级教程：H5交互菜单，流动的按钮特效向上滑动页面翻页，上面的图片向上缩小，下面的图片向上切换出来，同时，流动按钮“加号”会移动位置，点开移动按钮会出一张围巾的小图，小图与模特身上的围巾是对应的，点击小图，还可以跳转到店铺。
步骤：第一步：添加滑动时间轴与图片1、选中舞台，点击页面工具，添加一个页面。
2、选中页面点击滑动时间轴工具，在舞台上画一个与舞台一样大的框，添加滑动时间轴。
3、选中滑动时间轴，点击图片工具，添加10张图片做子对象。
第二步：选中图片，在图片下添加轨迹。
1.将页面的属性面板，剪切设为NO，就可以看到舞台外的图片。
2.第一张图第一个关键点，XY坐标是(0,0)，大小是640*1008,也。
就是刚好放满舞台，。
第二个关键点，，图片在舞台上方，大小也改变了。
数值可以参考截图。
3.第二张图第一个关键点，XY 坐标是(0,1008)，大小是640*1008，放在舞台下面，第二个关键点，图片在舞台上，大小还是满屏，第三个关键点，图片在舞台上方，并且缩小了。
数值可以参考截图。
其余图片也是同样的设置。
第三步：添加跟随页面的流动按钮1.选中滑动时间轴，点击透明按钮工具，在舞台上画一个框，添加一个透明按钮作为容器，为容器添加一个轨迹。
这个图片的轨迹就是移动到啊每一页的围巾下方。
2.容器下添加一个时间轴，时间轴下添加“加号”的图片，图片下添加轨迹。
加号这个图片会明暗变化，提示用户去点击。
第四步：添加围巾小图在滑动时间轴下添加一个围巾的容器（可以是透明按钮，也可以是空的图片），容器下加10张小图。
为每一张小图，添加轨迹与关键点，设置关键点，让小图会跟着大图运动与缩小。
第五步：点击流动按钮出现小图1.选中舞台，点击计数器工具，添加一个计数器。
选中流动按钮里的加号图片，点击事件工具，添加一个事件，点击加号图片，计数器加1，实现点击同一物体出现不同效果。
计数器初始值为0，计数器下添加4个事件。
2.当计数器是奇数时（点击1次），旋转45度，加号变成叉号。
iH5高级教程：H5创意展示,对折翻书特效
iH5高级教程：H5创意展示，对折翻书特效能像看书一样对折看相片是不是很有趣，使用一个免费的在线H5编辑工具不需要写代码也可以制作这种类似的效果，下面教大家来制作一个非常简单的对折翻页。
工具/原料：图片素材第一步：选择舞台，点击工具栏“滑动时间轴”，在舞台上画出一个框作为你滑动的区域，在这区域外滑动则无效。
在对象树选中滑动时间轴，点击工具栏图片按钮，添加4张图片，每张图片在其他图片工具处理后备对半分成两张图片，即上传8张图片。
第二步：时间轴设置1、第一张图片的左侧与最后一张图片的右侧不需要加轨迹，其他图片下添加轨迹，每条轨迹设置两个关键帧，第一个关键帧的图片属性是正常宽度320，第二个的宽度是0，其他都不变。
2、在前一张图片宽度变成0的时候，下一张图片的宽要从0慢慢变成正常宽度，就是右边的图片（1-2）慢慢的变扁，左边的图片（2-1）慢慢由扁变宽。
第三步：滑动时间轴属性面板，滑动方向设置为左，自动跳转控制点为NO。
先行知识：滑动时间轴、轨迹重点控件：滑动时间轴、轨迹、关键帧、滑动方向、自动跳转控制点1、滑动放大比例：使用此参数来设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1，即手指按设定方向划过滑动时间轴整个范围时，滑动时间轴会从起点播放到终点。
2、滑动方向：滑动方向是指设定一个滑动的方向，即手指或鼠标向此设定方向滑动时，滑动时间轴会正向的播放；注意，手指也可以向此设定的方向反向滑动，那么滑动时间轴会反向播放。
3、自动跳转控制点：自动跳转控制点是指滑动时滑动时间轴是否在滑动停止时自动播放至下一个控制点，如果将这个选项设为是，那么在滑动停止时，将会自动播放到下一控制点再停止，呈现出类似惯性滑动的效果。
此案例中可设为否。
4、制作翻页效果，每个图片的轨迹设置两个关键帧，第一个关键帧的图片属性是正常宽度，第二个关键帧图片的宽度是0，其他都不变。
在前一张图片宽度变成0的时候，下一张图片的宽要从0慢慢变成正常宽度，就是右边的图片慢慢的变扁，左边的图片慢慢由扁变宽。
H5 页面设计(Mugeda 版)教学教案.doc
《H5页面设计（Mugeda 版）》教学教案第1章1.2.3 条理性原则1.2.4 切身性原则1.2.5 创新性原则1.3 H5 页面的设计规范1.3.1 页面尺寸1.3.2 页面适配1.3.3 文件大小1.4 H5 页面的设计流程1.4.1 明确设计目的1.4.2 策划内容1.4.3 搜集素材1.4.4 进行页面设计1.4.5 进行交互设计1.4.6 生成和发布H5综合训练——分析《方寸之间看徽州》拼图H5 游戏小结1.了解H5的基础知识。
2.掌握如何学好H5设计。
3.掌握H5的设计原则与制作流程课后练习（1）如何理解H5 与H5 页面，二者有什么区别和联系？（2）列举H5页面的设计原则，并举例分析某个H5页面设计对这些原则的遵循情况。
（3）简要说明H5 页面的不同设计风格。
（4）鉴赏下图所示的草莓音乐节H5页面，分析其设计风格并对该风格的特点进行介绍。
（5）鉴赏下图所示的音乐公益H5页面，分析其风格，并简述其遵循的设计原则。
第2章2.3.2 模板管理2.3.3 素材管理2.4 Mugeda 中的H5 编辑器界面2.4.1 菜单栏2.4.2 工具栏2.4.3 “时间线”面板2.4.4 工具箱2.4.5 “页面编辑”面板2.4.6 页面编辑区2.4.7 “属性”面板综合训练——使用模板制作出游季H5 页面小结1.掌握Mugeda的基础知识，以及在Mugeda平台中新建和管理页面、素材。
2.掌握Mugeda中的H5编辑界面的操作方法。
课后练习（1）简述新建H5 页面的方法。
（2）简述模板的使用方法。
（3）简述Mugeda 的H5 编辑器界面的组成部分。
（4）在Mugeda 中新建一个名为“新春贺喜”的H5 页面，保存该页面，然后在Mugeda 中新建一个名为“新年”的文件夹，将“新春贺喜”H5 页面移动到“新年”文件夹中。
（5）应用Mugeda中自带的“测试题”模板，编辑模板中的文字，然后发布编辑后的模板。
简述制作h5的基本流程
简述制作h5的基本流程
制作H5页面是一项越来越流行的工作，下面简单介绍一下H5页面的基本制作流程。
1. 确定需求：首先需要明确制作H5页面的目的和需求，根据需求确定页面的风格、主题、内容和功能。
2. 设计页面结构：根据需求和设计风格，设计H5页面的整体结构，包括页面的布局、色彩、字体等设计元素。
3. 制作页面素材：根据页面结构设计，制作各个元素的素材，包括图片、音频、视频等。
4. 编写代码：使用HTML5、CSS3、JavaScript等技术编写H5页面代码，实现页面的布局、动画、交互等功能。
5. 调试页面：在不同浏览器和设备上测试页面的兼容性和显示效果，对页面进行调试和优化。
6. 发布页面：将制作好的H5页面发布到互联网上，让用户可以通过网页链接或二维码访问。
以上就是H5页面制作的基本流程，不同的制作需求和设计风格可能会有所不同，但大致流程是相似的。
- 1 -。
iH5高级教程：H5创意展示,3D翻书特效
iH5高级教程：H5创意展示，3D翻书特效3D电视电影已经成为一种人们生活中的一种习惯，电子书配上3D也让我们有更好的体验，下面教大家来制作一个非常简单的3D翻书。
步骤：第一步：添加滑动时间轴选中舞台，点击工具栏里的“滑动时间轴”图标，在舞台上画出一个框，然后点击滑动时间轴设置滑动时间轴的宽高和舞台的宽高一样。
第二步：滑动时间轴的设置1.选中滑动时间轴，点击工具栏透明按钮工具，在舞台中央位置上画一个框，作为3D旋转的父对象。
在滑动时间轴下设置透明按钮作为3D旋转的父对象，是为了图片旋转设置视距，视距越大，3D旋转的效果越不明显。
2.选中3D旋转父对象，点击透明按钮工具，在舞台左上角添加透明按钮，透明按钮的中间与舞台左侧边缘重合。
（为了观察舞台外的素材，舞台属性面板剪切设为NO）3.选中透明按钮，添加一张图片，图片设置宽高和舞台一样，透明按钮设置个颜色通过观察透明按钮和图片，可以发现图片左侧边缘刚好在透明按钮的中间，这样设置就可以保证以图片的边缘旋转。
4.选中图片，添加轨迹，点ADD添加关键帧，在时间轴窗口的第一个框里输入2，点回车，小黑块到达2秒位置，图片属性面板的Y轴旋转设置为-90度，点击ADD添加关键帧。
通过透明按钮旋转带动图片的旋转，透明按钮的Y轴旋转随着时间轴的播放从0变成-90度，给透明按钮设置个颜色通过观察透明按钮和图片的Y轴，就可以发现我们的图片刚好在透明按钮的中心，这是因为我们的旋转是以透明按钮的中心来旋转的，这样设置就可以保证我们是以图片的边缘旋转。
第三步：依次设置其他按钮，添加其他透明按钮，和第一个按钮设置方法一样，只是时间轴上的时间不同，按顺序累加。
最后一张图片不需要旋转翻页，所以不需要透明按钮。
第四步：选中最后一张图片，点击文本工具，输入BACK，选中文本，添加事件。
触发条件手指按下，目标对象滑动时间轴，目标动作跳至某时刻。
时间0。
即翻页到最后一页，点击BACK，回到第一页。
兔展制作h5页面教程
兔展制作h5页面教程篇一：兔展最新版帮助手册一兔展最新版帮助手册(1) 1、使用什么浏览器制作兔展？您好，建议您使用最新版的谷歌浏览器（或safari）访问兔展，其他浏览器由于设置问题，可能会出现与H5使用不兼容的情况，影响您的精心制作体验。
2、兔展账号注册帐户需要注意什么呢？您好，请用真实的、常用的邮箱申领兔展的账号，注册账号使用的邮箱请不要含有非法字符，兔兔会有提示。
3、如何新建场景？您好，在兔展官网登录账号后，点击制作页面左上角的新建开始制作作品。
4、如何使用模板？您好，兔展有为用户提供各种风格和不同主题的模板，用户可以选择使用。
不需要使用模板的用户也可以选择用到空白模板自己制作。
5、如何制作作品？您好，兔展平台有分横屏制作和竖屏制作，制作方法都是一样的，只需选择对应的功用，添加需要使用的素材，然后进行编辑后处理，详情可访问兔展官方论坛查看一分钟入门操作指引.6、如何使用更多字体？您好，兔展作为行业首家上线多功能字体（共11种）的微场景制作平台，新增了部分使用频率较高的字体，您可以直接在线重新安装使用，具体操作方法访问兔展官方论坛，查看操作指引.7、兔展作品背景图片的格式、尺寸比例、分辨率、大小分别是多少？您好，兔展作品的背景图片可以使用JPG、DNG、GIF格式的，尺寸比例是640*960，分辨率是72，大小是1M以下，因此建议您在设计背景图片时，按以上要求制作。
8、作品图片上传后，能否旋转、自定义设置？您好，兔展可以实现图片的旋转和自定义，您可以旋转改变片段的角度，也可以自定义图片比例微小。
如果您担心图片数量没有调好，可以先勾选“原比例”，图片就会根据您填写的宽度，按原机构调整比例自动调整图片的高度。
9、如何编辑背景透明的图片？您好，您可以借助倚靠一些图片编辑工具（如ps，美图秀秀等），先将可能需要原来使用的素材抠下来，然后将素材保存为PNG格式上传兔展使用。
10、如何查看表单资料？您好，增加表单功能后，在制作页面右上角的表单数据里面相对应的表单，就可以查看并导出表单数据了。
h5实现滑动开关的方法
h5实现滑动开关的方法H5实现滑动开关的方法有多种，以下是其中的一种简单方法：1. 在HTML中添加一个div元素，设置其class为“switch”。
2. 在CSS中为“.switch”设置以下样式：.switch {position: relative;display: inline-block;width: 50px;height: 30px;background-color: #ccc;border-radius: 15px;}3. 在div元素中添加一个input元素，设置其type为“checkbox”，并添加一个label元素。
4. 为input元素和label元素设置以下样式：input[type=checkbox] {display: none;}label {display: block;position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #fff;border-radius: 15px;transition: all 0.3s ease;}5. 为input元素的:checked伪类设置以下样式：input[type=checkbox]:checked + label {background-color: #2196F3;transform: translateX(20px);}6. 至此，滑动开关就已经实现了。
以上就是一个简单的H5实现滑动开关的方法，您也可以根据需要进行更改和优化。