TML5多媒体作品以其对各种平台的兼容而见长，目前已获得了广泛的应用。如果我们需要制作自己的HTML5多媒体作品，一个方便之选就是利用现成的在线制作工具“百度H5”。

首先访问“百度H5”网页（https://h5.baidu.com/），可以看到非常简单的页面，仅有“我的H5”和“我的模板”两个选项。其中“我的模板”是通过套用模板的方式来制作HTML5作品，而“我的H5”则可以完全靠自定义各种参数来自由创作，制作好的作品也会显示在这里（图1）。

1. 通过创意模板轻松制作

在首页中选择“我的模板”，随后会进入一个模板展示页面，这些都是设计者们分享的模板。根据你所要设计的作品的类别，可以按类选择一个类似的作品作为制作的模板，然后在此基础上进行修改，即可快速形成自己的多媒体作品（图2）。

比如要制作一个招生方面的媒体作品，选择如图所示的秋季班招生模板，然后点击右下角的“使用模板”按钮（图3）。

接下来先要为作品命名，例如“我们的幼儿园招生了”。输入完毕点击“确定”按钮（图4）。

随后进入实质性的模板修改编辑阶段。对于不合适的内容，可先删除页面元素再添加。点击“文本”菜单插入所需文本内容。同理，可使用右边的“媒体”按钮插入图片、音频、视频、嵌入视频、全景图等内容。如果是PSD图片，则直接用PSD菜单载入。若版面中需要插入一些图标或形状，则点击“图形”菜单选择添加（图5）。

此外，对于作品中所要用到的展示数据，可以通过插入图表、表单等方式，非常轻松地完成数据展示制作（图6）。如果要实现更多的效果，可通过“插件”菜单，选择添加页面加载套件和加载进度、添加计数器、添加帧动画、添加相册或地图等。

对于需要修改的属性，可通过窗口右侧的分类属性窗口选择设置。通过窗口下方的编辑区域，可控制动画、加载页、全局全景和背景、当前页等参数设置。例如，要定制个性化的加载页面效果，点击“加载页”选项卡，然后通过下方的滑块，对加载页中的图片和进度进行自定义编辑（图7）。

对页面上的各种元素进行修改和编辑完成之后，点击工具栏左上角的磁盘按钮将作品保存在网上。注意，编辑过程中产生的内容软件会自动保存，但为了防止丢失，还是要养成勤于手动保存的习惯。

最后，就可以发布作品了。点击工具栏上的“发布”按钮执行发布操作（图8）。

由于作品是保存在网络服务器中的，因此作品的共享是以网址的形式体现的。发布时要填写作品分享的标题，设置个人域名。我们只需在“个性化域名”中填写自己命名的作品个性域名地址，发布后其他人就可以用这个域名来访问HTML5作品了（图9）。

小提示：使用上述服务需要使用自己的百度账号登录。为维护网络安全，目前发布信息需先经过用户实名制认证方可进行。

2. DIY 完全自己设计制作

套用模板适合于初学者或设计能力不强的用户。其实，不用套用模板，完全可以从头全部由自己来设计作品。

制作时，在主页中选择“我的H5”，然后点击空白页上印有圆圈套加号图标的按钮，向导会询问创建什么样的布局。从“分页布局”或“整页布局”中选择一种布局方式。如果是分页布局，则依靠页面间的前后滑动实现简单跳转；如果是整页布局，则将整个页面分为不同区域，各部分还可创建链接，实现不同的功能（图10）。

随后其他步骤与第1部分的添加和设置操作方法相当，只是全要亲自设计，不能套用现成的组件而已。在创作过程中，只要善于使用系统提供的文本工具编排文字内容，用媒体和图形工具添加图片、图形、音视频，数据相关的内容使用图表、表单等工具，借助于“插件”扩展来补充完善，发挥自由想象的创作空间，一定能创作出更具个性化的作品。

什么要使用HTML5？

