概述

界面概覽

① 系統(tǒng)LOGO：系統(tǒng)默認(rèn)的logo標(biāo)志，點(diǎn)擊此處可返回“站點(diǎn)控制臺”

② 語言切換：如果您的站點(diǎn)開啟了多種語言，可在此切換語言模式來設(shè)計(jì)不同語種的站點(diǎn)樣式

③ 頁面切換：點(diǎn)擊可下拉可查看當(dāng)前所有的普通頁面和系統(tǒng)頁面、創(chuàng)建新的頁面、刪除頁面、設(shè)置頁面的基本信息、設(shè)置頁面的SEO信息等，當(dāng)點(diǎn)擊某個(gè)頁面的名稱時(shí)，編輯器將打開此頁面，并可以對其進(jìn)行編輯。

④ 設(shè)計(jì)模式切換：可以便捷的切換PC網(wǎng)站設(shè)計(jì)器、手機(jī)網(wǎng)站設(shè)計(jì)器、小程序設(shè)計(jì)器，進(jìn)入對該端的設(shè)計(jì)狀態(tài)。

⑤ 撤銷&重做：撤銷之前的操作行為或重做之前的操作行為。

⑥ 功能按鈕區(qū)：

【保存】為保存當(dāng)前修改的內(nèi)容（系統(tǒng)也會(huì)定時(shí)自動(dòng)保存）；

【預(yù)覽】為預(yù)覽實(shí)際的瀏覽效果；

【發(fā)布】為將站點(diǎn)內(nèi)容正式發(fā)布上線（需要先綁定域名）；

⑦ 菜單按鈕區(qū)：

【添加版塊】內(nèi)置空白版塊及成品版塊，可任意選擇使用。其中，成品版塊是響應(yīng)式構(gòu)造可在移動(dòng)網(wǎng)站端自動(dòng)適配展示效果。空白版塊和成品版塊均可添加“元素”。

【添加元素】內(nèi)置多種基本元素組件可以拖拽方式放置進(jìn)入頁面，隨后選中該元素設(shè)置其大小和屬性。

【背景設(shè)置】用于設(shè)置當(dāng)前頁面的背景。

【頁面視圖】可查看當(dāng)前頁面內(nèi)所有的版塊，對其進(jìn)行上下排序、隱藏、刪除等操作。

【頁面設(shè)置】設(shè)置當(dāng)前頁面的一些基本屬性。

【更換模版】用于更換整站或當(dāng)前頁面的模版。

【素材管理】管理所有上傳到站點(diǎn)上的素材文件。

【管理后臺】點(diǎn)擊可進(jìn)入當(dāng)前站點(diǎn)的管理后臺。

⑧ 版塊添加按鈕：點(diǎn)擊“+”按鈕會(huì)出現(xiàn)版塊選擇浮窗，點(diǎn)擊其中某個(gè)版塊后，該版塊將自動(dòng)插入“+”所在的位置。

⑨ 版塊設(shè)置菜單：可對當(dāng)前選中的版塊做調(diào)整排序、更換風(fēng)格、復(fù)制版塊、設(shè)置屬性等操作。如果點(diǎn)擊其中的“設(shè)為全局版塊”，則該版塊會(huì)進(jìn)入“添加版塊-全局版塊”中，當(dāng)您處于其他頁面時(shí)可直接引用這個(gè)全局版塊，全局版塊可以實(shí)現(xiàn)其在所有頁面中均保持一致樣式。

⑩ 版塊屬性菜單：當(dāng)您在空白版塊的空白區(qū)域點(diǎn)擊時(shí)（未選中任何元素），會(huì)自動(dòng)出現(xiàn)此快捷菜單，用于設(shè)置當(dāng)前版塊的背景和屬性。

? 版塊高度調(diào)整：拖動(dòng)此圖標(biāo)可直接調(diào)整版塊的高度。

實(shí)操說明

頁面整體結(jié)構(gòu)

本系統(tǒng)的頁面結(jié)構(gòu)采用版塊式結(jié)構(gòu)，即自上到下是由一個(gè)個(gè)版塊堆疊而成，最頂部為“頁面頭部”版塊（可在頁面設(shè)置中關(guān)閉），最底部為“頁面尾部”版塊（可在頁面設(shè)置中關(guān)閉），所有版塊均可在左側(cè)的“頁面視圖”中查看并便捷的調(diào)整版塊的上下排序。如下圖所示：

頁面寬度設(shè)置

頁面布局中，布局風(fēng)格可選“背景通欄”（寬屏網(wǎng)站風(fēng)格）或“box風(fēng)格”（窄屏網(wǎng)站風(fēng)格），內(nèi)容區(qū)最大寬度設(shè)置項(xiàng)在寬屏狀態(tài)下可用作為頁面核心內(nèi)容放置的參考區(qū)域（參考線形式展現(xiàn)，建議設(shè)置值為1200px），在窄屏狀態(tài)下該寬度值即為所有頁面內(nèi)版塊的寬度。如下圖所示：

如何添加版塊

注意版塊的添加方式并非拖拽進(jìn)入設(shè)計(jì)視圖內(nèi)，而是點(diǎn)擊選用。如果您是直接打開了“添加版塊”菜單，并且點(diǎn)擊添加了其中的某個(gè)版塊使用，則該版塊會(huì)添加至頁面在，并且成為頁面最頂部的版塊。如果您是在頁面內(nèi)選中某個(gè)版塊后，點(diǎn)擊其上方或下方的“+”號后選擇添加了版塊，則該版塊會(huì)添加在您選擇的版塊的上方或下方。

公共頭尾版塊

“頁面頭部”和“頁面尾部”版塊為公共版塊，當(dāng)您在某個(gè)頁面編輯“頁面頭部”或“頁面尾部”版塊時(shí)，所有開啟“頁面頭部”或“頁面尾部”版塊的頁面的頭部和尾部均會(huì)變化。如果您在某個(gè)頁面不期望使用“公共”的“頁面頭部”或“頁面尾部”，可以在左側(cè)功能菜單“頁面設(shè)置-頁面布局”中關(guān)閉“顯示公共頭部”或關(guān)閉“顯示公共尾部”的開關(guān)。如下圖所示：

自由元素設(shè)置

自由元素是拖拽進(jìn)入設(shè)計(jì)視圖內(nèi)的，當(dāng)點(diǎn)擊自由元素時(shí)，其會(huì)呈現(xiàn)被選中的狀態(tài)。按住鼠標(biāo)按鍵拖動(dòng)可擺放在頁面內(nèi)的任意位置。同時(shí)在選中狀態(tài)下，其頂部會(huì)有多項(xiàng)功能菜單，點(diǎn)擊菜單內(nèi)的功能項(xiàng)目可以喚出更為強(qiáng)大的屬性面板，對其進(jìn)行更為精細(xì)的設(shè)置。如若修改自由元素的大小，可直接拖動(dòng)自由元素邊緣的小圓點(diǎn)調(diào)整大小。