- 相關(guān)推薦
關(guān)于網(wǎng)頁(yè)設計布局的分析
矛盾出來(lái)了,像我們這些小作坊,基本都是設計布局一人搞定。甚至還有加后臺程序的。假設設計的時(shí)候考慮布局了,我們都有這個(gè)能力進(jìn)行調整。但像大公司,分工嚴格的情況下,如果設計師不懂css不會(huì )布局;蛘呃斫庥姓`,那么設計稿就會(huì )讓布局人員耗費大量的時(shí)間和精力。因為瀏覽器太多!
經(jīng)?吹接芯W(wǎng)友抱怨設計師給的稿子無(wú)法還原。因為他們對瀏覽器和屏幕的理解不一樣。也有的是因為效果太絢,顏色太多。更有甚者是使用flash制作嫌浪費,而html又雞肋.....好吧,我們拋開(kāi)這最后一種情況,只談對屏幕和效果以及設計布局的理解。
先談屏幕:
屏幕分辨率,還是以1024×768為主。而滿(mǎn)屏的定義則無(wú)從談起。為什么?請看一下原因: 你不能確定用戶(hù)的ie裝了幾個(gè)插件!插件越多,瀏覽器顯示高度越低! 你不能確定用戶(hù)的顯示器是否設置正確(歪一邊了,弧形的,截斷的,縮小的放大的) 你不能確定用戶(hù)顯示器的分辨率是否為最佳分辨率。其典型在于某些寬屏或高屏顯示器,有的是等比例縮小后留白。而更有甚者則是滿(mǎn)屏拉伸。比例就不對了!
要使得網(wǎng)頁(yè)滿(mǎn)屏。很多人說(shuō)寬度1003,也有人說(shuō)是1004。而我則不這樣認為。
假設客戶(hù)要求網(wǎng)頁(yè)滿(mǎn)屏。那么,你就要曉得用戶(hù)的顯示器尺寸的屏幕分辨率。如果客戶(hù)對這玩意認知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏,我用1024×768的分辨率,我樂(lè )意!如果這客戶(hù)要求一定要滿(mǎn)屏,那么問(wèn)題又出現了,如果交貨的時(shí)候客戶(hù)換了一臺不同尺寸的顯示器呢?分辨率變大了,你的網(wǎng)頁(yè)窄了,分辨率小了,你的網(wǎng)頁(yè)寬了!你咋辦?
其實(shí)滿(mǎn)屏也分兩種,我姑且命名一種為內容滿(mǎn)屏,一種為視覺(jué)滿(mǎn)屏!
所謂內容滿(mǎn)屏,就是指網(wǎng)站上的東西,左邊界就在顯示器左邊界,右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來(lái)的負面效應: 瀏覽器bug 設計及制作難度增加
所謂視覺(jué)滿(mǎn)屏,其實(shí)是一種取巧的做法。而這種方法。其實(shí)很簡(jiǎn)單,一個(gè)網(wǎng)站的頭部,無(wú)非就是導航和banner,如果導航在最上邊,那么,將導航的背景呈100%,導航居中。如果banner在最上邊,那么注意處理圖片兩端,還是100%寬 背景!
OK,雖然內容寬度還有可能是1000、1003、甚至是900或更低,視覺(jué)上依然是百分百的寬度,只要避免最小寬度大于瀏覽器寬度、或客戶(hù)的顯示器分辨率寬度大于你的最小寬度。永遠OK。