【討論】DIV + CSS 將是未來網站設計的標準

[阿 土]

不曉得有無網頁設計的朋友在此
最近發現大陸那邊以 DIV + CSS 寫法的網頁越來越多了
未來 HTML 碼中也許將看不到幾個熟悉的代碼 如 <BR><P><TABLE>
這些都將被 CSS 取代 , 在 HTML 中以 DIV 去套用 CSS 格式將是未來的設計重點

以符合 W3C 的標準來寫 , 好處如下:
1.各種瀏覽器看到的畫面是一致的
2.跨平台瀏覽是一致的 , 電腦 / PDA / 手機...等看到的畫面是一致的
3.可節省大量的 HTML 語法 , 進而使網頁載入速度加快些
4.不用辛苦的以 TABLE 語法來排版整個網頁 , 以 CSS 可以輕鬆的做到網頁的定位

關於 DIV + CSS 設計有興趣的可以往 w3cn.org 去找到更多資料
http://www.w3cn.org/article/step/index.html

我自己抄了一個大陸常見的 DIV + CSS 模版改成的網頁:
http://www.pczone.com.tw/seednet

[joe.oo]

我很好奇,
在台灣有多少人熱衷於"網頁設計" ?

我認識的都只有, "視覺設計+ ImageReady + Dreamweaver" ,
對他們來說, 視覺才是創作,
至於用什HTML 語法不重要,
重要的是不用自已手寫,
網頁在 IE 上, 視覺效果滿意,
又能拿到錢,
反正業主又不懂, 也不會要求, 只會依所看到的視覺, 決定要不要付錢.
對他們來說, IE 才是標準.

建議他們去研究 DIV+ CSS , 等於是要他們的命.

所以時常可以看到例如這種 HTML Code
[HTML]
<font size=2> <font color="#990000" class="blue"><a href="abc.htm">按這裏</a>
</font> </font>[/HTML]

--------------------------
值得推薦的一本書

The Zen of CSS Design: Visual Enlightenment for the Web

相關連結
原始 css Zen Garden
Mozart
Dark Rose
更多
以上網頁的 HTML 結構都一樣, 完全是用 CSS 來設計, 創作出不同的視覺.
看到這些設計, 心裏很感動 !

[琥珀]

術業有專攻，不必大驚小怪。

