DIV CSS 佈局教程網

幾年前網頁設計還被平面設計視為不入流的設計，不過隨著網絡使用的普及，網頁設計的整體發展有了很大的提高，越來越多的設計師專做了網頁設計師！

目前，網絡上有關網頁制作的各種教程已經相當多，可以方便地學習到最新的技術和技巧。可是，有關網頁的設計,比如設計靈感的實現，風格的確定，發展策略，技術的篩選等文章卻比較少。於是針對於此，我們這次分享會就請視覺設計師袁青林來為大家介紹一下網頁設計的經驗，主要就頁面布局的平衡性方面，來和大家交流一下。如果您有好的建議和心得，也可以留言，互相交流探討，在此先道一聲謝謝，之後開始我們的網頁設計之旅。

網頁版面與報紙版面設計

網站設計就象傳統的報刊雜志一樣，我們通常都是把網頁看作一張報紙，或者一本雜志來進行排版布局。但是印刷和網絡是不一樣的。

傳統的布局排版並不適於網絡，因為傳統的印刷布局，幾乎想要什麼樣的平面效果都能很好的達到，但在網絡上設計就很困難，盡管很多的效果都能通過一些Javascript或是高級的CSS技巧來實現，但結果是使用你的源代碼很臃腫，網頁載入很慢。

而同樣的，網絡上的很多排版布局也不同傳統的印刷打印，畢競這是兩個相隔時間很長的事物。但是，在最近的幾年中，我們發現越來越多的報紙開始使用網頁設計布局排版，比如大量的頁面留白和基於網絡的設計。同時，我們也可以借鑒傳統報紙的排版布局來獲取新鮮的網頁創意設計靈感。

el economista (madrid, spain)
經濟學家報 馬德裡，西班牙
el economista 使用一個很傳統，含蓄，獨特的報紙版面和公告，在印刷上面突出比較重要的文章。 圖片信息支持的內容和標題，四周都是大量的空白，我們可以看到這個版面設計很有網頁的風格。

下面我們通過幾個簡單的例子，從四個方面來看版面布局的平衡性，分別是留白、顏色、文字和節奏

留白

這是某房產廣告設計，可以看到很好的運用了留白

顏色

色彩的平衡性

文字

文字排版的平衡

節奏

節奏表現手段從支配行為上可以概括為速度（快、慢），力量（輕、重），從排版上可歸納為集中與分散。節奏表現手段的運用所喚起的直接效果可以大致概括 為緊張、松弛、寧靜、躁動。

如果在繪畫實踐中對一根線條或是一筆顏色在速度上的使用造成快慢差異，其畫面結果可以直接導致視覺及心理上的緊張與松弛感。同 理，在網站設計中，針對點、線、面等元素，以集中或分散的排列差異變化將導致視覺及心理上的寧靜與躁動。

好啦，本期分享內容就到這裡，下面提供袁大師的精彩ppt給大家下載

 http://www.poluoluo.com/files/soft/1_090308165115.rar