ViewDiv是一款可以幫助用戶制作網(wǎng)頁的軟件，可以快速創(chuàng)建新的CSS樣式、可以應(yīng)用CSS樣式、引用新CSS文件、編輯CSS樣式、CSS自定義、添加超鏈接、修改元素屬性、添加項(xiàng)目文件、查看編碼、HTML注釋，所有可以操作的功能都可以在主界面的菜單工具找到，讓用戶在編輯網(wǎng)頁樣式的時候可以獲得更方便的操作方案，這款軟件功能還是很多的，無論是調(diào)整網(wǎng)頁樣式還是設(shè)計(jì)元素都很方便，對于需要設(shè)計(jì)CSS網(wǎng)頁的朋友很適合，需要的朋友就下載吧！

軟件功能

　　所見即所得

　　布局可視化

　　CSS參數(shù)化

　　代碼生成自動化

　　實(shí)時著色

　　多種元素同時著色

　　清晰分辨各種元素

　　可擴(kuò)展工具欄

　　輕松添加各種模板

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

　　多種項(xiàng)目模式

　　電腦頁面

　　移動設(shè)備頁面

　　支持柵格布局庫

軟件特色

　　工具欄管理

　　1、在工具欄右鍵，點(diǎn)擊“組件管理”窗口即可對管件進(jìn)行管理。

　　2、此窗口下修改內(nèi)容的保存方式為，按回車鍵二次即保存。

　　3、例如修改分組名稱，將“基本組件”的名稱修改為“我的組件”

　　4、輸入完成后按下回來確認(rèn)輸入的內(nèi)容，在次按下回來則為保存，然后點(diǎn)擊“完成”。

　　5、此窗口還可以對組件進(jìn)行批量的收藏，使用方法選中“收藏” 復(fù)選框 ，在點(diǎn)擊 “完成” 即可。

　　元素多選

　　1、按住CTRL鍵盤，鼠標(biāo)單擊，可實(shí)現(xiàn)對元素的多選，也可以通過瀏覽面板的結(jié)構(gòu)窗口對元素實(shí)現(xiàn)多選操作。

　　2、取消多選狀態(tài)，在結(jié)構(gòu)瀏覽窗口選中任意元素即可退出多選，或單擊畫布空白處。或點(diǎn)擊任意一結(jié)構(gòu)元素。

　　3、在元素多選的狀態(tài)下可進(jìn)行參數(shù)設(shè)置，如批量設(shè)置元素內(nèi)容，多選元素切換到底部內(nèi)容面板，設(shè)置內(nèi)容，此時點(diǎn)擊應(yīng)用，當(dāng)前選中的所有元素都有相同的內(nèi)容。

　　創(chuàng)建參考線

　　1在畫布“頂部標(biāo)尺”上按下鼠標(biāo)向下拖動，可以創(chuàng)建出水平的參考線，在垂直標(biāo)尺按下拖動可創(chuàng)建垂直方向的參考線。 刪除參考線，可以將參考線拖回標(biāo)尺，或在參考線上右鍵選擇刪除參考線。通過工具菜單可鎖定參考線。

　　鎖定元素

　　1、選擇要操作的元素，點(diǎn)擊底部的第一個圖標(biāo)，即可鎖定元素，反之則解除鎖定。通過結(jié)構(gòu)瀏覽面板也可以實(shí)現(xiàn)同樣操作。

　　著色功能

　　1、開啟著色功能可更直觀的看到元素的實(shí)現(xiàn)大小與位置，著色功能僅在預(yù)覽窗口中顯示，并不會保存到實(shí)際文件。

　　2、通過底部工具欄開啟，可快捷鍵F3。

　　微調(diào)工具選項(xiàng)

　　1、微調(diào)工具可對選中元素進(jìn)行像素級別的調(diào)整，開啟此工具將會在選中元素下部顯示工具欄每點(diǎn)擊一次增加/減小1像素，使用底部工具欄或F3開啟/關(guān)閉

安裝方法

　　1、打開ViewDiv_1.0_試用版_Setup.exe就可以直接安裝，可以在軟件選擇自定義安裝

　　2、軟件安裝地址是D:Program FilesViewDiv，等待安裝結(jié)束吧

　　3、軟件已經(jīng)安裝到你的電腦，如果你會使用軟件就立即打開

使用說明

　　1、打開ViewDiv就可以新建項(xiàng)目，如果你有案例文件就可以在這里打開，也可以加載上傳沒有設(shè)計(jì)完畢的項(xiàng)目

　　2、如圖所示，這里是新建項(xiàng)目的界面，支持文檔模式、項(xiàng)目名稱、設(shè)計(jì)圖、畫布尺寸、文檔名稱、CSS名稱、文件編碼

　　3、軟件設(shè)計(jì)界面如圖所示，如果你會設(shè)計(jì)就在軟件界面編輯CSS相關(guān)的內(nèi)容，可以在左邊選擇功能

　　4、這里是軟件提供的工具，有幾十種工具可以使用，每種工具使用都非常簡單，可以替換新的內(nèi)容

　　5、如圖所示，這里是新的內(nèi)容設(shè)置界面，輸入需要查詢的內(nèi)容，隨后輸入新的內(nèi)容替換

　　6、取色功能，可以在軟件選擇需要的顏色，可以在桌面選擇需要的顏色

　　7、也支持調(diào)色板功能，如果你知道顏色參數(shù)就可以在這里立即設(shè)置，從而為自己的網(wǎng)頁添加顏色

　　8、編碼轉(zhuǎn)換功能，在軟件界面將輸入的文字內(nèi)容轉(zhuǎn)換為新的編碼，打開文件就可以立即轉(zhuǎn)換