1. 游戏开发。

   作为移动互联网最火产业之一的——手游，越来越被大多数公司所青睐。而HTML5提供了一个非常伟大的，移动友好的方式去开发有趣互动的游戏。如果你之前使用Flash游戏，那么很快你就会喜欢上HTML5的游戏开发。

2. 更好的互动体验。

   HTML5的画图标签允许你做更多的互动和动画以及动态的web应用程序，就像我们使用Flash达到的效果，有助于增加更好的用户体验。

3. 更聪明的存储。

   HTML中最酷的特性就是本地存储，它拥有更好的安全性能以及不需要第三方插件就能轻松实现。

4. 易用性 。

   更加简单方便的创建网站。易懂的标签有助于我们更好的了解文档，创建更好的用户体验。

5. 视频和音频的支持。

   经常在网站上看视频的人一定不会陌生flash以及其它的第三方应用吧，而HTML5的到来正式宣告flash时代在此方面的结束。HTML5拥有更加强大的视频和音频的支持。

6. Doctype。

   没错，就是doctype，没有更多内容了。是不是非常简答？不需要拷贝粘贴一堆无法理解的代码，也没有多余的head标签。最大的好消息在于，除了简单，它能在每一个浏览器中正常工作即使是名声狼藉的IE6。

7. 更加清晰的代码。

   HTML5拥有更加简答、优雅、容易阅读的代码。

   遗留及其跨浏览器的支持。

   现在社会主流的浏览器 （Chrome，Firefox，Safari，IE9和Opera）都支持HTML5，即便是非常老非常令人厌恶浏览器像IE6都可以使用。

   未来HTML4将会更加的火。

   HTML5不会往每个方向发展，但是更多的元素已经被很多公司采用，并且开始着手开发。HTML5其实更像HTML，它不是一个新的技术需要你重新学习！如果你开发XHTML strict的话你现在就已经在开发HTML5了。开始用HTML5代码编写web应用吧，说不定下一个移动应用或者游戏应用就是用HTML5开发的！

学习HTML5这几个网站你值得拥有

如今，HTML5的发展前景非常好，企业对HTML5建站需求很大，HTML5游戏领域研发热火朝天。HTML5技术能为我们带来炫酷的视觉体验，除了电脑浏览器上让人瞠目的效果，HTML5在移动端的表现同样令人惊喜，并且HTML还在不断的完善和发展。说到这大家是不是心动了，心动就行动吧？下面我给大家推荐几个学习HTML5非常好的网站。

1.W3School http://www.w3school.com.cn/

对于基础薄弱的人来说，这是一个不错的网站。每一节都有学生时代老师般的“板书”，丰富的实例展示，还有工具书、小测验等提升工具，犹如私人教练一般！

更丰富的实例，更详细的解读

2.H5之家。http://www.h5cn.com/

除了丰富且与时俱进的教程，这个网站还有很多关于HTML5业界的独特见解，闲暇时候看看，拓展知识又能在人前装X。这样的网站你值得拥有。

这么好的网站你早该知道的

3.360html5基地 http://html5.360.cn/

对于想学习HTML5游戏开发的人来说，这是一个不错的选择。350旗下的HTML5作品展示网站，大部分是HTML5游戏展示，可爱丰富有趣。

种类繁多的游戏

4.HTML5 Games http://html5games.com/

相对350来说更加丰富的HTML5游戏资源，品味更加原生的开发也是一种不错的选择，说不定玩着玩着技能激发设计灵感呢！

更加原味、更丰富的游戏体验

5.Dive into HTML5 http://diveintohtml5.info/

一个专门为HTML5而生的网站，这个网站几乎都是关于HTML5的文档，讲一些很基础的知识，简洁清新。如果想学习HTML5的同时提高英语阅读能力，这个网站是非常好的。

英语不好的人也可以尝试着学习啊

6.HTML5xCSS3 http://www.html5xcss3.com/

