越來(lái)越多的企業(yè)在創(chuàng )業(yè)初期就開(kāi)始了自己公司的網(wǎng)站建設之路，而說(shuō)到網(wǎng)站建設就不得不提到網(wǎng)頁(yè)布局，網(wǎng)頁(yè)布局對于網(wǎng)站建設來(lái)說(shuō)無(wú)疑是重要的，那么怎樣做好網(wǎng)頁(yè)的布局呢?下面就來(lái)學(xué)習一下。

怎樣做好網(wǎng)頁(yè)的布局 ?

1.網(wǎng)頁(yè)設計的頁(yè)面尺寸： ?

頁(yè)面的尺寸其實(shí)和顯示器的大小以及分辨率有著(zhù)很大的關(guān)系，一般來(lái)說(shuō)，分辨率在640*480的情況下，頁(yè)面的顯示尺寸為:620*311個(gè)象素;分辨率在800*600的情況下，頁(yè)面的顯示尺寸為：780*428個(gè)象素;分辨率在1024*768的情況下，頁(yè)面的顯示尺寸為：1007*600，從以上數據中我們可以看出，分辨率越和頁(yè)面大小是呈正比關(guān)系，即分辨率越高則頁(yè)面越大。而當用戶(hù)打開(kāi)網(wǎng)站網(wǎng)頁(yè)時(shí)，其瀏覽器也會(huì )占領(lǐng)一部分空間，這樣留給網(wǎng)頁(yè)的空間就會(huì )對應的縮小，這是我們在網(wǎng)頁(yè)制作中需要關(guān)注的問(wèn)題，另外還有，在瀏覽器選擇關(guān)閉的時(shí)候網(wǎng)頁(yè)頁(yè)面也會(huì )對應的增大，這樣和瀏覽器未關(guān)閉時(shí)候的網(wǎng)頁(yè)大小是不同的。 ?

有的人說(shuō)，及時(shí)網(wǎng)頁(yè)對于顯示器來(lái)說(shuō)有點(diǎn)大，用戶(hù)也是可以向下拖動(dòng)網(wǎng)頁(yè)來(lái)獲取內容的，其實(shí)不然，因為要用戶(hù)主動(dòng)向下拖網(wǎng)頁(yè)的前提是你的網(wǎng)頁(yè)內容足夠吸引人，而我們對用戶(hù)在沒(méi)有把握的情況下*將網(wǎng)頁(yè)設計成合適的大小，方便瀏覽者進(jìn)行瀏覽。 ?

2.網(wǎng)頁(yè)設計的整體造型： ?

整體造型指的也是頁(yè)面的整體形象，就是呈現給瀏覽者的*印象，這在無(wú)形中也關(guān)系著(zhù)用戶(hù)的喜歡與否，所以在網(wǎng)頁(yè)的設計過(guò)程中應當盡量選擇層疊有序的。對于顯示器和瀏覽器是矩形的特點(diǎn)，網(wǎng)頁(yè)的設計可以呈現矩形、圓形等與自然界中相似形狀的運用。而圖形的不同其實(shí)給人的感覺(jué)也不盡相同。例如，矩形，矩形代表著(zhù)規則和正式通常會(huì )被運用到*網(wǎng)站等較為正式的網(wǎng)站中;例如，圓形，圓形給人的感覺(jué)是團結溫暖柔和的，所以常被運用到關(guān)于時(shí)尚的網(wǎng)站中……所以不同類(lèi)型的網(wǎng)站我們要根據其性質(zhì)做不同形狀的選擇。 ?

3.網(wǎng)頁(yè)設計的頁(yè)頭： ?

頁(yè)頭其實(shí)就是頁(yè)眉，通常是會(huì )做顯示主題之用，所以頁(yè)頭的內容一定要簡(jiǎn)潔明了，讓瀏覽者一下就明白網(wǎng)站的中心是什么，所以我們在網(wǎng)頁(yè)的設計中可以將網(wǎng)站名稱(chēng)和公司標志或者中心廣告放置在頁(yè)頭，讓用戶(hù)能夠一目了然。 ?