　　9、ViewDiv設(shè)置功能，固定標(biāo)尺到頂部、預(yù)覽窗口自動著色、退出程序刪除登陸信息、每五分鐘自動備份設(shè)計(jì)文檔

　　10、自動創(chuàng)建CSS類、自動顯示微調(diào)工具、編輯器文檔字體加粗、保存文件自動輸出標(biāo)簽

　　11、選中元素顏色、參考線顏色、選中文本顏色、默認(rèn)文本顏色、文檔縮放設(shè)置、文檔字號設(shè)置、默認(rèn)編碼設(shè)置

官方教程

　　1、窗口介紹

　　1.1、工具欄

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

　　1.2、菜單欄

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

　　1.3、信息欄

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

　　1.4、布局窗口

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

　　1.5、預(yù)覽窗口

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

　　1.6、快捷操作欄

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

　　“微調(diào)工具（快捷鍵 F1 ）”、“自動創(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腳本時，請勿使用 "http://注釋內(nèi)容" 格式的注釋，請使用 "/*注釋內(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)簽時保存到文件。

　　(注意！在編輯器內(nèi)添加JS腳本時，請勿使用 "http://注釋內(nèi)容" 格式的注釋，請使用 "/*注釋內(nèi)容*/" 格式的JS注釋)

　　2.3、編輯面板

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

　　如在頁面頂部引用一個新CSS 文件，在底部插入一個 JS 內(nèi)容，都通過此面板操作。

　　(注意！在編輯器內(nèi)添加JS腳本時，請勿使用 "http://注釋內(nèi)容" 格式的注釋，請使用 "/*注釋內(nèi)容*/" 格式的JS注釋)

　　2.4、搜索面板

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

　　2 、創(chuàng)建項(xiàng)目

　　2.1、默認(rèn)模式：

　　創(chuàng)建窗口啟動時的默認(rèn)創(chuàng)建模式 ，常用于創(chuàng)建電腦上顯示的網(wǎng)頁，CSS單位px。

　　2.2、彈性布局：

　　選中彈性布局 ，在此模式下創(chuàng)建的網(wǎng)頁可兼容多種移動設(shè)備的屏幕尺寸，CSS單位必需使用rem，在設(shè)置CSS單位時可以在輸入px值，按下回車將會轉(zhuǎn)換為rem，如在CSS設(shè)置面板，設(shè)置字號大小，輸入16,按下回車鍵，將會自動轉(zhuǎn)換為0.16，在此模式下自定義CSS樣式也需要遵循此轉(zhuǎn)換公式 100px=1rem。

　　2.3、在創(chuàng)建項(xiàng)目窗口中可選添加設(shè)計(jì)圖，也可以創(chuàng)建完后通過“設(shè)置”菜單 “項(xiàng)目管理”進(jìn)行修改。

　　2.4、選中“創(chuàng)建基類”將會為新創(chuàng)建的 CSS 添加基本的 CSS 設(shè)置。

　　2.5、在有設(shè)計(jì)圖的情況下，畫布尺寸跟隨設(shè)計(jì)圖的尺寸，反之則可自定義尺寸，文件編碼支持UTF-8 和 GBK 。

　　3 、創(chuàng)建元素

　　3.1、項(xiàng)目創(chuàng)建完成后即可在畫布上創(chuàng)建所需要的元素，如選中“區(qū)塊 div 工具”在畫布上畫出需要的尺寸，整個的創(chuàng)建流程如同書寫 HTML 代碼相同。

　　布局順序：從左到右，從外到內(nèi)的布局方式。

　　4 、工具欄

　　4.1、 選擇工具、可在選中元素后對元素進(jìn)行移動、改變大小等操作，也可結(jié)合對齊工具對元素進(jìn)行上下左右寬高的對齊操作，按鍵盤S 鍵、或菜單右鍵，可快速切換至此工具。對元素的屬性設(shè)置都要遵循先選中后操作的順序。

　　4.2、 對齊工具、可對操作的元素進(jìn)行“頂部對齊” “底部對齊” “左邊對齊” “右邊對齊” “寬度相同” “高度相同” “寬高相同” 的對齊操作。

　　使用方法，按住鍵盤CTRL鍵，并使用 “選擇工具”先中第一個元素，然后在選中第二個要對齊的元素，在選擇工具欄的 對齊工具，此時第二個元素將和第一個元素對齊。選擇更多元素也是同樣操作，第一個選中的為對齊的參照物，后續(xù)選中的元素都將和第一個對齊。

　　4.3、 批量創(chuàng)建、可同時創(chuàng)建多個子元素，支持橫排、豎排、平均、比例等方式創(chuàng)建，如選中“創(chuàng)建樣式”選項(xiàng)則會為每個創(chuàng)建出來的子元素添加一個CSS樣式，控制其位置和尺寸。反之則不創(chuàng)建。

　　4.4、 放大/縮小工具，可實(shí)現(xiàn)對畫布的縮小與放大，快捷鍵 Z 可在放大與縮小之間切換。

　　4.5、 創(chuàng)建tab工具，可以在畫布上創(chuàng)建多頁面的TAB集合，從而很方便的創(chuàng)建HTML多頁面滑動門效果。結(jié)合底部的Tab工具面板，可以很方便的設(shè)置Tab標(biāo)簽的數(shù)量、寬度、高度、設(shè)計(jì)圖等信息，通過設(shè)置Tab的模板可以做出更多效果。

　　4.6、 選中tab元素在底部tab面板點(diǎn)擊“設(shè)置”，在窗口中即可為每個tab頁添加設(shè)計(jì)圖。

　　點(diǎn)擊“模板”可為tab選擇模板。