XHTML+CSS布局中兼顧SEO的兩點(diǎn)建議

時(shí)間：2022-08-16 19:33:02 | 來(lái)源：建站知識(shí)

時(shí)間：2022-08-16 19:33:02 來(lái)源：建站知識(shí)

XHTML+CSS布局模式因其表現(xiàn)和內(nèi)容相分離，提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率，代碼簡(jiǎn)潔、提高頁(yè)面瀏覽速度，易于維護(hù)和改版等眾多優(yōu)點(diǎn)而在廣泛地被人們所接受。以下筆者結(jié)合手機(jī)商務(wù)類(lèi)網(wǎng)站，對(duì)XHTML+CSS布局中兼顧SEO進(jìn)行一些總結(jié)，希望能給站長(zhǎng)同仁一些有益的參考。

一、做好網(wǎng)頁(yè)的架構(gòu)分析工作，是設(shè)計(jì)好網(wǎng)頁(yè)的前提

一個(gè)擁有高訪(fǎng)問(wèn)量的網(wǎng)站是成功網(wǎng)站的一個(gè)衡量因素，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)要根據(jù)主題的不同進(jìn)行合理的板式選擇和色彩配，將網(wǎng)站要達(dá)到的宣傳效應(yīng)通過(guò)合理搭配而構(gòu)成的美麗頁(yè)面來(lái)吸引客戶(hù)的興趣，促使他們來(lái)訪(fǎng)問(wèn)我們的網(wǎng)站。

第一，分析頁(yè)面板式架構(gòu)

“手機(jī)商務(wù)網(wǎng)站”主要以網(wǎng)上宣傳新款手機(jī)和銷(xiāo)售為主，這種類(lèi)型網(wǎng)站的特點(diǎn)就是主要讓人感覺(jué)到商品豐富而又美麗大方此在選擇色彩是主要以藍(lán)色、綠色為主，小圖標(biāo)、小按鈕、邊框線(xiàn)等點(diǎn)綴小圖形以紅、橙為主，顯得頁(yè)面絢麗多彩、活潑、大方，視覺(jué)沖擊力較強(qiáng);另外，“手機(jī)商務(wù)網(wǎng)站”主頁(yè)面主要包括網(wǎng)站BANNER、導(dǎo)航欄、站內(nèi)搜索、新產(chǎn)品圖片宣傳、最新新聞、網(wǎng)站服務(wù)、產(chǎn)品信息、版權(quán)信息等。

第二，分析頁(yè)面排版架構(gòu)

整個(gè)網(wǎng)頁(yè)的框架比較簡(jiǎn)單，包括Banner圖片、導(dǎo)航條、搜索欄、頁(yè)面主體及版權(quán)信息等。因此，采用了基本的網(wǎng)頁(yè)框架結(jié)構(gòu)。清晰準(zhǔn)確的架構(gòu)設(shè)計(jì)是下一步布局的基礎(chǔ)和關(guān)鍵。

第三，依據(jù)XHTML+CSS布局網(wǎng)頁(yè)的模式特點(diǎn)實(shí)現(xiàn)頁(yè)面各模塊的制作，凸顯布局優(yōu)勢(shì)

頁(yè)面的整體框架有了大體設(shè)計(jì)之后，對(duì)各個(gè)模塊進(jìn)行分別的處理，最后再統(tǒng)一整合，這是設(shè)計(jì)制作網(wǎng)站的通常步驟，養(yǎng)成良好的設(shè)計(jì)習(xí)慣便可熟能生巧。

1、利用DIV標(biāo)記對(duì)頁(yè)面進(jìn)行分塊，確定好各塊以及子塊之間的關(guān)系依據(jù)前邊分析的排版結(jié)構(gòu)對(duì)頁(yè)面進(jìn)行分塊，另外制作過(guò)程注意利用注釋語(yǔ)句，以便讓頁(yè)面代碼清晰、易讀。

2、定義CSS樣式實(shí)現(xiàn)對(duì)各塊效果的設(shè)計(jì)與美化

頁(yè)面各模塊劃分好之后，接下來(lái)就是定義CSS樣式對(duì)其進(jìn)行定位和美化工作了，具體操作之前先做好整個(gè)網(wǎng)站的樣式分析與規(guī)劃工作，這是有效使用CSS樣式表的前提。

