HTML5开发工具整理资料.docx

开发工具正所谓“工欲善其事, 必先利其器”,对 Web 开发人员来说, 好工具的使用总会给人带来事半功倍的效果。正准备学习 HTML5 或者已经进行了一段时间的 HTML5 开发的童鞋, 都有必要了解下, HTML5 都有哪些开发工具,哪款开发工具更适合我? 下面就一一盘点下: 一、 HTML5 开发工具之 Adobe Dreamweaver 首先是大名鼎鼎的 Adobe Dreamweaver , Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成,您能以可视方式或直接在代码中进行设计,使用内容管理系统开发页面并实现精确的浏览器兼容性测试。 Adobe Dreamweaver CS5 版本通过 Adobe HTML5 Pack 这一扩展,用户可以更轻松地创建和优化其作品。 Adobe HTML5 开发工具 Pack 包括标识 HTML5 和 CSS3 功能的新代码,从而使 Dreamweaver 用户能够方便地使用 HTML5 标记。 HTML5 开发工具扩展包还更新和改进了 WebKit 引擎以支持 Dreamweaver CS5 实时视图中的视频和音频。用户利用 CSS3 新功能能够更方便地设计多屏网页,并且可以预览在多种浏览器和设备之间进行渲染的过程。而最新版本的 Adobe Dreamweaver CS5. 5 的突出新特点就是直接提供了对 HTML 5 的支持: 通过 CSS 面板设置样式,该面板经过更新可支持新的 CSS3 规则。设计视图现在支持媒体查询,在您调整屏幕尺寸的同时可应用不同的样式。使用 HTML5 进行前瞻性的编码, 同时提供代码提示和设计视图渲染支持。二、 HTML5 开发工具之 Adobe Edge Preview Adobe 公司考虑到,当 HTML5 成为标准网页的时候, 开发者们仍然将会在 Adobe 的软件上进行开发。所以推出一种新型的网页开发工具 Edge ,以帮助开发者在 HTML5 网页上创造更复杂的动画和互动效果。 Adobe 网络专家组产品经理德汶· 费南德( Devin Fernandez )称,随着 HTML 应用与开发越来越丰富,曾经通过 Flash 才能实现的工作,现在可通过 Adobe Edge 轻松完成。 Edg e 支持事件连发操作, 支持和元素, 支持 svg/png/gif/jpg 图片, 支持圆角矩形以及更多形状, 支持元素与 2D 图形界面,支持 SVG 动画。目前来看, Edge 似乎和 Flash 运行在一个相似的界面上。 Edge 的时间轴和其他工具都位于和目前版本 Flash 的相同位置。但是界面背后, Edge 是非常不同的。它是代替 Adob e 动作脚本形式的, 动画效果创造基于 JSON 编码, 所以代替动作脚本, 动画效果是编码在 htm l 和 javascript 上,并运行在所有现代桌面浏览器和所有移动设备浏览器上,比如 Safar i 浏览器。三、 MUGEDA-HTML5 下的云动画平台 MUGEDA 是一个基于 HTML5 技术的云动画平台,不用任何下载安装,打开支持 HTML5 的浏览器就可以创建动画,有各种造型工具,有