矛盾出來了，像我們這些小作坊，基本都是設(shè)計布局一人搞定。甚至還有加后臺程序的。假設(shè)設(shè)計的時候考慮布局了，我們都有這個能力進行調(diào)整。但像大公司，分工嚴(yán)格的情況下，如果設(shè)計師不懂css不會布局。或者理解有誤，那么設(shè)計稿就會讓布局人員耗費大量的時間和精力。因為瀏覽器太多！

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

先談屏幕：

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

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

要使得網(wǎng)頁滿屏。很多人說寬度1003，也有人說是1004。而我則不這樣認(rèn)為。

假設(shè)客戶要求網(wǎng)頁滿屏。那么，你就要曉得用戶的顯示器尺寸的屏幕分辨率。如果客戶對這玩意認(rèn)知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏，我用1024×768的分辨率，我樂意！如果這客戶要求一定要滿屏，那么問題又出現(xiàn)了，如果交貨的時候客戶換了一臺不同尺寸的顯示器呢？分辨率變大了，你的網(wǎng)頁窄了，分辨率小了，你的網(wǎng)頁寬了！你咋辦？

其實滿屏也分兩種，我姑且命名一種為內(nèi)容滿屏，一種為視覺滿屏！

所謂內(nèi)容滿屏，就是指網(wǎng)站上的東西，左邊界就在顯示器左邊界，右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來的負(fù)面效應(yīng)：

1. 瀏覽器bug
2. 設(shè)計及制作難度增加

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

ok，雖然內(nèi)容寬度還有可能是1000、1003、甚至是900或更低，視覺上依然是百分百的寬度，只要避免最小寬度大于瀏覽器寬度、或客戶的顯示器分辨率寬度大于你的最小寬度。永遠(yuǎn)ok。

談布局和循環(huán)：

這里有篇文章http://weilaixu.cn/read.php/174.htm

其實呢，說網(wǎng)頁制作，直角最簡單，比如老印，他的東西全部是直角。用他的話說就是刀切一樣！為嘛？簡單方便速度快內(nèi)容清晰！

布局以按照設(shè)計稿為標(biāo)準(zhǔn)。或者說叫使用html還原設(shè)計稿，如果html截圖能和設(shè)計稿重疊，再過了標(biāo)準(zhǔn)，我認(rèn)為就是最高境界了！

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

對于復(fù)雜的設(shè)計稿、復(fù)雜的效果、甚至是過分的設(shè)計，如何降低使用html還原設(shè)計稿的工作量及難度！

1. 如果你有權(quán)力微調(diào)設(shè)計稿，那么，你可以在“可忍受”范圍內(nèi)微調(diào)。這個范圍，每個公司都不一樣！
2. 如果你沒有權(quán)力懂設(shè)計稿的任何東西，那么，請和設(shè)計師或主管溝通，請設(shè)計者進行微調(diào)。但你要把你的難點描述的清晰，讓他們理解！
3. 沒人同意改稿子，那么，恭喜你。加班吧！
4. 或者，你可以把那些細(xì)節(jié)工作扔給flash！

問題集中體現(xiàn)在設(shè)計和效果上！

先說設(shè)計：

網(wǎng)頁設(shè)計，除了體現(xiàn)效果，還有很多不可缺少的東西。這里不談純粹用來欣賞的網(wǎng)站。畢竟大部分的站點需要被大量閱讀的。

1. 網(wǎng)頁的柵格系統(tǒng)
   看這篇文章：http://ued.taobao.com/blog/2008/09/17/grid_systems/
2. 速度
   很重要，非常的重要！減少圖片，使用背景圖整合降低http連接次數(shù)。能使用文字盡量使用文字。所以嘛，還是得注意啊！
3. 背景圖的小圖循環(huán)和重復(fù)使用
   大的就不說了，弄幾個弧度上去，幾乎就要用大圖片了，像奧運時候那么網(wǎng)站的大背景。
   小的背景圖，小欄目的背景圖，以及子頁面的某個地方的背景圖。咱盡量一致！小背景循環(huán)，效果圖里的寬和高哪個小，盡量按哪個方向循環(huán)！目的就是保證速度！
4. 效果
   png，這個可以說是效果的典型了！無背景的透明屬性。相信很多人都喜歡！但ie6卻有缺陷，好了，看碼頭的：【ie6的瘋狂之二】ie6中png alpha透明(全集)

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

如果設(shè)計的時候，考慮到重復(fù)利用圖片、背景等。會降低布局切片的很多工作。或者我可以說，頁面重復(fù)利用率越高，就越快！主頁雖然是主頁，子頁雖然更簡單，但重復(fù)利用主頁上已經(jīng)下載了的東西，不更好么？我想說的是，要有全局的思維！

當(dāng)然了，你肯定也想到了flash的應(yīng)用。但flash貌似也有瀏覽器兼容問題！

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

如果制作方擅自行動修改而設(shè)計方死活有意見......

唉，問題可大可小！做個網(wǎng)頁也不容易啊！