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/
作者已經移除這則留言。
回覆刪除學資訊工程本來就要從最簡單的開始學,如果只是想學應用的話,要去讀數位系= =。
回覆刪除@幻影火
回覆刪除數位系也差不了多少,據我所知,我們學校無論是資工還是數位,都不會教這個「把內容與外觀分開」的概念。
這個概念本來就是你要自己去學,老師沒辦法甚麼都教 0.0
刪除有些東西你要自己去主動去學,老師其實無法全部都教XD。
同意
刪除是啊,然後我自己學了,然後才發現老師教的東西都(1)沒教到精華,或是(2)教過時的知識。這就是為什麼我會寫這兩篇「抱怨文」了。
刪除我只希望看到的老師做一件事情,就是請重新檢視一下您教了什麼東西,就這樣子而已。
以前修數位系的網頁設計的時候,會先教HTML,然後教CSS
回覆刪除不過CSS都是用泥土屋(Adobe)的套裝軟體去調整
不記得有沒有特別講內容和外觀分開了
正常的情況老師都不會講 = =,如果每個觀念老師都要講,不知道什麼時候才教得完= =
刪除