PTT數位生活區 / Web_Design

Re: [問題] div排版入門書? (設計師不易學CSS的分析

看板Web_Design作者 (EvenWu)時間15年前 (2009/06/19 02:13), 編輯推噓75(75推 0噓 42→)
留言117則, 67人參與, 最新討論串1/1
※ 引述《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)
推
06/19 02:19, , 1F
有 evenwu 必推
06/19 02:19, 1F
推
06/19 02:50, , 2F
好文&熱心必推
06/19 02:50, 2F
推
06/19 03:08, , 3F
好文+1!!我也在過渡期中~但有人帶真的會快很多!!推!!
06/19 03:08, 3F
推
06/19 07:35, , 4F
推推推推
06/19 07:35, 4F
推
06/19 09:07, , 5F
喔喔喔 好有趣的活動～
06/19 09:07, 5F
推
06/19 09:56, , 6F
CSS還是趨勢, 把內容跟設計分開是必要的..
06/19 09:56, 6F
推
06/19 09:59, , 7F
大推
06/19 09:59, 7F
→
06/19 11:23, , 8F
有興趣的人可以說一下「有興趣」好讓我知道
06/19 11:23, 8F
→
06/19 11:23, , 9F
究竟是純推，還是真的有興趣？好統計一下可能性，thanks
06/19 11:23, 9F
推
06/19 11:34, , 10F
我入門較晚 沒學table排版 不過若有這活動的話很讚^^
06/19 11:34, 10F
推
06/19 11:48, , 11F
好文 加有興趣......
06/19 11:48, 11F
推
06/19 11:51, , 12F
有興趣
06/19 11:51, 12F
→
06/19 11:55, , 13F
其實沒學過table的人也ok，畢竟這會跳過很多門檻
06/19 11:55, 13F
→
06/19 11:56, , 14F
初次滿10人有興趣我就要來對時間了
06/19 11:56, 14F
推
06/19 11:58, , 15F
有興趣+1
06/19 11:58, 15F
推
06/19 13:36, , 16F
有興趣+2
06/19 13:36, 16F
推
06/19 14:27, , 17F
已經推動七八年的運動，大家都沒有好好update喔！XD
06/19 14:27, 17F
推
06/19 14:41, , 18F
有興趣!
06/19 14:41, 18F
推
06/19 14:51, , 19F
dw廢除table排版了沒呀？
06/19 14:51, 19F
→
06/19 15:46, , 20F
DIV排版太進階了，要廢除表格的確有難度XD
06/19 15:46, 20F
推
06/19 16:17, , 21F
06/19 16:17, 21F
推
06/19 16:47, , 22F
多想想視障的朋友，你可以廢掉表格排版。
06/19 16:47, 22F
推
06/19 16:50, , 23F
活動網頁很多都表格排的 表格不是萬惡的啊啊啊
06/19 16:50, 23F
推
06/19 17:01, , 24F
何謂活動網頁@@
06/19 17:01, 24F
推
06/19 17:47, , 25F
表格被濫用是重點。該用就用，不該用就避免吧。
06/19 17:47, 25F
推
06/19 18:04, , 26F
活動網頁：左轉出去8625有說明 活動網頁有的一天就要做出來
06/19 18:04, 26F
→
06/19 18:05, , 27F
放個一個禮拜就下架~所以還是表格排比較快
06/19 18:05, 27F
推
06/19 18:13, , 28F
就是指短期廣告的意思嗎？不太懂。
06/19 18:13, 28F
推
06/19 18:55, , 29F
這時候資工系的就該跳出來寫table轉div
06/19 18:55, 29F
→
06/19 19:21, , 30F
table轉div 就算寫出來也很容易出現幽靈問題...
06/19 19:21, 30F
→
06/19 19:22, , 31F
要寫出很完善的 sop 不太容易...
06/19 19:22, 31F
→
06/19 20:12, , 32F
阿阿阿，看到23還以為有很多人有興趣，結果歪樓了XD
06/19 20:12, 32F
→
06/19 20:13, , 33F
喜歡table就table，我是完全沒意見。想過渡到css的再來吧
06/19 20:13, 33F
推
06/19 20:16, , 34F
我有興趣~不過要做實體聚會的話可能時間地點會很難橋?
06/19 20:16, 34F
→
06/19 20:37, , 35F
很南僑，所以希望每個月或雙月有固定一天聚會
06/19 20:37, 35F
→
06/19 20:37, , 36F
然而第一批會比較重要，因為可以針對問題做進一步需求調查
06/19 20:37, 36F
→
06/19 20:38, , 37F
接著後面再每次改進，最好是每年能夠集結設計師的問題
06/19 20:38, 37F
→
06/19 20:38, , 38F
做一個年報... 針對視覺設計師的，我想真的很少
06/19 20:38, 38F
推
06/19 20:51, , 39F
有興趣＋1 !!!!
06/19 20:51, 39F
還有 38 則推文
→
06/21 14:38, , 78F
總之先等我post大綱吧
06/21 14:38, 78F
推
06/21 15:19, , 79F
CSS 不難 難在他不同瀏覽器讓使用者看到的畫面是相同的
06/21 15:19, 79F
→
06/21 15:20, , 80F
希望大大能分享經驗 ... ~ 3Q~
06/21 15:20, 80F
推
06/21 23:32, , 81F
原po好威阿！
06/21 23:32, 81F
推
06/22 00:06, , 82F
有興趣
06/22 00:06, 82F
推
06/22 00:24, , 83F
很熟練的也可以有興趣嗎?
06/22 00:24, 83F
→
06/22 05:23, , 84F
不可以耶...XD
06/22 05:23, 84F
推
06/22 12:49, , 85F
不太懂得也可以參加嗎＝ ＝
06/22 12:49, 85F
推
06/22 13:37, , 86F
DW表格魔人可以參加嗎??
06/22 13:37, 86F
推
06/22 16:30, , 87F
舉手~我也想學...
06/22 16:30, 87F
推
06/22 16:42, , 88F
我也想學!!!若要開課請通知呀!
06/22 16:42, 88F
→
06/22 16:57, , 89F
歡迎初學者
06/22 16:57, 89F
推
06/22 20:40, , 90F
想學+1，開課請務必通知，謝謝。(人在台北國內)
06/22 20:40, 90F
推
06/22 21:22, , 91F
有興趣+1
06/22 21:22, 91F
推
06/22 23:07, , 92F
期待簡報~可以先公布嗎 :P
06/22 23:07, 92F
推
06/22 23:52, , 93F
有興趣+1　(境外人士)
06/22 23:52, 93F
推
06/23 00:10, , 94F
有興趣+1
06/23 00:10, 94F
推
06/23 02:01, , 95F
看完了覺得有興趣+1，css只拿來做佈景不太會div也...
06/23 02:01, 95F
推
06/23 04:08, , 96F
有興趣+1
06/23 04:08, 96F
推
06/23 12:10, , 97F
純推好人版大!! 去不了~"~
06/23 12:10, 97F
推
06/23 13:19, , 98F
很熟CSS的也聚一下嘛 可以交流一下心得/收費標準...etc.
06/23 13:19, 98F
→
06/24 00:15, , 99F
境外人士....XDDDD 其實我也是 我在打虎國
06/24 00:15, 99F
推
06/24 00:31, , 100F
幫衝優文數XD
06/24 00:31, 100F
推
06/24 13:55, , 101F
我尚在學習中..對於ie 6 7 8的不同版面真的很OX~
06/24 13:55, 101F
→
06/24 13:55, , 102F
我也有興趣+1
06/24 13:55, 102F
推
06/25 14:25, , 103F
有興趣+1~我是很支持css+div的(不過對於不同瀏覽器而頭大中)
06/25 14:25, 103F
推
06/25 16:47, , 104F
有興趣 +1 table用很久了~很煩耶
06/25 16:47, 104F
推
06/26 00:36, , 105F
有興趣+1
06/26 00:36, 105F
推
06/26 20:48, , 106F
有興趣+1
06/26 20:48, 106F
推
06/27 10:22, , 107F
我是沒學會table直接就學會DIV的，這樣有沒有必要再回
06/27 10:22, 107F
→
06/27 10:22, , 108F
頭學習table的排版方法呢？
06/27 10:22, 108F
推
06/27 22:33, , 109F
有興趣+1
06/27 22:33, 109F
推
06/28 23:56, , 110F
+1，算我一份壓，感恩了!
06/28 23:56, 110F
推
06/29 00:36, , 111F
有興趣+1~
06/29 00:36, 111F
推
06/30 16:55, , 112F
請問還有後續嗎？？沒見到原PO在發文呢？？？謝謝～期待
06/30 16:55, 112F
推
07/01 02:46, , 113F
我也有興趣耶~~非常~~>////<
07/01 02:46, 113F
推
07/03 15:43, , 114F
有興趣+1
07/03 15:43, 114F
推
07/07 12:15, , 115F
有興趣^^
07/07 12:15, 115F
推
07/16 14:38, , 116F
有興趣+1
07/16 14:38, 116F
推
02/18 17:05, , 117F
有興趣(A港)
02/18 17:05, 117F
‣ 更多 evenwu 的文章
文章代碼(AID): #1AEeF0-V (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 evenwu 的文章
文章代碼(AID): #1AEeF0-V (Web_Design)