❶ 網頁的基本構成元素都有哪些
導航欄、欄目、及正文內容這三大要素組成。
1、導航欄
導航欄是構成網頁的重要元素之一，是網站頻道入口的集合區域，相當於網站的菜單。
2、欄目
欄目是指網頁中存放相同性質內容的區域。在對頁面內容進行布局時，把性質相同的內容安排在網頁的相同區域，可以幫助用戶快速獲取所需信息，對網站內容起到非常好的導航作用。
3、正文內容
正文內容是指頁面中的主體內容。例如一個文章類頁面，正文內容就是文章本身；而對於展示產品的網站，正文內容就是產品信息。
網頁設計的要點：
1、整體風格
網站的整體風格及其創意設計是最難以學習的，難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。
風格是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。
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端分離的設計：
寫在最後
並沒有十全十美的方案，根據自身情況進行選擇才是硬道理。
作為設計者，千萬不要忘記了後期技術的實現、測試，運營人員的維護等工作量。同時也不要忘記了項目後期的迭代的難度。一句話，選擇適合的才是最重要的。
要知道，看似很土的靜態布局到現在仍然有大量的應用。千萬不要做過度的設計。