4.網(wǎng)頁(yè)設計的文本： ?

在過(guò)去，因為技術(shù)的原因使得文本的放置靈活性較小，只能放置在固定的地方，而隨著(zhù)新技術(shù)的興起，文本已經(jīng)可以按照自己的要求進(jìn)行自由放置了。所以我們在放置文本的時(shí)候可以結合網(wǎng)頁(yè)整體的設計進(jìn)行，這樣既能保證文本的有效性被用戶(hù)*的接受，又能夠保證整體網(wǎng)頁(yè)的美觀(guān)。 ?

5.網(wǎng)頁(yè)設計制作的圖片： ?

一個(gè)圖文并茂的網(wǎng)頁(yè)中文本和圖片一個(gè)都不能少，所以在文本歸置好之后還要處理好圖片，文本和圖片相得益彰才能夠呈現一個(gè)出彩的網(wǎng)頁(yè)。 ?

6.網(wǎng)頁(yè)設計制作的多媒體： ?

隨著(zhù)動(dòng)態(tài)網(wǎng)頁(yè)的興起，人們在設計制作網(wǎng)頁(yè)時(shí)也會(huì )加入一些聲音和動(dòng)畫(huà)以此來(lái)豐富網(wǎng)站的體驗，合理的多媒體的運用能夠讓網(wǎng)頁(yè)看起來(lái)更加生動(dòng)富有生機。是現代網(wǎng)站豐富體驗的不可或缺的手段之一。 ?

7.網(wǎng)頁(yè)設計的頁(yè)腳： ?

頁(yè)腳和頁(yè)眉應該呈現相互呼應的特征，頁(yè)眉一般被放置點(diǎn)睛信息，頁(yè)腳就要放置一些作者或者公司信息了。這樣首尾相互呼應才能*限度的讓網(wǎng)頁(yè)看起來(lái)完整有序。 ?

網(wǎng)站該如何布局好首頁(yè) ?

一、確定首頁(yè)主題 ?

首頁(yè)是網(wǎng)站的核心頁(yè)面，網(wǎng)站的主題主要是首頁(yè)確定的，所以在首頁(yè)中需要讓用戶(hù)了解網(wǎng)站是做什么的。在網(wǎng)站設計上犀牛云主張通過(guò)網(wǎng)站的標題、關(guān)鍵詞的描述來(lái)為企業(yè)展示主要內容。這樣用戶(hù)在搜索引擎上看到的搜索結果就是企業(yè)的網(wǎng)站標題與與描述的內容。此外，首頁(yè)主題也是網(wǎng)站SEO推廣非常重要的一項內容，搜索引擎上會(huì )展示企業(yè)的網(wǎng)站信息，就是企業(yè)設置的網(wǎng)站主題。 ?

二、設置首頁(yè)導航 ?

首頁(yè)導航是對網(wǎng)站內容的一個(gè)細分，這樣方便用戶(hù)根據自己的需求選擇要瀏覽的欄目。導航該如何設置呢?網(wǎng)站導航要做到分類(lèi)清晰，邏輯清晰，用戶(hù)想了解到內容放在導航里面。 ?

對于頁(yè)面很多的網(wǎng)站，導航欄目之間不要重復，*了也不要有相似的詞，避免讓用戶(hù)產(chǎn)生誤會(huì )，導致網(wǎng)站邏輯混亂。設計導航欄的時(shí)候可以體現這個(gè)企業(yè)的大概信息，現在比較流行的導航欄是下拉+圖片文字的方式去表現。這樣瀏覽者可以一目了然的了解企業(yè)的概括和產(chǎn)品的信息。 ?

