搜索引擎蜘蛛的工作趨向于線性方式，蜘蛛抓取網(wǎng)頁內(nèi)容的時(shí)候會從上到下依次抓取網(wǎng)頁上的內(nèi)容，越簡單實(shí)用的網(wǎng)頁就越受蜘蛛的喜歡。而在網(wǎng)站興起的初期，網(wǎng)站基本采用框架結(jié)構(gòu)和表格形式來構(gòu)成網(wǎng)頁的基本布局，這使得蜘蛛的線性工作很難抓取網(wǎng)頁的具體內(nèi)容，也很難對網(wǎng)站結(jié)果布局進(jìn)行控制，這不利于搜索引擎優(yōu)化。而在DIV+CSS出現(xiàn)后，改變了這一不利的局面。
隨著網(wǎng)頁標(biāo)記語言的發(fā)展，在HTML基礎(chǔ)上優(yōu)化和改進(jìn)形成了一種新的語言XHTML，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位布局。
DIV+CSS有別于傳統(tǒng)的表格（table）定位方式，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。網(wǎng)站建設(shè)者可以控制某一內(nèi)容在網(wǎng)頁的具體位置和表現(xiàn)形式，靈活度更高。而且對于搜索引擎來說，DIV模塊化的結(jié)構(gòu)是很容易抓取和分析網(wǎng)頁內(nèi)容的。對于內(nèi)容量較大的網(wǎng)站來說，使用DIV+CSS更是必然的選擇。
如圖所示為智者SEO的網(wǎng)站網(wǎng)絡(luò)創(chuàng)業(yè)欄目首頁結(jié)構(gòu)布局，我們可以看到網(wǎng)站整體呈模塊化布局，結(jié)構(gòu)統(tǒng)一。頁面每一行都由3個(gè)DIV層組成，例如創(chuàng)業(yè)點(diǎn)子、站長新聞、酷站推薦這三個(gè)板塊的DIV層分別為居中排列，瀏覽者可以輕松的在網(wǎng)站上找到自己需要的內(nèi)容。在便于收錄的同時(shí)，還可提高用戶體驗(yàn)和網(wǎng)站的頁面瀏覽量，這是其他網(wǎng)站結(jié)構(gòu)難以達(dá)到的效果。由于智者SEO網(wǎng)站DIV+CSS布局代碼較多，下面我們只對DIV+CSS布局原理做一些簡單的分析。
CSS（Cascading Style Sheets，層疊樣式表），用于定義HTML原始的顯示形式，是W3C推出的格式化網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)技術(shù)，是控制DIV網(wǎng)站布局的重要工具。
DIV層相對位置控制代碼如下：
#left{ width：200px；float：left；background-color：#FFF}
#mid{ width：auto；backgrouond：#00FF00；margin：0 230px；border：1px sollid @ 000；}
#right{ width：200px；float：right；background-color；#CCC}
DIV層絕對位置控制代碼如下：
#left{background：#999；width：100px；height：200px；position：absolute；top：0；left：0}
##mid{background：#0CF；height：200px；margin-left：120px；margin-right：120px；}
#right{width：100px；height：200px；position：absolute；background:#693;top:0;right:0}
第一段相對位置控制代碼表示DIV層分別為#left：float向做浮動，寬度為200像素；#mid：位置居中，寬度自動，左邊距為0，左邊距為230像素；#right：float向右浮動，寬度為200像素。這樣就構(gòu)成了一個(gè)三個(gè)DIV層的位置分布，相當(dāng)于上一級DIV層里的左中右布局。
第二段絕對外置控制代碼表示DIV層分別為#left：DIV層距離頁面上邊和左邊都是為0，即置頂靠左，position位置屬性設(shè)置為絕對位置，DIV層寬100像素，高200像素；#mid：DIV層寬200像素，左邊距離120像素，右邊距離120像素；#right：DIV層距離頁面上邊和右邊都為0，即置頂靠右，position位置屬性設(shè)置為絕對位置，DIV層寬100像素，高200像素，這就構(gòu)成了三個(gè)位置固定的DIV層左中右布局。
以下內(nèi)容頁面DIV調(diào)用CSS里的樣式構(gòu)成網(wǎng)站的布局的代碼：
<div id=“left”>創(chuàng)業(yè)點(diǎn)子</div>
<div id=“right”>站長新聞</div>
<div id=“mid”>酷站推薦</div>
經(jīng)過分析DIV+CSS代碼是如何實(shí)現(xiàn)網(wǎng)站結(jié)構(gòu)布局以后，我們對DIV+CSS為何能成為目前主流的網(wǎng)站結(jié)構(gòu)布局方式有了一個(gè)清楚的了解。
1、DIV+CSS使網(wǎng)站內(nèi)容更富有層次和條理性，符合搜索引擎抓取網(wǎng)頁的習(xí)慣。
2、加快頁面載入速度。使用margin和padding代替多余的表格單元和間隔圖片，相對之下，DIV+CSS結(jié)構(gòu)的頁面在代碼的字節(jié)數(shù)比table頁面的小幾倍以上，在table中藥移動1像素的距離就要多出幾行代碼甚至更多，而在DIV+CSS結(jié)構(gòu)中只需改動一下margin或padding的數(shù)值即可實(shí)現(xiàn)。
3、降低服務(wù)器帶寬及流量。雖說現(xiàn)在很多IDC都不限制網(wǎng)站的網(wǎng)絡(luò)流量，但是帶寬都有限制的,CSS樣式表在瀏覽器加載一次后，即可保存在本地而不需要再次加載，對于節(jié)省網(wǎng)站服務(wù)器帶寬有著很大的作用，保證了服務(wù)器在多用戶請求時(shí)的反應(yīng)速度和用戶的流量速度。
4、保持整個(gè)站點(diǎn)視覺的一致性。這點(diǎn)對于提高用戶體驗(yàn)有很大的幫助。用戶不會因?yàn)榱鑱y的網(wǎng)站布局而找到不到自己想要的信息，對于提高網(wǎng)站實(shí)用性也有好處。
5、使網(wǎng)站修改是更有效率、代價(jià)更低。修改使用table來布局的網(wǎng)頁簡直是噩夢，機(jī)會需要重新編寫，而對于DIV+CSS結(jié)構(gòu)的網(wǎng)站，只需要修改CSS樣式表里的一些數(shù)據(jù)就行了，這大大提高了網(wǎng)站修改和改版的效率。
DIV+CSS是網(wǎng)頁標(biāo)記語言的一大進(jìn)步，它使網(wǎng)站結(jié)構(gòu)布局變得簡單，也使搜索引擎內(nèi)容抓取變得容易。作為一個(gè)合格的SEOer，應(yīng)該了解DIV+CSS的使用，對于網(wǎng)站內(nèi)部的優(yōu)化才更得心應(yīng)手。
|
搜索引擎友好的DIV+CSS結(jié)構(gòu)
發(fā)布時(shí)間：2015.08.07 瀏覽:
次
0
贊一個(gè)
文章來源：智者SEO
文章標(biāo)題：搜索引擎友好的DIV+CSS結(jié)構(gòu)
本文地址：http://www.szbingri.com/SEOjishu/webnbyh/128.html
版權(quán)所有 ©智者SEO（微信/QQ：zhizheseo/2052048546），歡迎分享本文，轉(zhuǎn)載請保留出處！ 
