第10天筆記CSS文檔統(tǒng)籌

CSS文檔統(tǒng)籌

1）整站里相同的CSS樣式提取到一個(gè)樣式表里，各個(gè)頁(yè)面調(diào)用相同的樣式文件即可。

2）網(wǎng)站較大的情況下一般會(huì)把網(wǎng)站的頭部，尾部單獨(dú)分離出來(lái)，包括樣式文件。

15.1.1 根據(jù)頁(yè)面類型分離文件

15.1.2 根據(jù)功能模塊分離文件

15.1.3 根據(jù)設(shè)備類型分離文件

15.1.4 根據(jù)代碼規(guī)模綜合分離文件

網(wǎng)頁(yè)自身優(yōu)化（如何讓網(wǎng)站被搜索引擎搜索到）：

★頁(yè)面主題優(yōu)化

實(shí)事求是的寫下自己網(wǎng)站的名字，網(wǎng)站的名字要合理，最好包含網(wǎng)站的主要內(nèi)容。

★頁(yè)面頭部?jī)?yōu)化

頁(yè)面頭部指的是代碼中部分，具體一點(diǎn)就是中的“Description（描述）”和“Keywords（關(guān)鍵字）”兩部分：

1、“描述”部分應(yīng)該用近乎描述的語(yǔ)言寫下一段介紹你網(wǎng)站的文字，在這其中，你應(yīng)該適當(dāng)?shù)膶?duì)你網(wǎng)站的特色內(nèi)容加以重復(fù)以求突出；

2、“關(guān)鍵字”部分應(yīng)該列出你認(rèn)為合適的，能突出網(wǎng)站內(nèi)容的關(guān)鍵字就可以了，關(guān)鍵字不要設(shè)置太多，可設(shè)置10---8個(gè)，搜索引擎只會(huì)瀏覽靠前的幾個(gè)關(guān)鍵字。

<meta name="keywords" content="" />向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞； <meta name="description" content=""/>告訴搜索引擎你的站點(diǎn)的主要內(nèi)容；

<meta name="generator" content="">用以說(shuō)明生成工具（如Microsoft FrontPage 4.0）等； <meta name="author"content="你的姓名">告訴搜索引擎你的站點(diǎn)的制作的作者；

★超鏈接優(yōu)化

搜索引擎為何可以能夠索引全世界的網(wǎng)站，是因?yàn)楦鱾€(gè)搜索引擎程序中都有一個(gè)會(huì)自動(dòng)“爬行”于互聯(lián)網(wǎng)上的智能機(jī)器人程序，這個(gè)機(jī)器人就是順著網(wǎng)站之間的鏈接游覽世界的，那么我們就應(yīng)該為它創(chuàng)造一個(gè)良好的爬行通道——合理的設(shè)置鏈接。 怎樣的鏈接才是合理的呢？

1、采用純文本鏈接，少用，最好是別用Flash動(dòng)畫設(shè)置鏈接，因?yàn)樗阉饕鏌o(wú)法識(shí)別Flash上的文字.

許多公司、個(gè)人都喜歡酷酷的Flash動(dòng)畫，網(wǎng)站的入口也做成Flash片斷，，搜索引擎很難光顧這樣的網(wǎng)站。而且個(gè)別設(shè)計(jì)者非常馬虎，把網(wǎng)站的入口鏈接放在了Flash上，有時(shí)因?yàn)榫W(wǎng)絡(luò)繁忙、缺少Flash插件而導(dǎo)致用戶根本就看不到網(wǎng)站的內(nèi)容，

2、按規(guī)范書寫超鏈接，這個(gè)title屬性，它既可以起到提示訪客的作用，也可以讓搜索引擎知道它要去哪里.

3、最好別使用圖片熱點(diǎn)鏈接，理由和第一點(diǎn)差不多。

★圖片優(yōu)化(alt屬性，title屬性)

圖片優(yōu)化并不是修改圖片的大小、顏色，而是你應(yīng)該為每個(gè)標(biāo)簽加上alt屬性，alt屬性的作用是當(dāng)圖片無(wú)法顯示時(shí)以文字作為替代顯示出來(lái)，而對(duì)于SEO來(lái)說(shuō)，它可以令搜索引擎有機(jī)會(huì)索引你網(wǎng)站上的圖片，對(duì)于一些確實(shí)沒(méi)什么意義的圖片，最好也不要省略alt，而應(yīng)該留空，即 alt=""。

★為網(wǎng)站制作一個(gè)“網(wǎng)站地圖”

什么是網(wǎng)站地圖？說(shuō)白了就是一個(gè)頁(yè)面，在這個(gè)頁(yè)面上呢，列出了你網(wǎng)站中各個(gè)欄目的入口地址，例如：http://sitemap.163.com，站點(diǎn)地圖的作用很大，首先，對(duì)于一個(gè)欄目眾多的網(wǎng)站，它可以幫助訪客最快速度找到所需的內(nèi)容；二則，可以給搜索引擎提供一份自己網(wǎng)站的“鳥瞰圖”，方便搜索機(jī)器人依次索引整個(gè)網(wǎng)站。

★PageRank（pr值,友情鏈接）

PR值是Google提出的一個(gè)重要參數(shù)，它標(biāo)明了某個(gè)網(wǎng)站的重要程度，那么pr值是如何確定的呢？目前普通的解釋為：假如有ABC三個(gè)網(wǎng)站，彼此互作友情鏈接，那么當(dāng)一個(gè)訪客通過(guò)A上的友情鏈接來(lái)到B時(shí)，Google就認(rèn)為A為B投了“一票”，同理，如果有人從C訪問(wèn)B，那么B又得一票，如果全世界的網(wǎng)站上都有B的友情鏈接，B就是世界上最重要的網(wǎng)站了！

那么如何提供我們自己的pr值，方法為交換鏈接！應(yīng)該找一些和自己網(wǎng)站內(nèi)容相近，且較為優(yōu)秀的網(wǎng)站，但不要瘋狂的交換鏈接，如果你的首頁(yè)上一下子多了幾百個(gè)友情鏈接，Google不但不會(huì)提升你的pr，有可能認(rèn)為你作弊，從而把該網(wǎng)站從自己的數(shù)據(jù)庫(kù)中刪除.

★靜態(tài)頁(yè)面與動(dòng)態(tài)頁(yè)面

目前所有的SEO都認(rèn)為，Google一類的搜索引擎會(huì)盡量避免索引帶有參數(shù)動(dòng)態(tài)頁(yè)面，而喜歡索引普通的靜態(tài)頁(yè)面，這一點(diǎn)并未得到Google等搜索引擎的明確回答，但從效果來(lái)看是這樣。

畢竟動(dòng)態(tài)頁(yè)面的變數(shù)太大，舉個(gè)例子，你發(fā)了一個(gè)帖子，可能在論壇某板塊的第1頁(yè)上，可隨著跟貼的增加你的發(fā)言可能就被擠到第10頁(yè)上了， 因此，制作網(wǎng)站的時(shí)候，最好避免使用動(dòng)態(tài)頁(yè)面，或者改良技術(shù)，讓動(dòng)態(tài)頁(yè)面自動(dòng)生成對(duì)應(yīng)的靜態(tài)頁(yè)面，既能便于搜索引擎收錄，也可以降低網(wǎng)站服務(wù)器、數(shù)據(jù)庫(kù)負(fù)擔(dān)，一舉兩得，不過(guò)這也不是絕對(duì)的，網(wǎng)站流量決定一切，即便是一個(gè)全部采用動(dòng)態(tài)頁(yè)面的網(wǎng)站，但因?yàn)楹苁軞g迎訪客不斷，那么它還是會(huì)被搜索引擎青睞，還是會(huì)出現(xiàn)在搜索結(jié)果的前列。而且，隨著技術(shù)的進(jìn)步，搜索引擎也會(huì)改進(jìn)，搜索動(dòng)態(tài)頁(yè)面將來(lái)必定會(huì)更加容易。

★避免大“體積”的頁(yè)面

有經(jīng)驗(yàn)標(biāo)明，搜索引擎不喜歡索引大體積的頁(yè)面，即一個(gè)頁(yè)面代碼部分的體積不要太大，控制在100kb內(nèi)為佳.

★最重要的一點(diǎn)！合理的代碼結(jié)構(gòu)

搜索引擎喜歡格式清晰，結(jié)構(gòu)分明的頁(yè)面，理論上XML是最合乎搜索引擎，當(dāng)然，這太極端了，不過(guò)如果采用XHTML+CSS技術(shù)將頁(yè)面數(shù)據(jù)同表現(xiàn)分離，即避免大量嵌套表格和其它冗余的代碼還是能夠完美實(shí)現(xiàn)這一要求的。

原則：簡(jiǎn)化代碼，易修改

二、CSS規(guī)范

1、命名方法（語(yǔ)義化命名，結(jié)構(gòu)化命名）

ID:結(jié)構(gòu)化 header footer

class: .border0 . red: .font12 .clear

2、CSS命名規(guī)則

1）建議使用小寫字母

2）以英文字母開頭，后面可以連接數(shù)字、字母、下劃線、連字符，建議盡量使用英文字母，適當(dāng)使用下劃線和連接線；

3）詞必達(dá)意，名稱要反映用途和相關(guān)信息，同時(shí)也要簡(jiǎn)短。

三、樣式重置

1、規(guī)則設(shè)置

以新浪為例：

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

fieldset, img { border:none; }

img{display: block;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ul, ol { list-style:none; } body { color:#333; font:12px/20px "SimSun","宋體","Arial Narrow",HELVETICA; background:#fff;/ overflow-y:scroll;/ overflow-x:hidden;}

a { color:#666; text-decoration:none; }

a:visited { color:#666; }

a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

2、騰訊

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px "宋體","Arial Narrow",HELVETICA;background:#fff;} a{color:#172c45;text-decoration:none} a:hover{color:#cd0200;text-decoration:underline} em{font-style:normal} li{list-style:none} img{border:0;vertical-align:middle} table{border-collapse:collapse;border-spacing:0} p{word-wrap:break-word} .ind{text-indent:2em} .ind10{text-indent:10px;} .noborder{border:0;}

3、搜狐

body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;} body > div{text-align:center;margin-right:auto;margin-left:auto;} div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;} img,a img{border:0;margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input{font-size:12px;padding:0} / 默認(rèn)鏈接顏色 / a{outline-style:none;color:#333;text-decoration:none} a:hover{color:#c00;text-decoration:underline;}