2012年10月29日 星期一

網頁設計,如何判斷老師會不會教 (2/3)

4. 教你使用 <font> 而不教你 CSS

(這一項的字比較多,所以我分開po一篇文章)

許多舊的網頁相關書籍會教你如何修改網頁字型,大小,或是顏色,可是這些書教的方法是用過時的 <font> 而不是 CSS。我的老師就照著那書,把 <font> 教了下去。

為什麼 <font> 不該教?

在1998年,制定 HTML 標準的機構 W3C 把 <font> 列為 deprecated 標籤,也就是說不建議網頁設計者再使用它。

<font> 標籤設計上有個主要問題,就是它在網頁上放與內容無關的外觀資訊,如果你在 Frontpage 或 Word 上常常修改字型或文字大小, 那麼這些隱藏的外觀資訊將會越來越冗長。這不只檔案大,你未來要修改字型的時候還要再花時間一段一段處理。

這一小段文字就用了 5 個 <font> 標籤,光 face="新細明體" 字樣就出現了 4 次:

<p><font face="新細明體" size="5"><b>我是標題</b></font></p>
<p><font face="新細明體">這是一段用新細明體顯示的文字,<font 
size="+1">放大,<b>加粗</b></font>。</font></p>
<p><font face="新細明體">這一段字還是用新細明體。</font></p>
<p><font face="新細明體">這一段字用新細明體,<font 
face="Arial">but I use Arial as the English font here.
</font> 你發現了什麼?</font></p>

預覽

我是標題

這是一段用新細明體顯示的文字,放大,加粗

這一段字還是用新細明體。

這一段字用新細明體,but I use Arial as the English font here. 你發現了什麼?

解決這種冗餘資料的方法就是把內容與外觀分開 (Separation of content from presentation),而分開的方法就是使用 CSS。 我以下改用 <style> 標籤然後放 CSS 語法在裡面: (需要支援 HTML5 的瀏覽器)

<style type="text/css" scoped="scoped"> body, p { font-family: Arial, '新細明體', PMingLiU, sans-serif; } h1 { font-size: x-large; } em { font-size: larger; font-style: normal; } </style> <h3>我是標題</h3> <p>這是一段用新細明體顯示的文字,<em>放大,<b>加粗</b></em>。 </p> <p>這一段字還是用新細明體。</p> <p>這一段字用新細明體,but I use Arial as the English font here. 你發現了什麼?</p>

預覽

我是標題

這是一段用新細明體顯示的文字,放大,加粗

這一段字還是用新細明體。

這一段字用新細明體,but I use Arial as the English font here. 你發現了什麼?

這種寫法可以把外觀資訊分開,使得網頁的版型與樣式很容易地被修改。這就是為什麼各大網誌要修改外觀,都會使用 CSS 了。

把內容與外觀分開 (Separation of content from presentation)

這個概念很少有電腦老師會教,是因為現今的 Office Word, Excel, Powerpoint 的介面都強調「所見即所得」(WYSIWYG),所見即所得本身不是壞事----它可以讓人快速地開發、設計出作品。可是所見即所得有一個代價是大家看不到的,那就是維護變得困難。上面寫的 <font> 就是其中一個例子,另外一個例子是 ASP.NET:

在 ASP.NET 如果你直接調整控制項的 BackColor, BorderColor 等外觀的屬性,除了 CssClass 以外,都會跟 <font> 一樣將來有維護上的問題。

我用 Office 的習慣

在 Office Word (以及 OO.o Writer) 上面也有類似的功能可以把文件的內容與外觀分開,如下圖

(Word 2003 的樣式選單)
(Word 2007 的樣式選單)
(LibreOffice Writer 的樣式選單)

不過我個人覺得不太好用,所以我自己很少用它。我在寫文件草稿的時候,會習慣先用記事本打字,再複製貼上到 Word 裡去做排版,這樣我打字就不需要特別擔心字型等等的問題了。

參考資料

  • http://newtoypia.blogspot.tw/2009/11/2009.html
  • http://www.htmldog.com/guides/cssbeginner/

8 則留言:

  1. 作者已經移除這則留言。

    回覆刪除
  2. 學資訊工程本來就要從最簡單的開始學,如果只是想學應用的話,要去讀數位系= =。

    回覆刪除
  3. @幻影火
    數位系也差不了多少,據我所知,我們學校無論是資工還是數位,都不會教這個「把內容與外觀分開」的概念。

    回覆刪除
    回覆
    1. 這個概念本來就是你要自己去學,老師沒辦法甚麼都教 0.0
      有些東西你要自己去主動去學,老師其實無法全部都教XD。

      刪除
    2. 是啊,然後我自己學了,然後才發現老師教的東西都(1)沒教到精華,或是(2)教過時的知識。這就是為什麼我會寫這兩篇「抱怨文」了。

      我只希望看到的老師做一件事情,就是請重新檢視一下您教了什麼東西,就這樣子而已。

      刪除
  4. 以前修數位系的網頁設計的時候,會先教HTML,然後教CSS
    不過CSS都是用泥土屋(Adobe)的套裝軟體去調整
    不記得有沒有特別講內容和外觀分開了

    回覆刪除
    回覆
    1. 正常的情況老師都不會講 = =,如果每個觀念老師都要講,不知道什麼時候才教得完= =

      刪除