Html5学习---选用开发环境和学习资源
2011-10-20 14:37
423 查看
开发环境:
我选择的是:Maqetta 。
它是另一个基于浏览器的HTML5编辑器,支持各种设备和浏览器,非常易用。Maqetta 是个全功能的 WYSIWYG 编辑器。开发者可以创建web页面,拖曳元素到页面,设计或源码模板来编辑。线框图功能也很方便。可定制化大量不同类型风格的widgets。
下载地址是:http://maqetta.org/
学习资源:
http://www.w3school.com.cn/html5/index.asp
开始学习的时候怕的就是面面俱到,先选择好环境,和最初始的demo,以及学习资源,上手后再去接触其他的。这样就可以事半功倍。
下面我列举一下它自带的例子:
附上源码:
我选择的是:Maqetta 。
它是另一个基于浏览器的HTML5编辑器,支持各种设备和浏览器,非常易用。Maqetta 是个全功能的 WYSIWYG 编辑器。开发者可以创建web页面,拖曳元素到页面,设计或源码模板来编辑。线框图功能也很方便。可定制化大量不同类型风格的widgets。
下载地址是:http://maqetta.org/
学习资源:
http://www.w3school.com.cn/html5/index.asp
开始学习的时候怕的就是面面俱到,先选择好环境,和最初始的demo,以及学习资源,上手后再去接触其他的。这样就可以事半功倍。
下面我列举一下它自带的例子:
附上源码:
<!DOCTYPE html> <html> <head> <title>Sample1.html</title> <style type="text/css"> @import "themes/claro/claro.css"; @import "app.css"; @import "lib/dojo/dojo/resources/dojo.css"; </style> <script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require('dijit.layout.TabContainer'); dojo.require('dijit.layout.ContentPane'); dojo.require('dijit.form.Button'); dojo.require('dijit.form.ComboBox'); dojo.require('dijit.form.MultiSelect'); dojo.require('dijit.form.TextBox');</script> <script src="maqetta/States.js"></script> <script src="maqetta/maqetta.js"></script> </head> <body class="claro" data-davinci-ws="collapse" dvFlowLayout="true" dvStates="{'Add Task':{'origin':true},'Task Added':{'origin':true}}" id="myapp"> <span dojoType="dijit.layout.TabContainer" style="width: 300px; height: 250px; min-width: 1em; min-height: 1em;" controllerWidget="dijit.layout.TabController"> <div dojoType="dijit.layout.ContentPane" title="Tasks" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" style="width: 376px; height: 180px;" doLayout="false"> <div style="text-align: right;"> <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="New" iconClass="dijitNoIcon" onclick="davinci.states.setState('Add Task')"></input> <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="Del"></input> </div> <div style="padding-top: 10px; padding-bottom: 10px;"> <label> Sort by:</label> <select dojoType="dijit.form.ComboBox" value="Name" disabled="false" readOnly="false" intermediateChanges="false" trim="false" uppercase="false" lowercase="false" propercase="false" required="false" style="width: 126px; margin-left: 5px;"> <option dvwidget="html.option" value="Name" selected="true"> Name</option> <option dvwidget="html.option" value="Due date" selected="false"> Due date</option> </select> </div> <select multiple="true" dojoType="dijit.form.MultiSelect" disabled="false" readOnly="false" intermediateChanges="false" style="display: none; width: 200px;" dvStates="{'Task Added':{'style':{'display':''}}}"> <option dvwidget="html.option" value="Task 1" selected="false"> Task 1</option> </select> </div> <div dojoType="dijit.layout.ContentPane" title="Projects" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" style="width: 376px; height: 180px;" doLayout="false"></div> <div dojoType="dijit.layout.ContentPane" title="Roles"></div> </span> <div dojoType="dijit.layout.ContentPane" title="Pane" doLayout="false" style="border-color: #053ef8; border-width: 1px; border-style: solid; background-color: #ffffff; display: none; width: 350px; height: 75px; position: absolute; left: 72px; top: 79px;" dvStates="{'Add Task':{'style':{'display':''}}}"> <div style="font-weight: bold; text-align: center; padding-top: 6px; padding-left: 6px;"> Add new task</div> <div> <label> Task name:</label> <input type="text" dojoType="dijit.form.TextBox"></input> <input type="button" dojoType="dijit.form.Button" disabled="false" intermediateChanges="false" label="Add" onclick="davinci.states.setState('Task Added')"></input> </div> </div> </body> </html>
相关文章推荐
- 42个非常有用的 HTML5 开发教程和学习资源
- 学习HTML5开发RPG游戏第二步>资源预加载
- HTML5学习笔记(二)——开发环境及初体验
- cocos2d开发学习一:开发环境搭建以及入门学习资源
- CUDA学习日志:开发环境配置和学习资源
- 后台开发学习(四)HTML5表单的使用PHP环境搭载和HTML表单的提交
- cocos2d开发学习一:开发环境搭建以及入门学习资源
- WP7入门篇(一)开发环境搭建以及相关学习资源
- HTML5学习总结-01 开发环境和历史
- 42个非常有用的 HTML5 开发教程和学习资源
- 42个非常有用的 HTML5 开发教程和学习资源
- 42个非常有用的 HTML5 开发教程和学习资源(上)
- 【Cocos2d-html5游戏引擎学习笔记(1)】游戏引擎初探究和搭建开发环境
- 42个非常有用的 HTML5 开发教程和学习资源(下)
- Asp.net MVC 3实例学习之ExtShop(一)————创建应用并设置开发环境
- window环境搭建 tensorflow 框架深度学习开发环境
- Golang 学习一:开发环境搭建-入门必备
- adt配置支持html5的移动web app开发环境
- Java web基础学习之开发环境篇(详解)
- Libevent学习-01:搭建Windows下的开发环境