pinegrow web editor提供網(wǎng)頁編輯功能，可以在軟件創(chuàng)建HTML網(wǎng)頁文件，可以創(chuàng)建css文件，可以設(shè)計頁面UI效果，使用官方提供的模板資源就可以開始編輯網(wǎng)頁元素內(nèi)容，從而將模板的網(wǎng)頁元素替換為自己本地的元素，例如使用新的圖像加載到模板編輯，使用新的文字替換模板內(nèi)容，網(wǎng)頁界面的布局都是可以調(diào)整的，也可以設(shè)置文本顯示結(jié)構(gòu)，轉(zhuǎn)換網(wǎng)頁類型，添加表格內(nèi)容，編輯網(wǎng)站信息，改進頁面設(shè)計風(fēng)格，具有的功能還是非常多的，適合需要設(shè)計網(wǎng)頁的用戶使用。

軟件功能

　　1、使用可視化電源工具加快構(gòu)建HTML

　　使用強大的可視化工具快速構(gòu)建網(wǎng)頁布局，以添加，編輯，移動，克隆和刪除HTML元素。使用轉(zhuǎn)發(fā)器插入多個元素，并通過一次移動修改所有選定元素的布局。

　　2、CSS，SASS和LESS風(fēng)格

　　檢查活動的CSS規(guī)則，使用豐富的可視化控件，CSS Grid編輯器，Dev工具編輯器或代碼 - 所有這些都是一起工作的。編輯SASS和LESS，直播，無需任何外部工具。

　　3、使用Bootstrap和Foundation的完美工具

　　將數(shù)百個框架類轉(zhuǎn)換為強大的可視化控件。使用完整的即用型組件庫，并使用動態(tài)組件（如模態(tài)）。調(diào)整頁面上的列的大小，并使用顯示助手可視化布局。

　　4、一次編輯和測試所有設(shè)備尺寸的頁面

　　使用多頁編輯可以在多種設(shè)備尺寸下編輯頁面。使用媒體查詢幫助工具輕松設(shè)計自適應(yīng)網(wǎng)站。添加自定義斷點或讓Pinegrow通過分析樣式表來檢測它們。

　　5、組件，母版頁，項目，CMS模式......

　　Pinegrow Pro可讓您通過母版頁等智能功能進一步加快工作速度，讓您可以為項目定義模板。將頁面元素轉(zhuǎn)換為具有自定義可編輯區(qū)域的可重用組件。使用Pinegrow作為靜態(tài)HTML網(wǎng)站的CMS。

　　6、直觀，快速地創(chuàng)建生產(chǎn)就緒的WordPress主題

　　Pinegrow也是創(chuàng)建生產(chǎn)就緒的WordPress主題的完美工具。通過將WordPress函數(shù)分配給頁面上的各個元素，將任何HTML頁面轉(zhuǎn)換為WordPress主題。Pinegrow導(dǎo)出標準的PHP WordPress文件。

　　7、而且這還不是全部......br /> 將Pinegrow與Atom同步，編輯服務(wù)器端標簽，使用現(xiàn)成的塊，從Web打開頁面等等。

軟件特色

　　1、pinegrow web editor提供豐富的網(wǎng)頁設(shè)置功能，可以在軟件編輯CSS

　　2、可以設(shè)置CSS規(guī)則，可以設(shè)置CSS網(wǎng)頁樣式

　　3、支持豐富的資源添加，可以加載本地的視頻到網(wǎng)頁使用

　　4、也可以添加音頻區(qū)域，添加圖像區(qū)域，添加表格區(qū)域，方便用戶插入相關(guān)的頁面元素

　　5、pinegrow web editor也支持插入地圖數(shù)據(jù)，直接在網(wǎng)站顯示地圖資源

　　6、提供豐富的模板資源，方便新使用模板設(shè)計網(wǎng)頁內(nèi)容

　　7、Add classes 工具是一個浮動面板，可讓您快速添加和刪除所選元素中的類

　　8、使用規(guī)則上下文菜單：上下文菜單包含用于在所選元素中添加和刪除此類的命令。

　　9、創(chuàng)建元素的副本：元素的副本將緊跟在原始元素之后

　　10、復(fù)制現(xiàn)有元素：有時，向頁面添加更多元素的最簡單方法是復(fù)制 （制作副本） 頁面上的現(xiàn)有元素

　　11、將按鈕插入到所選元素之一中：Pinegrow 將分析情況并對所有選定的元素重復(fù)相同的作

　　12、使用 Repeater 添加元素的多個副本：將新元素插入頁面的所有作都使用 Repeater。只需在作前或在拖放移動過程中輸入所需的數(shù)字，Pinegrow就會將元素的多個副本添加到頁面中

　　13、插入代碼：Library 面板允許您將代碼直接添加到頁面中。

使用方法

　　1、將pinegrow web editor直接安裝到電腦，點擊下一步

　　2、提示激活軟件界面，如果你需要使用軟件就可以購買注冊碼

