整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ContentTools是一个美观小巧的网页内容工具（一个JS库），具备所见即所得（WYSIWYG）的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了！
https://github.com/GetmeUK
ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为：
ContentTools具有字体加粗、斜体、超链接、对齐、列表、表格、图片、视频、代码、撤销、重做、删除等功能
1、加粗显示
2、斜体显示
3、超链接
4、H标题
5、正文
6、有序和无序列表
7、插入表格
8、插入图片
9、视频
以上截图中的功能还不完整，如果想体验以下完整的功能可以直接去DEMO页面体验，如果需要在HTML级别上更改元素的内容，那也是可以的。通过属性对话框中的最后一个选项卡，可以查看所选元素的内部HTML代码并直接对其进行更新。
下载仓库并打开/ build文件夹，包括预构建的源文件。将文件夹的内容复制到项目的适当位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夹和icons.woff字体需要复制到与content-tools.min.css相同的文件夹中，文件结构应类似于：
<head> <title>My page</title> <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css"> ... </head> <body> ... <script src="assets/content-tools.min.js"></script> <script src="assets/editor.js"></script> </body>
包括一个名为editor.js的附加JS文件。包含初始化我们的编辑器的代码，继续
<div data-editable data-name="main-content"> <blockquote> Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. </blockquote> <p>John F. Woods</p> </div>
data-name属性用于在保存时标识区域（默认情况下使用id属性），标记可编辑HTML时，常见的误解是将单个元素标记为可编辑，例如：
<h1 data-editable data-name="heading">Content</h1>
正确的使用方式如下，也就是说必须要在特定的容器元素内
<div data-editable data-name=heading> <h1>Content</h1> </div>
ContentTools使用CSS类来对齐文本，图像，视频和iframe，需要在自己的CSS中为这些对齐类定义样式，例如：
[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
/* 左对齐 */
[data-editable] .align-left {
clear: initial;
float: left;
margin-right: 0.5em;
}
/* 右对齐 */
[data-editable].align-right {
clear: initial;
float: right;
margin-left: 0.5em;
}
/* 可编辑区域中文本的对齐样式 */
[data-editable] .text-center {
text-align: center;
}
[data-editable] .text-left {
text-align: left;
}
[data-editable] .text-right {
text-align: right;
}ContentTools提供了一个编辑器，但是在初始化它之前，我们需要配置一些东西，即：
将以下代码添加到我们之前创建的editor.js文件中：
window.addEventListener('load', function() {
var editor;
});就像文字处理程序一样，可以为内容配置一系列预定义样式。当用户从视口底部的检查器栏中选择标签时，这些标签就会出现。尽管可以将样式设置为适用于所有标签，但是仅显示适用于标签类型的样式。
我们将添加可应用于段落<p>标记的单一样式.author。在var编辑器下方声明添加：
ContentTools.StylePalette.add([
new ContentTools.Style('Author', 'author', ['p'])
]);StylePalette.add方法使我们可以向编辑器添加样式列表。每种样式均声明为一个Style实例，该实例使用显示名称，CSS类和可以应用该样式的标签列表初始化。我们需要添加相关的CSS来支持这种样式，因此在HTML的开头添加：
<head>
...
<style>
.author {
font-style: italic;
font-weight: bold;
}
</style>
</head>接下来，我们需要初始化编辑器，并让它知道页面上的哪些元素是可编辑的。为此，将以下代码添加到editor.js中：
editor = ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');我们使用用于页面可编辑区域的CSS选择器和属性名称（“数据名称”）来初始化编辑器，以告知编辑器元素的哪个属性包含其区域名称。区域名称在同一页面中必须唯一。
最后，我们希望在用户保存页面时得到通知，以便我们可以将每个区域的更新内容存储在文件或数据库中。为此，我们监听由编辑器触发的保存事件。在editor.init语句之后，将以下代码添加到editor.js中：
editor.addEventListener('saved', function (ev) {
var name, payload, regions, xhr;
// 检查是否已更改
regions = ev.detail().regions;
if (Object.keys(regions).length == 0) {
return;
}
// 保存更改时将编辑器设置为忙
this.busy(true);
// 将每个区域的内容收集到一个FormData实例中
payload = new FormData();
for (name in regions) {
if (regions.hasOwnProperty(name)) {
payload.append(name, regions[name]);
}
}
// 将更新内容发送到要保存的服务器
function onStateChange(ev) {
// 检查请求是否完成
if (ev.target.readyState == 4) {
editor.busy(false);
if (ev.target.status == '200') {
// 保存成功，通知前台
new ContentTools.FlashUI('保存成功');
} else {
// 保存失败，通知前台
new ContentTools.FlashUI('保存失败');
}
}
};
xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/save-my-page');
xhr.send(payload);
});当用户保存页面时，我们可以使用AJAX将每个区域的内容发送到服务器进行保存。在浏览器中打开页面，寻找左上方的蓝色编辑按钮，然后单击它以开始编辑。
这样一个美观且强大的即时编辑器可谓是非常的实用，特别是对于一些内容编辑网站，如CMS、静态文档网站、博客等内容型网站尤其有用，希望对你有所帮助，Enjoy it！
为一名优秀的Web设计师，如果有一款好用的工具，将起到事半功倍的效果。W3Cschool为您精选几款优秀Web设计师必备软件，快来看看有没有你喜爱的!
Web设计师最爱的五款排版工具
在网页设计当中，排版很重要。如何使网页排版更有挑战性与吸引力，这是开发者必须要做到，而且觉得比较难得事情。下面精选的五款排版工具，是很多Web设计师的最爱。
1.Web排版工具：Identifont
Identifont这款软件，可以轻松获取各种类型的字体。无论你查找什么字体，还有字体定位都变得很简单。正因为有这些优点，这个工具深受很多开发者的喜爱。
2.Web排版工具：PxtoEM
开发者设计网站时，都会涉及到字体大小的问题，这个时候如果使用PxtoEM，可以轻松解决这个问题。此款工具的主要功能是根据正文字体大小进行转换，使你工作起来更加轻松。
3.Web排版工具：Color Contrast Check
建网站时，里面的色调很多，如果网站色彩没有搭配好，将丢失用户，进而影响公司业务。而Color Contrast Check可以帮助解决同色系问题。
4.Web排版工具：Font Tester
有很多开发者觉得这款排版工具最好用，因为他们对比了不同字体，觉得这款工具比较实用。这款工具允许用户根据CSS 样式表搭配不同的字体，可以快速且轻松的找出符合自己设计的字体。
5.Web排版工具：Wordle
Wordle提供各种word cloud样式、字体、色彩。不仅如此，无论你想要什么方式，在word cloud中都可以找到。
Web设计师最常用的五款设计软件
1.Web设计师常用的设计软件：Mobirise Website Builder
如果你想快捷且轻松的完成你的导航设计任务，可以选择使用Mobirise Website Builder。这款软件高度精简，它的设计成果可以运用在移动端和PC端。此外，这款软件加入交互式元素，设计的整个过程中，只需使用模板上组件，且为它分配具体条目。
2.Web设计师最常用的设计软件：TOWeb
站点的真实面貌没有呈现出来之前，需要耗费很多个小时构建以及设计网页。而TOWeb的利用，可以有效解决这个问题。通过这个软件，可以使用120种以上的交互式模板，之后再选定图片以及色彩，使定制过程快捷且轻松。
3.Web设计师最常用的设计软件：PSPad
PSPad可以同时操作多个文件，不仅可以交叉引用，还可以轻松的附加信息。与此同时，即使是刚接触网页设计的新手，也可以胜任。不仅如此，PSPad还有网上论坛，大家遇到什么问题，都可以在上面找到答案。
4.Web设计师最常用的设计软件：Squarespace
要想设计一个网站，帮助信息很重要。而Squarespace这款优秀的软件，可以简化这个流程。通过该网站，我们能够找到各种精致且相当专业的企业网站模板。感觉灵感被掏空?到这里找找思路吧。
5.Web设计师最常用的设计软件：CoffeeCup Free HTML Editor
你是不是想以编码方式来设计自己的网站，那么你可以选择CoffeeCup Free HTML Editor这款软件。你需要做的，仅仅是按照提示来提交新的代码，之后在前端看看效果，再更改就可以了。
作为一名优秀的Web设计师，上面几款必备软件不知道你有没有?不过每个人的喜好也不一样，也许你偏爱的软件不是这些。如果你还有其他更加好用的软件，可以给W3Cschool小编留言哦!
英文出自：Bloggerspath
公众号：w3c技术教程
页设计是把颜色、图片和字体等等要素进行组合调整，达到网页页面美化的目的，在给用户带来完美的视觉体验的同时，也为用户提供更好的使用体验。因此，网页设计需要考虑的设计因素有很多，绝不仅仅只是为了美观。本文千锋武汉Web前端培训小编将推荐十款好用的HTML生成工具，帮助大家更高效率的完成网页设计。
1、Bootstrap Studio
这是一款桌面应用程序，旨在帮助web开发人员和设计人员创建一个相应迅速的网页。一般是用Bootstrap Studio来架构、设计页面效果图和最初的修饰，然后几乎不用导出功能，而是直接在单元上右键，复制html。可以说Bootstrap Studio是在Chrome浏览器代码和 Node.js 基础之上重组和整理出的一套很规范的基于Bootstrap框架的网页前端设计工具。
2、Template Stash
这款软件几乎集合了所有类型网页的模板，你可以通过关键词检索来找到你想要的主题风格。可以说Template Stash 是一个提供高品质，完全免费的响应式网页模板，帮助设计师们找到完美的响应式网站主题或模版，根据网站分类来提高不同的模版样式，所有的模版都是来源于Kickstart项目。
3、Carrd
这款软件是免费的，可以帮助初学者制作一个简单、响应快捷的网页，只要几个简单步骤就能快速设计出美观特色的响应式网站。
4、Bubble
Bubble的优势在于使用者不用掌握任何编程技巧就可以制作网页，它独特的拖拉界面可以让使用者在网页上添加视频、地图、音频等等功能。
5、Tilda Publishing
这款软件可以帮助使用者制作一个内容导向型的网页，这款软件非常适合那些喜欢设计博客页面的人。Tilda Publishing的最大优势在于可以会将不同内容形态切割成blocks，如果把网站想象成堆积木，内容就好比一块块不同花色的积木，利用拖拽方式进行排列组合，网站设计更加独特，操作上也更加简单。
6、XPRS
如果你曾经因为设计网页太过复杂和繁琐而感到沮丧，那么这款软件无疑是你的福音。这款软件会提供一个非常简单的编辑环境，让网页设计变得非常简单，因此对于新手小白来讲吗，是一款十分好用的HTML生成工具。
7、Hype 3.0
这款软件可以帮助你让网页的内容“动”起来，使用者可以设计每一帧动画并且进行排序，也可以手动添加或者删除动画效果，如果你想让自己的网页更加生动，那么这款软件绝对是你的首选。这是一款强大的Mac OS平台HTML5创作工具，它可以在网页上做出赏心悦目的动画效果，无需 Flash 插件。更重要的是这款强的html5开发工具竟然还有中文版！现在你几乎不需要任何的编码知识，只需要简单的拖拽就可以制作出好玩的动画，基于时间轴的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 种全新的定时功能等新功能，非常强大！
8、OnePager
Onepager 是一个提供使用者建置小型网站网站的网络服务，透过视觉化的操作介面，无须下载、安装任何软体，也不用苦苦寻找虚拟主机，只要申请帐户，就能够快速建立自己公司的网站。作为一款好用的HTML生成工具，它可以帮助使用者快速编辑所有类型的网页。使用者可以轻松建立一个响应迅速的网站，这款软件内置的预设系统使得网页的一切都是可定制的，使用者甚至可以自己设计网页的主题风格。总之，Onepaper 让制作网页变得非常简单。内建多种佈景主题可以切换、使用，你甚至不用具备网页设计的知识，直接透过线上工具就能变更设计。
9、Grav
Grav是一个简单可扩展的CMS平台。因为是纯文件系统，所以它无需安装，并且它有着完善的后台界面和完整的官方文档。又因为可扩展型号，可以通过有插件控制几乎每个环节。不过这也是一款较为复杂的HTML生成工具，需要使用者掌握一些编程的技巧。
10、HTML to WordPress
这个软件可以将静态的HTML网站转换成WordPress，如果你想转换你的网站格式，这款软件将帮助你节省大量的时间，因此推荐大家使用。
以上就是千锋武汉Web前端培训小编推荐的十款好用的HTML生成工具，大家都用过了吗？如果你现在还在寻找一款HTML生成工具，不妨试试以上的推荐工具，相信总有一款适合你。关注“武汉千锋”微信公众号，会定期为大家分享最新Web前端发展趋势、学习资料，助力大家学好Web前端。
*请认真填写需求信息，我们会在24小时内与您取得联系。
