對一個現有的網頁進行mtml結構、佈局分析，css的引用、跟蹤是件繁瑣頭疼的事，即使是功能全面、笨重的dw也是力不從心，即使是網頁作者也會暈頭轉向。今天我們用ie8自帶的一項功能“開發人員工具”來分析一個現有網頁，它非常符合人類認識解決複雜問題的思維方式：自上而下、劃分模塊、層層分解。
Ie的開發人員工具是什麼？網上已把它炒得火熱了：他的前身是IE WebDeveloper，現在已經集成到ie8了，它允許直接地在瀏覽器窗口中瀏覽、傳輸和更新HTML DOM，可以實時分析網頁並且顯示爲一種允許你察看錶格風格、Javascript腳本，表格以及其它網頁元素的樹形風格。該軟件還可以在瀏覽器中交互式地突出顯示被選擇的網頁元素，因此你可以在實際網頁中定位其代碼。 查看style元素，定位div等等。
現在我們選擇蠟筆同步網站的主頁作爲分析對象，選擇它只是因爲它大小合適以及佈局元素較多。
打開蠟筆同步網站的主頁，按F12即可調出“開發人員工具”，HTML是默認的選項卡，每當新打開一個網頁，網頁的源代碼就以DOM樹的形式在其中展示。點擊最左邊的+號，可以展開/收縮該DOM元素
以下僅從網頁結構、佈局角度分析html元素，至於元素對應的css暫不涉及，因爲我們從html元素的外觀即可大致瞭解其css規則。
1、網頁分爲兩大部分<div id="wrapper">和<div class="footer-ctn">
2、<div id="wrapper">被分爲三部分:頭部、廣告banner、主題。<div class=banner-shadow>僅起間隔作用
3、頭部<div class="header-ctn">塊放置了一個通欄背景，主要內容在<div id=”header”>塊中，含有網站logo、註冊登錄表單。
4、廣告<div class=”banner”>塊塊放置了一個通欄背景圖、一個鏈接列表、一個下載鏈接。
5、主題內容部分<div class="content clearfix">，包含3個主題塊--“品牌”<div class="content-item">、“手機版”<div class="content-item">、“電腦板”<div class="content-item">.
“品牌”主題塊<div class=”content-item”>下綠色框div組成4個圓角，藍色<ul class="phone-brand">塊組成各品牌鏈接：<li class="phone-apple">蘋果，....
<div class="content-item">和<div class="content-item content-item-last">塊功能相仿。
6、 footer部分包含了網站地圖、版權、友情鏈接，對應綠、藍、紅3個色塊
通過以上分析我們對該網頁的佈局、結構就有了一個清晰的總體上的把握。同時我們注意到該網頁的設計思路清晰、模塊化好、層次分明，沒有多餘的廢話（元素），分析中沒有造成我們困擾的地方，值得讚賞。