一般企業(yè)的導航，主要包括首頁(yè)、產(chǎn)品服務(wù)、優(yōu)勢亮點(diǎn)、公司新聞、關(guān)于我們、聯(lián)系我們這些通用類(lèi)的欄目。這里犀牛云建議可以把這公司簡(jiǎn)介和聯(lián)系我們這兩個(gè)欄目做成一個(gè)，強調企業(yè)的實(shí)力雄厚，產(chǎn)品的質(zhì)量，打消用戶(hù)對企業(yè)的不信任，*通過(guò)聯(lián)系我們來(lái)獲得電話(huà)咨詢(xún)?；ヂ?lián)網(wǎng)上有許多導航欄目做的很好的網(wǎng)站，這里可以參考網(wǎng)上的優(yōu)化網(wǎng)站的導航欄目劃分方法。 ?

導航的上方應該有企業(yè)網(wǎng)站的LOGO，還有聯(lián)系方式(可以是QQ也可以是電話(huà)，要是可復制的)，這樣能讓用戶(hù)一眼就看到，避免到時(shí)候到處找聯(lián)系方式在哪，其次導航上做的詞應該要是你這個(gè)行業(yè)用戶(hù)所需要的內容，你可以依靠百度下拉框和推廣助手來(lái)挖用戶(hù)需求詞。 ?

三、重視banner條設計 ?

如果首頁(yè)是一個(gè)網(wǎng)站的核心，那么banner就是網(wǎng)站首頁(yè)的核心。當人們打開(kāi)一個(gè)網(wǎng)站的首頁(yè)，最醒目的就是banner條。所以犀牛云在為企業(yè)設計banner條時(shí)，盡量確保圖片和自己的產(chǎn)品相符合，然后用文字加以說(shuō)明。這樣的好處是用戶(hù)僅看banner條就能知道網(wǎng)站的主題，也進(jìn)一步的對產(chǎn)品有初步的了解。 ?

banner首先主題要明確，色彩搭配要明亮干凈，與整個(gè)頁(yè)面要相協(xié)調，做到能吸引用戶(hù)去點(diǎn)擊，這樣才能更好的宣傳，推廣產(chǎn)品和新功能。 ?

banner是首頁(yè)的核心，一般只做企業(yè)里*代表性，用戶(hù)需求量*的產(chǎn)品，讓用戶(hù)一眼就能看明白，這個(gè)就是他要找的，banner圖片的鏈接應該跳轉到相關(guān)產(chǎn)品的頁(yè)面，首屏的其他內容可以做僅次于banner圖片上的主要產(chǎn)品，但不建議經(jīng)常去更新，應該按行業(yè)用戶(hù)的需求走勢去更新。另外在這里說(shuō)一下，有一部分企業(yè)居然在banner上放一些風(fēng)景啊、抽象圖片這一類(lèi)很難讓人看懂的圖片，這樣做是極度浪費首屏的大好資源。 ?

四、合理安排首頁(yè)內容 ?

首頁(yè)的內容重要性就不再多說(shuō)。如果說(shuō)網(wǎng)站首頁(yè)banner、導航等一些元素是網(wǎng)站的重要內容，那么網(wǎng)站首頁(yè)的內容就是重中之重。網(wǎng)站banner、導航只是用戶(hù)*印象，如果要提高網(wǎng)站的轉化率，還是要從內容建設。站長(cháng)需要先對用戶(hù)群的需求進(jìn)行分析，把用戶(hù)關(guān)注最多的內容放在首頁(yè)最重要的位置，這樣會(huì )降低用戶(hù)的跳出率，有利于提高網(wǎng)站的轉化。 ?

首屏之后的幾屏主要做次于首屏的產(chǎn)品或者服務(wù)，一般來(lái)說(shuō)用戶(hù)拉到第二屏第三屏注意力肯定是沒(méi)有在首屏時(shí)候集中了，所以后面幾屏做的產(chǎn)品要強調出產(chǎn)品的優(yōu)勢、賣(mài)點(diǎn)，并且在產(chǎn)品旁邊要出現轉化入口，及時(shí)抓住用戶(hù)，不讓用戶(hù)流失。 ?

五、適當布置轉化工具 ?

