關(guān)于網(wǎng)頁(yè)設(shè)計(jì)布局的理解

2024-08-30 08:33:37

字體：大中小

供稿：網(wǎng)友

矛盾出來(lái)了，像我們這些小作坊，基本都是設(shè)計(jì)布局一人搞定。甚至還有加后臺(tái)程序的。假設(shè)設(shè)計(jì)的時(shí)候考慮布局了，我們都有這個(gè)能力進(jìn)行調(diào)整。但像大公司，分工嚴(yán)格的情況下，如果設(shè)計(jì)師不懂css不會(huì)布局。或者理解有誤，那么設(shè)計(jì)稿就會(huì)讓布局人員耗費(fèi)大量的時(shí)間和精力。因?yàn)闉g覽器太多！
經(jīng)常看到有網(wǎng)友抱怨設(shè)計(jì)師給的稿子無(wú)法還原。因?yàn)樗麄儗?duì)瀏覽器和屏幕的理解不一樣。也有的是因?yàn)樾Чk，顏色太多。更有甚者是使用flash制作嫌浪費(fèi)，而html又雞肋.....好吧，我們拋開(kāi)這最后一種情況，只談對(duì)屏幕和效果以及設(shè)計(jì)布局的理解。
先談屏幕：
屏幕分辨率，還是以1024×768為主。而滿屏的定義則無(wú)從談起。為什么？請(qǐng)看一下原因：

你不能確定用戶的ie裝了幾個(gè)插件！插件越多，瀏覽器顯示高度越低！你不能確定用戶的顯示器是否設(shè)置正確（歪一邊了，弧形的，截?cái)嗟模s小的放大的）你不能確定用戶顯示器的分辨率是否為最佳分辨率。其典型在于某些寬屏或高屏顯示器，有的是等比例縮小后留白。而更有甚者則是滿屏拉伸。比例就不對(duì)了！
要使得網(wǎng)頁(yè)滿屏。很多人說(shuō)寬度1003，也有人說(shuō)是1004。而我則不這樣認(rèn)為。
假設(shè)客戶要求網(wǎng)頁(yè)滿屏。那么，你就要曉得用戶的顯示器尺寸的屏幕分辨率。如果客戶對(duì)這玩意認(rèn)知度很低。就不要輕易去改人家的分辨率。我1440×900的寬屏，我用1024×768的分辨率，我樂(lè)意！如果這客戶要求一定要滿屏，那么問(wèn)題又出現(xiàn)了，如果交貨的時(shí)候客戶換了一臺(tái)不同尺寸的顯示器呢？分辨率變大了，你的網(wǎng)頁(yè)窄了，分辨率小了，你的網(wǎng)頁(yè)寬了！你咋辦？
其實(shí)滿屏也分兩種，我姑且命名一種為內(nèi)容滿屏，一種為視覺(jué)滿屏！
所謂內(nèi)容滿屏，就是指網(wǎng)站上的東西，左邊界就在顯示器左邊界，右邊界就是在顯示器右邊界。最佳的解決辦法就是使用百分比。而百分比帶來(lái)的負(fù)面效應(yīng)：

瀏覽器bug 設(shè)計(jì)及制作難度增加
所謂視覺(jué)滿屏，其實(shí)是一種取巧的做法。而這種方法。其實(shí)很簡(jiǎn)單，一個(gè)網(wǎng)站的頭部，無(wú)非就是導(dǎo)航和banner，如果導(dǎo)航在最上邊，那么，將導(dǎo)航的背景呈100%，導(dǎo)航居中。如果banner在最上邊，那么注意處理圖片兩端，還是100%寬背景！
OK，雖然內(nèi)容寬度還有可能是1000、1003、甚至是900或更低，視覺(jué)上依然是百分百的寬度，只要避免最小寬度大于瀏覽器寬度、或客戶的顯示器分辨率寬度大于你的最小寬度。永遠(yuǎn)OK。

上一頁(yè)12 下一頁(yè) 閱讀全文

上一篇：網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)談

下一篇：網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格是不是越簡(jiǎn)單越好？