利用ie8開發人員工具分析網頁布局執行個體

        對一個現有的網頁進行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">

 

650) this.width=650;" title="lbfx-1.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230015b-0.jpg" />

650) this.width=650;" title="lbfx-2.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230044E-1.jpg" />

 

    2、<div id="wrapper">被分為三部分:頭部、廣告banner、主題。<div class=banner-shadow>僅起間隔作用

 

650) this.width=650;" title="lbfx-3.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123004X7-2.jpg" />

650) this.width=650;" title="lbfx-4.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123003P6-3.jpg" />

 

    3、頭部<div class="header-ctn">塊放置了一個通欄背景，主要內容在<div id=”header”>塊中，含有網站logo、註冊登入表單。

 

650) this.width=650;" title="lbfx-5.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123002244-4.jpg" />

 

650) this.width=650;" title="lbfx-6.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123004526-5.jpg" />

 

    4、廣告<div class=”banner”>塊塊放置了一個通欄背景圖、一個連結清單、一個下載連結。

 

650) this.width=650;" title="lbfx-7.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230014Z-6.jpg" />

650) this.width=650;" title="lbfx-8.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230061V-7.jpg" />

 

5、主題內容部分<div class="content clearfix">，包含3個主題塊--“品牌”<div class="content-item">、“手機版”<div class="content-item">、“電腦板”<div class="content-item">.

650) this.width=650;" title="lbfx-9.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123005A0-8.jpg" />

“品牌”主題塊<div class=”content-item”>下綠色框div組成4個圓角，藍色<ul class="phone-brand">塊組成各品牌連結：<li class="phone-apple">蘋果，....

 

 

650) this.width=650;" title="lbfx-10.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230043M-9.jpg" />

650) this.width=650;" title="lbfx-11.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230053J-10.jpg" />

<div class="content-item">和<div class="content-item content-item-last">塊功能相仿。

 

6、 footer部分包含了網站地圖、著作權、友情連結，對應綠、藍、紅3個色塊

650) this.width=650;" title="lbfx-12.jpg" src="http://www.bkjia.com/uploads/allimg/131228/11230021T-11.jpg" />

650) this.width=650;" title="lbfx-13.jpg" src="http://www.bkjia.com/uploads/allimg/131228/1123003300-12.jpg" />

 

通過以上分析我們對該網頁的布局、結構就有了一個清晰的總體上的把握。同時我們注意到該網頁的設計思路清晰、模組化好、層次分明，沒有多餘的廢話元素），分析中沒有造成我們困擾的地方，值得讚賞。

 

本文出自 “劉工物語” 部落格，請務必保留此出處http://liuzhenyao.blog.51cto.com/7642920/1286610