適當布置轉化工具，是很多網(wǎng)站容易疏忽的事情。這就相當于踢足球*忘了臨門(mén)一腳進(jìn)球，實(shí)在非?？上?。一般而言，設置的轉化工具包括電話(huà)、QQ、百度商橋、第三方客服工具、在線(xiàn)留言、在線(xiàn)注冊等。 ?

六、注意網(wǎng)站整體顏色和底部的布局 ?

網(wǎng)站的背景顏色是非常容易被忽略的，不是所有的顏色都能通用于每個(gè)行業(yè)的網(wǎng)站，就比如做婚紗攝影的，一般都是以白色占據大部分，也可以填充一點(diǎn)紅色藍色，如果使用黑色，灰色這樣的顏色，就會(huì )覺(jué)得很奇怪，很想馬上關(guān)掉網(wǎng)站，不會(huì )有看下去的欲望。贏(yíng)商網(wǎng)絡(luò )建議網(wǎng)站底部要保持簡(jiǎn)潔，不要做太多亂七八糟的東西，其實(shí)做上友情鏈接就夠了，最多在底下再次強調一下你公司的聯(lián)系方式。

網(wǎng)頁(yè)版面設計步驟和布局技巧 一、設計網(wǎng)頁(yè)分辨率選擇 ?

隨著(zhù)電腦的發(fā)展，顯示器是越來(lái)越大，分辨率也是越來(lái)越高，為了照顧所有不同顯示器的用戶(hù)，把網(wǎng)站的制作尺寸規范就定在1280*768下，網(wǎng)頁(yè)寬度保持在1200-1004以?xún)?，高度還是以根據需要制作的內容在定，如果只想網(wǎng)頁(yè)只在一屏內顯示，不要上下滾動(dòng)條， 一般高度是600-635像素之間, 就不會(huì )出現垂直滾動(dòng)條。很多人瀏覽網(wǎng)站時(shí)間比較長(cháng)就會(huì )感覺(jué)到眼睛疲勞，當然，這不僅僅是時(shí)間的問(wèn)題，有的時(shí)候還可能是因為我們沒(méi)有選擇到一個(gè)比較好的分辨率。目前網(wǎng)絡(luò )上的網(wǎng)站很多使用的都是778個(gè)寬度的像素，但是事實(shí)上像素低于800就已經(jīng)讓人感覺(jué)到非常的壓抑了。所以說(shuō)我們在做網(wǎng)站的時(shí)候一定要選擇一個(gè)比較舒適的分辨率，這樣人們在瀏覽網(wǎng)站的時(shí)候才不會(huì )帶來(lái)眼睛的負擔，從而能夠在網(wǎng)站上面停留的時(shí)間更長(cháng)。從以上數據可以看出，分辨率越高頁(yè)面尺寸越大。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因，目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。在網(wǎng)頁(yè)設計過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內容(尺寸)的方法。但我想提醒大家，除非你能肯定站點(diǎn)的內容能吸引大家拖動(dòng)，否則不要讓訪(fǎng)問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內容，那么你*能在上面做上頁(yè)面內部連接，以方便訪(fǎng)問(wèn)者瀏覽。 ?

二、適當的穿插圖片廣告 ?

圖片和文本是網(wǎng)頁(yè)的兩大構成元素，缺一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現在這里?，F在互聯(lián)網(wǎng)在人們生活中普及，所以網(wǎng)絡(luò )上也有各種各樣的鋪天蓋地的廣告，但是很多廣告卻騎到了負面作用，讓人們看著(zhù)感覺(jué)特別的煩惱。一段文字和一張圖片，甚至一個(gè)圖標……在你進(jìn)行布局的時(shí)候，由于你的素材并不是立刻手到擒來(lái)，你的布局總是喜歡用一個(gè)個(gè)矩形來(lái)代表一段文字或一張圖片，這本沒(méi)有錯，但這個(gè)做法也會(huì )讓你陷入“框架陷阱”。所以在插入廣告的時(shí)候一定要合理的設計，當然，最重要的就是廣告的畫(huà)面一定不要影響人們對網(wǎng)站的閱讀，很多廣告都是浮窗式的，但是一定要保證這些廣告不會(huì )覆蓋出網(wǎng)絡(luò )上面的文字。而且廣告的數量一定不要太多，這樣也就不會(huì )使人們感到反感。 ?

