談網頁設計CSS樣式排版?表格排版?    文/sophie

網頁用css排版?還是用表格排版?是一個談到快爛掉的話題了。目前各大網站皆用css排版,這也成為網頁設計的主流,熟優熟劣不言可喻。

正巧 sophie 最近在做一個網站case,順便把自己對網頁設計的感想做一個記錄。

部落格當紅的現在,網頁設計已經不再熱門,每個玩部落格的玩家,幾乎都知道要改部落格的版型需要要一種語法叫做css (cascadind style sheet)。

部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog

 然而、在網頁設計裡css獨立存在是不具什麼意義的,因為它是一種用來描述html的樣式的語法,當我們在玩部落格時,例如痞客的後台,我們只能照著平台提供給的區塊去修改css樣式。

 網齡大約10年以上的網友應該都還記得,當時很流行架設個人網站和網友做交流,那時網站幾乎都是採用表格來排版居多。

但隨著CSS慢慢被熟悉,許多人拋棄了表格排版,改投入CSS的懷抱,因為兩相比較之下,使用CSS做網頁排版,其版面靈活性提高、網站維護更能輕易改版,同樣的畫面、使用表格或CSS都能達成,偷懶的人愛使用表格,因為輕鬆就能建構起網頁版面,但通常等到更新內容、或是改版,才能體會那種痛苦。

現在還有人使用表格做網頁排版嗎? 答案是有的!還不少。

看過許多平面設計相關人士,從紙張跨入網頁的領域的人,都是使用平面設計的思維去設計網頁。

部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog

步驟是這樣的:

 1.photoshop把需要的圖做好影像處理
2.丟到illustrator排版切塊
3.dreamweaver畫好表格把切片像拼圖般丟進表格內
4.做好連結和文字
5.大功告成

!這樣做出來的網頁看起來挺精美的 ok!乍看之下沒什麼問題

但,在作者的螢幕顯示或許沒問題,卻不代表上網瀏覽的人也沒問題,sophie常在上網時,看到許多支離破碎的網頁畫面,多數就是因為用這種方式做出來的,因為解析度不一、或瀏覽器不同,導致什麼雜七雜八症頭都有。

 部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog

 

 

 

NPOOLD.jpg   

 上圖是某個學術單位的原始設計網站,該網頁就是sophie所說的那種方式做出來的。
看似很正常對不對,但後續維護工作才是一大困難的地方,因為整個畫面全是這種『切片拼圖式』的網頁。
假設今天想要修改側欄的文字,那又要重畫一次圖,再進行切片。
若想更換按鈕的樣式,又得再切一次。
萬一內文要增加很多,這可不得了,文字篇幅太長、欄位勢必要拉長,整個下來表格版型全跑掉了。

 部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog

 

 

下面兩圖是sophie在承接這個工作時,使用css排版重新製作網頁。

以部落格架構的思維來說,這也只是橫幅、按紐、側欄、主文、頁腳的組成,看起來很像部落格版型對吧!

NPO.jpg   NPOTH.jpg  

將網頁寫得清析有條理,在事後維護上絕對是有加成的效果,將來網頁想大改版換新裝,就像在設計部落格版型一樣輕鬆,每個區塊間就能輕鬆自如的調整位置大小。

倘若一直用切片拼圖排表格常牽一髮動全身,搞到最後變成一發不可收拾,最後只能放棄原版型,再重新製作一次,相當耗費時間。

sophie建議初學網頁設計的朋友,不要貪圖一時方便使用表格來排版,否則事後將付出更多時間來彌補,得不償失。 

部落格經營 痞客css樣式教學 語法 背景 痞客部落格版型 http://sophiestudio.pixnet.net/blog

 

 

創作者介紹

非學不可

鹿老師 發表在 痞客邦 PIXNET 留言(7) 人氣()


留言列表 (7)

