網頁健康新主張LSM第一課 : 網頁健康環保的新觀念

on 2009年7月10日

這是小正正以前演講推廣過很多次的主題,現在整理出來讓大家都有機會可以免費學習到!

現代的日常生活中不斷聽到要”健康”、要”環保”,不只地球要環保,連自己的身體都要做”體內環保”和瘦身,那麼網頁呢? 是不是也有健康環保的做法? 也有能夠瘦身的特別處方呢? 是的! 對於Web 2.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)、CSS、Javascript和DOM等等可能都是你已經耳熟能詳的東西,只不過在編寫網頁的習慣上要稍做調整。要接受任何新的觀念都不是件容易的事情,也可能會有所懷疑,例如你可能會問說:使用表格排版和標籤來設定文字樣式明明就好好的,為什麼又要搞一套看起來很複雜的CSS出來呢?相信我,當你漸漸熟悉並且能夠駕馭自如的時候,你就會愛上它所帶來的眾多好處了。

LSM 在國外已經行之有年,Yahoo! 和許多大公司的網頁都是使用 LSM 的模式來開發的,為什麼要這樣做、該如何做、有什麼好處?

接下來的是... LSM第二課 : 傳統網頁與現代之比較

0 意見:

張貼留言