怎樣做好網頁的布局
越來越多的企業(yè)在創(chuàng)業(yè)初期就開始了自己公司的網站建設之路，而說到網站建設就不得不提到網頁布局，網頁布局對于網站建設來說無疑是重要的，那么怎樣做好網頁的布局呢?下面就來學習一下。怎樣做好網頁的布局 1.網頁設計的頁面尺寸： 頁面的尺寸其實和顯示器的大小以及分辨率有著很大的關系，一般來說，分辨率在640*480的情況下，頁面的顯示尺寸為:620*311個象素;分辨率在800*600的情況下，頁面的顯示尺
越來越多的企業(yè)在創(chuàng)業(yè)初期就開始了自己公司的網站建設之路，而說到網站建設就不得不提到網頁布局，網頁布局對于網站建設來說無疑是重要的，那么怎樣做好網頁的布局呢?下面就來學習一下。怎樣做好網頁的布局 1.網頁設計的頁面尺寸： 頁面的尺寸其實和顯示器的大小以及分辨率有著很大的關系，一般來說，分辨率在640*480的情況下，頁面的顯示尺寸為:620*311個象素;分辨率在800*600的情況下，頁面的顯示尺
越來越多的企業(yè)在創(chuàng)業(yè)初期就開始了自己公司的網站建設之路，而說到網站建設就不得不提到網頁布局，網頁布局對于網站建設來說無疑是重要的，那么怎樣做好網頁的布局呢?下面就來學習一下。
怎樣做好網頁的布局
1.網頁設計的頁面尺寸：
頁面的尺寸其實和顯示器的大小以及分辨率有著很大的關系，一般來說，分辨率在640*480的情況下，頁面的顯示尺寸為:620*311個象素;分辨率在800*600的情況下，頁面的顯示尺寸為：780*428個象素;分辨率在1024*768的情況下，頁面的顯示尺寸為：1007*600，從以上數據中我們可以看出，分辨率越和頁面大小是呈正比關系，即分辨率越高則頁面越大。而當用戶打開網站網頁時，其瀏覽器也會占領一部分空間，這樣留給網頁的空間就會對應的縮小，這是我們在網頁制作中需要關注的問題，另外還有，在瀏覽器選擇關閉的時候網頁頁面也會對應的增大，這樣和瀏覽器未關閉時候的網頁大小是不同的。
有的人說，及時網頁對于顯示器來說有點大，用戶也是可以向下拖動網頁來獲取內容的，其實不然，因為要用戶主動向下拖網頁的前提是你的網頁內容足夠吸引人，而我們對用戶在沒有把握的情況下最好將網頁設計成合適的大小，方便瀏覽者進行瀏覽。
2.網頁設計的整體造型：
整體造型指的也是頁面的整體形象，就是呈現給瀏覽者的第一印象，這在無形中也關系著用戶的喜歡與否，所以在網頁的設計過程中應當盡量選擇層疊有序的。對于顯示器和瀏覽器是矩形的特點，網頁的設計可以呈現矩形、圓形等與自然界中相似形狀的運用。而圖形的不同其實給人的感覺也不盡相同。例如，矩形，矩形代表著規(guī)則和正式通常會被運用到政府網站等較為正式的網站中;例如，圓形，圓形給人的感覺是團結溫暖柔和的，所以常被運用到關于時尚的網站中……所以不同類型的網站我們要根據其性質做不同形狀的選擇。
3.網頁設計的頁頭：
頁頭其實就是頁眉，通常是會做顯示主題之用，所以頁頭的內容一定要簡潔明了，讓瀏覽者一下就明白網站的中心是什么，所以我們在網頁的設計中可以將網站名稱和公司標志或者中心廣告放置在頁頭，讓用戶能夠一目了然。
4.網頁設計的文本：
在過去，因為技術的原因使得文本的放置靈活性較小，只能放置在固定的地方，而隨著新技術的興起，文本已經可以按照自己的要求進行自由放置了。所以我們在放置文本的時候可以結合網頁整體的設計進行，這樣既能保證文本的有效性被用戶最大的接受，又能夠保證整體網頁的美觀。
5.網頁設計制作的圖片：
一個圖文并茂的網頁中文本和圖片一個都不能少，所以在文本歸置好之后還要處理好圖片，文本和圖片相得益彰才能夠呈現一個出彩的網頁。
6.網頁設計制作的多媒體：
隨著動態(tài)網頁的興起，人們在設計制作網頁時也會加入一些聲音和動畫以此來豐富網站的體驗，合理的多媒體的運用能夠讓網頁看起來更加生動富有生機。是現代網站豐富體驗的不可或缺的手段之一。
7.網頁設計的頁腳：
頁腳和頁眉應該呈現相互呼應的特征，頁眉一般被放置點睛信息，頁腳就要放置一些作者或者公司信息了。這樣首尾相互呼應才能最大限度的讓網頁看起來完整有序。
網站該如何布局好首頁
一、確定首頁主題
首頁是網站的核心頁面，網站的主題主要是首頁確定的，所以在首頁中需要讓用戶了解網站是做什么的。在網站設計上犀牛云主張通過網站的標題、關鍵詞的描述來為企業(yè)展示主要內容。這樣用戶在搜索引擎上看到的搜索結果就是企業(yè)的網站標題與與描述的內容。此外，首頁主題也是網站SEO推廣非常重要的一項內容，搜索引擎上會展示企業(yè)的網站信息，就是企業(yè)設置的網站主題。
二、設置首頁導航
首頁導航是對網站內容的一個細分，這樣方便用戶根據自己的需求選擇要瀏覽的欄目。導航該如何設置呢?網站導航要做到分類清晰，邏輯清晰，用戶想了解到內容放在導航里面。
對于頁面很多的網站，導航欄目之間不要重復，最好了也不要有相似的詞，避免讓用戶產生誤會，導致網站邏輯混亂。設計導航欄的時候可以體現這個企業(yè)的大概信息，現在比較流行的導航欄是下拉+圖片文字的方式去表現。這樣瀏覽者可以一目了然的了解企業(yè)的概括和產品的信息。
一般企業(yè)的導航，主要包括首頁、產品服務、優(yōu)勢亮點、公司新聞、關于我們、聯系我們這些通用類的欄目。這里犀牛云建議可以把這公司簡介和聯系我們這兩個欄目做成一個，強調企業(yè)的實力雄厚，產品的質量，打消用戶對企業(yè)的不信任，最后通過聯系我們來獲得電話咨詢。互聯網上有許多導航欄目做的很好的網站，這里可以參考網上的優(yōu)化網站的導航欄目劃分方法。
導航的上方應該有企業(yè)網站的LOGO，還有聯系方式(可以是QQ也可以是電話，要是可復制的)，這樣能讓用戶一眼就看到，避免到時候到處找聯系方式在哪，其次導航上做的詞應該要是你這個行業(yè)用戶所需要的內容，你可以依靠百度下拉框和推廣助手來挖用戶需求詞。
三、重視banner條設計
如果首頁是一個網站的核心，那么banner就是網站首頁的核心。當人們打開一個網站的首頁，最醒目的就是banner條。所以犀牛云在為企業(yè)設計banner條時，盡量確保圖片和自己的產品相符合，然后用文字加以說明。這樣的好處是用戶僅看banner條就能知道網站的主題，也進一步的對產品有初步的了解。
banner首先主題要明確，色彩搭配要明亮干凈，與整個頁面要相協(xié)調，做到能吸引用戶去點擊，這樣才能更好的宣傳，推廣產品和新功能。
banner是首頁的核心，一般只做企業(yè)里最具代表性，用戶需求量最大的產品，讓用戶一眼就能看明白，這個就是他要找的，banner圖片的鏈接應該跳轉到相關產品的頁面，首屏的其他內容可以做僅次于banner圖片上的主要產品，但不建議經常去更新，應該按行業(yè)用戶的需求走勢去更新。另外在這里說一下，有一部分企業(yè)居然在banner上放一些風景啊、抽象圖片這一類很難讓人看懂的圖片，這樣做是極度浪費首屏的大好資源。
四、合理安排首頁內容
首頁的內容重要性就不再多說。如果說網站首頁banner、導航等一些元素是網站的重要內容，那么網站首頁的內容就是重中之重。網站banner、導航只是用戶第一印象，如果要提高網站的轉化率，還是要從內容建設。站長需要先對用戶群的需求進行分析，把用戶關注最多的內容放在首頁最重要的位置，這樣會降低用戶的跳出率，有利于提高網站的轉化。
首屏之后的幾屏主要做次于首屏的產品或者服務，一般來說用戶拉到第二屏第三屏注意力肯定是沒有在首屏時候集中了，所以后面幾屏做的產品要強調出產品的優(yōu)勢、賣點，并且在產品旁邊要出現轉化入口，及時抓住用戶，不讓用戶流失。
五、適當布置轉化工具
適當布置轉化工具，是很多網站容易疏忽的事情。這就相當于踢足球最后忘了臨門一腳進球，實在非?？上АＲ话愣?，設置的轉化工具包括電話、QQ、百度商橋、第三方客服工具、在線留言、在線注冊等。
六、注意網站整體顏色和底部的布局
網站的背景顏色是非常容易被忽略的，不是所有的顏色都能通用于每個行業(yè)的網站，就比如做婚紗攝影的，一般都是以白色占據大部分，也可以填充一點紅色藍色，如果使用黑色，灰色這樣的顏色，就會覺得很奇怪，很想馬上關掉網站，不會有看下去的欲望。贏商網絡建議網站底部要保持簡潔，不要做太多亂七八糟的東西，其實做上友情鏈接就夠了，最多在底下再次強調一下你公司的聯系方式。
網頁版面設計步驟和布局技巧
一、設計網頁分辨率選擇
隨著電腦的發(fā)展，顯示器是越來越大，分辨率也是越來越高，為了照顧所有不同顯示器的用戶，把網站的制作尺寸規(guī)范就定在1280*768下，網頁寬度保持在1200-1004以內，高度還是以根據需要制作的內容在定，如果只想網頁只在一屏內顯示，不要上下滾動條， 一般高度是600-635像素之間, 就不會出現垂直滾動條。很多人瀏覽網站時間比較長就會感覺到眼睛疲勞，當然，這不僅僅是時間的問題，有的時候還可能是因為我們沒有選擇到一個比較好的分辨率。目前網絡上的網站很多使用的都是778個寬度的像素，但是事實上像素低于800就已經讓人感覺到非常的壓抑了。所以說我們在做網站的時候一定要選擇一個比較舒適的分辨率，這樣人們在瀏覽網站的時候才不會帶來眼睛的負擔，從而能夠在網站上面停留的時間更長。從以上數據可以看出，分辨率越高頁面尺寸越大。瀏覽器的工具欄也是影響頁面尺寸的原因，目前的瀏覽器的工具欄都可以取消或者增加，那么當你顯示全部的工具欄和關閉全部工具欄時，頁面的尺寸是不一樣的。在網頁設計過程中，向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家，除非你能肯定站點的內容能吸引大家拖動，否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容，那么你最好能在上面做上頁面內部連接，以方便訪問者瀏覽。
二、適當的穿插圖片廣告
圖片和文本是網頁的兩大構成元素，缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現在這里。現在互聯網在人們生活中普及，所以網絡上也有各種各樣的鋪天蓋地的廣告，但是很多廣告卻騎到了負面作用，讓人們看著感覺特別的煩惱。一段文字和一張圖片，甚至一個圖標……在你進行布局的時候，由于你的素材并不是立刻手到擒來，你的布局總是喜歡用一個個矩形來代表一段文字或一張圖片，這本沒有錯，但這個做法也會讓你陷入“框架陷阱”。所以在插入廣告的時候一定要合理的設計，當然，最重要的就是廣告的畫面一定不要影響人們對網站的閱讀，很多廣告都是浮窗式的，但是一定要保證這些廣告不會覆蓋出網絡上面的文字。而且廣告的數量一定不要太多，這樣也就不會使人們感到反感。
三、做好焦點
為什么攝影師拍的照片看著很舒服，因為他們可以找到焦點。但任何一件好的平面作品，一定是有焦點的。就像我們談到過，十字準星型的視覺結構習慣將焦點置于中心位置，要制造一個焦點的辦法有很多，簡言之，就是制造沖突。想象你在一個人群稀疏的大廳，突然有兩個人高聲爭論什么，這時引起了幾個人圍觀，這個情景就在原本安靜的人流中制造了一個關注焦點。同樣，在視覺領域也是如此，利用對比沖突應該是一種最有效的制造焦點的方式。
對于焦點的認識我們也不應局限于是一個“點”，它是一塊正吸引你的視線所投射的區(qū)域。它還可以分為實焦點和虛焦點，實焦點是在虛焦點之上更為精準的投射存在。除了色彩，其他任何屬性都可以經由對比形成焦點，這時你要做的，就是注意焦點不應太多。也因此，除了焦點以外，設計中的其他元素都要保持一種相似性。這里我們總結一下能用于進行對比屬性，這些屬性之間形成的對比越大，沖突越大。
空間：充滿-空置、積極活躍-消極被動、前進-后退、近-遠、二維-三維、封閉-開放
形式：簡單-復雜、美-丑、抽象-具象、清晰-模糊、幾何形式-有機形式、直線-曲線、對稱-非對稱、完整-破碎
結構：井井有條-混亂無序、排列成序-隨意放置、襯線字體-無襯線字體、機械-手工
紋理：細-粗、平滑-粗糙、反光-啞光、滑-黏、銳-鈍
位置：頂部-底部、高-低、右-左、上-下、前-后、有節(jié)奏-隨意、單獨-分組、接近-遠離、中心-邊緣、整齊排列-互不關聯、內-外
方向：垂直-水平、垂直線-對角線、向前-向后、穩(wěn)定-活動、內聚-分散、順時針方向-逆時針方向、凹形-凸形、正體字-斜體字
尺寸：大-小、長-短、窄-寬、擴大-收縮、深-淺
顏色：黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、飽和(深色)-無色(素色)
密度：透明-晦暗、稠密-稀薄、液體-固體
重力：輕-重、穩(wěn)定-不穩(wěn)定
設計師在做設計時，其實并不會將這些規(guī)范提前設定在大腦中，而是經過經驗的積累而形成一種潛在的直覺，這份清單的意義并不是需要你記下它，而是瀏覽完后，在設計的任何場合的提醒。比如一份作品完成后，可以看看究竟焦點是否足夠吸引，哪些元素需要進一步調整。焦點突出的前提是非焦點區(qū)域的元素盡量保持一致。制造沖突似乎手到擒來，但是要保持一致卻需要步步為營。
版權所有：重慶安菲科技有限公司
友情鏈接:
