課堂錄屏12第十二章css統(tǒng)籌

HTML5前端開(kāi)發(fā)第十二章CSS統(tǒng)籌第十二章CSS統(tǒng)籌1）整站里相同的CSS樣式提取到一個(gè)樣式表里，各個(gè)頁(yè)面調(diào)用相同的樣式文件即可。2）網(wǎng)站較大的情況下一般會(huì)把網(wǎng)站的頭部，尾部單獨(dú)分離出來(lái)，包括樣式文件。1、根據(jù)頁(yè)面類(lèi)型分離文件2、根據(jù)功能模塊分離文件3、根據(jù)標(biāo)簽類(lèi)型分離文件4、根據(jù)設(shè)備類(lèi)型分離文件5、根據(jù)代碼規(guī)模綜合分離文件1CSS文檔統(tǒng)籌第十二章CSS統(tǒng)籌1）頁(yè)面主題優(yōu)化實(shí)事求是的寫(xiě)下自己網(wǎng)站的名字，網(wǎng)站的名字要合理，最好包含網(wǎng)站的主要內(nèi)容。2）頁(yè)面頭部?jī)?yōu)化頁(yè)面頭部指的是代碼中部分，具體一點(diǎn)就是中的“Description（描述）”和“Keywords（關(guān)鍵字）”兩部分：2網(wǎng)頁(yè)自身優(yōu)化（如何讓網(wǎng)站被搜索引擎搜索到）第十二章CSS統(tǒng)籌1、“描述”部分應(yīng)該用近乎描述的語(yǔ)言寫(xiě)下一段介紹你網(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è)置108個(gè)，搜索引擎只會(huì)瀏覽靠前的幾個(gè)關(guān)鍵字。<metaname="keywords"content=""/>向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞；<metaname="description"content=""/>告訴搜索引擎你的站點(diǎn)的主要內(nèi)容；<metaname="generator"content="">用以說(shuō)明生成工具（如MicrosoftFrontPage4.0）等；<metaname="author"content="你的姓名">告訴搜索引擎你的站點(diǎn)的制作的作者；第十二章CSS統(tǒng)籌超鏈接優(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)畫(huà)設(shè)置鏈接，因?yàn)樗阉饕鏌o(wú)法識(shí)別Flash上的文字.第十二章CSS統(tǒng)籌許多公司、個(gè)人都喜歡酷酷的Flash動(dòng)畫(huà)，網(wǎng)站的入口也做成Flash片斷，搜索引擎很難光顧這樣的網(wǎng)站。而且個(gè)別設(shè)計(jì)者非常馬虎，把網(wǎng)站的入口鏈接放在了Flash上，有時(shí)因?yàn)榫W(wǎng)絡(luò)繁忙、缺少Flash插件而導(dǎo)致用戶(hù)根本就看不到網(wǎng)站的內(nèi)容，2、按規(guī)范書(shū)寫(xiě)超鏈接，這個(gè)title屬性，它既可以起到提示訪客的作用，也可以讓搜索引擎知道它要去哪里.3、最好別使用圖片熱點(diǎn)鏈接，理由和第一點(diǎn)差不多。第十二章CSS統(tǒng)籌圖片優(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=""。第十二章CSS統(tǒng)籌為網(wǎng)站制作一個(gè)“網(wǎng)站地圖”什么是網(wǎng)站地圖？說(shuō)白了就是一個(gè)頁(yè)面，在這個(gè)頁(yè)面上呢，列出了你網(wǎng)站中各個(gè)欄目的入口地址，例如：，站點(diǎn)地圖的作用很大，首先，對(duì)于一個(gè)欄目眾多的網(wǎng)站，它可以幫助訪客最快速度找到所需的內(nèi)容；二則，可以給搜索引擎提供一份自己網(wǎng)站的“鳥(niǎo)瞰圖”，方便搜索機(jī)器人依次索引整個(gè)網(wǎng)站。第十二章CSS統(tǒ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)站了！第十二章CSS統(tǒng)籌那么如何提供我們自己的pr值，方法為交換鏈接！應(yīng)該找一些和自己網(wǎng)站內(nèi)容相近，且較為優(yōu)秀的網(wǎng)站，但不要瘋狂的交換鏈接，如果你的首頁(yè)上一下子多了幾百個(gè)友情鏈接，Google不但不會(huì)提升你的pr，有可能認(rèn)為你作弊，從而把該網(wǎng)站從自己的數(shù)據(jù)庫(kù)中刪除.第十二章CSS統(tǒng)籌靜態(tài)頁(yè)面與動(dòng)態(tài)頁(yè)面目前所有的SEO都認(rèn)為，Google一類(lèi)的搜索引擎會(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ì)更加容易。第十二章CSS統(tǒng)籌避免大“體積”的頁(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)這一要求的。第十二章CSS統(tǒng)籌原則：簡(jiǎn)化代碼，易修改二、CSS規(guī)范1、命名方法（語(yǔ)義化命名，結(jié)構(gòu)化命名）ID:結(jié)構(gòu)化headerfooterclass:.border0.red.font12.clear3CSS規(guī)范第十二章CSS統(tǒng)籌2、CSS命名規(guī)則1）建議使用小寫(xiě)字母2）以英文字母開(kāi)頭，后面可以連接數(shù)字、字母、下劃線、連字符和特殊字符，建議盡量使用英文字母，適當(dāng)使用下劃線和連接線；3）詞必達(dá)意，名稱(chēng)要反映用途和相關(guān)信息，同時(shí)也要簡(jiǎn)短。第十二章CSS統(tǒng)籌1、規(guī)則設(shè)置1）新浪為例：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;padding:5px0;font:12px/20px"SimSun","宋體","ArialNarrow",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;}第十二章CSS統(tǒng)籌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"宋體","ArialNarrow",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;}第十二章CSS統(tǒng)籌3）、搜狐body{font-family:"\5B8B\4F53","ArialNarrow",HELVETICA;text-align:center;margin:0auto;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,aimg{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;}第十二章CSS統(tǒng)籌子選擇器語(yǔ)法：選擇符1>選擇符2{屬性：屬性值;}作用：只對(duì)選擇符1下的子元素選擇符2起作用;第十二章CSS統(tǒng)籌子選擇器與后代選擇器的區(qū)別①寫(xiě)法不一樣：

后代選擇器的標(biāo)識(shí)為：空格

如：ulli{width:150px;}【ul和li