Pinegrow Web Editor

Pinegrow Web Editor简介

Pinegw Web Editor是一款多功能桌面Web编辑器，可让用户通过实时多页编辑，CSS和S样式以及用于Bootstrap，Foundation和WordPress的智能组件更快地构建响应式网站;从头开始创建网站或编辑现有项目;Pinegw提供构建网站所需的一切：HTML编辑工具，样式，框架工具，组件库等;使用元素库可以快速组合页面模型，复制页面并播放不同的布局;可以改用变量，以及其它S和LESS好东西，使用数学表达式和变亮和变暗之类的功能来创建可通过仅更改几个变量即可进行自定义的设计，所有这些都是实时的，为什么要停在样机上只需继续使用CSS规则对元素进行样式设置，即可将其转变为定制设计的网页;通过可视化编辑器编辑规则或直接编写代码，打开共享同一样式表的多个页面，样式更改会实时反映在所有页面上，以不同的屏幕尺寸查看它们;使用 Pinegw Web编辑器作为您的静态HTML页面的S;移动元素，双击任何元素以编辑其文本内容，需要引导表单或导航栏，在程序中设计它，单击即可更改其布局;选择表单并复制HTML代码，使用诸如Git之类的标准源代码控制工具来管理您的代码，并与团队成员协作进行项目!

Pinegw Web Editor是一款多功能桌面Web编辑器，通过实时多页编辑、CSS和S样式以及Bootstrap、Foundation和WordPress的智能组件，让用户更快地构建响应性网站。从头开始创建网站或编辑现有项目；Pinegw提供了构建网站所需的一切:HTML编辑工具、样式、框架工具、组件库等。使用素材库可以快速组合页面模型，复制页面，播放不同布局；你可以用变量和其他S和LESS的好东西来代替，用数学表达式和函数如增亮和增暗来创建一个设计，只需改变几个变量就可以定制，所有的变量都是实时的。为什么只停留在原型上，继续使用CSS规则来设计元素的样式，然后将它们变成定制的网页？通过可视化编辑器编辑规则或直接编写代码，打开共享同一样式表的多个页面，样式的变化会实时反映在所有页面上，以不同的屏幕大小查看。使用Pinegw网络编辑器作为静态网页的编辑器；移动元素，双击任意元素编辑其文本内容，需要引导窗体或导航栏，在程序中设计，点击改变其布局；选择表单并复制HTML代码，使用标准的源代码控制工具(如Git)来管理您的代码，并与团队成员就项目进行协作！

Pinegw Web Editor软件功能

加快HTML的使用速度

使用强大的可视化工具快速构建网页布局，以添加、编辑、移动、克隆和删除HTML元素。

用repeater插入n个元素，用一个键修改几个选中元素的布局。

自举3 & amp4和基金会

将数百个框架类变成强大的可视化工具。

例如，具有可调整大小的列的布局、网格显示、文本、颜色、间距和可见性的自适应控制。

甚至是Bootstrap弹性类。从丰富的组件库中插入元素。

一次在所有设备尺寸上编辑和测试您的页面。

使用多页编辑来编辑各种设备大小的页面。

使用媒体查询助手工具轻松设计响应性网站。

添加自定义断点，或者让应用程序通过分析样式表来检测它们。

松果

使您能够利用智能功能(如母版页，它可以为项目定义模板)来加快工作速度。

将页面元素转换为具有自定义可编辑区域的可重用组件。

使用这个工具作为静态网站的。

创建一个现成的WordPress主题

在网页编辑器中打开或创建一个网页。

给HTML元素添加WordPress并设置它们的参数。

导出WordPress主题。应用程序生成PHP代码，并将页面拆分成PHP主题文件。

松树喜欢密码。

应用程序不会向您隐藏代码。同时通过代码直观地编辑页面。

通过可视化用户界面所做的更改会立即反映在代码视图中。

即使您在外部代码编辑器中编辑代码，也可以立即在页面和可视化UI中看到它们。

用块快速构建网站

使用现成的网站块可以快速建立漂亮的网站。

将该块拖到页面上，自定义内容，并根据需要设置CSS样式-网站就完成了。

您甚至可以使用块来创建完全可定制的WordPress主题。

Pinegw Web Editor软件特色

编辑网络上的任何页面。

该程序还允许您打开网络上的任何页面。

只需输入L，开始编辑远程页面:更改布局，编辑文本和图像，修改CSS规则& # 8230；

这对于编辑生成页面的CSS和试用模板非常有用。

将修改后的HTML和CSS文件保存到您的计算机上。

将Pinegw与您最喜欢的代码编辑器一起使用

这个工具正好适合你的工作流程。

