WWW 進化論：如何從「象形」 HTML 提升至「會意」HTML

內容

#1 文章由 **bryanchang** » 08/19/2005 2:19 pm

今天跟幾個台灣的朋友在線上聊天時，碰巧提到 css 與 HTML 的話題。結果發現還是有不少人把 HTML 當成一種排版的語言，這樣硬幹出來的 HTML 通常都很難再利用 css 來進行真正的版面設計。

也因此所謂的 Semantic HTML Markup 其實才是學習 css 與 HTML 的第一步。在這邊有一篇文章對於這種以「會意」為主的 HTML 標示方式，有興趣的朋友可以參考看看：

http://mezzoblue.com/downloads/markupguide/

在看懂之後，還可以來這小考一番：

http://www.simplebits.com/bits/simplequiz/

進藤光 · #2 文章由 **進藤光** » 08/19/2005 3:04 pm

嗚～～～電腦就是這樣，永遠有 K 不完的技術.....
光那個只能【言傳】的 Markup 我就有得 K 了...

#3 文章由 **Alex Tsai** » 08/19/2005 3:08 pm

委實受益匪淺！

最帥天龍 · #4 文章由 **最帥天龍** » 08/19/2005 3:45 pm

bryanchang 寫: http://mezzoblue.com/downloads/markupguide/

在看懂之後，還可以來這小考一番：

http://www.simplebits.com/bits/simplequiz/

但是我看不懂啊

不過我有買The Zen Of CSS Design那本書，內容很不錯。
另外..
http://blog.yam.com/jaceju
這個Blog也有相關的排版介紹。

我認為CSS排版出問題大多都是因為IE不大支援CSS。

最後再扯一下...
http://www.csszengarden.com/
The Zen Of CSS Design這本書主要就是介紹這個網站裡面的各種Design，有空的朋友可以到這裡看一下

現在的人嘛..專門搞IE Only的網站，然後再用表格排版(好像是<td>)，到了其他瀏覽器不會亂跑位或者不能瀏覽才奇怪呢！
CSS是很不錯的技術，而且能夠把網頁容量縮小，進而增加瀏覽速度...所以當然要強力推薦一下

再問一下，老地方的首頁也用表格排版的嗎？雖然有用到CSS，不過看起來好像有用表格...

詹姆士 · #5 文章由 **詹姆士** » 08/20/2005 7:24 am

講到這個.... 小弟寫 Widget 就都是用 CSS 說....
剪一段範例.....

代碼: 選擇全部

<body onload="setup();">
<div id="FrontWindow">
    <div id="topfrostyplaceLogo" onClick="FrostyPlaceLogo.click(event);"></div>
  <div id="topbar">
    <div id="topbarBackground">
      <div id="topbarLeft"></div>
      <div id="topbarMiddle"></div>
      <div id="topbarRight"></div>
    </div>
    <div id="topbarExtender">
      <div id="topbarExtenderLeft"></div>
      <div id="topbarExtenderRight"></div>
    </div>
    <div id="topbarContent">
      <div id="SelectDiv">
        <table>
          <tr>
            <td><span id="frostyplaceSelect0" class="frostyplaceButton"></span></td>
            <td><span id="frostyplaceSelect1" class="frostyplaceButton"></span></td>
            <td><span id="frostyplaceSelect2" class="frostyplaceButton"></span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

有看到一個表格，但是沒有屬性，屬性都在 CSS 裡面，其他都是... DIV
配合 CSS，有近一千行...

這樣 Load 起來會比較快嗎？以現在電腦 + 網路的速度大概感覺不太出來了吧....

不過 CSS 真的很神奇，IE 對 CSS 的支援也一樣多呀，而且也夠用了....
還可以利用 CSS 把 PNG 檔案透明的部份實現喔～ CSS 也藏有很多密技的。

差別在 javascript 能控制的在 IE 跟其他的瀏覽器不一樣囉。

#6 文章由 **bryanchang** » 08/20/2005 7:34 am

詹姆士寫:這樣 Load 起來會比較快嗎？以現在電腦 + 網路的速度大概感覺不太出來了吧....

Semantic HTML markup 的目的是讓資訊與外觀分離，速度上並不見得有何優勢，但是在網站的版面維護上卻大有幫助。上面網友所提的 css Zen Garden 就是個最好的例子。

最帥天龍 · #7 文章由 **最帥天龍** » 08/20/2005 9:43 am

詹姆士寫: 有看到一個表格，但是沒有屬性，屬性都在 CSS 裡面，其他都是... DIV
配合 CSS，有近一千行...

這樣 Load 起來會比較快嗎？以現在電腦 + 網路的速度大概感覺不太出來了吧....

不過 CSS 真的很神奇，IE 對 CSS 的支援也一樣多呀，而且也夠用了....
還可以利用 CSS 把 PNG 檔案透明的部份實現喔～ CSS 也藏有很多密技的。

差別在 javascript 能控制的在 IE 跟其他的瀏覽器不一樣囉。

我記得沒錯的話，以大量重複使用的font標籤與class比起來會有差異的。

然後呢...我在之前推薦的那本書上有看到，外部CSS檔會讓瀏覽器當作快取，進而增加瀏覽速度。

以現在來說，使用者應該是感覺不出來，不過省一點算一點，假如有大量的訪客，那時候流量就真的差多啦！主機也可以減少負擔。

關於IE支援CSS的問題，只要不是專門「搞怪」的新技術，IE應該都可以支援，故CSS目前用來排版應該都可以在主要瀏覽器中正常顯示。

Widget我倒是不清楚，因為沒有接觸過，只知道那是在桌面上的東西而已。

老地方冰果室交流區

WWW 進化論：如何從「象形」 HTML 提升至「會意」HTML

WWW 進化論：如何從「象形」 HTML 提升至「會意」HTML

Re: WWW 進化論：如何從「象形」 HTML 提升至「會意」HTML