　　3、也可以選擇試用模式，輸入郵箱地址獲取試用碼，輸入到軟件點擊開始試用

　　4、pinegrow web editor界面如圖所示，可以查看視頻教程，可以點擊New project創(chuàng)建新的項目

　　5、選擇要創(chuàng)建的頁面類型：

　　Bootstrap 5 Blocks

　　Tailwind CSS Blocks

　　Bootstrap 4 Blocks

　　Interactions Blueprints

　　Bootstrap 5

　　Tailwind CSS

　　Plain HTML

　　Tailwind UI

　　Foundation 6.6

　　6、編輯界面如圖所示，可以在模板頁面點擊任意元素編輯

　　7、頁面功能

　　頁面屬性。。

　　重復(fù)

　　刷新視圖

　　管理樣式表。

　　管理庫和插件。。

　　管理斷點。

　　編輯代碼

　　在瀏覽器中預(yù)覽

　　從Unsplash獲取免費庫存照片。

　　檢查HTML錯誤。

　　管理谷歌字體。。

　　自定義和更新Bootstrap主題

　　檢查是否有斷開的鏈接。

　　刪除屬性。

　　8、組件

　　快速更新（僅打開頁面）

　　更新整個項目

　　從項目中重新加載組件

　　圖書館

　　編輯資源。

　　刷新加載的庫

　　添加/更新庫中的資源

　　工具

　　項目刷新時自動重新加載

　　標記組件

　　測試CMS模式

　　清除未使用的編輯。。

　　刪除組件信息。

官方教程

　　Pinegrow 入門 -交互式教程

　　Pinegrow 新用戶？此交互式指南是最好的起點。我們將瀏覽所有 Pinegrow 面板并試一試。

　　在這個介紹中，我們需要一個頁面來玩。單擊下面的按鈕以打開有關(guān)世界上最古老的松樹的示例頁面：

　　打開示例頁面

　　在這個介紹中，我們需要一個頁面來玩。要打開本指南中使用的示例頁面，請單擊頂部工具欄中的 271_ICON 打開 Pinegrow 中的應(yīng)用程序內(nèi)幫助。在那里，轉(zhuǎn)到 “Getting started with Pinegrow” 并單擊 “Open the sample page” 按鈕?；蛘撸梢源蜷_自己的一個頁面并對其進行試驗。

　　注意在本教程中，您可以隨意弄亂示例頁面。您始終可以通過再次單擊此按鈕來關(guān)閉它并打開新副本。

　　頁面視圖

　　Pinegrow 中的大多數(shù)編輯作都發(fā)生在頁面視圖上。

　　測試頁面的頁面視圖。

　　嘗試嘗試頁面視圖：

　　將鼠標移動到頁面視圖上。請注意，懸停的元素會以綠色邊框突出顯示。

　　高亮顯示的元素。

　　在頁面上的元素上單擊一次以將其選中。所選元素具有藍色菜單和邊框。

　　所選元素。

　　嘗試單擊 Duplicate duplicate_ICON 圖標或按 CMD+D_KEY 創(chuàng)建所選元素的副本。

　　單擊 Delete bin_ICON 圖標或按 DELETE_KEY 以刪除重復(fù)的元素。如果事情搞砸了，請使用 UNDO。

　　本指南的目的是快速瀏覽所有 Pinegrow 面板和工具。因此，我們將在其他位置介紹其余的所選菜單命令。

　　文檔結(jié)構(gòu)樹

　　打開 Tree 面板。

　　注意您可以單擊本指南中的“打開面板”鏈接以打開該面板。Pinegrow 還將顯示視覺線索以突出顯示面板。

　　樹面板顯示所選頁面的嵌套 HTML 結(jié)構(gòu)。所選元素為藍色。

　　包含所選元素的 Tree 面板。

　　嘗試讓我們快速看一下這棵樹：

　　單擊樹中的任何元素以將其選中。此元素也將在頁面視圖中被選中。菜單 1 將出現(xiàn)在樹中所選元素的旁邊。

　　嘗試菜單命令。如果您迷路了，請使用 UNDO。

　　具有子元素（其內(nèi)部的其他元素）可以折疊和展開。單擊 down_ICON 和 right_ICON 圖標，看看會發(fā)生什么。使用折疊來隱藏與手頭任務(wù)無關(guān)的詳細信息。

　　一個非常有用的技巧：在單擊down_ICON的同時按 ALT_KEY 鍵，right_ICON圖標以折疊和展開整個樹級別。

　　嘗試在樹中移動元素。例如，按住 h1 標題并將其拖動到 p 元素下。然后收回去。如果您犯了錯誤，請使用 UNDO。

　　庫 - 向頁面添加元素

　　打開 Library 面板。

　　庫面板包含我們可以添加到頁面的 HTML 元素和組件（HTML 元素組）。您還可以使用 Library 面板直接插入代碼并定義自定義代碼段和智能組件。

　　“庫”面板。

　　嘗試讓我們向頁面添加一個新元素：

　　從 Library 中取出 h2 并將其拖到頁面上。橙色線將顯示元素的放置位置。

　　將 h2 從 Library 拖動到頁面。

　　從 Library 面板中獲取另一個元素，并將其拖到 Tree 面板。與往常一樣，如果事情搞砸了，請使用 UNDO。

　　將 h2 從 Library 拖到 tree 中。

　　在頁面上選擇一個元素。然后RIGHT_CLICK“庫”面板中的任何元素，以顯示用于將元素插入到所選元素中、之前或之后的菜單。

　　在 Insert code （插入代碼） 框中鍵入 “p Hello” （這是Hello

　　的簡化語法。A “p |Hello“項將顯示在代碼編輯器的正下方。將其拖動到頁面上。

　　插入代碼。

　　元素屬性

　　打開 Element properties （元素屬性） 面板。

　　“屬性”面板（調(diào)整為兩列）。

　　使用 Element properties （元素屬性） 面板編輯元素的屬性。例如，更改圖像的 source 和 alt 文本屬性。課程也在那里進行管理。該面板包含由 Bootstrap 等框架定義的屬性的控件。

　　嘗試讓我們嘗試編輯一些屬性：

　　在頁面或樹中選擇 h1 標題。使用標題級別控件（在標題部分中）將級別更改為標題 2。

　　更改標題級別。

　　通過單擊 Classes 部分中的 Add class 按鈕 1 添加類。將顯示一個浮動工具 2。在輸入字段中輸入類名稱（例如，title），然后單擊 Add class 按鈕 3。關(guān)閉浮動工具。

　　從 Properties （屬性） 面板添加類。

　　在文本和上下文部分嘗試使用Bootstrap控件。

　　樣式 - 使用 CSS 繪畫

　　打開 Style （樣式） 面板。

　　頁面元素的視覺樣式是通過 CSS 規(guī)則完成的。每個規(guī)則都有一個選擇器，用于指定哪些元素受規(guī)則和屬性（如顏色、字體等）影響，這些屬性定義視覺樣式。

　　具有 selector 和 properties 的 CSS 規(guī)則示例。

　　我們將在這個面板上花更多時間，因為如果您知道如何有效地使用它，它是一個非常強大的工具。

　　瀏覽和編輯現(xiàn)有 CSS 規(guī)則

　　在示例頁面上，選擇帶有詩歌標題的 H2 元素，然后查看“樣式”面板中的“活動”選項卡：活動選項卡 1 顯示影響所選元素的所有 CSS 規(guī)則。

　　“樣式”面板中的“活動”選項卡。

　　Active 選項卡還顯示直接在 HTML 元素上設(shè)置的樣式，該元素具有 style 屬性 2。我們稍后會探討它。

　　默認情況下，框架樣式表中的規(guī)則（如 bootstrap.css）是隱藏的。單擊 Show more links 3 以顯示它們。

　　可視化編輯器 4 包含用于編輯 CSS 規(guī)則屬性的可視化控件。

　　嘗試讓我們做一些造型吧！

　　單擊 .poster 規(guī)則以將其選中。所選規(guī)則將顯示在 Visual editor 中。

　　包含所選 .poster 規(guī)則的“樣式”面板。

　　在 Visual editor 中，使用 Dimension 部分 1 中的 width 屬性。

　　創(chuàng)建新的 CSS 規(guī)則

　　到目前為止，我們正在修改現(xiàn)有的 CSS 規(guī)則?，F(xiàn)在讓我們創(chuàng)建一個新的 CSS 規(guī)則：

　　嘗試添加新的 CSS 規(guī)則：

　　在頁面上選擇 h1 標題元素。在 Create rule input box 1 中輸入類選擇器，例如“.big”。

　　為所選元素添加新的 CSS 規(guī)則。

　　由于選定的 h1 沒有分配 .big 類，因此 Pinegrow 將提供將類添加到元素 2 中。將該復(fù)選框保持打開狀態(tài)。

　　點擊 Create 按鈕 3。由于這是我們添加的第一個 CSS 規(guī)則，因此 Pinegrow 會要求我們確認應(yīng)該選擇哪個樣式表作為添加新 CSS 規(guī)則的默認樣式表。讓我們選擇 pine.css。設(shè)置默認樣式表后，使用 Create 按鈕創(chuàng)建的所有新規(guī)則都將轉(zhuǎn)到該位置。

　　確認新 CSS 規(guī)則的默認樣式表。

　　現(xiàn)在，.big CSS 規(guī)則已創(chuàng)建 1 并顯示在可視化編輯器中。使用控件選擇器（或滾動）向下轉(zhuǎn)到 Text 部分。嘗試不同的控件。

　　在可視化編輯器中使用文本控件。

更新日志

　　1、CSS樹作為“樣式”面板選項卡

　　2、重新排序設(shè)計面板顏色

　　3、“屬性”面板中的內(nèi)部HTML字段

　　4、WordPress的混合塊

　　5、Bug修復(fù)