XHTML+CSS布局中兼顧SEO的兩點建議

 

　　XHTML+CSS配置模式因其表現和內容相分離，提高搜尋引擎對網頁的索引效率，代碼簡潔、提高頁面瀏覽速度，易於維護和改版等眾多優點而在廣泛地被人們所接受。以下筆者結合手機商務類網站，對XHTML+CSS布局中兼顧SEO進行一些總結，希望能給站長同仁一些有益的參考。

　　一、做好網頁的架構分析工作，是設計好網頁的前提

　　一個擁有高訪問量的網站是成功網站的一個衡量因素，我們在設計網頁時要根據主題的不同進行合理的板式選擇和色彩配，將網站要達到的宣傳效應通過合理搭配而構成的美麗頁面來吸引客戶的興趣，促使他們來訪問我們的網站。

　　第一，分析頁面板式架構

　　“手機商務網站”主要以網上宣傳新款手機和銷售為主，這種類型網站的特點就是主要讓人感覺到商品豐富而又美麗大方此在選擇色彩是主要以藍色、綠色為主，小表徵圖、小按鈕、邊框線等點綴小圖形以紅、橙為主，顯得頁面絢麗多彩、活潑、大方，視覺衝擊力較強;另外，“手機商務網站”首頁面主要包括網站BANNER、導覽列、站內搜尋、新產品圖片宣傳、最新新聞、網站服務、產品資訊、著作權資訊等。

　　第二，分析頁面排版架構

　　整個網頁的架構比較簡單，包括Banner圖片、導航條、搜尋欄、頁面主體及著作權資訊等。因此，採用了基本的網頁架構結構。清晰準確的架構設計是下一步布局的基礎和關鍵。

　　第三，依據XHTML+CSS布局網頁的模式特點實現頁面各模組的製作，凸顯布局優勢

　　頁面的整體架構有了大體設計之後，對各個模組進行分別的處理，最後再統一整合，這是設計製作網站的通常步驟，養成良好的設計習慣便可熟能生巧。

　　1、利用DIV標記對頁面進行分塊，確定好各塊以及子塊之間的關係依據前邊分析的排版結構對頁面進行分塊，另外製作過程注意利用備註陳述式，以便讓頁面代碼清晰、易讀。

　　2、定義CSS樣式實現對各塊效果的設計與美化

　　頁面各模組劃分好之後，接下來就是定義CSS樣式對其進行定位和美化工作了，具體操作之前先做好整個網站的樣式分析與規劃工作，這是有效使用CSS樣式表的前提。

　　1)對整個網站中要用到的CSS樣式表進行統一規劃。從網站效果一致性原則出發，對整個網站的樣式進行系統的分析和規劃，詳細羅列各樣式的名稱和樣式內容。特別要善用屬性簡寫，儘可能地減少冗餘代碼，例如：

　　margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以寫成這樣的格式：margin:0 10px。

　　2)統一規劃CSS樣式的應用範圍。對網站中各個頁面都要使用的樣式效果(例：各頁面中的普通文本資訊採用統一的大小、字型、行高、顏色等)統一定義在外部樣式表檔案中，方便各頁面的調用，而對某個頁面中要單獨使用的效果則以內嵌式樣式表的形式直接在相應頁面中進行定義。

　　3)基於SEO的樣式命名規範

　　搜尋引擎是通過抓取網站原始碼來進行親密接觸的，如何才能更好地讓搜尋引擎的爬蟲更快更準確地覺察到網站內容的相關性，增強網站的搜尋最佳化?可能從最基本的命名規則入手會有意想不到的收穫，下面從前端設計的角度整理了一些常用的命名規則，就很好地考慮到了搜尋引擎的喜好，在頁面設計的過程中，盡量做到讓搜尋引擎明白，從而達到我們的設計目標。

　　3、對頁面效果進行整體調整，保證頁面的協調和美觀

　　經過上邊的步驟頁面已經基本成形，在製作完成的最後，往往還需要對頁面根據效果做一些細節上的調整。例如各個塊之間的Padding和Margin的值是否與整體頁面協調，各個子塊之間是否協調統一等等。另外對於固定寬度且置中的板式，需要考慮給頁面添加背景，以適合大顯示器的使用者使用等。

　　二、考慮瀏覽器安全色處理，保障不同的使用者查看到最好的頁面效果

　　在設計網頁時，經常碰到在IE中製作的頁面換到Firefox預覽時，發現頁面效果變化很大。針對這樣的問題，我們在設計網頁時就要進行相應的處理。常用的方法有：從空白頁面開始，每做一小步，就同時在各種瀏覽器中查看，一旦發現顯示效果不同，立即尋找原因，尋找解決辦法;也可以通過軟體工具類比網頁在各種不同的瀏覽器中的效果，例如目前大家用的IETester v0.2.3，這樣可以邊做邊修改;另外，大家在製作過程中要善於總結一些經常出問題的標記的處理辦法。例如：邊界重合時利用padding或border來避免。您可能會為了一點不應該出現的空間而焦頭爛額，或者您需要一點點空間時，怎樣都擠不出來，如果您有用到margin，那麼很容易產生邊界的重合。又如有時候某些錯誤會使50%+50%成為100.1%，使網頁出現問題，這時請嘗試將這些值改為49%，甚至49.9%，往往這樣的做法才解決了問題等等。

　　本文來自中華論文中心(www.zhonghualunwen.com)轉載請標示!謝謝!