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

看板Web_Design作者 (EvenWu)時間14年前 (2009/06/19 02:13), 編輯推噓75(75042)
留言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
文章代碼(AID): #1AEeF0-V (Web_Design)
文章代碼(AID): #1AEeF0-V (Web_Design)