Pingendo使用指南

1.Pingendo是什么?

Pingendo是什么东西,我们来看看菜鸟教程对它的定义:
附上菜鸟教程的链接:菜鸟教程关于Pingendo的介绍
这里写图片描述

2.Pingendo的下载

直接去Pingendo的官网下载就好
这里写图片描述
选择合适自己的版本。

3.Pingendo如何使用呢?

(1)直接打开软件,选择一个空白模板
这里写图片描述

(2)在左侧菜单中选择需要添加的元素
这里写图片描述
注意右边的红色框框是下拉条,当你的鼠标变成一个手的形状时,表示要将元素拉到右边的空白页中。

(3)接下来,带大家做一个左边是form表单,右边几个table,下边是个按钮的页面:

a.在左边选择form表单标签
这里写图片描述

b.将form表单标签拉至右边页面,点击右边的“+”号,会添加一列,内容是复制左边一列的(添加后相对应的可以在下面的中界点找到向下添加行的“+”号)。
这里写图片描述

c.将右边一列的内容清空,添加table组件
这里写图片描述

d.接下来将右边的table在HTML代码中复制两份
这里写图片描述

e.与<div class="row">所在的元素并列添加一个按钮
这里写图片描述

f.最后的效果,修改底部button的样式,按钮的长度选择FULL-WIDTH:YES,就是长度与行宽相等,Text-align:center表示文本居中。
这里写图片描述

右边的菜单大致就是修改组件的一些小的样式,没有取色器,比较伤心,希望以后可以添加这个功能,这样修改页面的颜色就比较轻松了。

除了使用空白页之外,也可以使用Pingendo提供的一些模板,大家可以直接到官网找找template这个相关的字眼,然后下载一些回来使用,这里就不给大家演示截图了。

4.尾声

之前在百度和谷歌上一直都没找到相应的使用教程,写这个博客的时候再搜索了一遍,在谷歌上找到这个教学视频:极客之路·改-极客网页编辑器Pingendo,讲得和我一样水,不过有好过没有。视频里面使用的Pingendo是建立在bootstrap3上的,但是工具的使用大同小异。里面也有提到这个工具支持对手机,平板,电脑等的预览,建议大家也看看这个视频,不长,去头去尾也就10来分钟。

以后有新大陆发现再追加:)

相关文章
相关标签/搜索