拥有超丰富的HTML5案例和模板，随便点开一个案例都好看到让人震惊。里面的全部都是HTML5响应式网站哟！

勇敢的挑战自己

7.HTML5技术网 http://www.51html5.com/

一个充满干货的网站！你想要的不想要的，这里全都有！

没事的时候常来看看定会收获不小

8.HTMLDemos http://html5demos.com/

测试HTML5标签在各浏览器的兼容性，还能查看各种HTML5的标准Demo演示。

这是一个测试网站

9.The HTML5 test http://chrome.360.cn/test/html5/index.html

能为浏览器对HTML5的兼容性打分，可以知道你当前的浏览器对HTML5的支持情况如何，各种标签和组件的支持情况。

这也是一个测试网站

当然，光看网站有的小伙伴会觉得没有方向感，不知道该从那些地方下手。不妨结合教科书来个系统的学习。入门级必备两本教材《Head first HTML&CSS》和《JavaScript DOM编程艺术》，看书再结合网站学习，不断的练习、不断的学习相信不久你就会成为HTML5大神啦！

不积跬步，无以至千里。千里之行，始于足下。从现在开始，每天给自己20分钟了解HTML5技术，你会发现其实编程也挺有趣的。http://www.iisp.com/design/?s=yuqiuping。

当然上面的有些内容是借鉴有其他人的，好的东西拿出来大家一起学习、共同进步。其实做人做事都是一样，只有不断的学习、不断的借鉴好的、摈弃坏的，这样我们自己才能进步的更快。

TML5可不是什么虚幻的概念，与其高谈阔论的讨论HTML5未来的趋势和价值，不如一起研究一下现在的HTML5可以做出哪些成果，可以让我们做出出色的产品。

Form Follows Function就是一個展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。

1、散景（Bokeh）

一种图像的焦外效果，通过HTML5实现的这种效果可以加载在背景、字体浮现。

2、3D效果

3D西红柿罐头汤，可通过鼠标进行旋转操作，同时底部有一个倒影效果，一个很优秀的交互效果示范。

3、宇宙全景图

设定整个宇宙的场景，可以用360度观察整个宇宙星云，这种实现方式呈现出的效果更接近Google的街景地图。

4、像素化效果

这种效果用于图片很有趣，而实际可利用到的领域，还有待探索。

5、螺旋效果

字体的旋转效果，简单的近乎一张GIF图片，不过通过对文章的替换，可以轻易的转换成各种各样的文案展示。

6、结晶化滤镜

通过鼠标可选择结晶化的范围，用于网页可对界面直接做出更多的交互视觉效果。

7、色相混合

随着鼠标移动而改变各个位置的色相，一种很简单就能汇聚用户视线的交互效果，不过在简单的背景才更能体现这种效果的价值。

8、翻转时钟

一种时钟的展示效果，结构非常简单，而看上去也很清晰明了，适合嵌入到很多不同的页面中作为实时时间的展示。

9、水纹倒影

一种视觉效果，在这个Demo中可以调节倒影波动的速度。这种效果适合制作Logo以及主页的展示。

10、自由落体

“下雨的人”展示了一种自由落体的效果，可以用鼠标条件调节飘落的角度，提供了一种带有物理效果的交互操作。这种功能特别用于游戏。

11、水面波纹

同样是一种物理效果，可通过鼠标刺激水面波纹，在网页上就能轻松实现。

12、树的成长

一种应激操作的交互方式，点击一次长出一棵树，可用于网页展示的附加效果。这种效果在视觉上有多种用法，网页、游戏都可以。

13、字母雨刷

在屏幕上扫除字母的雨刷效果，初次看见感觉像是网页刷新的过度画面。

14、渐显效果

通过一些杂乱无章的线逐渐显现出一幅画，中间的显现过程很适合作为网页加载的等待界面。

原文链接：http://www.gbtags.com/gb/share/2595.htm