与您最喜欢的代码编辑器(带智能自动刷新)、源代码控制系统、包管理器和部署工具一起使用。

Atom插件可用于与应用程序实时同步编辑。

编辑PHP、ASP和ERB HTML模板

使用动态代码标签直观地编辑HTML布局。

双击任何包含PHP、ASP或Ruby on Rails块的元素来编辑代码。

Pinegw Web Editor安装步骤

1.用户可以点击本网站提供的下载路径下载相应的程序安装包。

2.只需使用解压功能打开压缩包，双击主程序进行安装，弹出程序安装界面。

3.您可以根据自己的需要点击浏览按钮来更改应用程序的安装路径。

4.弹出如下界面，用户可以直接用鼠标点击下一步按钮。

5.现在准备安装主程序，单击安装按钮开始安装。

6.弹出应用安装进度条加载界面，只需等待加载完成即可。

7.根据提示，点击安装，弹出程序安装完成界面，然后点击完成按钮。

Pinegw Web Editor使用教程

添加或删除要素类如何？

让我们来看看如何添加和删除类(例如。my-class)。

要选择的元素

在Pinegw中，你可以使用各种工具来完成一项任务。编辑类也是如此。选择最适合当前任务的工具:

编辑元素属中的类

打开“元素种类”面板。

在这里，您将找到“类”部分，它包含分配给所选元素的所有类的列表和“添加类”按钮。

“元素”属于面板的“类”部分。

删除课程

单击x图标1删除该类。

单击类的名称2来切换类(在元素上打开和关闭)。

新课程

通过单击添加类按钮3向元素添加类。

这将打开添加类工具:

包括用于添加类工具。

使用“样式”面板中的类

“样式”面板用于使用CSS规则设置页面元素的样式。但是您也可以在其中添加和删除类:

使用规则上下文菜单。

打开“样式”面板。

右键单击包含的任何规则。类别选择器。上下文菜单包含在选定元素中添加和删除该类的命令。

选择器中带有类的规则的上下文菜单。

创建CSS规则

打开“样式/活动”面板。

“快速规则创建”1和“使用选择器创建器创建”2工具可以选择将新规则中提到的任何类添加到所选元素中-如果这些类尚未分配给该元素。

创建一个新的CSS规则工具，其中包含向元素添加类的选项。

请注意，该函数不仅向元素添加类，还为类创建相应的CSS规则。

编辑课程类别

打开“元素种类”面板。

在这里，您可以找到“种类编辑器”部分:

元素面板中的亏格编辑器。

或者编辑类属。请注意，根据HTML规范，多个类名必须用空格字符而不是逗号分隔。

编辑元素代码

打开“元素代码”面板。

元素代码面板显示选定元素的代码。

编辑HTML代码中元素的泛型:

元素代码编辑器。

或者切换到简化的Pug语法1并用“.”进行编辑用前缀初始化。在元素标签名称之后:

带有简化的HTML语法的元素代码编辑器。添加课程工具

“添加类”工具是一个浮动面板，允许您从选定的元素中快速添加和移除类。

添加类别工具。

您可以使用此工具来执行:

键入一个或多个类名1，然后按回车键或单击添加按钮，将该类分配给选定的元素。或者用空格分隔多个类名。

通过在同一个输入框中输入，搜索项目中所有已知类2的列表。单击列表中的类，将其分配给元素。或者使用向上键和向下键浏览列表，并使用回车键确认选择。

单击最近使用列表中的类名3。

然后切换到删除指定的4类。

快捷键使用D+L_KEY打开添加类别工具。

快捷方式从菜单元素中，选择右键单击添加类。

给页面添加元素怎么样？

让我们看看如何向页面添加新的HTML元素。

就像在Pinegw中一样，你可以用两种不同的方式添加元素。选择一个最适合你的任务。

打开图书馆

打开“库”面板。

“库”面板包含按部分排列的元素和组件(现成的元素组)。

图书馆面板。

显示哪些部分取决于页面上激活了哪些框架和库。例如，如果启动了引导支持，与引导相关的零件和组件将在库中列出。

将鼠标移动到库中的某个元素上将显示该元素的预览。

将元素拖到页面视图。

打开“库”面板。

从“库”面板中抓取一个元素并将其拖到页面上。

当您在页面上移动鼠标时(仍然按住鼠标按钮)，您将看到两件事:

将元素从库拖到页面。

目标元素以绿色边框突出显示，橙色线条显示新元素相对于目标元素的插入位置。

释放鼠标按钮，并将元素拖放到选定的目标位置。

可以使用Repeater插入更多的元素副本。在拖动操作之前或过程中，使用0_KEY到9_KEY输入一个数字来设置要插入的元素的副本数。

