相信熟悉動易SiteWeaver產品的朋友對“模板的可視化編輯”功能并不陌生。這個自從動易產品誕生以來的創新功能，給網站建設這種技術枯燥的“活兒”帶來了樂趣。隨著網頁設計由“表格式”向“DIV+CSS”的升級轉變，這一功能并沒有很好的延續下來。如今，隨著動易XPOWER模板解析引擎的不斷完善和升級，以及動易人對技術的不斷追求，“國內首款支持DIV+CSS模板可視化編輯的內容管理系統誕生了！”

　　動易“模板可視化編輯”功能的回歸，給很多不懂網頁設計技術的普通網站管理者提供新的選擇。接下來將為你帶來這方面的功能介紹。

一、現有可視化技術對比

二、功能介紹

1. 界面
　　當使用動易“模板可視化編輯”功能對某個模板進行管理時，系統默認會將帶有動易標簽的區域標記為“藍色區域”。用戶可以直接在這些區域中快速設置標簽的相關參數。

（管理界面）

2. 參數設定

　　系統后臺進入模板可視塊編輯頁面，鼠標移動到需要修改標簽參數的模塊上，頁面即出現“參數設定”選項，點擊出現標簽參數修改框，修改后可在界面中看到實際效果。

　　點擊“參數設定”選項。

　　在標簽參數修改框中修改編輯標簽參數。

3. 代碼編輯

　　進入模板可視塊編輯頁面，鼠標移動到需要進行修改標簽參數的模塊上，頁面即出現“代碼編輯”選項，點擊出現代碼修改編輯框，修改后可在界面中看到實際效果。點擊“參數設定”選項。

　　在代碼修改編輯框中修改編輯代碼。

4. 頁面元素編輯

　　使用過QQ截圖工具的同學應該會鼠標選擇截圖區域這個功能大呼過癮，“頁面元素編輯”功能也是這樣一種操作模式，只不過是通過鼠標選取需要編輯的區域而已。（選擇去區域要盡可能的精確）

　　在模板可視塊編輯頁面，點擊頁面右上角“頁面元素管理”選項，隨后，用鼠標框選需要編輯的模塊，即出現該模塊的代碼修改編輯框，修改后保存即可在界面中看到實際效果。

　　點擊“頁面元素管理”選項。

　　鼠標框選需要編輯的模塊。

　　在頁面元素編輯框中進行修改編輯，完成保存，可在頁面看到效果。

5. 布局容器標簽

　　在網站后臺，在模板編輯中添加需要的布局模板后：

　　（1）標簽可拖動到布局容器

　　在可視化編輯頁面，標簽可使用鼠標拖動到布局容器中，完成可在界面中看到實際效果。將標簽用鼠標拖動到需要編輯的布局容器中。

　　（2）布局容器可更換布局

　　此外，布局容器也可以更換布局，鼠標移需要進行更換布局的布局模板中，頁面即出現“更改布局”選項，點擊即出現布局模板列表，選擇需要的布局，修改后可在界面中看到實際效果。

　　點擊“更改布局”選項。

　　選擇需要的布局模板，即可在界面中看到實際效果。

　　（3）布局容器可添加標簽

　　鼠標移到布局容器模塊上，即出現“添加標簽”選項，點擊即出現添加標簽框，選擇需要添加的標簽，修改完成后可在界面中看到實際效果。

　　點擊“添加標簽”選項。

　　選擇需要添加的標簽，完成后保存即可在界面看到效果。

6. CSS編輯器

　　從模板中提取CSS文件進行編輯，編輯后即時刷新。

　　在可視化編輯頁面，點擊“CSS編輯器”，頁面右方出現編輯器，選擇文件，即可進入標簽編輯，修改后保存界面查看效果。

　　點擊“CSS編輯器”選項。

　　選擇相關文件，即可進行編輯。