導航:首頁 > 網站知識 > 新建的網站怎麼布局

新建的網站怎麼布局

發布時間:2023-03-23 15:39:18

1. 網站怎麼布局

很多人常常詢問某個頁面該如何布局這樣的問題,其實網頁布局也沒有想像中那麼難,只要做到兩點我認為起碼可以做到臨陣不慌,一是對常見的布局方式心中有數,二是根據信息內容及設計素材的特點進行擺積木式的多次嘗試。

一、搭建

當然在設計之前我們要了解客戶的需求、網站的定位、受眾群等很多方面的事情,也就是說需槐脊團要了解策劃方案。如果我們連這些問題都還不清楚的話,請先不要去想著設計,因為在不了解客戶需求的情況下,盲目的去把頁面設計達到某種視覺效野肆果是很難的、也會很容易被客戶推翻的,即使客戶不懂,過關了,但是如果沒有真正為客戶帶來價值,它還是失敗的。
當我們真正了解客戶需求後,你可以盡可能的發揮你的想像力,將你想到的"構思"畫上去(用筆和紙或者軟體都可以,根據自己的習慣而定),這是屬於一個構思的過程,不講究細膩工整,也不必考慮到一些細節鉛橘的部分,只要用幾條粗陋的線條勾畫出創意的輪廓即可。盡可能的多構思一些,以便選擇一個最適合的進行搭建。

二、粗略布局

基本上在確認客戶需求後,網站的大體影響就了一個簡單的輪廓。是企業型的還是產品展示型。一般企業網站的首頁大體上有一下六種模式。

1)大框套小框的布局

這種布局方式即是我在上面提到的常見的布局,不是說這種布局方式一無是處,但我們總不能只會這一種布局方式,次次套用吧?按照這種布局當然也可以做出來漂亮的設計,但畢竟方框限制的視線的擴展,如果客戶要求做出大氣的感覺,一般不會按照這種方式來布局,通常來講,大氣意味著開闊視野。


2)通欄布局

這種布局方式讓視線不再受到方框的限制,比起上面的布局方式,自然多了些大氣、開闊的味道來。另外,主視覺部分還可以靈活處理,既可以向上拓展到logo和導航的頂部位置,也可以向下拓展到內容區域,這種布局方式也是非常常見的布局方式。

2. 網頁布局方法

眾所周知,屏幕的尺寸千差萬別。在考慮網頁布局時,主要考慮:

同時,網頁布局還應該綜合考慮設計和實現上的問題:

雖然屏幕寬度、高度、寬高比千差萬別。但是網頁的組織方式基本上是以寬度適配,高度延伸為主。

當然,也有部分網頁是需要考慮高度適配的,如視頻網站的全屏播放。

這里主要討論的是寬度適配。高度適配可以做類似處理,在這里就不做贅述。

網頁基礎的布局主要有三種: 靜態布局、流失布局、彈性布局

靜態布局

