A. 總結網站設計的幾種版面布局形式
網站設計中.新鮮和個性是布局的最高境，能加強視覺效果。
1、T結構布局，就是指頁面頂部為橫條網站標志+廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單條背景教深，整體效果類似英文字母T,這是網頁設計中用的最廣返的一種布局方式。
這種布局的優點是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人看之無味。
2、口型布局。就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。
這種布局的優點是充分利用版面，信息量大。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。
3、三型布局。這種布局多用於國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。
4、對稱對比布局，採取左右或者上下對稱的布局，一半深色，一半淺色，一般用於設計型站點。優點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。
5、POP布局。POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類站點。優點：漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。
B. 網站怎麼設計
一、設計的任務
設計是一種審美活動，成功的設計作品一般都很藝術化。但藝術只是設計的手段，而並非設計的任務。設計的任務是要實現設計者的意圖，而並非創造美。
網頁設計的任務，是指設計者要表現的主題和要實現的功能。站點的性質不同，設計的任務也不同。從形式上，可以將站點分為以下三類。
第一類是資訊類站點，像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息，而且訪問量較大。因此需注意頁面的分割、結構的合理、頁面的優化、界面的親和等問題。
第二類是資訊和形象相結合的網站，像一些較大的公司、國內的高校等。這類網站在設計上要求較高，既要保證資訊類網站的上述要求，同時又要突出企業、單位的形象。然而就現狀上來看，這類網站有粗製濫造的嫌疑。
第三類則是形象類網站，比如一些中小型的公司或單位。這類網站一般較小，有的則有幾頁，需要實現的功能也較為簡單，網頁設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。
當然，這只是從整體上來看，具體情況還要具體分析。不同的站點還要區別對待。別忘了最重要的一點，那就是客戶的要求，它也屬於設計的任務。
明確了設計的任務之後，接下來要想的就是如何完成這個任務了。
二、設計的實現
設計的實現可以分為兩個部分。第一部分為站點的規劃及草圖的繪制，這一部分可以在紙上完成。第二部分為網頁的製作，這一過程是在計算機上完成的。
設計首頁的第一步是設計版面布局。我們可以將網頁看作傳統的報刊雜志來編輯，這裡面有文字、圖像乃至動畫，我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。 除了要有一台配置不錯的計算機外，軟體也是必需的。不能簡單地說一個軟體的好壞，只要是設計者使用起來覺得方便而且能得心應手的，就可以稱為好軟體。當然，它應該能滿足設計者的要求。筆者常用的軟體是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready，這些都是很不錯的軟體。 接下來我們要做的就是通過軟體的使用，將設計的藍圖變為現實，最終的集成一般是在Dreamweaver里完成的。雖然在草圖上，我們定出了頁面的大體輪廓，但是靈感一般都是在製作過程中產生的。設計作品一定要有創意，這是最基本的要求，沒有創意的設計是失敗的。在製作的過程中，我們會碰到許多問題，其中最敏感的莫過於頁面的顏色了。
三、色彩的運用
色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類的心靈感知。一般來說，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象徵生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長，象徵安寧和平與安全，如綠色食品。紫色是高貴的象徵，有莊重感。白色能給人以純潔與清白的感覺，表示和平與聖潔。
我們知道，顏色是光的折射產生的，紅、黃、藍是三原色，其它的色彩都可以用這三種色彩調和而成。換一種思路，我們可以用顏色的變化來表現光影效果，這無疑將使我們的作品更貼近現實。
色彩代表了不同的情感，有著不同的象徵含義。這些象徵含義是人們思想交流當中的一個復雜問題，它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水平、風俗習慣、宗教信仰、生活環境、性別差異而有所不同。
單純的顏色並沒有實際的意義，和不同的顏色搭配，它所表現出來的效果也不同。比如綠色和金黃、淡白搭配，可以產生優雅，舒適的氣氛。藍色和白色混合，能體現柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。設計的任務不同，配色方案也隨之不同。考慮到網頁的適應性，應盡量使用網頁安全色。
但顏色的使用並沒有一定的法則，如果一定要用某個法則去套，效果只會適得其反。經驗上我們可先確定一種能表現主題的主體色，然後根據具體的需要，應用顏色的近似和對比來完成整個頁面的配色方案。整個頁面在視覺上應是一個整體，以達到和諧、悅目的視覺效果。
四、造型的組合
在網頁設計中，我們主要通過視覺傳達來表現主題。在視覺傳達中，造型是很重要的一個元素。拋去是圖還是文字的問題，畫面上的所有元素可以統一作為畫面的基本構成要素點、線、面來進行處理。在一幅成功的作品裡，是需要點、線、面的共同組合與搭配來構造整個頁面的。
通常我們可以使用的組合手法有秩序、比例、均衡、對稱、連續、間隔、重疊、反復、交*、節奏、韻律、歸納、變異、特寫、反射等等，它們都有各自的特點。在設計中應根據具體情況，選擇最適合的表現手法，這樣有利於主題的表現。
通過點、線、面的組合，可以突出頁面上的重要元素，突出設計的主題，增強美感，讓觀者在感受美的過程中領會設計的主題，從而實現設計的任務。
造型的巧妙運用不僅能帶來極大的美感，而且能較好地突出企業形象，而且能將網頁上的各種元素有機的組織起來，它甚至還可以引導觀者的視線。
五、設計的原則
設計是有原則的，無論使用何種手法對畫面中的元素進行組合，都一定要遵循五個大的原則：統一、連貫、分割、對比及和諧。
統一，是指設計作品的整體性，一致性。設計作品的整體效果是至關重要的，在設計中切勿將各組成部分孤立分散，那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。
連貫，是指要注意頁面的相互關系。設計中應利用各組成部分在內容上的內在聯系和表現形式上的相互呼應，並注意整個頁面設計風格的一致性，實現視覺上和心理上的連貫，使整個頁面設計的各個部分極為融洽，猶如一氣呵成。
分割，是指將頁面分成若干小塊，小塊之間有視覺上的不同，這樣可以使觀者一目瞭然。在信息量很多時為使觀者能夠看清楚，就要注意到將畫面進行有效的分割。分割不僅是表現形式的需要。換個角度來講，分割也可以被視為對於頁面內容的一種分類歸納。
對比就是通過矛盾和沖突，使設計更加富有生氣。對比手法很多，例如：多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等等。在使用對比的時候應慎重，對比過強容易破壞美感，影響統一。
和諧是指整個頁面符合美的法則，渾然一體。如果一件設計作品僅僅是色彩、形狀、線條等的隨意混合，那麼作品將不但沒有「生命感」，而且也根本無法實現視覺設計的傳達功能。和諧不僅要看結構形式，而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通，產生心靈的共鳴。這是設計能否成功的關鍵。
六、網頁的優化
在網頁設計中，網頁的優化是較為重要的一個環節。它的成功與否會影響頁面的瀏覽速度和頁面的適應性，影響觀者對網站的印象。
在資訊類網站中，文字是頁面中最大的構成元素，因此字體的優化顯得尤為重要。使用css樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且與整個頁面搭配和諧為准。在白色的背景上，我們一般使用黑色，這樣不易產生視覺疲勞，能保證瀏覽者較長時間地瀏覽網頁。
圖片是網頁中的重要元素。圖片的優化可以在保證瀏覽質量的前提下將其size降至最低，這樣可以成倍地提高網頁的下載速度。利用Photoshop6或Fireworks4可以將圖片切成小塊，分別進行優化。輸出的格式可以為gif或jpeg，要視具體情況而定。一般我們把有較為復雜顏色變化的小塊優化為jpeg，而把那種只有單純色塊的卡通畫式的小塊優化為gif，這是由這兩種格式的特點決定的。
表格(table)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數。很多時候，我們將表格的邊框設為0，以此來定位頁面中的元素，或者籍此確定頁面中各元素的相對位置。我們知道：瀏覽器在讀取網頁html原代碼時，是讀完整個table才將它顯示出來的。如果一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。我們在訪問一些站點時，等待多時無結果，按"停止"按鈕卻一下顯示出頁面就是這個原因。因此，我們在設計頁面表格的時候，應該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。在使用Dreamweaver製作網頁時，會自動在每一個td內添加一個空字元「 」。如果單元格內沒有填充其它元素，這個空字元會保留，在指定td的寬度或高度後，可以在源代碼內將其刪去。
網頁的適應性是很重要的，在不同的系統上，不同的解析度下，不同的瀏覽器上，我們將會看到不同的結果，因此設計時要統籌考慮。一般我們在800*600下製作網頁，最佳瀏覽效果也是在800*600解析度下，在其它情況下只要保證基本一致，不出現較大問題即可。
想設計製作網頁網站的也可以十我交流：前面是dzh，後面是xx09。
C. 用一篇文章，帶你了解12種常見的網頁布局設計
為什麼了解網頁布局很重要？ 網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。
這里將介紹一些常見的網頁布局形式，例如卡片式、分屏布局、網格布局……一起來看看吧！
卡片式布局被Pinterest、臉書和推特等網站所使用，它非常適合在新聞網站和博客上使用，因為 卡片式布局可以在頁面上放置大量內容，同時又保持每部分內容各不相同。
卡片式布局主要有兩種形式：
網頁中每個卡片的尺寸相同，卡片的排列非常標准，例如dribbble、UI中國的網頁布局；
使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如鉛昌仿Pinterest、花瓣的頁面布局。
當兩個元素在頁面上具有相等的權重時， 分屏布局是一種流行的設計選擇，並且通常用於文本和圖像都需要突出顯示的設計中。
分屏設計特別適合電子商務網站上的產品頁面。 產品圖片需要在頁面上突出顯示，但價格、規格、購物車按鈕等信息也要顯示。
隨著移動設計的盛行，大標題排版變得流行槐纖起來。大號字體在標題中特別流行，在一些網站的正文中也能看到。
較大的文本更具可讀性，可以改善使用體驗。 另外它還提供了強大的視覺效果，因此這種布局在極簡主義設計中特別受歡迎。
個性化演算法推薦可以根據每個人的喜好量身定製數字體驗。 人工智慧技術的發展讓演算法變得更易用，能精確分析用戶的喜好。
根據用戶之前的訂閱習慣，Netflix可以為用戶個性化推薦他們最有可能觀看的電影。
像Medium這樣的網站會基於用戶以前閱讀和喜歡的內容，向他們展示很多同類型的文章。
網格為設計提了視覺上的平秩序感， 以一種平衡且有組織的方式呈現內容，使內容更易於人們使用。
在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。
雜志和期刊的布局方式影響了網路雜志的版面設計。 這些網頁布局很適合有大量內容的網站，尤其是每天都需要更新內容的網站。
單頁布局將網站的所有主要內容放在一個網頁上，通過滾動完成導航，有時還使用視差滾動效果。
對於內容稀疏的網站，單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇，比如互動式兒童讀物。
F型和Z型布局是指用戶的視線如何在頁面上移動，即用戶如何掃描內容。F型布局有非常明確的視覺層次結構，因此適合迅返內容更多的頁面。
Z型布局將視線吸引到頂部，然後沿對角線方向向下延伸到底部，然後再次延伸。
在設計中，不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由於圖像和文本間無法平衡而造成的。
由於不對稱會產生動態的、充滿活力的視覺印象，因此對那些想要傳達這種形象的品牌來說是非常有用的。
這種布局的優點在於完全專注於內容，沒有視覺上的混亂。
干凈簡單的布局幾乎適用於任何類型的網站。許多優雅的網站都可以被認為是「簡潔的」，無論它們包含什麼設計形式。
導航標簽適合用於包含少數項目的菜單，否則導航會顯得很混亂。
輪播內容包含圖像和文本，通常出現在網站的頂部，用來突出顯示內容。
好的網頁設計具有很強的適應性並且對用戶來說始終是友好的。
遵循網頁布局的最佳實踐，能夠帶來全新的數字體驗，靈活地調整不斷變化的技術和設計趨勢，進一步實現品牌目標。
精彩推薦：
1、聊聊卡片式設計的運用
2、案例分析：柵格系統的布局設計
3、如何設計深色模式？這3點因素需要考慮
4、深度解析：服務藍圖的應用邏輯 設計
D. 網頁設計的方法有哪些
【網頁設計】方法如下：
1、將透明的LOGO用高於IE6的瀏覽器打開網頁，然後採用FFPearlCrescentPageSaver全屏截圖插件截屏。再採用PS或者Fireworks進行裁切LOGO部分。並替換透明背景LOGO。這樣即使是漸變背景也能和LOGO保持一致。
2、布局上頁面與頁面之間存在相同部分要學會簡化。當兩個頁面有部分板塊相同，最好不要去讓兩個頁面獨立存在，可以將兩個相同部分獨立出來。採用程序調用共同部分。以減少網頁代碼。
3、網站重要頁面最好有可更新或者可調用更新內容的板塊以達到日常更新引蜘蛛爬行的目的，原因很簡單，利於網站SEO優化。
4、網站要和互聯網接軌要跟得上時代，別忘了在網站完成後給網站安裝一個網路分享工具，或者新浪微博，這樣做利於網站推廣。感興趣的話點擊此處，免費學習一下
想了解更多有關網頁設計的相關信息，推薦咨詢【達內教育】。該機構已從事19年IT技術培訓，並且獨創TTS8.0教學系統，1v1督學，跟蹤式學習，有疑問隨時溝通。該機構26大課程體系緊跟企業需求，企業級項目，課程穿插大廠真實項目講解，對標企業人才標准，制定專業學習計劃，囊括主流熱點技術，助力學員更好的學習。達內IT培訓機構,試聽名額限時搶購。
E. 網頁布局方法
眾所周知，屏幕的尺寸千差萬別。在考慮網頁布局時，主要考慮：
同時，網頁布局還應該綜合考慮設計和實現上的問題：
雖然屏幕寬度、高度、寬高比千差萬別。但是網頁的組織方式基本上是以寬度適配，高度延伸為主。
當然，也有部分網頁是需要考慮高度適配的，如視頻網站的全屏播放。
這里主要討論的是寬度適配。高度適配可以做類似處理，在這里就不做贅述。
網頁基礎的布局主要有三種： 靜態布局、流失布局、彈性布局 。
靜態布局
靜態布局採用像素（px）作為頁面設計的單位。在不同的顯示寬度下，頁面元素大小都是固定的。
流式布局
流式布局以百分比設定頁面寬度，當顯示區域變化時，頁面布局會等比的發生改變。
流式布局強調的是適應屏幕寬度的變化。在實際應用中，經常是設置成寬度適應，而高度不變。當頁面變大時，頁面布局相當於被橫向拉寬了。
彈性布局
彈性布局採用rem/em等相對單位，rem/em是相對的單位會隨著屏幕變化而變化。
彈性布局更強調的是在不同的條件下，顯示內容除了大小不一樣，其布局是一致的。也就是說，彈性布局會寬度和高度都等比放大。當頁面變大時，整個頁面等比放大了。
假設有兩個屏幕尺寸，一個是640px，一個是1080px。有個元素在640px頁面下的尺寸是64px。
如果是靜態布局，在640px屏幕下，元素被設置為64px。到了1080px屏幕下，依然是64px。元素的大小不變。
如果是流式布局，頁面元素會被設置成640px屏幕寬度的10%。在1080px屏幕下，10%的長度變成了1080px * 10% = 108px了。元素大小隨著屏幕變大了。
如果是彈性布局，假設在640px的屏幕下，設置1rem = 16px，那麼 64px即為4rem大小。在1080px的屏幕下，設置1rem = 27px，4rem的大小變成了 4 * 27 = 108px。元素大小也隨著屏幕變大了。
靜態布局
靜態布局沒辦法響應頁面的變化，這個是優點也是缺點。
缺點是當屏幕變大時，會出現空白區域。當屏幕變小時，需要通過滾動條來瀏覽頁面內容。
優點則是因為靜態頁面可以在任何條件下都按頁面的設計進行顯示，其適配性的問題最少，實現工作量最小。
實際上，目前很多大型的網站都是採用靜態布局的。就是看中了其廣泛的適配性，幾乎不存在什麼適配性問題，任何用戶在任何條件下打開頁面都顯示的都是一樣的。
雖然說屏幕尺寸種類繁多，但是在一定程度上屏幕寬度大體還是在一個范圍之內的。應用靜態布局時，可以適當放棄適配一些市場佔有率很少的小屏幕顯示器。
流式布局
流式布局大部分都是採用寬度適配，固定高度的方式。也就是說，頁面此次被橫向拉長或縮小了。
這樣做的優點是頁面可以適配屏幕的寬度，可以充分利用屏幕的面積，不至於出現大量空白的情況。
其缺點是，當屏幕過於寬時，頁面會被拉得寬，整體顯得不太協調。當屏幕過於窄時，頁面會被縮得很小，部分元素的顯示會出現問題。
為了規避這個問題，在實際應該上。一般會設置一個最大和最小適配寬度。當屏幕超過了最大最小寬度時，頁面將不再適配屏幕。
彈性布局
彈性布局採用的是寬度和高度同時放大的方式，力求讓頁面在不同屏幕下在布局上是一致的。
彈性布局兼顧了靜態布局和流式布局的優點，一方面其可以適配屏幕的變化，另一方面不會導致頁面被橫向拉寬導致比例不協調，在一定程度上保證頁面布局和原設計一致。
但是這么做也帶來了新的問題，頁面加大會導致部分元素被拉伸，特別是圖片元素，會導致失真。
所以彈性布局經常也採用了和流式布局一樣的方式，設置最大最小響應尺寸，超過這個尺寸則不繼續響應。
同時，針對圖片失真問題，可以通過上傳多個尺寸的圖片進行解決。不同的屏幕尺寸響應不同的圖片。不過因此也會帶來了大量的維護工作，需要權衡。
由於靜態布局特點，一般下列情況下會採用靜態布局：
流式布局比較適用於文字型的頁面。在流式布局中，雖然文字大小不會變化，但是文欄位落僅需要改變換行就可以跟著寬度變化而變化。
如果屏幕尺寸變化不大，則可以考慮採用彈性布局的方式。既可以適配，又不改變頁面的布局。
事實上，也有一些頁面採用了幾種不同的布局方式。例如，採用靜態布局的側邊欄，而採用流式布局的主區域。
上文也討論了流式布局和彈性布局不適合對尺寸跨度過大的屏幕進行適配。所以，基本上也都採用了限制最大最小適配尺寸，在適配范圍內則採用流式布局或彈性布局進行適配。超過了適配范圍，則變成靜態布局的方式，不再響應屏幕的變化。
上面討論的幾種網頁的基礎布局一定程度上解決了頁面適配的問題。但是隨著顯示終端的發展，出現了平板電腦、移動設備等屏幕。這些設備出現加大了屏幕尺寸的跨度。而上面討論的幾種網頁布局恰恰是不支持屏幕尺寸跨度太大的情況的。
相比之下，自適應布局和響應式布局更能解決屏幕跨度過大的問題。
自適應布局
自適應布局為不同尺寸的屏幕准備多套方案，根據不同的屏幕尺寸確定一套顯示方案。具體到每一套方案，則可以用上述幾種基礎的網頁布局進行適配。可以看成是一系列的基礎布局組成的一套方案。
一般自適應布局會設計寬屏、窄屏、移動端等幾套適配方案，然後設定屏幕適配的范圍。具體顯示時，會根據屏幕尺寸匹配適配范圍，選定其中的一套方案進行顯示。
但是自適應布局一般情況下不會改變頁面的結構。當頁面縮小時，會選擇縮小、替換、隱藏掉一些橫向的頁面元素，以達到適配的目的。有一些常見的處理方法：
響應式布局
響應式布局則是設置一套方案，通過調整行列的顯示進行適配。當屏幕較大時，各個元素顯示成一行，當屏幕變小時，轉換轉化成以列進行顯示。
響應式布局因為需要換行來適配屏幕。所以其在頁面縮小的過程中，頁面布局會做改變。當頁面縮小時，頁面會先以流式布局或彈性布局的方式進行縮小，直至頁面寬度再也無法適配時，橫向顯示的元素換行成縱向顯示。
自適應布局
自適應布局需要設計是一系列頁面布局。所以，在設計和實現上需要更多時間。
但是，因為其可以針對不同屏幕設計不同方案，方案之間相對獨立。其限制較少和自由度卻是比較高的。
但是注意，自適應並非幾套完全不同的方案的組合，一般情況下，其主體部分是一致的。只是對部分橫向的元素進行獨立設計。
響應式布局
響應式布局只需要一個頁面布局即可完成屏幕適配，其實現工作量比較小。但是，因為需要用一套方案適配所有屏幕尺寸。所以，在設計上需要考慮的因素比較多。
總的來說，自適應布局適用於較為復雜的頁面，而響應式布局適用於頁面結構簡單的頁面。
因為移動端和PC端的巨大差異，包括屏幕尺寸和操作方式都不盡相同。還有一種解決方案將各個端的頁面單獨進行設計。
這種方案優點是各個顯示端可以自由的根據自身情況進行設計，從而設計出專門針對各個顯示端的方案。這無疑給設計師和用戶體驗帶來了巨大的好處。
但是這種方案帶來了成倍的設計和實現工作量。同時，在產品投入使用後需要兩套人馬分別維護其內容。
如果您有如下的情況，可以考慮使用移動端和PC端分離的設計：
寫在最後
並沒有十全十美的方案，根據自身情況進行選擇才是硬道理。
作為設計者，千萬不要忘記了後期技術的實現、測試，運營人員的維護等工作量。同時也不要忘記了項目後期的迭代的難度。一句話，選擇適合的才是最重要的。
要知道，看似很土的靜態布局到現在仍然有大量的應用。千萬不要做過度的設計。
F. 該如何設計網頁
一、網站結構設計
網站結構設計包含網站欄目設計和網站模塊設計以來確定網站提供服務的一種邏輯表現形式，也是網頁之間的層次關系。
1.網站欄目能起到提綱挈領額作用
2.網站欄目具有清晰導航的功能
3.網站模塊要做到順序清晰且緊密結合
二、網站主題設計
網站主題設計實際就是網站視覺呈現風格的設計。網站的主題風格要能充分吸引用戶的注意力，為用戶提供愉快的訪問體驗。
1.設計能反映網站內容的logo,並且將logo放在網站的醒目位置。
2.網站的顏色要統一，要突出網站的主調色彩。
3.相同類型的圖像要有相同的效果。
4.網站要有一句明晰的宣傳標語。
三、網站布局類型
1. 國字型布局
這種布局類型分為上邊欄、左邊欄、中間內容區、右邊欄和底部的頁腳區域，其形狀酷似一個「國」字。國字型是目前比較常用的一個網頁布局結構，它適用於信息分類繁多、需要良好組織的網站。
2. T字型布局
這種布局類型由上邊欄、左邊欄、內容區、下邊欄組成，其形狀有點像一個英文字母寫的「T」字。T字型網站目前在一些權威機構、企事業單位的公司網站出現得比較多。
3. 左右框架型布局
這類網站主要由左邊欄和內容區組成，組成比較簡潔，主要用於精彩內容的呈現，主要是很多個人站點、博客的首選。
4. 上下框架型布局
這類網站由上下邊欄組成，上邊欄用來放置logo和鏈接等信息，下邊欄用來放置網頁的內容。上下型網站經常用來進行個性化展示，在企業門戶網站的公司展示中也比較常用。
5. 標題正文型布局
這類網站的布局結構由上邊欄和內容區組成，上邊欄用於顯示文章的標題。主要用於顯示文章的標題，內容區放置文章的內容，這類布局在一些論文、學術網站的設計中比較常用。
網站設計都不會單獨使用以上列出的某一種布局結構，而是通過混合使用多種布局結構來實現自己想要的效果，這類布局通常稱為「綜合性布局」。
四、網站頁面設計
網站頁面是網站的最終表現形式。網站頁面內容的質量度和頁面的美觀度來決定。頁面設計應該遵循的原則如下：
1.符合企業的行業屬性和企業特點。客戶打開網站能直觀感受企業所傳遞的理念和特徵。
2.符合用戶的瀏覽習慣。根據網站內容的重要性進行排序，讓用戶花最短的時間能夠找到自己需要的信息。
3.符合用戶的使用習慣。將用戶經常使用的功能放在網站的醒目位置。
4.圖文搭配。
5.利於搜索引擎優化。減少圖片和動畫，多使用文字描述，以便於搜索引擎收錄，讓客戶更容易找到你。格子網路解答。
G. WEB網頁設計常見布局
我們一般的版式設計除了平面設計，就是網頁設計和互聯網產品，比如一些移動端手機APP這些界面的設計。這些設計都有一些通用的布局， 大家在剛開始學習布局時有一個訣竅，即不用太在意布局的理論，而去收集一些大家常用的布局，先把這些東西記下來，隨著經驗的積累，可以通過這些通用的布局產生自己的理解和想法，然後去打破這些傳統的布局，有自己的創新和突破。
左邊為最常見的大框套小框的布局，整個網頁首先在一個比較大的框裡面，然後各個模塊在大的框裡面去布局分配。
這種布局的特點是有一個比較大的背景，背景是可以平鋪的，然後其他的內容可以限制在一定的寬度范圍內，好處就是視線比較集中。
通欄布局打破了框的限制，如圖導航部分等是適應屏幕拉伸的。
如圖背景可以根據屏幕無限延伸，顯得比較大氣。視覺上顯示比較整體，整個網頁上都是有內容的。
如圖為導航在主視覺下方的布局的示意圖，傳統規則就是導航放在畫面中間。
這是一種比較時尚、流行的布局方式，如圖上面是體現當前頁面主題的一個banner，這個banner比較重要，它的設計完全可以體現整個網頁的風格，同時也起到一個裝飾的作用。接下來把這個banner放在中間的位置而不是傳統的上面的位置，這樣就給banner這個位置留下了比較多的空間，讓整個畫面顯得比較簡潔大氣。
如圖為左中右布局示意圖。
結合案例，如圖分三欄左中右。對banner進行比較主題式的設計，如圖第一張素材的選擇體現了整個網頁的風格。同樣第二張、第三張的圖片選擇也是體現整個網頁主題的主體部分。所以這種布局是必須有個部分體現這個主題的，其他兩個部分用來布局網頁的其他內容。
如圖為環繞式布局的示意圖。
環繞式就是頁面會環繞一個比較顯眼的圖片裝飾來進行設計。如圖一，中間為圖片焦點，內容部分環繞在圖片焦點周圍，進行布局設計。第二張、第三張也為內容環繞主題進行設計的。這種布局比較靈活，可以先選好一個主題圖，然後所有元素圍繞它的視覺效果去設計，整個畫面的效果就會以圖為中心，主題非常鮮明。
穿插式布局雖然很少看到，但效果也不錯。
如圖案例均屬於穿插式布局，即所使用的圖片素材在內容裡面是一個穿插效果。整個banner穿插在網頁內容裡面，整個網頁對稱、畫面感非常強。比較適合做一些專題類的網站。
真正的版面設計裡面的布局時千變萬化的，我們只要遵循前面講到的用戶體驗要好、視覺上畫面平衡，那效果就會很好。
H. 優秀網站首頁設計的四大布局技巧
1、響應式布局
響應式網站設計布局，指的是一種網路頁面設計布局，它所遵循的理念是:集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。
2、一屏以內
一張照片代表著一個世界，一屏以內的這種布局方式讓讀者的視線不會再受到框線的限制，比起響應式布局方式，這種布局的確多了些開闊和大氣的感覺。此外，網頁主畫面部分還可以靈活處理，既可以向上拓展到logo和導航的頂部位置，也可以向下拓展到內容區域，這種布局方式也是非常常見的布局方式。
3、通欄
這種布局方式相對於大框套小框而言，用戶瀏覽網頁不在受到方框的限制，這種方式顯得大氣些，眼界顯得更開闊些。
另外這種方式還有一個便利之處那就是主視覺部分可以隨機靈活處理，既能往上移到網站logo和導航的位置，也可以移到向下擴展的內容區域。這種布局方式也是網站中常用的布局方式。
4、不對稱布局
不對稱是藝術界長期以來喜歡的技術，在網頁設計師中很受歡迎。但要注意不要將不對稱與不平衡混為一談
不對稱的目標是在不可能或不希望對兩個部分使用相同的權重時創造平衡。使用不對稱性可以創建張力和動態，並且把用戶的注意力集中在各個對象(焦點)上。
關於優秀網站首頁設計的四大布局技巧，青藤小編就和您分享到這里了。如果您對頁面排版、網站設計、圖形處理等有濃厚的興趣，希望這篇文章可以對您有所幫助。如果您還想了解更多關於平面設計的素材及技巧等內容，可以點擊本站的其他文章進行學習。
I. 如何設計一個網站
隨著網路的發展，用戶的鑒賞能力也越來越高，企業對網站頁面的設計也比較在意，如果設計缺乏特色與個性，並沒有體現企業文化，很容易被淹沒在浩如煙海的千千萬萬的網站中，當我們隨便在一個搜索引擎上查找某一行業，我們都會找到成千上萬條的網站信息，試想，在這么多的網站中，沒有自己企業特色、平庸無奇的網站是不會令人感興趣的，更不用說進入詳細瀏覽了，網站就很難達到令人流連忘返的局面，更不能夠起到營銷作用的的網站。
合理的頁面版面設計
在設計網站首頁，一定要注意整體頁面的布局要合理，不要雜亂。
一個合理的版面設計，簡單明了的網頁能夠給人帶來舒服的感受，並且會讓人願意花更多的時間去了解。
一定要重視版面設計，避免版面冗雜，從頁面布局到搭配，要注重協調，呈現出清新的網頁，給人眼前一亮的感覺。
讓你舒適的色彩搭配
不管是什麼行業的網站，在設計過程中都不能一味追求視覺刺激，做出的顏色搭配奇特。
網頁設計過程中，設計師必須注意頁面色彩的搭配，多採用暖色調，配合搭配冷色調，只仿拿差要顏色夠協敏舉調、舒緩，才能讓人有持續停留的念頭。
網站設計上的顏色有幾百種可供選擇，網站設計的原則，網站蕞多隻能選三個色調為主色，要根據企業定位和網站觀眾來選擇，一般環保企業選擇鮮綠與藍色，像餐飲網站選擇橙色或紅色進行搭配。
別出心裁的網頁內容
網站的文字內容，如同人的學識與見識一樣不可或缺，代表著這個人的品位備皮。
設計一個網頁，一定要以宣傳企業文化、產品、服務、優勢、實力為出發點，網頁中的內容是不可或缺的，要想用內容來吸引用戶的光臨，就必須有獨特的內容，要注重原創性，具有特點。
網站設計要有自己特色
特色是一種別人沒有的，是唯一的，可以讓人一下子記住你的網站，這就是特色，更簡單的解釋就是個性化。
在設計網站頁面進一定要簡潔、美觀、大氣、高端、上檔次，總之就是一定要有沖擊力，如果設計過於太簡單，沒有自己的特色，就不會引起用戶的注意。
總結：如何設計好一個網站來提高企業的形象，一個好的網站在結構、導航、用色、內容等各個方面都是很講究的，它可能很簡單，但卻給人一種吸引力，讓瀏覽者觀賞的同時了解了企業信息。
J. 怎麼樣設計網頁
網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。
專業的網頁設計，需要經歷以下幾個階段：
1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
5、根據用戶反饋，進行頁面設計調整，以達到最優效果。
(10)網站怎麼設計布局擴展閱讀
在進行網站製作前，首先要進行網站頁面的整體設計。一個網站是由若干個網頁構成的，網頁是用戶訪問網站的界面。因此，通常意義上的網站設計，即指的是網站中各個頁面的設計。而網頁設計中，最先提到的就是網頁的布局。布局是否合理、美觀，將直接影響到用戶的閱讀體驗及訪問時間。
在互聯網高速發展的今天，網路已成為人們生活的一部分，成為人們獲取信息資源的重要途徑。信息的呈現離不開網頁這個重要的界面，網頁的主要作用是將用戶需要的信息與資源採用一定的手段進行組織，通過網路呈現給用戶。