為什麼這篇css排版觀念鄉民發文收入到精華區：因為在css排版觀念這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者evenwu (EvenWu)看板Web_Design標題Re: [問題] div排版入門書?時...
※ 引述《snownow (雪紋)》之銘言：
: 我是做平面設計的....
: 最近在做公司網頁，我完全沒有css或html的經驗，頂多只會dw丟丟排排而已
: 基本上我html能大致看懂、css會一些基本的外部(大概就只有定body的文字色彩那類的)
: 比較難一點的css多半是先去找範例素材站看，複製過來修改，需要套用在整個網站的就
: 刪掉<style>標籤然後丟進外部檔，不用的就亂扔在<body>之間，所以最後網頁跟外部都
: 一團亂
: 原本我也想捨棄ps切圖跟table排版法，改用div試排
: 但是今天浪費一整天以後完全放棄Orz
: div的排法沒辦法在dw用直覺的圖像方式去做(例如說大小、位置)，造成我很大的障礙
: 尤其是做好背景底圖分塊以後，想在上面加上另外一個文字區塊的時候真的快搞死人了...
: 當然最後整個css外部都被我寫的亂七八糟...Orz
: 這次我做網站，因為時間的關係我大概還是會用table排法，
: 但是我很想學學怎麼寫完整的外部檔...
: 請問有沒有推薦的書或是網站是介紹新手入門div排版的呢？
其實，我本身就是從這裡過來的
甚至比您更誇張
我初學自frontpage 97，1997年
愚蠢的我一直想統一每台電腦的字體大小
於是每一行每一段都得按右鍵去裡面設定字體
雖然達成了目的，但也實在是無知的決定
Photoshop 5.5 第一次出現了針對網路的切割工具與 save for web，1999年
我連table要怎麼寫都不知道就做了一大堆edm
當時不懂事很自豪，可最佳化圖檔...就非常暢秋了
後來也經過泡沫.com時期，學會了DW，2000年
做過soho的人一定知道
一個禮拜要給客戶改完整個版
過一個禮拜，又要改版是很稀鬆平常的事
所以那時DW也算是我吃飯的主要工具
慢慢的，我發現DW可以改成一邊用編輯畫面做事，另一邊可以看html code的變化
終於開始了解table的寫法，以及其他html element的功用，那時2002年了
Phoenix也出了，我竟然才剛學會table排版，並且運用自如XDDD
(Phoenix就是firefox的前身，後來有很長一段時間都用firefox+firebug練css）
一直到2003年，開始blog之後，才大膽試著用css去編排自己的template
其中的痛苦，我最能體會，因為我也是一個完完全全的table排版人
光是要做兩欄版面，就已經非常頭痛...
但是在2009年的今天，我變成了跨平台 css optimization 顧問
我想整理一下身為設計師，在學習中，可能比較痛苦的點：
1. WYSIWYG
所見即所得，css layout 在於自己的環境裡可能沒問題
到別人的環境又不是那麼一回事，所以有人說：
WYSIWGK (http://hlb.yichi.org/blog/2008/04/25/207)
所見天曉得
不談技術優缺的話，WYSIWYG這一點其實用table排版比較容易做到
一下子要設計師拋棄這個武器，說實在，不容易！
另外一個點，是table比較容易做出視覺化的編輯器
然而css編輯器進展到目前為止，仍不夠容易上手
2. 知道工具但不知道原理
設計師不知道工具用了什麼原理，達成拼合的效果。
所以有許多設計師知道自己用的工具叫做Dreamweaver，不然就是photoshop
但並不知道什麼叫做table layout
要學css layout，還得先知道自己做了什麼，實在太要求
3. 一下子要學兩種標記式的語言：html & css
對於視覺生物是很大的負擔
不過幸好是標記語言，而且需要背的東西不多
只是很可能有些相近的東西會搞混在一起
這個就必須花一點時間去分清楚
甚至css與html都分不清楚，就很糟糕了
4. table與CSS排版觀念不同
這個癥結點我很晚才發現，不過也許是table排版跨越到css排版
又要能完整結合創意，最重要的一環：
* table排版，是架構在格子內，無論是設計成什麼樣子，
最後一定是切成一塊塊，最後再像是拼圖般貼起來成為一個版面。
(ok，我也知道有很多例外的狀況，不過似乎多半如此）
* css排版，比較像是photoshop layer的觀念，
設計完版面常常要把layer單獨存成一個個圖檔
最後在版面上，調整位置，與文字一起疊成一個版面。
(對，也是有很多用拼的，但很棒的版面幾乎都是用疊的..而且疊的神乎奇技）
所以一個是拼貼(table)，一個是疊(css) 這樣的差異。
以上幾點講的都是比較貼近設計師會先遇到的問題
我認為先能了解這些會比較好。
然而像是如何拼圖疊圖會比較省空間之類技術性的問題
等以後再去深入了解
到更進階可以研究跨平台的寫法，以及些許css hack
當然如果學的很慢，搞不好css大統一就不用學了（？）
===
以下是我認真想要做的一些事，就趁此機會寫出來，看看回應會有多少好了：
首先我認為自己摸是很苦的事，
但實作仍然是一個很重要的學習管道
雖然市面上的書不少
不過有時候犯了一個小錯，卻找不到問題而頭痛
因此放棄的人大有人在
是不是同樣身為視覺設計師
走過的冤枉路，不應該再重複呢？
是不是應該把這個進步的速度加快呢？
如果我來舉辦一個針對過渡 table 到 css 的聚會
其實也是我一直想做的事，不知道有多少人有興趣？
好處大概是這樣：
有人帶的情況之下，可以盡量先控制好環境
例如選擇對的doctype...比較好的css寫法，先給提示、範例
當場帶寫一些code
先讓大家體會到css與table不同的神奇之處
以及各種指令對應正確的狀況
大家回去練習應該也比較有個標準在
避免產生：「咦，我這樣到底對不對呢？好疑惑阿！」之類的感嘆～
寫了這麼多，不知道有沒有人對此有興趣？
專題：Switch to css design ?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.64.16.123
※ 編輯: evenwu 來自: 210.64.16.123 (06/19 02:17)
推 chph:有 evenwu 必推 06/19 02:19
推 carls:好文&熱心必推 06/19 02:50
推 amaris0401:好文+1!!我也在過渡期中~但有人帶真的會快很多!!推!! 06/19 03:08
推 smallxsmall:推推推推 06/19 07:35
推 ateclean:喔喔喔 好有趣的活動～ 06/19 09:07
推 nightspirit:CSS還是趨勢, 把內容跟設計分開是必要的.. 06/19 09:56
推 skywalking:大推 06/19 09:59
→ evenwu:有興趣的人可以說一下「有興趣」好讓我知道 06/19 11:23
→ evenwu:究竟是純推，還是真的有興趣？好統計一下可能性，thanks 06/19 11:23
推 ateclean:我入門較晚 沒學table排版 不過若有這活動的話很讚^^ 06/19 11:34
推 patrickle:好文 加有興趣...... 06/19 11:48
推 jing007:有興趣 06/19 11:51
→ evenwu:其實沒學過table的人也ok，畢竟這會跳過很多門檻 06/19 11:55
→ evenwu:初次滿10人有興趣我就要來對時間了 06/19 11:56
推 subaru888:有興趣+1 06/19 11:58
推 bbwind:有興趣+2 06/19 13:36
推 andrew43:已經推動七八年的運動，大家都沒有好好update喔！XD 06/19 14:27
推 ckmarkhsu:有興趣! 06/19 14:41
推 fotofolio:dw廢除table排版了沒呀？ 06/19 14:51
→ Kelunyang:DIV排版太進階了，要廢除表格的確有難度XD 06/19 15:46
推 vm3cl4bp6: 06/19 16:17
推 andrew43:多想想視障的朋友，你可以廢掉表格排版。 06/19 16:47
推 aceone:活動網頁很多都表格排的 表格不是萬惡的啊啊啊 06/19 16:50
推 fotofolio:何謂活動網頁@@ 06/19 17:01
推 andrew43:表格被濫用是重點。該用就用，不該用就避免吧。 06/19 17:47
推 aceone:活動網頁：左轉出去8625有說明 活動網頁有的一天就要做出來 06/19 18:04
→ aceone:放個一個禮拜就下架~所以還是表格排比較快 06/19 18:05
推 andrew43:就是指短期廣告的意思嗎？不太懂。 06/19 18:13
推 a0955133:這時候資工系的就該跳出來寫table轉div 06/19 18:55
→ TonyQ:table轉div 就算寫出來也很容易出現幽靈問題... 06/19 19:21
→ TonyQ:要寫出很完善的 sop 不太容易... 06/19 19:22
→ evenwu:阿阿阿，看到23還以為有很多人有興趣，結果歪樓了XD 06/19 20:12
→ evenwu:喜歡table就table，我是完全沒意見。想過渡到css的再來吧 06/19 20:13
推 snownow:我有興趣~不過要做實體聚會的話可能時間地點會很難橋? 06/19 20:16
→ evenwu:很南僑，所以希望每個月或雙月有固定一天聚會 06/19 20:37
→ evenwu:然而第一批會比較重要，因為可以針對問題做進一步需求調查 06/19 20:37
→ evenwu:接著後面再每次改進，最好是每年能夠集結設計師的問題 06/19 20:38
→ evenwu:做一個年報... 針對視覺設計師的，我想真的很少 06/19 20:38
推 nowith:有興趣＋1 !!!! 06/19 20:51
推 aceone:我覺得even大要收報名費耶...人太好了... 06/19 21:22
推 ilake:這個不推不行 06/19 22:32
→ evenwu:初期幾次我確定不收，因為剛開始其實你幫了我整理教材 06/20 00:07
→ evenwu:互相幫助！ 06/20 00:07
→ evenwu:累積到此九個人了...再過幾天看看 06/20 00:09
推 despair96:我也很有興趣..也是從table轉div的呀~ 06/20 00:09
→ evenwu:事實上還要對時間，有八個人以上能對到時間才辦的成 06/20 00:09
→ evenwu:預計先在台北國內 06/20 00:10
推 dryman:那那，我也要報名！ 06/20 00:21
→ evenwu:11 06/20 00:42
推 kewang:有興趣+1 06/20 00:48
推 takumi412:同是switch過來CCS排版的人幫推 ^^ 06/20 02:35
推 LaRue:推 我也想要有人帶...終於解開我的疑惑了 06/20 09:37
→ LaRue:TABLE是拼起來的 CSS是疊出來的... 06/20 09:38
推 IAMTCH:CSS靠經驗學比較適合.個人覺得多看原始碼練習是最快的 06/20 10:45
→ IAMTCH:table比較視覺性.教較容易，CSS比較需要思考.多嘗試 06/20 10:46
推 YUPTT:有興趣加一 06/20 10:52
→ evenwu:14 06/20 11:47
→ evenwu:收集到目前為止約14人有興趣，接下來我必須徵求板主同意 06/20 11:58
→ evenwu:才能繼續發文收集意見，有興趣者可繼續推文 06/20 11:58
→ sujara:興趣+1 台北國好遠qq 06/20 12:22
推 Ramone:興趣+1 06/20 12:46
推 VZA: 有興趣+1 06/20 13:25
推 magichsin:有興趣+1 06/20 14:55
→ evenwu:18人了... ok 該來準備下一步啦 06/20 19:42
推 yenling1108:有興趣+1 06/20 22:07
推 hacker0323:台北現場教學嗎…？對我來說好遠喔… 06/20 23:01
推 newlinuxer:台北好遠喔~>"< 06/20 23:56
→ evenwu:台北國內若有實驗成功，再考慮出國嘍 06/21 02:43
→ evenwu:19 06/21 02:53
推 terrylchen:大部分設計師都是視覺導向的，沒辦法把有形和無形的東 06/21 09:29
→ terrylchen:西之間的關連建立起來，連html都不熟的設計師要學css很 06/21 09:29
→ terrylchen:困難 06/21 09:29
→ terrylchen:原po有心教學很推，但是有沒有想過說不定到時候現場的 06/21 09:31
→ terrylchen:參予者可能連html都不熟，那到時候要怎麼上課... 06/21 09:32
推 snature:很實用耶~ 06/21 14:22
→ evenwu:terrylchen:因為本人就是視覺導向的人，所以... 06/21 14:37
→ evenwu:先期會規劃一個基本的html與css課程(非常基本) 06/21 14:38
→ evenwu:總之先等我post大綱吧 06/21 14:38
推 JusTKurO:CSS 不難 難在他不同瀏覽器讓使用者看到的畫面是相同的 06/21 15:19
→ JusTKurO:希望大大能分享經驗 ... ~ 3Q~ 06/21 15:20
推 pSeRiC:原po好威阿！ 06/21 23:32
推 endlin:有興趣 06/22 00:06
推 chph:很熟練的也可以有興趣嗎? 06/22 00:24
→ evenwu:不可以耶...XD 06/22 05:23
推 a32122:不太懂得也可以參加嗎＝ ＝ 06/22 12:49
推 akou:DW表格魔人可以參加嗎?? 06/22 13:37
推 gogomambo:舉手~我也想學... 06/22 16:30
推 aishideru:我也想學!!!若要開課請通知呀! 06/22 16:42
→ evenwu:歡迎初學者 06/22 16:57
推 s861175:想學+1，開課請務必通知，謝謝。(人在台北國內) 06/22 20:40
推 goodly5:有興趣+1 06/22 21:22
推 chph:期待簡報~可以先公布嗎 :P 06/22 23:07
推 uice:有興趣+1 (境外人士) 06/22 23:52
推 kkuso:有興趣+1 06/23 00:10
推 Memorias:看完了覺得有興趣+1，css只拿來做佈景不太會div也... 06/23 02:01
推 Holocaust123:有興趣+1 06/23 04:08
推 mycutekevin:純推好人版大!! 去不了~"~ 06/23 12:10
推 aceone:很熟CSS的也聚一下嘛 可以交流一下心得/收費標準...etc. 06/23 13:19
→ evenwu:境外人士....XDDDD 其實我也是 我在打虎國 06/24 00:15
推 Holocaust123:幫衝優文數XD 06/24 00:31
推 cadmus22:我尚在學習中..對於ie 6 7 8的不同版面真的很OX~ 06/24 13:55
→ cadmus22:我也有興趣+1 06/24 13:55
推 mayki:有興趣+1~我是很支持css+div的(不過對於不同瀏覽器而頭大中) 06/25 14:25
推 yksg:有興趣 +1 table用很久了~很煩耶 06/25 16:47
推 blueices:有興趣+1 06/26 00:36
推 eonc:有興趣+1 06/26 20:48
推 hermitwhite:我是沒學會table直接就學會DIV的，這樣有沒有必要再回 06/27 10:22
→ hermitwhite:頭學習table的排版方法呢？ 06/27 10:22
推 meltinicicle:有興趣+1 06/27 22:33
推 sdtowmp3:+1，算我一份壓，感恩了! 06/28 23:56
推 Caplus:有興趣+1~ 06/29 00:36
推 akou:請問還有後續嗎？？沒見到原PO在發文呢？？？謝謝～期待 06/30 16:55
推 vgb:我也有興趣耶~~非常~~>////< 07/01 02:46
推 fourmonth:有興趣+1 07/03 15:43
推 beair:有興趣^^ 07/07 12:15
推 pkur:有興趣+1 07/16 14:38
推 sin282:有興趣(A港) 02/18 17:05