Web Developer插件概要_Div+CSS教程

Web Developer 插件以工具欄的形式對(duì)網(wǎng)頁(yè)的(X)HTML、腳本、多媒體、CSS、緩存、圖象等多方面的實(shí)用工具。使我們能輕易的獲得網(wǎng)頁(yè)的更多信息，使我們進(jìn)一步的了解當(dāng)前所瀏覽的網(wǎng)頁(yè)。

在Web Developer 插件工具欄中，主要由以下幾個(gè)部分組成：Disable、Cookies、CSS、Forms、Images、Information、Miscellaneous、Outline、Resize、Tools、View Source、Options。下面我們就對(duì)其概況進(jìn)行介紹。

Disable禁用工具　　可以暫時(shí)的屏蔽當(dāng)前頁(yè)面中的某些東東，如JavaScript腳本、緩存、mete自動(dòng)重新定向、將網(wǎng)頁(yè)顯示為黑色（圖片除外）、禁用彈窗等等。如下圖：

 

Cookies工具　　可以用此工具查看當(dāng)前頁(yè)面的Cookies信息，可以按不同的域名或路徑進(jìn)行查看，而且可以手工增加一個(gè)Cookies，這對(duì)于后臺(tái)網(wǎng)絡(luò)編程的開(kāi)發(fā)調(diào)試來(lái)說(shuō)是非常方便而得力的工具。如下圖：

 

CSS樣式表工具　　這是一個(gè)非常強(qiáng)大的工具，基于CSS網(wǎng)頁(yè)布局有這個(gè)得力的助手，工作與學(xué)習(xí)都將變的非常簡(jiǎn)單，可以控制CSS是否應(yīng)用，查看頁(yè)面的CSS文件，并進(jìn)行實(shí)時(shí)的編輯，并在瀏覽器窗口中立即反應(yīng)出編輯后的效果。關(guān)于此工具的詳細(xì)介紹：Web Developer插件 CSS工具組教程

Forms表單工具　　其主要作用是對(duì)頁(yè)面的表單進(jìn)行控制，其中的很多功能對(duì)于表單程序的開(kāi)發(fā)有著非常非常大的幫助，由于我們的重點(diǎn)是CSS網(wǎng)頁(yè)布局，此工具我們不作深入的探討。如下圖：

Images圖像工具　　可以對(duì)當(dāng)前頁(yè)面的圖像進(jìn)行設(shè)定，可以顯示所有圖片的alt信息，對(duì)背景等也可以進(jìn)行是否顯示的設(shè)定。如下圖：

Information信息工具　　此工具在我們的CSS網(wǎng)頁(yè)布局設(shè)計(jì)中也經(jīng)常用到，我們可以用它來(lái)查看頁(yè)面中所有的id、class及table等元素的名稱、占位等信息，關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Information工具教程

Miscellaneous其他　　這是一個(gè)非常“好玩”的工具，它所提供的功能是我們所夢(mèng)寐以求的，在頁(yè)面布局中，我們可以用它來(lái)達(dá)到很多有意思的功能，如輔助線、面積、測(cè)量等，我們?cè)贑SS網(wǎng)頁(yè)布局設(shè)計(jì)中也經(jīng)常用到，關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Miscellaneous工具教程

Outline線框工具　　這組工具對(duì)我們CSS網(wǎng)頁(yè)布局設(shè)計(jì)是非常有用的，線框顯示工具能夠?qū)㈨?yè)面中的某些元素使用線框描邊，使我們可以更好的查看其占位信息，我們可以使用它給div、h1-h6、表單等進(jìn)行線框描邊，關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Outline、Resize工具教程

Resize尺寸工具　　我們可以用它來(lái)改變?yōu)g覽器窗口的尺寸，如果我們使用了1600*1200的分辨率，我們可以借助此工具來(lái)模擬1027*768的窗口效果。關(guān)于此工具的詳細(xì)介紹：Web Developer插件 Outline、Resize工具教程

Tools工具　　對(duì)于我們CSS網(wǎng)頁(yè)布局設(shè)計(jì)，它的最大功能在于將CSS及XHTML校驗(yàn)工具整合在一起，可以點(diǎn)擊此工具中的校驗(yàn)選項(xiàng)對(duì)當(dāng)前頁(yè)面進(jìn)行檢驗(yàn)，它會(huì)自動(dòng)鏈接到相關(guān)校驗(yàn)頁(yè)面，并返回校驗(yàn)結(jié)果。如下圖：

View Source查看源代碼　　用于查看頁(yè)面的源文件。

Options選項(xiàng)　　用于Web Developer 插件的參數(shù)設(shè)置。如下圖：