網頁健康新主張LSM第二課 : 傳統與新時代的網頁製作方法

on 2009年7月10日

這是系列文章,建議您可以先閱讀:


請先隨便開啟一個你以前做過的網頁,檢視原始碼來看看(例如下面這張圖)。在原始碼中會看到一堆用來編排版面用的<table> <tr> <td>,而表格之中又有表格,還有一堆<font>標籤用來設定文字的字體、大小和顏色。這些<table> <tr> <td>和<font>標籤不時穿插在內容文字之間,把主要的內容都打亂了,而光看這些標籤,也很難想像最後的畫面會長什麼樣子,其中還有onClink、onMouseOut等等一大串的Javascript程式碼在裡面。所有東西全部都混雜在一起,如果現在要你修改這一頁的內容,增加刪減一些東西,並且調整版面的編排,而且只能直接編輯原始碼,不能使用像是Dreamweaver這類視覺化的編輯軟體,這時就算是對HTML語法十分熟悉人也會開始皺眉頭。(現在要是小正正看到這樣的網頁就會說: 直接丟到垃圾桶重做吧! 這已經是古代的遺跡了…)

<點圖可以放大來觀看>


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

<點圖可以放大來觀看>


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

<點圖可以放大來觀看>


這就是LSM的做法:將文件內容、樣式和程式分離開來了!當程式設計師要加入ASP、PHP等伺服器端程式碼時,便不會因為一堆<table> <tr> <td>和<font>標籤而感到困擾,怕不小心破壞掉版面和樣式。而當美術設計要重新改版網頁時,也只需要去修改CSS檔案和簡單的HTML,不用怕會動到程式碼而產生錯誤。

接下來的是... LSM第三課 : LSM的優點太多啦!

0 意見:

張貼留言