三、做好焦點(diǎn) ?

為什么攝影師拍的照片看著(zhù)很舒服，因為他們可以找到焦點(diǎn)。但任何一件好的平面作品，一定是有焦點(diǎn)的。就像我們談到過(guò)，十字準星型的視覺(jué)結構習慣將焦點(diǎn)置于中心位置，要制造一個(gè)焦點(diǎn)的辦法有很多，簡(jiǎn)言之，就是制造沖突。想象你在一個(gè)人群稀疏的大廳，突然有兩個(gè)人高聲爭論什么，這時(shí)引起了幾個(gè)人圍觀(guān)，這個(gè)情景就在原本安靜的人流中制造了一個(gè)關(guān)注焦點(diǎn)。同樣，在視覺(jué)領(lǐng)域也是如此，利用對比沖突應該是一種最有效的制造焦點(diǎn)的方式。 ?

對于焦點(diǎn)的認識我們也不應局限于是一個(gè)“點(diǎn)”，它是一塊正吸引你的視線(xiàn)所投射的區域。它還可以分為實(shí)焦點(diǎn)和虛焦點(diǎn)，實(shí)焦點(diǎn)是在虛焦點(diǎn)之上更為精準的投射存在。除了色彩，其他任何屬性都可以經(jīng)由對比形成焦點(diǎn)，這時(shí)你要做的，就是注意焦點(diǎn)不應太多。也因此，除了焦點(diǎn)以外，設計中的其他元素都要保持一種相似性。這里我們總結一下能用于進(jìn)行對比屬性，這些屬性之間形成的對比越大，沖突越大。 ?

空間：充滿(mǎn)-空置、積極活躍-消極被動(dòng)、前進(jìn)-后退、近-遠、二維-三維、封閉-開(kāi)放 ?

形式：簡(jiǎn)單-復雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機形式、直線(xiàn)-曲線(xiàn)、對稱(chēng)-非對稱(chēng)、完整-破碎 ?

結構：井井有條-混亂無(wú)序、排列成序-隨意放置、襯線(xiàn)字體-無(wú)襯線(xiàn)字體、機械-手工 ?

紋理：細-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍 ?

位置：頂部-底部、高-低、右-左、上-下、前-后、有節奏-隨意、單獨-分組、接近-遠離、中心-邊緣、整齊排列-互不關(guān)聯(lián)、內-外 ?

方向：垂直-水平、垂直線(xiàn)-對角線(xiàn)、向前-向后、穩定-活動(dòng)、內聚-分散、順時(shí)針?lè )较?逆時(shí)針?lè )较?、凹?凸形、正體字-斜體字 ?

尺寸：大-小、長(cháng)-短、窄-寬、擴大-收縮、深-淺 ?

顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和(深色)-無(wú)色(素色) ?

密度：透明-晦暗、稠密-稀薄、液體-固體 ?

重力：輕-重、穩定-不穩定 ?

設計師在做設計時(shí)，其實(shí)并不會(huì )將這些規范提前設定在大腦中，而是經(jīng)過(guò)經(jīng)驗的積累而形成一種潛在的直覺(jué)，這份清單的意義并不是需要你記下它，而是瀏覽完后，在設計的任何場(chǎng)合的提醒。比如一份作品完成后，可以看看究竟焦點(diǎn)是否足夠吸引，哪些元素需要進(jìn)一步調整。焦點(diǎn)突出的前提是非焦點(diǎn)區域的元素盡量保持一致。制造沖突似乎手到擒來(lái)，但是要保持一致卻需要步步為營(yíng)。 ?