高效可視化網(wǎng)頁布局(ViewDiv)

ViewDiv是一款可視化的網(wǎng)頁布局軟件，軟件具有布局可視化、CSS樣式參數(shù)化、代碼生成自動(dòng)化的特點(diǎn)，通過鼠標(biāo)選擇各種工具在畫布上畫出元素，并且可自動(dòng)創(chuàng)建基本的CSS樣式，可非�？焖俚耐瓿蓪�(duì)網(wǎng)頁的布局創(chuàng)建。其組件可模塊化添加，編譯出的網(wǎng)頁支持移動(dòng)設(shè)備兼容多種屏幕尺寸，極大的提升了開發(fā)者的工作效率，同時(shí)顯著降低了網(wǎng)頁布局的難度。有需要的小伙伴歡迎來西西下載體驗(yàn)。

軟件簡介：

ViewDiv 是一款可視化的網(wǎng)頁布局軟件，軟件具有布局可視化、 CSS 樣式參數(shù)化、代碼生成自動(dòng)化的特點(diǎn)，通過鼠標(biāo)選擇各種工具在畫布上畫出元素，可自動(dòng)創(chuàng)建基本的 CSS 樣式，可非�？焖俚耐瓿蓪�(duì)網(wǎng)頁的布局創(chuàng)建。其組件可模塊化添加，輸出的網(wǎng)頁支持移動(dòng)設(shè)備，兼容多種屏幕尺寸，極大的提升了開發(fā)者的工作效率，同時(shí)顯著降低了網(wǎng)頁布局的難度。

軟件特色：

所見即所得

布局可視化

CSS參數(shù)化

代碼生成自動(dòng)化

實(shí)時(shí)著色

多種元素同時(shí)著色

清晰分辨各種元素

可擴(kuò)展工具欄

輕松添加各種模板

鍵應(yīng)用輕松完成

多種項(xiàng)目模式

電腦頁面

移動(dòng)設(shè)備頁面

支持柵格布局庫

使用說明：

1、窗口介紹

1.1、工具欄

工具欄提供了創(chuàng)建各種元素的基本工具。并且工具欄可進(jìn)行增加、修改、刪除、創(chuàng)建新分組等操作，可通過組件中心動(dòng)態(tài)添加模塊化組件。添加方式“設(shè)置”菜單 --> “添加組件”功能。

1.2、菜單欄

菜單欄提供了具體功能的使用入口。

1.3、信息欄

信息欄用于顯示當(dāng)前選中元素以及項(xiàng)目的基本信息

1.4、布局窗口

布局窗口為程序的核心窗口，元素布局的繪制都在此工作區(qū)域內(nèi)完成，通過在工具欄選擇所要?jiǎng)?chuàng)建元素的類型，在繪圖窗口繪制元素的寬高和顯示的位置，預(yù)覽窗口時(shí)時(shí)顯示繪制的內(nèi)容。

1.5、預(yù)覽窗口

預(yù)覽窗口可分為 HTML 效果預(yù)覽、HTML 代碼預(yù)覽、 CSS 代碼預(yù)覽

1.6、快捷操作欄

顯示正在編輯的CSS 類名和常用的快捷功能

“微調(diào)工具（快捷鍵 F1 ）”、“自動(dòng)創(chuàng)建 CSS （快捷鍵 F2 ）”、“著色開關(guān)（快捷鍵 F3 ）”

1.7、瀏覽面板

左側(cè)區(qū)域顯示當(dāng)前項(xiàng)目的文件目錄  右側(cè)顯示當(dāng)前項(xiàng)目的布局結(jié)構(gòu)

1.8、屬性設(shè)置面板

設(shè)置元素的坐標(biāo)位置、超鏈接設(shè)置、HTML元素屬性、注釋設(shè)置

1.9、CSS 樣式面板

CSS 樣式的創(chuàng)建、刪除、修改、查看、引用、注釋、快速編輯都通過此面板操作。

2.0、內(nèi)容設(shè)置面板

設(shè)置選中元素的內(nèi)容與CSS樣式模板，任何類型的自定義內(nèi)容均通過此添加。  
(注意！在編輯器內(nèi)添加JS腳本時(shí)，請(qǐng)勿使用 "//注釋內(nèi)容" 格式的注釋，請(qǐng)使用 "/*注釋內(nèi)容*/" 格式的JS注釋)

2.1、TAB 設(shè)置面板

設(shè)置TAB 元素的模板與 CSS 樣式、標(biāo)簽數(shù)量、寬度、高度、等參數(shù)。

2.2、標(biāo)簽設(shè)置面板

設(shè)置元素內(nèi)使用的標(biāo)簽，如CMS 的模板標(biāo)簽語句 此處內(nèi)容不參與 HTML 的渲染顯示，僅在保存輸出標(biāo)簽時(shí)保存到文件。
(注意！在編輯器內(nèi)添加JS腳本時(shí)，請(qǐng)勿使用 "//注釋內(nèi)容" 格式的注釋，請(qǐng)使用 "/*注釋內(nèi)容*/" 格式的JS注釋)

2.3、編輯面板 

編輯窗口可編輯HTML 文件的 head 區(qū)域內(nèi)容與底部內(nèi)容，  

如在頁面頂部引用一個(gè)新CSS 文件，在底部插入一個(gè) JS 內(nèi)容，都通過此面板操作。  
(注意！在編輯器內(nèi)添加JS腳本時(shí)，請(qǐng)勿使用 "//注釋內(nèi)容" 格式的注釋，請(qǐng)使用 "/*注釋內(nèi)容*/" 格式的JS注釋)

2.4、搜索面板

通過查找窗口進(jìn)行全局內(nèi)容搜索的結(jié)果顯示在此面板中