現代的日常生活中不斷聽到要”健康”、要”環保”，不只地球要環保，連自己的身體都要做”體內環保”和瘦身，那麼網頁呢? 是不是也有健康環保的做法? 也有能夠瘦身的特別處方呢? 是的! 對於Web 2.0, Web 3.0來說，要網頁健康環保瘦身又容易編寫和維護的方法就是 LSM。在開頭的第一章裡面會先告訴您什麼是LSM，和以往傳統的網頁寫法有什麼不同，LSM有什麼好處以及該如何去做。
-
資料層（Data）：也就是網頁的資料內容，而且要使用具有語意的標籤將網頁內容組織起來，不要使用只會影響外觀樣式，但不具有意 義的標籤。包括任何為了美觀而裝飾用的線條和圖形都不應該在這裡出現（像是小圖示、按鈕圖案、分隔線、背景圖等等），這裡只會放置真正和內容有關的圖片和 多媒體（例如：Logo、廣告、產品和新聞的照片）。
-
表現層（Presentation）：網頁所呈現出來的樣子，包括了文字樣式、外框線、間距、背景、顏色、修飾性的圖案和圖示。只要完全使用CSS來設定樣式，很輕鬆就能將外觀和資料清楚的分離開來。
- 行為層（Behavior）：通常是使用Javascript和DOM來製作的互動行為，像是滑鼠滑過變換影像、動態顯示隱藏內容、彈出視窗、選單和表單檢驗等等。
而依據LSM的做法，寫出來的網頁原始碼會長成像是下面這個樣子。樣 式<style>、程式<script>和主要的內容都各自分開在不同的區塊中，而且HTML只用來標示內容的結構性（例如標 題<h2>、段落<p>、清單<li>），沒有<table>或<font>來擾亂文章內 容的困擾，所有的排版和外觀樣式都交給CSS來負責。這樣的原始碼看起來是不是比較容易瞭解，而且有條理多了呢？
對於像是Yahoo!和Google這樣的搜尋引擎程式來說，它們不管網頁漂不漂亮，只會去 看HTML的內容，當搜尋引擎看到<h1>和<em>這樣的標籤時，可以很清楚的知道這是標題和強調、是比較重要的文字。如果搜 尋關鍵字時剛好有符合這些重要的文字，這個網頁便有比較大的機會被排列到前面幾頁或前幾名，網友會點選到的機會就會比較高。這就是搜尋引擎最佳化 （Search Engine Optimization，簡寫為SEO）很重要的方法之一了！
而對於無障礙網頁（Accessibility）所使用的螢幕閱讀軟體，也會認 得<h1>是標題、<p>是一般內容的段落、<em>是要強調的東西，便能夠很正確的將網頁中的資訊傳達給使用者。 因此不論是SEO或無障礙網頁，使用有語意的HTML標籤都是非常重要的。
既然如此，有哪些標籤是沒有語意、應該避免使用的呢？底下列出這些純粹屬於外觀樣式的標籤應該避免使用：
b, big, hr, i, small, sub, sup, tt
而下列這將些標籤可能將會從HTML的標準規格中移除，也建議不要使用：
basefont, center, dir, font, isindex, menu, s, strike, u
其他沒有列出的標籤，應該依照其所代表的意義來做適當的使用。不要因為只是想要放大文字就用濫用<h1>, <h2>… 哦！應該使用CSS來做樣式排版的效果。
LSM的優點太多啦！
很多人可能會懷疑說：我用表格排版排的好好的，而且好不容易才研究出了一套有效率的切圖和表格排版做法，為什麼又要大費周章的改變自己的工作習慣，使用LSM的方法來製作網頁呢？那是因為小正正還沒告訴你LSM的好處嘛！
-
有效減少檔案大小：去除了一大堆用來排版但和資訊內容毫無關係的<table> <td> <tr>和<font>標籤後，網頁的HTML原始碼不但變得簡潔、可閱讀性高，更重要的是檔案大小也大幅的減少了！若將傳統的 表格排版和CSS排版的頁面比較起來，通常會減少30%-50%的檔案大小。別忘記了CSS樣式檔案還可以多個頁面共用呢！
-
檔案快取：瀏覽器會快取（cache）獨立的外部CSS和Javascript檔案，還有寫在CSS中的圖形檔案。如果你將整個網 站所有的樣式都寫在一個CSS檔案裡面，那麼不論網友在你的網站中看了多少頁面，CSS只有在第一次進入網站時會下載而已，不需要每次換頁都重新下載。對 於外部Javascript檔案也是一樣的。
-
減少頻寬、省錢！每個頁面的檔案都變小了（因為少了一堆沒意義的標籤和共用CSS、Javascript的關係）、下載的檔案數目變少了（因為快取的關係），網路流量自然就降低。別忘了網路頻寬可都是要花錢租來的呢！
-
頁面呈現的速度較快：很明顯的，檔案小了載入的速度變快，看到頁面的時間就變快。除此之外，傳統的表格排版有一個特性，必須要等到 整個表格完整載入後，瀏覽器才會一次顯示出整個表格的內容，並不會一部份一部份的內容逐漸顯示出來。所以如果頁面中所有的內容都是放在一個表格之中，便要 等到整個頁面完全載入後才會顯示，感覺上從按下超連結換頁後到新內容真正出現的時間就會比較久。CSS則能讓一個一個區塊分別顯示，下載多少就先顯示出多 少，網頁內容便會由上而下逐漸出現，坐在那空等待的時間便縮短了很多。
-
樣式風格統一：網站中有很多區域是每個頁面都會出現的，像是頁首頁尾和導覽列，也有很多東西不只在一個頁面中出現。與其將這些會重 複出現的樣式分別寫在每一個頁面裡面，倒不如使用一個共用的外部CSS檔案，不僅能夠減少每一頁的檔案大小，更能夠統一整個網站的樣式風格。若要修改調整 也更方便，只要改一個地方就好，不用每一頁都分別開啟來修改。
-
支援更多裝置，存取性高：除了電腦螢幕以外，CSS本身就支援多種裝置，像是印表機、掌上型裝置、TV等等。依據LSM的做 法，HTML只有資料內容和文件結構，所有的外觀呈現都是由CSS來控制，因此只要針對不同的裝置特性來設計CSS，網頁內容幾乎不用變動，馬上就能夠支 援各種裝置的瀏覽。讓你的網頁在PDA、手機甚至是PS3或Wii上面都能正常瀏覽而且漂漂亮亮的，而又不需要個別去維護好幾份網站，只要切換不同的 CSS就可以了。就算不支援CSS的裝置，還是可以看到HTML和正確的資料內容，讓更多裝置都能夠存取你的網站，成為名符其實的無障礙網頁。
-
改版容易：同樣的道理，因為外觀樣式完全都交給CSS負責，如果網站想要改版改變樣式，只要重新設計共用的CSS檔案即可，不需要將整個網站全部重做，大幅降低了改版所需要的資源和時間。
- 撰寫容易，工作流程順暢：資料庫網頁製作的流程都是先設計好頁面，再交給工程師去套程式。小正正就常常聽到這樣的抱怨：美術設計用 表格排版所製作出來的頁面原始碼十分混亂，工程師要加程式碼進去不僅難度高，而且很容易就會因為少了一個結束的標籤而將整個版面打亂。如果雙方都能夠符合 LSM的做法，那麼HTML原始碼就會乾乾淨淨的只包含資料內容和結構，要加程式碼進去便簡單的多，也不比較不會出錯。再也不會有一堆惱人又看不出所以然 的<table> <td> <tr>和<font>標籤了！
別忘記了還有更重要的一點，只要你使用 LSM 的方式來寫網頁，就自然而然已經做到搜尋引擎最佳化 SEO 囉！想讓網頁排名更前面嗎？LSM 絕對是最簡單、也最省錢就能夠做到 SEO 的方法之一。
文章原始連結 http://www.iyoume.net/profiles/blogs/wang-ye-she-ji-jiao-xue-wang