top
icon-mail-alt phone
X

[網頁設計教學] 網頁健康新概念 Part 1:Layered Semantic Markup ( LSM )

分類 精選文章
發佈日期 2011 , 01 , 28
觀看人數 26853
回應 0

現代的日常生活中不斷聽到要”健康”、要”環保”,不只地球要環保,連自己的身體都要做”體內環保”和瘦身,那麼網頁呢? 是不是也有健康環保的做法? 也有能夠瘦身的特別處方呢? 是的! 對於Web 2.0, Web 3.0來說,要網頁健康環保瘦身又容易編寫和維護的方法就是 LSM。在開頭的第一章裡面會先告訴您什麼是LSM,和以往傳統的網頁寫法有什麼不同,LSM有什麼好處以及該如何去做。


 
Layered Semantic Markup
 
Layered Semantic Markup(縮寫為LSM)並不是一種新的技術或語法,而是網頁製作的一種新做法、新概念。LSM可以讓網頁的內容、外觀樣式和程式邏輯分離,而不是通 通混雜在一個HTML檔案裡面,讓網頁變成容易撰寫、容易維護也容易更新,而且網頁的內容也變的更有結構性、更有意義。LSM也是DHTML十分重要的基 礎,剛好Web 2.0的網站就會需要用到了大量的DHTML動態技術,將網頁中的內容顯示隱藏或變來變去。LSM還有非常多的好處,稍後會再詳加討論。
 
LSM的主要精神就是製作出分層(Layered)、具有語意(Semantic)的標記(Markup),其中分層的意思是將資料、表現和行為分離開來:
 
  • 資料層(Data):也就是網頁的資料內容,而且要使用具有語意的標籤將網頁內容組織起來,不要使用只會影響外觀樣式,但不具有意 義的標籤。包括任何為了美觀而裝飾用的線條和圖形都不應該在這裡出現(像是小圖示、按鈕圖案、分隔線、背景圖等等),這裡只會放置真正和內容有關的圖片和 多媒體(例如:Logo、廣告、產品和新聞的照片)。
     
  • 表現層(Presentation)網頁所呈現出來的樣子,包括了文字樣式、外框線、間距、背景、顏色、修飾性的圖案和圖示。只要完全使用CSS來設定樣式,很輕鬆就能將外觀和資料清楚的分離開來。
     
  • 行為層(Behavior):通常是使用Javascript和DOM來製作的互動行為,像是滑鼠滑過變換影像、動態顯示隱藏內容、彈出視窗、選單和表單檢驗等等。
當這三層都能夠分開沒有混雜在一起,要單獨維護內容資料、樣式或程式碼就變的容易簡單的多,而且比較不會互相影響。
 
LSM並沒有使用什麼特別的新技術,所使用到的HTML(或XHTML)、CSSJavascript和DOM等等可能都是你已經耳熟能詳的 東西,只不過在編寫網頁的習慣上要稍做調整。要接受任何新的觀念都不是件容易的事情,也可能會有所懷疑,例如你可能會問說:使用表格排版 和<font>標籤來設定文字樣式明明就好好的,為什麼又要搞一套看起來很複雜的CSS出來呢?相信我,當你漸漸熟悉並且能夠駕馭自如的時 候,你就會愛上它所帶來的眾多好處了。
 
 
傳統與現代
 
請先隨便開啟一個你以前做過的網頁,檢視原始碼來看看(例如下面這張圖)。在原始碼中會看到一堆用來編排版面用的<table> <tr> <td>,而表格之中又有表格,還有一堆<font>標籤用來設定文字的字體、大小和顏色。這些<table> <tr> <td>和<font>標籤不時穿插在內容文字之間,把主要的內容都打亂了,而光看這些標籤,也很難想像最後的畫面會長什麼樣 子,其中還有onClink、onMouseOut等等一大串的Javascript程式碼在裡面。所有東西全部都混雜在一起,如果現在要你修改這一頁的 內容,增加刪減一些東西,並且調整版面的編排,而且只能直接編輯原始碼,不能使用像是Dreamweaver這類視覺化的編輯軟體,這時就算是對HTML 語法十分熟悉人也會開始皺眉頭。(現在要是小正正看到這樣的網頁就會說: 直接丟到垃圾桶重做吧! 這已經是古代的遺跡了…)
 

 