靜態布局採用像素(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端分離的設計:

寫在最後

並沒有十全十美的方案,根據自身情況進行選擇才是硬道理。

作為設計者,千萬不要忘記了後期技術的實現、測試,運營人員的維護等工作量。同時也不要忘記了項目後期的迭代的難度。一句話,選擇適合的才是最重要的。

要知道,看似很土的靜態布局到現在仍然有大量的應用。千萬不要做過度的設計。

3. 企業網站該如何做好布局規劃

1、企業網站首頁常見的布局方式
很多人常常詢問企業頁面該如何布局這樣的問題,其實網頁布局也沒李喊有想像中那麼難,只要做到兩點我認為起碼可以做到臨陣不慌,一是對常見的布局方式心中有數,二是根據信息內容及設計素材的特點進行擺積木式的多次嘗試,下面總結的企業站首頁常用到的布局方法,共有6種:
(1)、大框套小框的布局
這種布局方式是最常見的一種布局,不是說這種布局方式一無是處,但我們總不能只會這一種布局方式,次次套用吧?
按照這種布局當然也可以做出來漂亮的設計,但畢竟方框限制的視線的擴展,如果客戶要求做出大氣的感覺,一般不會按照這種方式來布局,通常來講,大氣意味著開闊視野。
(2)、通欄布局
以下這種布局方式讓視線不再受到方框的限制,比起上面的布局方式,自然多了些大氣、開闊的味道來。
另外,主視覺部分還可以靈活處理,既可以向上拓展到logo和導航的頂部位置,也可以向下拓展到內容區域,這種布局方式也是非常常見的布局方式。
(3)、導航在主視覺下方的布局
這種雖然不多,但也時不時能看到,導航放在banner下面的好處是可以彌補banner中設計素材截斷的缺點,讓設計看上去完整、自然。
所以說布局的方式受到多方面因素的影響,不僅考慮到信息內容所佔據的空間,還包括你手頭現有的素材。
(4)、左中右布局
這種布局方式不常見到,但卻是非常富有新鮮感的布局方式,如果你已經做膩歪了水平分割的設計,嘗試一下這種布局也未嘗不是一種好的選擇。
(5)、環繞式布局
這種布局方式看上去更加靈活,banner區域相對較小,就可以在頁面放置更多的信息內容。
(6)、穿插式布局
這種布局在企業站中較難看到,用的不多,banner區域相對較大,可以作為一種布局的選擇。
上面的6種布局方式只是一些常見的企業類網站頁面布局,布局的方式還有更多。實際上,布局就像是擺積木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原則即可,並沒有規定一定要怎麼布局,或者這種布局方式要比那種更好,只能說某種布局方式更為合適某個頁面而已。
2、布局風格統一
在網站布局時,一定要重視布局統一,千萬不可因過分追求個性,在布局方面想要給用戶更多新穎刺激的感覺而忽略統一性,假如網站布局不統一,在用戶光臨時對你的網站沒有印象,這樣是不行的。
3、整潔條理布局
企業網站與展示型網站不同,企業網站想要表現的是企業的形象與推廣產品方面,切忌不能讓過分花哨的布局蓋過產品的風頭,在進行企業時,一定要謹記布局要有條理,干凈整潔,體現企業形象與產品內容才是根本。
4、個性鮮明布局
網站足夠個性才能脫穎而出,但是做好這一點的前提是企業一定要全面考慮到自己的網站布局是不是符合了用戶體驗度?憶五發現現在好多網站都在設計這個方面做的非常有噱頭,但是用戶並不是很喜歡,這就是因為忽略了用戶的感官視角。
5、導航的布局
網站的導航是非常重要的位置,我們要放上用戶最需要的類目,有很多企業網站放上了 新聞動態 、 企業場景 等次要內容放了上去,事實上,用戶很少會點擊這些東西,且會分散掉他們的注意力,憶五建議大家把用戶所需的產品類目放上去為好。我在這里是不建議把所有重點放上這些的,這些東西用戶是很少去點擊,而且還會分散用戶的注意力,得不償失,建議企業產品站要放上產品的類目,這樣方便用戶進入網站可以馬上看到自己想要的東西。
6、以產品為主的布局
每個搜索產品的用戶都是希望能看到實實在模擾嫌在的產品,而不是那些企業新聞、企業簡介和一大堆的技術資料的文章,所以應當把這些東西保留一小部分即可,重點放上產品的圖片,而且是高清的、有參照物的。
那些有滾動滾動效果的圖片也不建議放,如果非要放的話要滾動的速度要慢,而且滾動的產品不宜太多。
7、用戶查資料的需求
眾所周知,對於企業網站來說真正的用戶數量並不是很多,直接在網站下單的用戶更可謂是鳳毛麟角。基本上來到網站的用戶都是奔著查詢資料而來。很多企業就忽略了這點,在設計的時候只是單單奔著購買者而設計的,忽略了那些前來查詢資料的用戶需求,這樣的網站很難滿足大多數用戶的需求,或許這也是你的排名遲遲不上升的其中一個因旦手素哦!
大家都知道,企業的用戶群體是非常少的,但是查詢資料的用戶占據不少。有很多企業站的設計是為了那些購買用戶的而且布局,完全沒有考慮查詢資料的用戶,這樣的網站是很難取得排名。即使有排名,那也是 垃圾中的戰斗機 ,競爭對手的網站稍微滿足一些查找用戶的需求,那麼就會被擠下去。
所以,要先滿足大眾的需求,網站才能被點上去,排名上去了網站才能曝光於哪些購買用戶的視野。
8、樣板文字和字體的統一布局
企業站的產品文字本來就少,有很多的企業站是一張或幾張的圖片,下面有為數不多的幾段文字,如果樣板文字過多的話,那麼頁面和頁面的相似度會過高,導致被判為低質量頁面,影響關鍵詞的排名。
所以,對於像底部的版權,側邊欄的推薦文章、內頁的相關文章或者內頁的聯系方式,能去掉盡量去掉。
字體要統一包括大小、顏色統一,網站的內容字體要適中,12、14號字體剛剛好,字體的顏色要統一為黑色或者深灰,錨文本的字體的顏色要區別於黑色或者深灰色,最好是為藍色,不能刻意關鍵詞加粗、不能做暗鏈,均屬於作弊行為。
9、視覺效果重要
這里我們所說的視覺效果並不單單只是利用圖片和flash做出來的體驗效果,大家都知道網站放置過多的圖片和flash對於打開速度有很大的影響。我想說,放置少量的圖片就可以了,同時在網站布局方面充分利用這些圖片,達到完美的視覺效果才是最佳。
10、友鏈的布局
友鏈的布局要看情況而定,一般友鏈都是首頁上有,內頁沒有,也就是說友鏈只顯示在首頁上(不是說不能換內頁的友鏈,主要是雙方商量好),友鏈的個數不能超過30個,因為企業站的受眾群體小,積累的權重不易,友鏈控制在30個可以規避因友鏈牽連降權。
11、不要做回鏈
很多企業站底部都放有回鏈,殊不知站在了危險的邊緣,回鏈是老掉牙的作弊方式了,是很容易受到搜索引擎的懲罰,因為回鏈被降權的網站數不勝數。
所以,我們要摒棄這樣的手法,我們要通過正規的優化手法去優化,這樣優化之路會走的更遠。
12、聯系我們非常重要
不要自以為你的產品介紹夠詳盡,就忽視聯系我們這塊。淘寶的產品介紹的很詳細,而且還有用戶的評價,但是還是有很多的人要通過阿里旺旺去進行在線咨詢,這個現象告訴我們,不管我們企業站的產品介紹的多麼的詳細,用戶還是會咨詢的,所以聯系方式應當放在顯眼的位置,方便用戶的找到我們。

4. 網站布局快速教程

網格布局是網站設計的基礎,CSS網格模塊是創建它的最強大,最簡單的工具。我個人認為它比Bootstrap好很多。

該模塊還得到了由原生支持主流瀏覽器(Safari, Chrome, Firefox, Edge),所以我相信所有的前端開發人員必須學習這一技術。

在本文中,我將盡快向您介紹CSS Grid的基礎知識。在你了解基本知識之前,我將省略你不應該關心的一切。

現在讓我們跳進去吧!

你的第一個網格布局

CSS Grid的兩個核心組成部分是 wrapper (父)和 items (子)。wrapper是實際網格,items是網格內的內容。

這是包含六個items的wrapper的標記:

要將我們的wrapperp轉換為 網格 ,我們只需給它一個顯示grid:

但是,這還沒有做任何事情,因為我們還沒有定義我們希望網格看起來如何。它只是將6個堆疊p在一起。

我添加了一些樣式,但這與CSS網格沒有任何關系。

列和行

為了使它成為二維的,我們需要定義列和行。讓我們創建三列兩行。我們將使用grid-template-row和grid-template-column屬性。

由於我們已經寫了三個值grid-template-columns,我們將得到三列。我們將得到兩行,因為我們已經指定了兩個值grid-template-rows。

這些值決定了我們希望列的寬度(100px)以及我們想要行的高度(50px)。這是結果:

為差則信確保正確理解值與網格外觀之間的關系,請同時查看此示例。

嘗試掌握代碼和布局之間的聯系。

以下是它的效果:

放置物品

接下來您需要學習的是如何將項盯卜目放置到網格中。這就是你獲得該能力的地方,因為它使得創建布局非常簡單。

讓我們創建一個3x3網格,使用與以前相同的標記。

這將導致以下布局:

要定位和調整items,我們將定位它們並使用grid-column和grid-row屬性:

我們在這里說的是我們希望item1從第一個網格線開始,到第四個列線結束。換句話說,它將占據整行。虛輪這是在屏幕上播放的方式:

當我們只有3列時,你是否混淆了為什麼我們有4個列線?看一下這張圖片,我用黑色繪制了列線:

請注意,我們現在正在使用網格中的所有行。當我們讓第一個項目占據整個第一行時,它會將其餘項目向下推。

最後,我想展示一種更簡單的方法來編寫上面的語法:

為了確保您已正確理解這個概念,讓我們重新安排一些項目。

這是在頁面上看起來的樣子。盡量讓你知道它為什麼會這樣。這不應該太難。

就是這樣!

5. 網站的結構應該怎麼進行布局設置

網站結構布局是網站建設重要的一個環節,網站結構布局主要是由網站的策劃人員將網站的布局草稿以及一些具體細節,提交給網頁製作人員。網頁製作人員就根據策劃內容進行網站的建設,添加內容。在建設網站結構之前,我們一定要清楚一個道理,網站的結構是否合理對網站的發展非常重要。網站的結構是一個比較大的框架,要怎樣設計布局才可以體現出網站的價值呢?

第一、要根據網站的主題進行的確定以及設計網站的主題主要是通過企業所在的行業的一些特性以及目標用戶群的一些習慣。例如,品牌類型的網站建設講究簡約大方,在建設的時候,一般都是運用一些與品牌價值相關的方面的內容設計網站的首頁,這樣就可以很好地表現出高端、大氣,高貴的特性,這一點也是非常重要的。一般的企業網站製作主要是以產品的展示以及效益方面為核心,而且更多的時候是要考慮SEO的優化。要怎樣才能將網站的SEO相關的細節展示出來是十分重要的。所以,企業的業務員在與客戶溝通的時候,要跟客戶說清楚企業網站的類型是什麼。

第二、網站視覺營銷方面的策劃,主要還是要看網站結構設計"網頁製作的視覺效果"對於一個企業網站,要怎樣建設才可以體現出網站品牌的特色呢,怎樣表現自己的不同點呢?我們可以通過視覺的設計,無論是什麼類型的網站,視覺設計永遠是最要表達的一個重點。簡單來說就是網站的設計人員,用戶的體驗程度主要是有設計人員的專業程度決定的,而且設計師可以通過自己的高超技術吸引用戶,把用戶留在網站。搜索引擎是根據用戶留在網頁的時間,來判斷這個網站給用戶的體驗感。

第三、網頁製作的結構要根據用戶的需要進行用戶的需求包括什麼呢?主要有對產品的關注、產品的價值等等方面的滿足感。因此,網頁製作人員在布局是要考慮好用戶的需求。還要對自己產品非常熟悉,服務方面有什麼優勢等等。網站的細節完善後,就要將用戶最關心的問題,按照關注程度進行排列。網站首頁的內容設置用戶最關注的內容,要將網站的重點突出。還要根據用戶的重視程度進行合理的布局。網站的首頁中部是最具焦點的位置,就放置產品,左側可以設置一些企業動態。右側可以設置一些解決方案的分析。不同的位置可以設置相對應的內容,做到合理布局。

第四、對於一些固定的元素,要更加註重細節方面的設計因為這些元素幾乎每一個頁面都會有,例如網站導航設計有什麼需要注意網站導航,網站底部等等。如果是一些文字型的固定元素,要注意排版的格式,是不是方便用戶的訪問,特別是文字的顏色使用。

6. seo搭建網站後要怎麼布局網站,步驟是什麼

一、網站分析及關鍵詞定位

閱讀全文

與新建的網站怎麼布局相關的資料

熱點內容
網路共享中心沒有網卡 瀏覽:515
電腦無法檢測到網路代理 瀏覽:1366
筆記本電腦一天會用多少流量 瀏覽:556
蘋果電腦整機轉移新機 瀏覽:1371
突然無法連接工作網路 瀏覽:1040
聯通網路怎麼設置才好 瀏覽:1215
小區網路電腦怎麼連接路由器 瀏覽:1014
p1108列印機網路共享 瀏覽:1205
怎麼調節台式電腦護眼 瀏覽:676
深圳天虹蘋果電腦 瀏覽:914
網路總是異常斷開 瀏覽:605
中級配置台式電腦 瀏覽:971
中國網路安全的戰士 瀏覽:626
同志網站在哪裡 瀏覽:1408
版觀看完整完結免費手機在線 瀏覽:1451
怎樣切換默認數據網路設置 瀏覽:1101
肯德基無線網無法訪問網路 瀏覽:1278
光纖貓怎麼連接不上網路 瀏覽:1453
神武3手游網路連接 瀏覽:959
局網列印機網路共享 瀏覽:994