發表留言
  • steveiturtle
  • 剛開始改用DIV和CSS排版很不習慣~
    不過用久了就會發現好處還挺多的 ^^

    版主回覆:(03/20/2010 09:24:11 PM)


    一開始比較難上手,所以很多人貪圖方便使用表格。

    最後常常要花更多時間才能去修改畫面。

    css和div確實是很方便的語法。

    感謝你的光臨,以後要多多過來交流喔!
  • elephant365
  • 我還是覺得有好也有壞ㄝ(拋不開表格的藉口)哈哈哈

    版主回覆:(02/03/2010 09:17:28 AM)


    表格不是不能做但是很多人都是排好版切成幾塊就丟到表格...看似方便卻會在後續製作和維護更不方便
    但是在以前表格時代如yahoo等大網站也是使用表格,為了讓表格固定在很多細部也要用很小的spcer.gif去排版,在製作上的時間和困難度比起css並沒有更簡易

  • seskywalker0981
  • div是好物啊!
    看到現在一些系所還在用頁框做法...哀...

    版主回覆:(02/04/2010 05:47:25 AM)


    是啊!
    而且許多人剛入門網頁設計為了求快速
    都用frontpage dreamweaver裡的頁框和表格用所見即所得的方式製作...
  • 紙糊的貓
  • 大大您好 偶然之間看見你撰寫的這篇文章

    我是一個網頁的初學者,老實說「所見即所得」

    的方式是真的比較好設計網頁,當然考量整體設計以及事後

    維護等工作,css+div的寫法卻又是無所置疑的

    但是在初始設計的時候

    設計出來的一張網頁底稿 轉化成圖片

    然後一一為這些圖片布局寫上語法

    整個過程 我們都看不到東西

    無法馬上知道我們寫上的語法 對不對

    這張圖片 和另外一張圖片 的距離 差了多少

    我要讓這個元件 在頁面的哪個地方出現

    對邊框的距離 要設置多少參數

    也要實際排版才會知道該怎麼調整他

    對於這點 不曉得大大有沒有什麼解決的方式

    或者 是用什麼方式 去克服這樣子的問題呢?

    版主回覆:(02/05/2010 04:13:36 PM)


    所見即所得比較好設計網頁,同樣是毋庸置疑,這讓網頁設計學習者減少了許多障礙,入門變得簡單多了。

    然而CSS+div的用法並沒和『所見即所得』衝突,在dw或fp兩套軟體裡面,仍然可以看見修改後的css+div語法。(dw吃虧一點,還得按個F12,fp有微軟相助佔了很多便宜。)

    不過整體來說,還不至於像拿記事本寫網頁一樣,只能憑空想像畫面。

    將整個畫面切成圖片,接著自動添加語法,最後呈現畫面,這種作法看似簡單好用,如果將來不會修改網頁內容,倒也影響不大。

    可是一旦事後要維護,牽一髮動全身,原本只想移動一張圖片,最後往往搞的整個網頁重作才有辦法。

    ---

    先說說我的個人看法!

    瞭解網頁各個元件的位置,以及到底用了什麼語法進去,對初學者真的很困難,這點你應該能認同。

    但當網頁製作的技術到了一個程度後,單純的將畫面轉成圖片的作法一定無法滿足我們的需求。

    這是一道門檻,遲早會遇上。

    但是太過習慣使用『畫面轉圖,自動添加語法』的方式,一旦碰上全部要自己來時,相當痛苦,最後還是會逃避的使用各種簡單的方法來解決。例如放棄div用回表格。

    如同、一旦使用新注音來輸入中文習慣後,怎麼都很難重新學習新的輸入法。

    因此不如由基礎開始變學習用比較好,比較正確的技巧來設計網頁,對將來的幫助是很大的。

    在我學習網頁的時候,沒有這麼方便的技術好用,只能一步一步熬過來。

    曾遇過幾個網友的例子,當他們想嘗試學會將網頁控制自如時,發現太難了,通通放棄又回到原點,使用轉圖的方式。(可以想像要跟別人做文字交談時,誰還會去想一下其他輸入法怎麼打,通通打回原形使用新注音快一點)

    所以這是門檻,也只能想辦法去克服。


    至於解決的方法
    個人有個小建議讓你參考看看

    先在紙上畫出你要的畫面,包括每個元件的相對位置,距離多少像素。

    然後才開始設計網頁。

    這樣才不會產生到底哪張圖要擺在哪個位置,距離邊界多少距離都無法想像的狀況。

    至於畫面的位置配置,就是以解析度(像素)來做單位才容易分配畫面。(當用到div時,絕對位置和相對位置若能搞懂,離運用自如就不遠了。)


    ps.其實我不很懂你遇上的問題在哪裡,只能猜測,若是還有其他問題,我會再為你做解答。。

    謝謝你的光臨
  • 紙糊的貓
  • 謝謝,你的回答解決了我的困惑....

    果然 是我把網頁想的太簡單了...

    語法才是網頁的根本啊!!

    我目前遭遇到的問題

    也就是「絕對位置」 和「相對位置」的問題

    因為根本抓不準 其距離

    而且我是利用dw去編輯css語法

    很多標籤都會有提示

    只是麻煩在於一定得在瀏覽器上 才會看到

    不能再下方看到 就可以知道該怎麼做修正

    fp的話 我覺得嫌它 不夠專業xd

    哈哈...

    我會在努力學習的 謝謝^^

    版主回覆:(05/18/2010 02:11:34 PM)


    相對和絕對位置的問題,多做幾次以後,設定多少出現在什麼位置就會有一個大約的空間概念了。

    反覆練習才是不二法門,呵呵。(任何事情好像都一樣。

    當初我先學fp,真的好上手,但缺點就是用習慣後,不容易適應dw,被微軟荼毒很深。。哈

    但用慣dw後,根本不會想再用fp。
  • 小顏
  • 您好:本人不經意經過此站,覺得您回答問題非常的詳細,基本上我也是一位網頁初學者,現在在公司裡面都有在幫公司做些簡單的網頁,我每次的做法都是先在psd裡面做好全部的圖,然後再psd切片---切完片再把html丟到dw裡面開始做後續的連結動作,但目前的我想學css與div切版,但腦子整個(空)不知從何開始著手學習,不知您認為哪些書是比較適合學這兩樣東西呢!!還有現在的網頁是不是用flash做出來比較強呢!因為我看日本網站大部份都是使用flash做出來的,個個精致又漂亮~謝謝您~

    版主回覆:(05/19/2010 01:00:57 PM)


    老實說我並沒有什麼好建議的書,基本上應該都差不多內容,若你是完全沒基礎,先買比較簡單的就好了。

    翻開書若看的懂得不超過30%就別買,改買更簡單的。

    如果你使用切片來製作網站,一定會發現維護時是一大工程,但改用CSS+DIV來排版,那會輕鬆很多,就像堆積木一樣。

    如果這方面有不懂,可以一起來討論︿︿
    也可以加我的粉絲團。

    至於flash的效果的確很棒,酌量使用效果佳,不過不建議完全使用flash來做,這關係到搜尋引擎SEO的問題。
  • 小顏
  • 哈哈:老師很謝謝你a~回答 速度好快唷!!我很開心唷!!我馬上加入粉絲團:))))

    版主回覆:(10/27/2010 12:26:21 PM)


    哈哈、通常回留言只要有空就會馬上回,只是有時比較忙碌就會晚點。

    所以如果比較緊急的問題,也許這邊找不到人,也可以在粉絲團發訊。(只是都不一定能馬上就是了)

    謝謝你的支持喔︿︿