以目前的網頁瀏覽要求，先求能執行、能顯示出來，這比較重要。(所以，必要的時候，要降低製作水準，去配合特定的瀏覽器)
一般瀏覽者不會去注意網頁是否符合 HTML/XHTML/CSS 標準。(Don't care)

近來都是強調視覺化編輯，不管是寫網頁、程式。現在還用文字一行一行檢查的設計者變少了。
只能要求自己嚴格一些，至於別人是無法約束的。

[怪盜基德]

我認識的都只有, "視覺設計+ ImageReady + Dreamweaver" ,
對他們來說, 視覺才是創作,
至於用什HTML 語法不重要,
重要的是不用自已手寫,
網頁在 IE 上, 視覺效果滿意,
又能拿到錢,
反正業主又不懂, 也不會要求, 只會依所看到的視覺, 決定要不要付錢.
對他們來說, IE 才是標準.

你這些話有點矛盾。不用自己手寫跟只符合IE標準是完全不相干的事。且事實上拜 DREAMWEAVER 的強大功能所賜，用 DREAMWEAVER 製作出來的網頁幾乎不會有 IE ONLY 的現象；你所說的應該是用 FRONTPAGE 的年代吧。

而就我認為，網頁設計確實是視覺為第一優先，如果一個設計師不懂 CODE，做出來的網頁CODE不乾淨，但是可以呈現出很好的視覺效果，那他會成功的。因為不只是客戶，即使是消費者也是看外表，有人瀏覽網頁會去拉原始檔出來看嗎？

現在網頁設計的流程是視覺設計 > WYSIWYG軟體編輯 > 瀏覽器測試 > 結案。

PS. 用 IMAGEREADY 的，真的很少；用IMAGEREADY + DREAMWEAVER的，更少。

[joe.oo]

你這些話有點矛盾。不用自己手寫跟只符合IE標準是完全不相干的事。且事實上拜 DREAMWEAVER 的強大功能所賜，用 DREAMWEAVER 製作出來的網頁幾乎不會有 IE ONLY 的現象；你所說的應該是用 FRONTPAGE 的年代吧。

嗯 ~ 我好像沒有提到用自己手寫跟符合IE標準有什麼相干 .

不用太在意我那一段話, 我並沒有在評論什麼, 只是陳述身邊遇到的事, 所以請不要替我下結綸.

網頁設計師用什麼工具, 認定什麼是標準, 我並不在意,
但是在工作上,我希望看到乾淨的 HTML Code ,
因為, 要死不死, 我就是那必須要看他們的 HTML Code 的人.
所以我推崇 Div + CSS 這種回歸HTML Tag本意的設計方法,
網頁結構與視覺分得愈乾淨愈好.

[ethanliu]

嗯 ~ 我好像沒有提到用自己手寫跟符合IE標準有什麼相干 .

不用太在意我那一段話, 我並沒有在評論什麼, 只是陳述身邊遇到的事, 所以請不要替我下結綸.

網頁設計師用什麼工具, 認定什麼是標準, 我並不在意,
但是在工作上,我希望看到乾淨的 HTML Code ,
因為, 要死不死, 我就是那必須要看他們的 HTML Code 的人.

這段我持相同意見，也有相同的經驗

所以我推崇 Div + CSS 這種回歸HTML Tag本意的設計方法,
網頁結構與視覺分得愈乾淨愈好.

這部份我倒不覺得 div + css 有回歸 html tag 的本意
css 有助於自定化及結構化 ( div 是一個標準的 tag 所以並不單獨去提它 )
但是過於浮爛使用 css 我覺得不如不用

比如我常會遇到這種沒意義的設定

.black { #000000; }
.white { #FFFFFF; }

或是這種，我不知道你是要設灰色，還是你很喜歡 glay 我還 Lar'c 咧
.glay { .....}

也不乏有這種，或是每個頁面都會去重寫的也不在少數
.1 { ...... }
.2 { ...... }
.3 { ...... }
.white1 { ..... }
.white2 { ..... }


回頭過來，如果指 div + css 的話，一般應該指會用到 position 這些屬性
的確有很多好處，比如可以 table free 這對於設計及改版都會有很大的彈性
包括像現在這麼多種 cms, blog 等，可以比較無痛的"偷"別的系統的 template

缺點是，不同瀏灠器看到的效果多少會有誤差
設定不夠仔細，加上有時程式沒配合好時，塞不同的文字或不同的字數，有時會有樣式跑掉的情形
designer 切圖會越來越懶，圖片也會越來越大張 (網路速度真偉大....)

至於哪種是標準? w3c 這麼久了，也沒見到各家瀏灠器真正的"標準"
所以什麼是標準? 我(敢)拿得出去跟客戶收錢的，就是我的標準

備註一下，用標準一詞可能太嚴厲了
換為風潮或是喜歡的方式，可能比較不會太主觀

[softbrian]

說真的，用 DIV + CSS 的方式來寫網頁還真的乾淨很多，
只少可以減少後人調整版面的痛苦指數~~~~
應該多多學學~~真不錯啊!!

[怪盜基德]

寫程式的瞧不起做畫面的 做畫面的受不了寫程式的 似乎是網站設計公司共存的困境

[ivantw]

寫AP的何嘗不是如此？控制項命名如Text1、Text2、Text3...etc，程式碼疊床架屋，毫無架構可言。偏偏台灣人求快，只要達到需求，根本不理會程式是怎麼寫的，幹主管的不是不懂，就是也不管控，劣幣驅逐良幣啊～

[joe.oo]

再追加幾個 css Zen Garden 的設計, 都是用橫式來呈現的.
Prêt-à-porter
What Lies Beneath
Tulipe
Radio Zen
誰說網頁改頭換面, 一定要重寫 HTML ?
連 JavaScript 都可以不用 .