而依據LSM的做法,寫出來的網頁原始碼會長成像是下面這個樣子。樣 式<style>、程式<script>和主要的內容都各自分開在不同的區塊中,而且HTML只用來標示內容的結構性(例如標 題<h2>、段落<p>、清單<li>),沒有<table>或<font>來擾亂文章內 容的困擾,所有的排版和外觀樣式都交給CSS來負責。這樣的原始碼看起來是不是比較容易瞭解,而且有條理多了呢?

 

 
事實上還可以再更簡潔一點,現在將CSSJavascript都分別儲存在獨立的外部檔案之中,而在HTML裡面只需要一個標籤將能夠將它們 連結進來。這時原始碼裡面就完全只剩下網頁文件的內容了,編輯修改起來便十分容易,而要編輯樣式或程式的時候,也只要開啟獨立的CSSJavascript檔案,裡面就單純的只有CSSJavascript,不再因為所有東西都混雜在一起而難以閱讀、編輯和維護。
 

 
這就是LSM的做法:將文件內容、樣式和程式分離開來了!當程式設計師要加入ASP、PHP等伺服器端程式碼時,便不會因為一 堆<table> <tr> <td>和<font>標籤而感到困擾,怕不小心破壞掉版面和樣式。而當美術設計要重新改版網頁時,也只需要去修改CSS檔案和 簡單的HTML,不用怕會動到程式碼而產生錯誤。
 
 
有語意的標籤:Semantic Markup
 
HTML是由很多標籤組成的文件,每種標籤代表著不同的意義,文件的內容原本只是一堆文字,因為加上了這些標籤以後而變得有結構性而且有意義,像是各種標題、段落、清單、超連結…等等。那麼有語意(Semantic)的標籤是什麼意思呢?而什麼樣的標籤又是沒有語意的呢?
 
舉個例子來說:<i>標籤代表斜體字、<em>代表強調,但是被<i>和<em>標註起來的 文字在瀏覽器中預設都會顯示出斜體字的效果。當你在網頁中看到斜體字時,請問你知道斜體字代表的是什麼意思嗎?這些斜體的文字是重要或是不重要?這時再來 看看斜體字背後所使用的HTML標籤,如果是<em>的話就可以知道這些是”強調”的文字,如果是<i>的話就真的不知道它是否 重要了。
 
再舉一個例子:<h1>和<font size="6"><b>都是顯示出字體加大和粗體字的效果。但使用<h1>標籤一看就知道它代表的是大標題,而< font size="6"><b>只是又粗又大的字,所代表的意義是大標題?中標題?是重要的內容?還是只是為了美觀好看而故意放大文字,這就 不得而知了。因此,<em>和<h1>都是有語意的標籤,它們所代表的意思分別是強調和大標題, 而<i>、<font size="6">和<b>只是將外觀顯示為和一般文字不同,但卻不知道所代表的意思是什麼,就是沒有語意的。
 

 

對於像是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)獨立的外部CSSJavascript檔案,還有寫在CSS中的圖形檔案。如果你將整個網 站所有的樣式都寫在一個CSS檔案裡面,那麼不論網友在你的網站中看了多少頁面,CSS只有在第一次進入網站時會下載而已,不需要每次換頁都重新下載。對 於外部Javascript檔案也是一樣的。
     
  • 減少頻寬、省錢!每個頁面的檔案都變小了(因為少了一堆沒意義的標籤和共用CSSJavascript的關係)、下載的檔案數目變少了(因為快取的關係),網路流量自然就降低。別忘了網路頻寬可都是要花錢租來的呢!
     
  • 頁面呈現的速度較快:很明顯的,檔案小了載入的速度變快,看到頁面的時間就變快。除此之外,傳統的表格排版有一個特性,必須要等到 整個表格完整載入後,瀏覽器才會一次顯示出整個表格的內容,並不會一部份一部份的內容逐漸顯示出來。所以如果頁面中所有的內容都是放在一個表格之中,便要 等到整個頁面完全載入後才會顯示,感覺上從按下超連結換頁後到新內容真正出現的時間就會比較久。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

分類 精選文章
發佈日期 2011 , 01 , 28
觀看人數 26853
回應 0

Leave a reply

名稱
Email
Post
0 Comments