PTT職涯區 / Soft_Job (軟體人)

Re: [閒聊] 環境令人無力orz

看板Soft_Job (軟體人)作者 (華麗的天下無雙)時間16年前 (2010/03/29 13:48), 編輯推噓21(21推 0噓 44→)
留言65則, 14人參與, 最新討論串10/18 (看更多)
※ 引述《wa120 (哇120)》之銘言： : 不好意思... 我想問個問題 : 所謂的純css排版是全部都用<div>包住，然後用css改變<div>標籤的位置嗎？ : 那允不允許 : <div><table></table><div> (table是純排版用的) : 這樣的排版方式以及 : <div><table><table></table></table></div> (巢狀table排版) : 我知道一般的css排版是用巢狀<div>像是 : <div> : <div></div> : <div></div> : ... : </div> : 但是我知道他不能解決所有的問題，在文字顯示版面要求嚴謹的時候 : <div>底下還是要用巢狀<table>來做版面調整 : 其實我對css排版還是有些意見，也許是自己功力及認知不夠 : 像是說看到別人position設到absolute我都會幹瞧 : 因為在不同的解析度，以及瀏覽器，非常有機會會跑掉 : 而table雖然會降低易讀性，但是他在設定width以及height使用百分比非常有效率 : 而且css在IE 6/7/8 有些小細節 每個長相都不太一樣 (害我debug超久) : 提出個人淺見，其實我看現在很多網頁都還是在用table排版 : 而table亂中有序的排版方式，其實也沒有那麼難以接受吧... : 其實很多程式語言的GUI介面感覺表達的比table還抽象... : 對此提出一些個人看法... 你這個問題其實已經有一點離題了。 對於網頁設計，第一個要有的概念叫做Layout。 Layout目的是，將一個完整的頁面因為不同的需要切割成不同的版塊。 例如Header、Sidebar、Footer、Content、NavigationBar等等的。 你會希望Layout達到以下的幾個目的： 1.便於調整。 2.跨越瀏覽器。 3.可以各自獨立不至於影響其他block。 W3C中，Table是用來作資料的顯示整理用，而不是用來Layout，Layout經常會出現 多層次的巢狀結構，而<table>標籤非常因為這樣的巢狀結構，使得在調整得時候 造成版面混亂。 另外，跨越瀏覽器也是一個大問題，基本上<div>在不同瀏覽器上面的行為可以用 css來控制，但是<table>標籤在不同瀏覽器上，本身就存在著差異，光是換行的 狀況，在不同瀏覽器就會有不同的樣子。 因為用<table>標籤切版，所以當上層或下層的table屬性改變得時候，經常會影響到 其他的部份。要知道一件事，版面設計的時候，設計師可以用<table>很爽快，但是 交到程式設計師手上，在套入不同data的時候，<table>的layout會是設計師的惡夢。 當設計師用dreamweaver或frontpage的<table>作Layout做得很愉快的時候，卻沒有想 到對Programmer而言，這些<table>的Layout在寫程式時卻是惡夢。 不能只動CSS改變版型，一堆爛爛的<tr><td></td></tr>...甚至是colspan, rowspan， 在做Template時都是惡夢，要知道，設計師交給程式設計師的，只是樣板，也就是說， 程式設計師還是必須要切割成不同的block分別儲存，不管你是用Smarty或是Tiles. 不懂CSS Layout的Designer在我們的眼中，沒有資格稱得上Web Designer。 不瞭解按照標準去定義CSS Styles檔案的Web Designer，只能算是不入流的Web Designer。 這樣的人只是給Programmer造成負擔而已。Programmer不應該浪費這些寶貴的時間幫 不入流的Web Designer擦屁股。 說難聽一點，若我是Programmer，我不想跟這種會降低我的生產力，連Layout都要我 來寫CSS的設計師合作，最近遇到一位外包的設計師，水準相當不錯，CSS檔案看起來 很有國外Wordpress theme的風格，跟這樣的設計師合作，不但彼此都很愉快，工作 也能更快完成。 要解決跨瀏覽器的問題？不難，請愛用CSS Framework如Blueprint，作為一個進階的Web Designer，不能只靠著工具，Blueprint等得CSS Framework已經是對Designer跟Programmer 最友善的Tools。 有心的話去看一下Facebook跟Plurk的頁面，有幾個<table>標籤。 以現代的技術，用<table>來作Browser Layout是「錯」的。在任何的情況下，都是錯的。 當然每個人能力不同，不是每個人都可以搞到像Facebook那麼威，只是錯多錯少而已。 -- 所有我的作品，請到..... ～四十八個德瑞克～http://blog.derekhsu.homeip.net 馬皇本紀：http://blog.derekhsu.homeip.net/2009/08/821 上官先生傳：http://blog.derekhsu.homeip.net/2009/08/825 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.64.191.30 ※ 編輯: derekhsu 來自: 61.64.191.30 (03/29 13:54)
推
03/29 13:58, , 1F
推
03/29 13:58, 1F
推
03/29 14:09, , 2F
分析的不錯 推一個~
03/29 14:09, 2F
→
03/29 16:24, , 3F
ㄟ...一點小意見，個人覺得要用 <div> 還是要用 <table> 應
03/29 16:24, 3F
→
03/29 16:25, , 4F
該要看網頁設計的目標是要「適應」甚麼程度的螢幕解析度差
03/29 16:25, 4F
→
03/29 16:26, , 5F
異啦，有些版型還真的得用 <table> 才能達到需求的。 :p
03/29 16:26, 5F
→
03/29 16:27, , 6F
比起 div/table，我比較怕的是濫用陰影和羽化的設計師 Orz
03/29 16:27, 6F
推
03/29 16:28, , 7F
什麼需求這麼困難？提出來給我解解看當娛樂
03/29 16:28, 7F
→
03/29 16:53, , 8F
比如說版型要可以隨畫面伸展，但是左右或上下又要留固定距
03/29 16:53, 8F
→
03/29 16:54, , 9F
離，或是裡面某些欄位依定要保留相當寬度，所以我不但用了
03/29 16:54, 9F
→
03/29 16:54, , 10F
table 還塞了好幾張透明的 gif 來撐住格子。 :p
03/29 16:54, 10F
→
03/29 16:55, , 11F
等等看css3....
03/29 16:55, 11F
推
03/29 16:58, , 12F
有遇過p大的情況需要適量的TABLE來稱畫面
03/29 16:58, 12F
→
03/29 16:59, , 13F
03/29 16:59, 13F
推
03/29 17:00, , 14F
聽起來px和%交互運用就好了 晚點寫一下
03/29 17:00, 14F
推
03/29 17:03, , 15F
上面xmimicx說的撐畫面..我就在寫後台遇到過...
03/29 17:03, 15F
→
03/29 17:04, , 16F
不過IE6下的table width=100%..他是照螢幕，而不是父元件
03/29 17:04, 16F
→
03/29 17:04, , 17F
最後..我叫提示不要用IE6 XD
03/29 17:04, 17F
→
03/29 17:05, , 18F
DIV和TABLE二種我都試過 似乎TABLE比較方便快速
03/29 17:05, 18F
→
03/29 17:09, , 19F
table width應該可以用inherit
03/29 17:09, 19F
→
03/29 17:12, , 20F
還有一種情況是客戶會指定說文字到達邊緣以後是要換行還是
03/29 17:12, 20F
→
03/29 17:12, , 21F
要把格子撐開。 Orz
03/29 17:12, 21F
→
03/29 17:20, , 22F
那就要用word-break了
03/29 17:20, 22F
→
03/29 17:23, , 23F
但FX沒用
03/29 17:23, 23F
推
03/29 17:53, , 24F
03/29 17:53, 24F
→
03/29 17:56, , 25F
s大重點好像不是左右固定 重點在於三欄高度要一致@@
03/29 17:56, 25F
推
03/29 18:00, , 26F
我一直在懷疑，只用table但沒法改用CSS的"模組"，是不是
03/29 18:00, 26F
→
03/29 18:00, , 27F
都用 Word 在寫網頁? XD
03/29 18:00, 27F
推
03/29 18:05, , 28F
我加上三欄等高了 等內容最多的那個
03/29 18:05, 28F
推
03/29 18:09, , 29F
那如果下面又有一個DIV clear:both 不就定位到1000px去了?
03/29 18:09, 29F
推
03/29 18:13, , 30F
問題是你為什麼需要clear:both
03/29 18:13, 30F
→
03/29 18:13, , 31F
我下面加了 footer有clear:both在最下面
03/29 18:13, 31F
推
03/29 18:13, , 32F
就是我可能要一個footer
03/29 18:13, 32F
→
03/29 18:14, , 33F
加囉
03/29 18:14, 33F
推
03/29 18:16, , 34F
高手 但好像還要HACK IE
03/29 18:16, 34F
推
03/29 18:17, , 35F
現在沒IE 不過這基本上不是問題就是
03/29 18:17, 35F
→
03/29 18:19, , 36F
問題是這種padding:1000的方法真的比TABLE來的好?
03/29 18:19, 36F
推
03/29 18:20, , 37F
我也很少用到padding1000 因為用背景圖案有到效果就夠了
03/29 18:20, 37F
→
03/29 18:22, , 38F
超過padding還是會炸掉 設個十億好了
03/29 18:22, 38F
→
03/29 20:46, , 39F
http://tinyurl.com/yamgk5t 如果有使用<div> 而且美觀 且
03/29 20:46, 39F
→
03/29 20:49, , 40F
且符合萬惡的 2A 標準的話，可以提供參考嗎!? ><
03/29 20:49, 40F
推
03/30 12:16, , 41F
http://www.ndhu.edu.tw/ 給樓上，過AAA
03/30 12:16, 41F
→
03/30 12:16, , 42F
好不好看就不一定了xd
03/30 12:16, 42F
推
03/30 18:08, , 43F
<div style="width:340px;clear:both;"> 它讓你過!??
03/30 18:08, 43F
→
03/30 18:09, , 44F
沒有被 規範三 3.5：H203004 駁回嗎!? :(
03/30 18:09, 44F
→
03/30 18:21, , 45F
可能我們在不同的時間點碰上不同的審查人員吧.. (嘆)
03/30 18:21, 45F
推
03/30 18:26, , 46F
這樣應該合法吧，T大也是這樣用
03/30 18:26, 46F
→
03/30 18:26, , 47F
<div class="spotlighttext" align=left style="width:358
03/30 18:26, 47F
→
03/30 18:27, , 48F
03/30 18:27, 48F
→
03/30 18:27, , 49F
可能是table之類的不行
03/30 18:27, 49F
推
03/30 18:49, , 50F
我猜 CSS設定的程式掃不到 審查人員也很難去看到
03/30 18:49, 50F
→
03/30 20:36, , 51F
無障礙這東西真是.....神經病
03/30 20:36, 51F
→
03/30 23:13, , 52F
你說得很奇怪,一下子table造成設計師的惡夢,一下子table造成
03/30 23:13, 52F
→
03/30 23:14, , 53F
programmer的惡夢... 而且programmer會寫點CSS控制就代表
03/30 23:14, 53F
→
03/30 23:14, , 54F
很會設計了,很會排版了? 真怪
03/30 23:14, 54F
→
03/30 23:16, , 55F
真厲害的programmer是會寫簡便的排版控制框架給設計師使用,
03/30 23:16, 55F
→
03/30 23:17, , 56F
而不是明明不懂設計卻抱怨設計師不懂程式效率.
03/30 23:17, 56F
→
03/31 08:55, , 57F
根據我做網站的經驗，table對programmer的負擔在於對source
03/31 08:55, 57F
→
03/31 08:56, , 58F
的複雜化，設計是在畫面的設計，不過程式因為需要瞭解資料的
03/31 08:56, 58F
→
03/31 08:57, , 59F
位置跟一些條列資料的部份需要找出來套迴圈。就算有全職設計
03/31 08:57, 59F
→
03/31 08:57, , 60F
pg不可避免還是會需要對頁面結構做一些操作。
03/31 08:57, 60F
→
03/31 22:23, , 61F
y連我的文章都看不懂，沒什麼好討論的...
03/31 22:23, 61F
→
03/31 22:24, , 62F
table的版形很容易因為實際Data套進去以後，就亂掉了
03/31 22:24, 62F
→
03/31 22:26, , 63F
巢狀Table會讓Dom複雜化，降低調整的彈性與DOM效能
03/31 22:26, 63F
推
03/31 22:37, , 64F
不禁想讓我修改一下現有的東西Orz
03/31 22:37, 64F
推
04/05 10:15, , 65F
p大 你說的那些問題css都有辦法解決
04/05 10:15, 65F
‣ 更多 derekhsu 的文章
文章代碼(AID): #1Bi3ySTt (Soft_Job)
討論串 (同標題文章)
本文引述了以下文章的的內容：
完整討論串 (本文為第 10 之 18 篇)：
排序： 最新先 | 最舊先 | 留言數
在新視窗開啟完整討論串 (共18篇)
Soft_Job 近期熱門文章
更多 近期熱門文章 >>
PTT職涯區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 derekhsu 的文章
文章代碼(AID): #1Bi3ySTt (Soft_Job)