模板建站動態

　　一般對于頁面上那些包含文章正文或者大段文字的區域，我們一直自然地認為它們應該適應任何篇幅和大小的文字，那么對于登錄、頁頭的信息條、頁面路徑導航條以有搜索條等其他橫向頁面組件我們同樣應該使它們具備這樣的適應性，這就是今天我們要講的網站頁面組件優化。 　　我們要在網站上實現下面的設計，怎么才能優化網站呢? 　　根據以往SEO代碼優化的經驗，我們將通過如下內容闡述： 　　用一系列的嵌套的表格來構造。 　　圖片(例如每行兩端的圓角)和文字處理位于表單元格，使用表格和gif小圖來定位頁面圖文，是一種已經抱怨很久的技術同時也是一種沒有考慮網站優化的技術。大多數web站點都是用這樣的方式來構建的。我們公司在重構以前的主站時遇到了導般欄上的小圓角很難定位，最后采取了表格來固定，然后用include語句包含到文件中。 　　這不是完美的重構，因為有一些地方可以用css簡單定義，卻用了表格，導致臃腫代碼。這并沒有最大地優化了網站。 　　用網站優化的眼光看這種常見方法，它是存在缺點的。 　　1.非必要的圖片(橫行兩端的圓角效果圖也和文本內容一起寫在了頁面代碼中) 　　這些非必要的圖片給搜索引擎的蜘蛛爬行您的網站帶來了麻煩。因為這些本來不必要的圖片出現在頁面代碼中，蜘蛛在檢索網頁時，需要花費一定的時間去過濾這些無關緊要的代碼。同時也增加了網頁的代碼容量，搜索引擎對一個網頁的容量一般是有要求的。 　　2.固定行高如果改變文字處理大小就會發現橫行設計效果被破壞，這不利于網站的維護和修改。 　　3.臃腫的代碼和大多數傳統的web設計方法一樣，這兩行使用了大量的代碼來構建，嵌套的表格會增加相當的冗余HTML代碼。這些臃腫的代碼會耗費服務器空間，塞滿帶寬，當瀏覽者瀏覽網站時可能要等很長的時間，對用戶不友好。 　　下面用css+div同時考慮網站優化來實現上述設計 　　/*CSSDocument*/ 　　#register{ 　　float:left; 　　width:100%; 　　margin:0; 　　padding:0; 　　list-style:none; 　　color:#690; 　　background:#BDDB62url(image/re_bottom.gif)no-repeatbottomleft;//上面組件的下面圓角圖( 　　圓角效果圖是用一些白色階梯狀排列的像素點附在行的每個角來實現的。 　　) 　　} 　　#registera{ 　　text-decoration:none; 　　color:#360; 　　} 　　#reg{ 　　float:left; 　　margin:0px; 　　padding:8px14px; 　　} 　　#find{float:right; 　　margin:0px; 　　padding:8px14px; 　　} 　　#message{ 　　clear:both;//清除#message上的層浮動對#message層的影響 　　font-weight:bold; 　　font-size:110%; 　　color:#FFF; 　　text-align:center; 　　background:#92B91Curl(image/mess_top.gif)no-repeattopleft;//下面組件的上面的圓角圖 　　} 　　#messagep{ 　　margin:0px; 　　padding:8px14px; 　　background:url(image/re_bottom.gif)no-repeatleft;//上面組件的下面的圓角圖 　　} 　　#messagestrong{ 　　text-transform:uppercase;//讓這部分文字顯示為大寫格式 　　} 　　#messagea{ 　　background:url(image/mag_g.gif)no-repeat050%; 　　margin:0px0px0px6px; 　　padding:2px15px; 　　text-decoration:none; 　　font-weight:normal; 　　color:#FFF; 　　} 　　#find{ 　　background:url(image/mag_glass.gif)no-repeat050%;//對齊值為050%水平靠左側垂直方向離行的上邊50%行高的距離(垂直居中) 　　} 　　考慮網站優化來實現上述設計優點： 　　1.代碼結構與設計效果的分離。 　　2.不再有固定不變的高度：文字尺寸增大了，設計效果沒有被破壞。 　　3.#message行中加上第二行文字，不需要設計師們再做任何樣式修改。 　　4.無用代碼減少，代碼容量減少，不僅能加快用戶訪問網站的速度而且減少百度蜘蛛爬行網站的障礙。 　　如果您有什么想法,歡迎一起交流.

培戀網原創版權，網站建設提供網站代運營、模板網站制作轉載請注明出處,本文地址：http://www.gdszrq.com/news/media/75032.html