按下ESC_KEY停止拖放，不在页面中添加元素。

将元素拖到树中。

打开“库”和“树”面板。

通过将元素从“库”拖动到“树”面板，可以精确控制新元素的放置。

从库中获取一个元素，并将其拖动到树中。插入线将显示位置。

将H2元素从“库”拖到“树”面板。

松开鼠标，在指定位置插入元素。

可以使用Repeater插入更多的元素副本。

按下ESC_KEY停止拖放，不在页面中添加元素。

插入选定的元素

打开“库”面板。

要选择的元素

右键单击库中的元素，选择新元素相对于所选元素的位置:

在库元素上插入右键。

使用Repeater在页面中插入多个元素。

插入选定的库部分

此外，对于某些类型的元素，Pinegw建议可以插入到元素中的元素。

插入到选定的标题元素中。

这些建议列在“插入选择”部分。要将这些元素插入到选定的元素中，请单击名称或右键单击名称以获得更多选项。

插入代码

“库”面板允许您直接向页面添加代码。

打开“插入代码”部分，为要添加到页面的元素输入HTML或简化的Pug语法。

代表代码的库面板元素将出现在代码编辑器的下方。

从“库”面板插入代码。

就像普通的库元素一样使用它:将它拖到页面、树或使用右键单击将其插入到选定的元素中。

快速插入选定的元素

要选择的元素

您不必一直保持库面板可见。

单击所选元素菜单中的插入元素图标导入图标，或按加号键调出浮动库面板。

打开快速插入工具。

快捷键按加号键显示选定元素的浮动快速插入库。使用ESC_KEY关闭浮动库。

选择，单击任何库元素，将其插入选定的元素。

除了将元素拖到页面或树中，您还可以单击库元素将其插入到选定的元素中。

使用位置图标选择新元素相对于所选元素的位置。

快速插入树中

打开树面板。

将鼠标指针悬停在“树”面板中元素之间的边界上将在该位置显示橙色插入线。显示插入行时单击以打开浮动的快速插入库。

将鼠标悬停在元素边框上以显示插入线。

单击库中的元素，将其插入指定位置。

快速插入树中。

快捷键按ESC_KEY关闭浮动库。

使用中继器添加元素的多个副本。

在页面中插入新元素的所有内容都可以与Repeater一起使用。只需在拖放过程之前或过程中键入所需的数字，Pinegw就会将该元素的许多副本添加到页面中。

复读机。

使用0_KEY到9_KEY键在操作前输入一个数字，以设置要插入的元素的副本数。

智能拖放到多个选定的元素

要选择的元素

假设我们需要在页面上的多个元素中插入一个新元素。例如，我们需要在十个div中的每一个上添加一个按钮。有了松果，我们可以一步到位。

选择所有要修改的元素。当插入一个新元素到一个选定的元素& # 8230；

将按钮插入其中一个选定的元素。

…Pinegw将分析情况，并对所有选定的元素重复相同的操作。

将按钮插入所有选定的元素。删除元素怎么样？

让我们看看如何从页面中删除HTML元素。

要选择的元素

就像在《松果》中一样，你可以用几种不同的方式做到这一点。选择最适合手头任务的工具。

删除页面视图中的元素

删除元素最简单的方法是在选定元素的菜单中使用bin_ICON:

删除选定的元素。

这将删除所有选定的元素。

您也可以在右键单击可访问的元素上下文菜单中使用删除:

右键单击显示元素菜单。

请注意，即使未选择任何元素，也可以使用右键单击来显示上下文菜单。

删除所有选定元素的最快方法是按下删除键或退格键:

快捷方式使用删除键或退格键删除所有选定的元素。

此键盘快捷键在文本编辑模式下不可用。

删除树中的元素

打开树面板。

使用树中选定元素菜单中的bin_ICON删除所有选定元素。

您也可以右键单击树中的任何元素，即使它没有被选中，您也可以使用删除菜单命令删除它。

请注意，使用右键菜单删除选定的元素也将删除所有其他选定的元素。对未选择的元素执行同样的操作只会删除该元素。复制现有元素怎么样？

有时，向页面添加更多元素的最简单方法是复制页面上的现有元素。

要复制元素，请在选定元素菜单中单击复制图标。

制作元素的副本。

在原始元素之后插入元素的副本。

使用D+D_KEY复制选定的元素。

重复也可以用于多个选定的元素。

默认情况下，复制多个元素将逐个复制单个元素:

复制时按ALT_KEY，或从上下文菜单中选择复制为组，将元素复制为组:

Repeater允许您创建此元素的多个副本。