扫一扫 享优惠
有哪些不用写代码就能轻松制作HTML5网页的工具？
总部地址: 珠海市吉大景园路6号第七层
&销售 400-622-8200
技术 400-622-8300
耐思尼克诚意为:用户提供网络服务做一个为HTML5响应式布局的页面，价格好谈，详情+Q【html5吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：84,377贴子：
做一个为HTML5响应式布局的页面，价格好谈，详情+Q收藏
有没有大神啊
有没有人啊
大神都去哪了？
来个人帮帮忙啊
登录百度帐号推荐应用有哪些不用编写代码就能轻松制作生成HTML5页面的工具？ - 知乎866被浏览85354分享邀请回答maka.im/home/index.html优点：与兔展类似，更像制作PPT一样。每一页的具体效果可以具体编辑，单页操作性较高，有新手（有模板）和高阶（无模板）两种编辑模式；翻页效果比兔展多，模板也更强大一些。【居高互动刊】优点：最简单易上手的工具之一，根据提示一步一步的添加，共4步，最后生成微杂志。相比其他在线工具，较稳定。缺点：目前没试通制作单页上的交互效果，没找到开启pro功能的入口。【ANIMATRON】优点：像flash的在线版，功能强大，可以创建HTML5动画。适合有动画基础的人做演示制作。缺点：需要动画制作基础；工作界面响应时间长；貌似只能分享到twitter、Facebook、google+、tumblr？【iSpring 7】噱头是PPT转HTML5工具，完美与PPT兼容，可制作Html5移动课件。不过，目前我只能连着VPN再用Safari才能打开网站链接。【秀制作】优点：版式轻松，制作快捷，宽带稳定。缺点：对图片和文字在各种屏幕上的显示没有做很好的适配；不能对模板中文字的编辑调整位置。手机工具APP：【初页】优点：模板质量高，套用模板编辑时效率高，操作简单快捷，效果和体验在制作H5页面的APP工具里面算是出类拔萃。缺点：单页面可操作性较低，仅支持套用模板。【快邀约】快速制作邀请函优点：易上手，省时高效，便于统计。缺点：页面简陋，只能选择固有模板创建文字和添加图片。【易企秀】中小微企业的移动场景营销管家优点：套用模板，创建快捷，用来做企业介绍、产品推荐。拥有强大的推广统计、客户管理功能。嗯，这里应该赞一个。缺点：只能用模板，DIY程度低；统计数据是否准确需要进一步确认，目前看来可能有遗漏数据的现象（在小范围测试中，统计到的数量小于应有的数量）。【微贴】：通过微信公众号创建H5页面优点：手机公众号内直接创建简单页面，根据提示创建即可，无脑方便快捷。缺点：只是单页面展示，承载不了交互效果等特效和更多内容。总结工具网站做的H5页面，多注重单独页面的自定义交互方案，DIY程度高，相对来说用时较长，又受制于带宽因素，故影响操作；工具APP做的H5页面，多注重效率，目前都是套用模板，因而对单页面的DIY程度较低，交互效果受限。作为我个人而言，移动互联的新任PM，我平时常用到的是【MAKA】和【兔展】，这两个相对来说更适合半天时间来完成；如想快速制作展示页面就用【初页】，这个在功能效率与设计感方面更突出一些；组织活动、制作邀请函、分发活动通知等用【快邀约】；平时推广新产品、联络客户和招聘新人用【易企秀】。【回答完毕】 ——————————————————以上是近期以来对HTML5制作工具的一些浅显认知，希望对楼主有所帮助，也欢迎大家多多交流与指正。13511 条评论分享收藏感谢收起3添加评论分享收藏感谢收起更多1 个回答被折叠（）与世界分享知识、经验和见解实例讲解HTML5制作一个网站
我的图书馆
实例讲解HTML5制作一个网站
实例讲解HTML5制作一个时尚类网站http://banlab.me/view/fashion一个网页的构成分为3部分：1:html &(内容)2:css (表现)3:JavaScript (行为)一般大家说的行为和表现从内容上分离，就是说css和JavaScript从html文档里面分离开来，比如css另建一个style.css的专门文件，或者js.js的专门文件。css用来控制内容的表现(就是你看到的丰富的效果)，而JavaScript用来控制页面的动态交互的行为(就是你操作中的动态的交互)。好了，大致就是这样，很简单吧？再对照着看这个案例&http://banlab.me/view/fashion整个网站的左上角是logo和导航，当点击导航的具体内容右侧会弹出内容( 你可以先试试)。在网站的底部有一个页脚。&大致也是这样3块：头部，内容区域，页脚所以我们按照上次说的那样先把整个页面的大框架定下来：&!DOCTYPE html&&html&&head&&meta charset = "utf-8"&&title&一个时尚类的网站&/title&&!--[if lt IE 9]&&script src="/svn/trunk/html5.js"&&/script&&![endif]--&&/head&& & &body&& & & &header&&/header&& & & &section&&/section&& & & &footer&&/footer&& & &/body&&/html&（在接下去的部分，我只把在&body&&/body&标签里面的内容写出来，这样方便浏览。）在logo区域，只有一个logo和一句简单的描述,于是我这样写：&header&&h1&banLab&/h1&&em&design for fashion&/em&&/header&(你在网站上看到的不是这样的，因为当时我是设计和前端一起做的，一开始是想拟一个副标题的，所以当时是这样写的：&header&& &hgroup&& &&h1&banlab&/h1&& &&h1&副标题&/h1&& &/hgroup&&/header&这里&hgroup&标签用来包裹连续的标题标签(&h1& 至&h6&),它是一个html5才有的新标签。不过我们看到网站上design for fashion的意思更像是一句补充的说明，所以我用了一个&em&强调的标签来描述。这样从内容上看起来，也更符合语义了，你觉得是不是？在头部的下面有一个导航，我们用&nav&标签。接下去你先把导航全部内容展开，你是否看到，这个导航是个2级导航，每个一级导航下面都有一个子分类。对于这样的关系，我们一个一个的插子&nav&标签会觉得很吃力，因为还有更好的html(5)标签来处理这种关系。于是我这样写：&nav&&&dl&& &&dt&Works&/dt&& &&dd&Web Design&/dd&& &&dd&Web Developemnt&/dd&& &&dd&Graphic Design&/dd&& &&dt&Catelogo1&/dt&& &&dd&Catelogo1_item1&/dd&& &&dd&Catelogo1_item2&/dd&& &&dt&Catelogo2&/dt&& &&dd&Catelogo2_item1&/dd&& &&dd&Catelogo2_item2&/dd&& &&dt&Catelogo3&/dt&& &&dd&Catelogo3_item1&/dd&& &&dd&Catelogo3_item2&/dd&&&/dl&&/nav&以上Catelog是我自定的名字，如果你们喜欢的话，可以下载之后，然后更改具体的栏目名称。&dt&和&dd&用来定义一个“定义列表”，它与"&ul&和&li&"以及"&ol&和&li&"这两个组合不同，形象点的解释就是: &dd&标签里面的内容是&dt&标签内容的说明，他们必须有这样的关系。如果两个区域的内容毫不相干，那么就不适用&dt&和&dd&来处理。其他标签的用法一样，虽然几乎任何合法的html5标签都能实现同样的效果，但是我们也希望我们写的html5代码读起来更像一篇语义正确的文章。而且需要注意的是：&dt&后面不能缺少&dd&标签，而且他们都必须包裹在&dl&标签内部，这样才是一个合法的完整的"定义列表"。我当初没有把&nav&放在&header&内部，也是由于当时一开始做的时候他们不是组合在一起的缘故，后来(当然是)懒得改了。 但是从最终的效果来看，似乎把logo和导航组合一起写更合适：&header&&&h1&banLab&/h1&&&em&design for fashion&em&&&nav&& & &dl&& &&dt&Works&/dt&& &&dd&Web Design&/dd&& &&dd&Web Developemnt&/dd&& &&dd&Graphic Design&/dd&& &&dt&Catelogo1&/dt&& &&dd&Catelogo1_item1&/dd&& &&dd&Catelogo1_item2&/dd&& &&dt&Catelogo2&/dt&& &&dd&Catelogo2_item1&/dd&& &&dd&Catelogo2_item2&/dd&& &&dt&Catelogo3&/dt&& &&dd&Catelogo3_item1&/dd&& &&dd&Catelogo3_item2&/dd&& &/dl&&&/nav&&/header&当然，在每个可以点击的地方，我都插入了一个&a&标签，用来说明这是一个链接，可以点击，这样整个头部和导航就完成了。接下去是内容区域，因为导航有4大块：work,catelog1,catelog2,catelog3.所以我写了对应的4个并列的&section&，并且都给他们用唯一的#id来命名。他们是这样的：&section id="work"&&/section&&section id="catelog1"&&/section&&section id="catelog2"&&/section&&section id="catelog3"&&/section&这就是4块具体的内容。当然如果想让整个HTML的DOM结构更加清晰，还可以在这4个&section&外面再用一个&section&标签包裹，于是是这样的：&header&&&h1&banLab&/h1&&&em&design for fashion&em&&&nav&& & &dl&& &&dt&Works&/dt&& &&dd&Web Design&/dd&& &&dd&Web Developemnt&/dd&& &&dd&Graphic Design&/dd&& &&dt&Catelogo1&/dt&& &&dd&Catelogo1_item1&/dd&& &&dd&Catelogo1_item2&/dd&& &&dt&Catelogo2&/dt&& &&dd&Catelogo2_item1&/dd&& &&dd&Catelogo2_item2&/dd&& &&dt&Catelogo3&/dt&& &&dd&Catelogo3_item1&/dd&& &&dd&Catelogo3_item2&/dd&& &/dl&&&/nav&&/header&&section id="content"&& &section id="work"&&/section&& &section id="catelog1"&&/section&& &section id="catelog2"&&/section&& &section id="catelog3"&&/section&&/section&接下去，我们写4大块内容的具体内容，他们与导航的4大分类的子菜单对应，完整的是这样的：&section id="content"&& &section id="work"&& & & &section id="work_design"&&/section&& & & &section id="work_web"&&/section&& & & &section id="work_graphic"&&/section&& &/section&& &section id="catelog1"&& & & &section id="catelog1_item1"&&/section&& & & &section id="catelog1_item2"&&/section&& &/section&& &section id="catelog2"&& & & &section id="catelog2_item1"&&/section&& & & &section id="catelog2_item2"&&/section&& &/section&& &section id="catelog3"&& & & &section id="catelog3_item1"&&/section&& & & &section id="catelog3_item2"&&/section&& &/section&&/section&而具体的内容则在这些内部的区域里面，看到他们像列表，于是我们可以用&ul&和&li&标签来写，说明这是一个无序列表。我们就写其中的第一个，因为其他的都是相同的，所以到时候可以直接复制：&section id="work_design"&& & &ul&& & & &&li&&/li&& & & &&li&&/li&& & & &&li&&/li&& & &/ul&&/section&继续在列表内部写每个具体的项目：&section id="work_design"&& & &ul&& & & &&li&& & & & &&div&& & & & & &&a href=""&& & & & & & & &figure&& & & & & & & & & &img src="image/work/thumb/pic1.jpg"&& & & & & & & & & &figcaption&pic1&/figcaption&& & & & & & & &/figure&& & & & & &&/a&& & & & &&/div&& & & &&/li&& & & &&li&& & & & &&div&& & & & & &&a href=""&& & & & & & & &figure&& & & & & & & & & &img src="image/work/thumb/pic2.jpg"&& & & & & & & & & &figcaption&pic2&/figcaption&& & & & & & & &/figure&& & & & & &&/a&& & & & &&/div&& & & &&/li&& & & &&li&& & & & &&div&& & & & & &&a href=""&& & & & & & & &figure&& & & & & & & & & &img src="image/work/thumb/pic3.jpg"&& & & & & & & & & &figcaption&pic3&/figcaption&& & & & & & & &/figure&& & & & & &&/a&& & & & &&/div&& & & &&/li&& & &/ul&&/section&你可以看到在这里我用&div&标签来包裹每一个具体的项目，因为在这里似乎&section&反而不合适，它缺少上下文的语境，只是用来布局的。在&div&内部，我用了一个&a&标签来包裹图片，而具体的图片&img&和图片的说明&figcaption&都放在&figure&内部。接下去里面的内容可以直接复制到其他的区域了，因为他们都有相同的样式(css)以及结构上的位置也相同。最后写页脚: 我们看到有一个版权的说明以及一组导航。于是我们可以这样写：&footer&& &&p&& 2012 BANLAB &&/p&& &&nav&& & &&h1&关注我们：&/h1&& & &&ul&& & & &&li&Google+&/li&& & & &&li&微薄&/li&& & & &&li&Twitter&/li&& & & &&li&Facebook&/li&& & & &&li&Tumblr&/li&& & & &&li&腾讯微薄&/li&& & & &&li&豆瓣&li&& & &&/ul&& & &&a href="#"&更多?&/a&& &&/nav&&/footer&& 显示出来的就是?,当然你也可以直接输入?,而&显示出来的效果就是显示在左上角的商标样式:TM。但是要注意的是：在使用这样的命名字符时候，末尾必须有分号" ; "，不然在w3验证网站上验证后会显示错误。我把"更多?"从底部的社交网络导航内部分离出来，因为它不是他们其中的一员。就像员工车辆前面的司机，身份与车厢内的同事还是有一点点区别的。(我不是歧视的意思，抱歉！)，但是不管如何，他们都在同一辆车上。到此为止，所有的结构都完成了。接下去我们写样式(css),由于css3的某些新的选择器IE6几乎都不支持（包括IE8可能少部分都不支持），所以在实际操作当中，如果你很介意IE6用户的话，我说的内容可能不是很适合。&css3引入了很多新的选择器，借助这些新的选择器可以让html5文档看起来更加整洁干净。还是从头开始，我们先写头部和导航的区域:由于&header&和&section id="content"&，&footer&都是属于&body&的子元素：&body&& &&header&&/header&& &&section id="content"&&/section&& &&footer&&/footer&&/body&看到了吗？ 需要说明的是css里面的子元素指的是往下第一级的元素。于是我们可以这样写：body & header {}body & section{}body & footer{}就是这样！body&header就是特指这个header,而在页面内部section或者article出现的其他&header&标签都不在选择范围，由于在一个html(5)文档中，&body&标签是唯一的，所以他们的意思就是选择body下的(第一级)子元素：header,section,footer. 这样我们就可以在html5文档里面省去为这3个元素添加class(类)或者id(名)了，html(5)文档看起来也会更加干净整洁。根据同样的方法，我们可以选择&header&标签内部的&nav&，以及&nav& 内部的每一条具体的导航栏目，给他们设置对应的样式。不过由于在这个&header&内部只有唯一的一个&nav&，所以我们也可以省略"&"，因为有时候太多"&"(子选择器)看起来也是烦人的(就像我平常自己工作中一样)。所以我们 对照上面的html结构，可以这样写导航的样式:body& header{}body& header h1{}body& header em{}body&header nav{}body&header nav dl{}body&header nav dl dt{} ( 或者:body&header nav dt{} )body&header nav dl dd {} ( 或者:body&header nav dd {} )如上小括内的，由于dt和dd都是nav下面唯一dl内部元素(即:没有另外一个并列的(样式不同的)dl定义列表)，所以可以省略了dl, css越过dl层级直接找到他们。导航区域的样式关系理清之后，然后再写内容区域的，根据上文的html结构：我们这样写css言样式的结构&body&section{}&body&section&section{} &(指:id="work",id="catelog1",id="catelog2",id="catelog3")&body&section&section&section{} (指上面区域内部的子区域)&body&section&section&section&ul{}&body&section&section&section&ul li{}&body&section&section&section&ul li div{}&body&section&section&section&ul li div a{}&body&section&section&section&ul li div a figure{}&body&section&section&section&ul li div a figure img{}&body&section&section&section&ul li div a figure figcaption{}&在这里，前面几个section的关系必须非常清楚的确定他们有父子的关系，不然可能会出错，比如：&body section{}&body section section{}&body section section section{}&第一个section内部的属性(我说的属性就是样式)会延伸下去，第二个section会继承第一个section内部的属性( 除非相同的属性覆盖)，而第三个section又会从第一个和第二个两个里面都得到继承。&而后面的ul 以及内部的元素都是从第3个section(body&section&section&section&)开始之后唯一的，所以他们不会存在继承的关系，就没有其他相同元素可以相互影响了。&由于本案例html5结构的关系，我们可以这样首先确定每个相同层级的元素的样式。说明：相同层级指在DOM结构中属于同一个层级，他们是树状的，DOM结构也像公司的员工职位结构。比如一个公司有2个部门：网络部，市场部。网络部又分为几个职位：网页设计，程序开发。假设市场部下面只有一个职位：销售。&那么在这个公司： 网页设计，程序开发和销售都是属于不同部门的相同级别。同样，假设公司是&body&，那么老板就是&header&, 而网络部和市场部就是&section id="content"&内部的两个同级区域&section id="dev"&和&section id="sale"&，而设计师和程序开发就是在&section id="dev"&里面的元素，销售则是&section id="sale"&里面的元素。虽然不在同一个&section&(部门)，但是他们所处的位置相同。在css中也是这样，所以我们用上面那些关系先写出这些相同层级(不同区域)的样式，这些样式会赋给所有同级的元素。 然后我们可以根据每个id(名)写每个区域内特有的样式。这样，就不会相互串门，相互影响了。同样页脚的部分就可以这样写：body&footer {}body&footer p{} & (这是唯一的p,所以可以省略"&"子选择器符号)body&footer nav{}body&footer ul{}body&footer li{}body&footer a{}body&footer nav a{}不过在这里，基本上只说了css子选择器" & "的用法，以及css书写的结构。好了，有点累了，下次再写。&
TA的最新馆藏[转]&[转]&[转]&[转]&}