[打屁] 網頁排版

[YIHUYAGNIA (趴地牙)]

目前製作網頁主要有兩種排版方式，

一種是「表格式排版法」，
使用<table> </table>這個語碼畫格線把網頁排出來，
堪稱趕時間的時候還不錯用的排版法，
製作上來說稱得是簡單快速又直截，
多數人學網頁排版都是從這招起家。

然<table> </table>這個語碼當初並不是設計出來做排版用，
最原始的用途就是畫表格，做比較圖表之類用，
使用表格式排版法最大的缺點，
網頁往往在層層設計包裹後，變得相當笨重，
讀取速度上自然大受影響，
並且較不利於搜尋引擎最佳化（SEO ）。


另外一種我擅自稱作「CSS 排版法」，
正式的中文名稱牙還不太確定，
試圖用簡單的概念解釋，
在空白的網頁上畫上一個一個的圖層（<div id="wrapper">, ...之類語碼），
然後設定「CSS 的參數」，設定圖層的位置與先後順序，
比較起<table><tr><td></td></tr></table> ，
<div> </div>的層層包裹，顯得輕盈許多，
再加上CSS 的參數可以另存.css檔，與網頁本身分離，
本身網頁html檔自然更是輕量化不少，
讀取速度也會比較快，並且有利於SEO 。

牙目前就在努力看書自學這種排版技巧，
以前在學期間，也未過老師開課教這個，
都嘛是從表格式排版法開始，上一上一學期就過去了…orz

進公司後，發現連最資深的工程師也是用表格式排版法，
而且還非常懶惰遵守W3C 標準規則（相容大多數瀏覽器），
常常開了頭<tr>，然後懶得結尾 </tr>，
或是<img src="logo.jpg" alt="公司名稱">懶得加上alt 說明語碼。

在一些瀏覽器上（如最自我的IE瀏覽器），
懶惰作法的確是還可以看得到，
然跑到背後的錯誤訊息台（如Firefox 瀏覽器有提供，
很明顯地可以看到一堆錯誤訊息。

拉拉雜雜講了一堆，其實只是想要說…
「牙卡關了…（痛哭）」

雖然概念上是約莫曉得，不過就像是堆蛋糕一樣層層給他堆上去，
可是這邊動一下float ，那邊position整個網頁就整個亂掉了，
坐在我背後辦公桌的資深工程師很好心地探頭過來想幫忙，
但我已經沒力氣講解什麼是CSS 排版法給他聽了～orz

公司裡頭也就只有我一個人在學這個，
SEO 的概念還是我進了公司之後，才有被公司重視～XD

喵的，臭IE，沒事幹嘛不跟著大夥兒的標準走，
非得要創新自己的標準，然後偏偏台灣多數的使用者多用IE～=w=
國外又一堆人用Firefox 或是Safari～=w=

（滾來滾去）

實在不敢把問題丟到網頁設計版去，
用肚臍想也知道我的問題很基本～=.=
身為一個有自尊的網頁設計師，
一定可以找出問題解決的！>.</

http://cn.y5works.com/sitemap.html

這個頁面在Ie和Firefox 跑起來不一樣（掀桌），
猜想應該是margin之類 CSS參數設定的影響，

總而言之，明天再來弄，我想洗澡睡覺了～orz

據說明天下午要校外教學，小小期待～：）


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 114.45.210.85
推 jason2506:CSS標準不一真的滿討厭的....
→ jason2506:前陣子有聽過Y!工程師來介紹YUI, 似乎可以解決這種問題
→ jason2506:http://josephj.com/entry.php?id=187
→ iFEELing:沒救的 怎麼解釋css tag還是依browser實作為主
→ jason2506:怎麼說還是能夠盡量減少瀏覽器間的誤差吧?
推 ngulin0911:網頁要在不同瀏覽器跑，通常要放不同的CODE對應
→ ngulin0911:話說標準不一樣是因為還沒有人打贏吧..打贏了就會一樣
→ iFEELing:世事難料啊...
推 niewolf:哪邊不一樣阿...我剛怎麼覺得兩個好像都差不多@@囧
推 asimon:有寫動態網頁的要注意SQL injection唷!! 今天學弟Demo
→ asimon:又嚇死一堆人了 我想回去應該會有人拔網路線 XDa
→ Draculalu:我是table派的 不過結束語法一定會加
→ Draculalu:早年的CGI留言板有些沒有做得很完善 忘了/tr就糗大了
→ Draculalu:會讓那一行以下通通被怪獸吃掉 只有管理權有些也會無解
→ Draculalu:CSS我大學有嘗試玩過 不過實在是完全不對我的胃口
→ Draculalu:不要說放到每家瀏覽器上不見得相同了
→ Draculalu:那時候的編輯器自己都會錯亂 預覽跟實際run出來是兩回事