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



贊助商連結


頁 : [1] 2

阿 土
2006-04-19, 10:47 AM
不曉得有無網頁設計的朋友在此
最近發現大陸那邊以 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
2006-04-19, 08:01 PM
我很好奇,
在台灣有多少人熱衷於"網頁設計" ?

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

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

所以時常可以看到例如這種 HTML Code


<font size=2> <font color="#990000" class="blue"><a href="abc.htm">按這裏</a>
</font> </font>

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

The Zen of CSS Design: Visual Enlightenment for the Web (http://www.amazon.com/gp/product/0321303474/sr=1-1/qid=1145445546/ref=pd_bbs_1/104-7713667-9190306?%5Fencoding=UTF8&s=books)

相關連結
原始 css Zen Garden (http://www.csszengarden.com/)
Mozart (http://www.csszengarden.com/?cssfile=189/189.css)
Dark Rose (http://www.csszengarden.com/?cssfile=194/194.css)
更多 (http://www.mezzoblue.com/zengarden/alldesigns/)
以上網頁的 HTML 結構都一樣, 完全是用 CSS 來設計, 創作出不同的視覺.
看到這些設計, 心裏很感動 !

琥珀
2006-04-19, 08:48 PM
術業有專攻,不必大驚小怪。

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

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

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


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

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

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

PS. 用 IMAGEREADY 的,真的很少;用IMAGEREADY + DREAMWEAVER的,更少。

joe.oo
2006-04-20, 06:48 PM
你這些話有點矛盾。不用自己手寫跟只符合IE標準是完全不相干的事。且事實上拜 DREAMWEAVER 的強大功能所賜,用 DREAMWEAVER 製作出來的網頁幾乎不會有 IE ONLY 的現象;你所說的應該是用 FRONTPAGE 的年代吧。

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

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

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

ethanliu
2006-04-21, 05:34 AM
嗯 ~ 我好像沒有提到用自己手寫跟符合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
2006-04-21, 08:18 AM
說真的,用 DIV + CSS 的方式來寫網頁還真的乾淨很多,
只少可以減少後人調整版面的痛苦指數~~~~
應該多多學學~~真不錯啊!!

怪盜基德
2006-04-21, 09:32 AM
寫程式的瞧不起做畫面的 做畫面的受不了寫程式的 似乎是網站設計公司共存的困境

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

joe.oo
2006-04-22, 12:35 AM
再追加幾個 css Zen Garden 的設計, 都是用橫式來呈現的.
Prêt-à-porter (http://www.csszengarden.com/?cssfile=037/037.css)
What Lies Beneath (http://www.csszengarden.com/?cssfile=019/019.css)
Tulipe (http://www.csszengarden.com/?cssfile=088/088.css)
Radio Zen (www.csszengarden.com/058)
誰說網頁改頭換面, 一定要重寫 HTML ?
連 JavaScript 都可以不用 .