網頁設計的佈局理解

矛盾出來了，像我們這些小作坊，基本都是設計佈局一人搞定。甚至還有加後台程序的。假設設計的時候考慮佈局了，我們都有這個能力進行調整。下面是小編為大家整理的網頁設計的佈局理解，歡迎參考~

經常看到有網友抱怨設計師給的稿子無法還原。因為他們對瀏覽器和屏幕的理解不一樣。也有的是因為效果太絢，顏色太多。更有甚者是使用flash製作嫌浪費，而html又雞肋.....好吧，我們拋開這最後一種情況，只談對屏幕和效果以及設計佈局的理解。

　　先談屏幕：

屏幕分辨率，還是以1024×768為主。而滿屏的定義則無從談起。為什麼?請看一下原因：

你不能確定用户的ie裝了幾個插件!插件越多，瀏覽器顯示高度越低! 你不能確定用户的顯示器是否設置正確(歪一邊了，弧形的，截斷的，縮小的放大的) 你不能確定用户顯示器的分辨率是否為最佳分辨率。其典型在於某些寬屏或高屏顯示器，有的是等比例縮小後留白。而更有甚者則是滿屏拉伸。比例就不對了!

要使得網頁滿屏。很多人説寬度1003，也有人説是1004。而我則不這樣認為。

假設客户要求網頁滿屏。那麼，你就要曉得用户的顯示器尺寸的屏幕分辨率。如果客户對這玩意認知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏，我用1024×768的分辨率，我樂意!如果這客户要求一定要滿屏，那麼問題又出現了，如果交貨的時候客户換了一台不同尺寸的顯示器呢?分辨率變大了，你的網頁窄了，分辨率小了，你的網頁寬了!你咋辦?

其實滿屏也分兩種，我姑且命名一種為內容滿屏，一種為視覺滿屏!

所謂內容滿屏，就是指網站上的東西，左邊界就在顯示器左邊界，右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來的負面效應：

　瀏覽器bug 設計及製作難度增加

所謂視覺滿屏，其實是一種取巧的做法。而這種方法。其實很簡單，一個網站的頭部，無非就是導航和banner，如果導航在最上邊，那麼，將導航的背景呈100%，導航居中。如果banner在最上邊，那麼注意處理圖片兩端，還是100%寬 背景!

OK，雖然內容寬度還有可能是1000、1003、甚至是900或更低，視覺上依然是百分百的寬度，只要避免最小寬度大於瀏覽器寬度、或客户的顯示器分辨率寬度大於你的最小寬度。永遠OK。

　　談佈局和循環：

其實呢，説網頁製作，直角最簡單，比如老印，他的東西全部是直角。用他的話説就是刀切一樣!為嘛?簡單方便速度快內容清晰!

佈局以按照設計稿為標準。或者説叫使用html還原設計稿，如果html截圖能和設計稿重疊，再過了標準，我認為就是最高境界了!

問題最大的，其實還是在設計和還原效果上!雖然可以使用css的負值、浮動、重疊等屬性進行不規則佈局，但問題依然存在，工作量和難度有可能依然會翻倍。還有，那可惡的N種瀏覽器!

對於複雜的設計稿、複雜的效果、甚至是過分的設計，如何降低使用html還原設計稿的工作量及難度!

如果你有權力微調設計稿，那麼，你可以在“可忍受”範圍內微調。這個範圍，每個公司都不一樣! 如果你沒有權力懂設計稿的任何東西，那麼，請和設計師或主管溝通，請設計者進行微調。但你要把你的難點描述的清晰，讓他們理解! 沒人同意改稿子，那麼，恭喜你。加班吧! 或者，你可以把那些細節工作扔給flash!

問題集中體現在設計和效果上!

　　先説設計：

網頁設計，除了體現效果，還有很多不可缺少的東西。這裏不談純粹用來欣賞的網站。畢竟大部分的站點需要被大量閲讀的。

網頁的柵格系統

很重要，非常的重要!減少圖片，使用背景圖整合降低http連接次數。能使用文字儘量使用文字。所以嘛，還是得注意啊! 背景圖的小圖循環和重複使用

大的就不説了，弄幾個弧度上去，幾乎就要用大圖片了，像奧運時候那麼網站的大背景。

小的背景圖，小欄目的'背景圖，以及子頁面的某個地方的背景圖。咱儘量一致!小背景循環，效果圖裏的寬和高哪個小，儘量按哪個方向循環!目的就是保證速度! 效果

png，這個可以説是效果的典型了!無背景的透明屬性。相信很多人都喜歡!但ie6卻有缺陷，好了，看碼頭的：【IE6的瘋狂之二】IE6中PNG Alpha透明(全集)

我在做設計的時候，一般的站點是不考慮佈局的!但那些藝術氣息特濃厚，效果忒多忒強烈的站，在吃自己的虧吃了兩次之後，就開始主動考慮後期佈局，儘量避免讓佈局難度加大!

如果設計的時候，考慮到重複利用圖片、背景等。會降低佈局切片的很多工作。或者我可以説，頁面重複利用率越高，就越快!主頁雖然是主頁，子頁雖然更簡單，但重複利用主頁上已經下載了的東西，不更好麼?我想説的是，要有全局的思維!

當然了，你肯定也想到了flash的應用。但flash貌似也有瀏覽器兼容問題!

如果設計和佈局中間有某個問題被耽擱或某一方不退讓，那麼程序、交互就要延後，上線日期也要推遲。

如果製作方擅自行動修改而設計方死活有意見......

唉，問題可大可小!做個網頁也不容易啊!