1)對(duì)整個(gè)網(wǎng)站中要用到的CSS樣式表進(jìn)行統(tǒng)一規(guī)劃。從網(wǎng)站效果一致性原則出發(fā)，對(duì)整個(gè)網(wǎng)站的樣式進(jìn)行系統(tǒng)的分析和規(guī)劃，詳細(xì)羅列各樣式的名稱(chēng)和樣式內(nèi)容。特別要善用屬性簡(jiǎn)寫(xiě)，盡可能地減少冗余代碼，例如：

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

2)統(tǒng)一規(guī)劃CSS樣式的應(yīng)用范圍。對(duì)網(wǎng)站中各個(gè)頁(yè)面都要使用的樣式效果(例：各頁(yè)面中的普通文本信息采用統(tǒng)一的大小、字體、行高、顏色等)統(tǒng)一定義在外部樣式表文件中，方便各頁(yè)面的調(diào)用，而對(duì)某個(gè)頁(yè)面中要單獨(dú)使用的效果則以?xún)?nèi)嵌式樣式表的形式直接在相應(yīng)頁(yè)面中進(jìn)行定義。

3)基于SEO的樣式命名規(guī)范

搜索引擎是通過(guò)抓取網(wǎng)站源代碼來(lái)進(jìn)行親密接觸的，如何才能更好地讓搜索引擎的爬蟲(chóng)更快更準(zhǔn)確地覺(jué)察到網(wǎng)站內(nèi)容的相關(guān)性，增強(qiáng)網(wǎng)站的搜索優(yōu)化?可能從最基本的命名規(guī)則入手會(huì)有意想不到的收獲，下面從前端設(shè)計(jì)的角度整理了一些常用的命名規(guī)則，就很好地考慮到了搜索引擎的喜好，在頁(yè)面設(shè)計(jì)的過(guò)程中，盡量做到讓搜索引擎明白，從而達(dá)到我們的設(shè)計(jì)目標(biāo)。

3、對(duì)頁(yè)面效果進(jìn)行整體調(diào)整，保證頁(yè)面的協(xié)調(diào)和美觀

經(jīng)過(guò)上邊的步驟頁(yè)面已經(jīng)基本成形，在制作完成的最后，往往還需要對(duì)頁(yè)面根據(jù)效果做一些細(xì)節(jié)上的調(diào)整。例如各個(gè)塊之間的Padding和Margin的值是否與整體頁(yè)面協(xié)調(diào)，各個(gè)子塊之間是否協(xié)調(diào)統(tǒng)一等等。另外對(duì)于固定寬度且居中的板式，需要考慮給頁(yè)面添加背景，以適合大顯示器的用戶(hù)使用等。

二、考慮瀏覽器兼容處理，保障不同的用戶(hù)查看到最好的頁(yè)面效果

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，經(jīng)常碰到在IE中制作的頁(yè)面換到Firefox預(yù)覽時(shí)，發(fā)現(xiàn)頁(yè)面效果變化很大。針對(duì)這樣的問(wèn)題，我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)就要進(jìn)行相應(yīng)的處理。常用的方法有：從空白頁(yè)面開(kāi)始，每做一小步，就同時(shí)在各種瀏覽器中查看，一旦發(fā)現(xiàn)顯示效果不同，立即查找原因，尋找解決辦法;也可以通過(guò)軟件工具模擬網(wǎng)頁(yè)在各種不同的瀏覽器中的效果，例如目前大家用的IETester v0.2.3，這樣可以邊做邊修改;另外，大家在制作過(guò)程中要善于總結(jié)一些經(jīng)常出問(wèn)題的標(biāo)記的處理辦法。例如：邊界重合時(shí)利用padding或border來(lái)避免。您可能會(huì)為了一點(diǎn)不應(yīng)該出現(xiàn)的空間而焦頭爛額，或者您需要一點(diǎn)點(diǎn)空間時(shí)，怎樣都擠不出來(lái)，如果您有用到margin，那么很容易產(chǎn)生邊界的重合。又如有時(shí)候某些錯(cuò)誤會(huì)使50%+50%成為100.1%，使網(wǎng)頁(yè)出現(xiàn)問(wèn)題，這時(shí)請(qǐng)嘗試將這些值改為49%，甚至49.9%，往往這樣的做法才解決了問(wèn)題等等。

本文來(lái)自中華論文中心(www.zhonghualunwen.com)轉(zhuǎn)載請(qǐng)標(biāo)示!謝謝!