非學不可

談網頁設計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

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

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

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

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

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

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

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

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