SEO網頁設計

辛苦了好多天，我們努力學習使用XHTML+CSS來重新設計我們的網站。那麼我們如何知道自己製作的頁面真的符合web標準？W3C和一些志願者網站提供了在線校驗程式，來幫助我們檢查頁面是否符合標準，並提供了修正錯誤的幫助資訊。這些校驗非常有用，是我調試頁面第一步要做的事情。

1.XHTML校驗

網頁設計佈局初步搭建起來，我開始填充裡面的內容。首先是定義logo圖片：

樣式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

如果我們想在3列佈局的最後加一行頁腳，放版權之類的資訊。就遇到必須對齊3列底部的問題。在table佈局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用div佈局，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以嵌套div，把三列放進一個DIV中，就做到了底部對齊。下面是設計實現例子(白色背景框模擬一個頁面)：

接下來開始要真正設計佈局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統表格方法實現的佈局，用DIV也可以實現。技術有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想像力了。

注：在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不囉嗦了，我們開始：

CSS佈局與傳統表格(table)佈局最大的區別在於：原來的定位都是採用表格，通過表格的間距或者用無色透明的GIF圖片來控制文佈局版塊的間距；而現在則採用層(div)來定位，通過層的margin,padding,border等屬性來控制版塊的間距。

1.定義DIV

分析一個典型的定義div例子：

在了解網頁設計XHTML代碼規範後，我們就要進行CSS佈局。首先先介紹一些CSS的入門知識。如果你已經很熟悉了，可以跳過這一節，

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制，屬於表現層的佈局語言。

在開始正式內容製作之前，我們必須先了解一下web標準有關代碼的規範。了解這些規範可以幫助你少走彎路,儘快通過代碼校驗。

1.所有的標記都必須要有一個相應的結束標記

以前在HTML中，你可以打開許多標籤，例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。例如:

這些技巧主要講meta標籤設置的，其實與符合web標準關係不大，只要注意在最後加"/"關閉標籤就可以，但是既然是入門教程，就寫得詳細一點吧。

收藏夾小圖標

可以看到在收藏夾網址之前的IE圖標變成了本站特別的圖標。要實現這樣效果很簡單，首先製作一個16x16的icon圖標，命名為favicon.ico，放在根目錄下。然後將下面的代碼嵌入head區：

用web標準設計網站，過渡的方法主要是採用XHTML+CSS，css樣式表是必不可少的。這就要求所有網頁設計師必須熟練掌握CSS，如果你以前不常用，那麼現在就開始學習吧。要製作符合web標準的網站，不懂CSS是設計不出漂亮的頁面的。

事實上，所有表現的地方都需要用CSS來實現。我們以前都習慣用table來定位和佈局，現在要改用DIV來定位和佈局。這是思維方式的變化，一開始有些不習慣。呵呵，任何變革都會有阻力的，為了享受標準帶來的"益處"，放棄一些老的傳統做法是值得的。

第三步是定義你的語言編碼

為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言，我們一般使用gb2312(簡體中文)，製作多國語言頁面也有可能用Unicode、ISO-8859-1等，根據你的需要定義。