1、網頁設計應該如何布局
網頁布局類型
網頁布局大致可分為「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。 1.
「國」字型:也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內
2. 拐角型:這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3. 標題正文型:這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4. 左右框架型:這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業網站也喜歡採用。這種類型結構非常清晰，一目瞭然。
5. 上下框架型:與上面類似，區別僅僅在於是一種上下分為兩頁的框架。
6. 綜合框架型:上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似於「拐角型」結構的，只是採用了框架結構。 7.
封面型:這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在
首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
8. Flash型:其實這與封面型結構是類似的，只是這種類型採用了目前非常游戲行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於傳統的多媒體。
9. 變化型:即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現的功能的實質是那種上、左、右結構的綜合框架型。
2、網頁怎麼布局？
在前一課中，我們闡述了何為布局表格以及布局表格與常規表格的區別。完成這一過程需要執行五個步驟，本課將詳細介紹各個步驟。本課還介紹了可簡化設計過程的網頁設置提示。在開始繪制布局表格和單元格之前，需要完成一些網頁准備工作。請利用「視圖」菜單完成下列設置：顯示標尺 確保標尺已經顯示，如此處所示。標尺可幫助你度量布局的寬度與高度（單位為像素）。清除默認邊距 雖然該圖中未予顯示，但在網頁頂端和左側的確有默認邊距。清除默認邊距後,使用標尺將更加方便。顯示網格 雖然並不必要，但網格可為繪制操作提供參考。創建布局的第一步是創建布局表格。通過「繪制」或者將表格拖至所需的尺寸可以完成這一步。下面是一些關於繪制布局表格的提示：開始之前的准備工作 首先構思布局的寬度。請記住，某些人的顯示器解析度可能比較低，如果你的布局過寬，該布局可能無法全部顯示。使用標尺、描摹圖像或網格作為參考 無論使用哪個工具，你都將發現使用這些功能可以大大簡化布局的安置。第二步是繪制布局單元格。它們是布局中將包含內容的部分。下面是一些有關繪制單元格的提示：不必擔心單元格的繪制是否完美 請大膽繪制布局單元格，然後再根據需要對其進行位置移動和大小調整處理。寬度和高度只能以像素為單位 這是因為布局單元格功能僅可用於固定的、基於像素的表格設計。（自動伸縮是一種例外情況，在這種情況下，可以將寬度或高度設置為 100%，從而使寬度或高度與可用空間匹配。這是一種在布局表格與單元格設計完成之後使用的常用技巧。若要調整布局單元格的大小，請單擊大小調整控點，然後在調整大小時按 Alt。步驟三：調整布局單元格你不可避免需要對布局單元格進行細微調整：某些單元格可能需要進行細微的大小調整，而某些單元格則需要移動或稍微移動至正確位置。可使用滑鼠指針拖動大小調整控點來調整布局單元格的大小。另外，如上一課所述，還可拖動整個單元格以將其移動到相應位置。重要 在拖動以調整單元格大小或移動單元格時，對於任何移動或大小調整，FrontPage 都將採用 10 像素步進增量。某些時候，該功能十分有用，而某些時候則無須使用該功能。若要忽略該步進移動功能，請在調整單元格大小或移動單元格時按住 Alt 鍵。注意 另外，還有其他一些調整布局單元格大小和移動布局單元格的方法。在隨後的練習單元中將介紹這些方法。步驟四：單元格的填充和格式設置在繪制完布局表格和單元格之後，你自然希望在其中填充內容。可以採用多種方法來完成該任務。你可以鍵入文本、使用「插入」菜單中的各種選項，或者你可以拖放圖像，如該圖所示。另外，你可能會希望使用背景色、襯距、邊框等來設置布局表格和單元格的格式。這些設置都可以在頁面右方的」布局表格和單元格「選項卡里進行，方法與普通表格的設置類似。這里不再贅述。完成布局的填充與格式設置後，請務必使用「文件」菜單中的「在瀏覽器中預覽」命令確保網頁沒有問題。
3、網頁製作的網頁布局怎麼做啊
在建設網站的時候我也去考慮用戶的體驗，前期要去劃分網站。因為我們要根據用體驗去做網站，只要把用戶伺候好了，才能給網站帶來流量。用戶就是你網站的全部，不能為用戶解決問題的網站基本都是垃圾網站。
1、內容
網站運營，內容為王，這是非常重要的一點。一般用戶來我們網站都是有目的來的，主要是想找到自己想要的內容，解決自己的問題。所以在更新內容或寫文章的時 候, 要在用戶搜索的問題去想用戶需要什麼樣的內容，然後根椐用戶的問題去滿足用戶。當能解決用戶需求的時候，才能帶來更多的流量
2、速度
網站的訪問速度直接影響網站的好壞和影響力。一般來說，網站打開速度最好保持在5秒以內,不超過10秒，如果超過10秒，用戶沒有耐心等的而就會直接關閉 網站，訪方另外一個站，網站的營銷力就大大降落，而且對搜索引擎的信任也會減少。可見，提高網站速度的重要性非同小可。所以各位站長在選擇穩定伺服器，不 然的話打不開網站或網站打開慢對我們是沒有好處。
3、功能
所謂功能上的用戶體驗，主要是指網站的各種功能是否能讓用戶一看就知道怎麼使用，操作的簡便性、功能的易用性是最為重要的。不能讓用戶去研究這些功能怎麼 使用，還操作太麻煩，這些是網站的致命傷，因為用戶進來是尋找答案的，不是研究你網站功能的。所以網站建設的工能要簡單，易懂，能讓用戶以最短的時間完成 操作。
4、設計
網站要想吸引用戶，給用戶帶來好的體驗，首先要有一個好的設計風格。因為瀏覽者剛剛接觸到一個網站時，他對網站的第一印象很大程度上是由網站的設計風格所 決定的。如果瀏覽者感覺整個網站的風格很有特色，就會很有興趣繼續瀏覽，從而對網站有一個更加深入和全面的了解。反之，如果網站設計地非常乏味，瀏覽者根 本不會深入瀏覽，而是直接把網站關閉了。所以一個好的網站設計風格是至關重要的。
4、網頁設計 網頁製作 你們怎麼布局的？
要是你的切片很多塊的話，可以考慮在div+css裡面用一下表格的，其實現在都要求用的div+css了，先用div+css作出你的大概布局，比如要分為幾塊之類的，用一下浮動布局好就差不多了
5、如何設計有效的網頁布局？麻煩告訴我
什麼是布局？ 「布局」是指頁面內容的尺寸、間距及位置。有效的布局對於幫助用戶快速找到他們想要的內容至關重要，並可以在結構外觀上令用戶感到舒服。如何設計有效的布局？1.具有清晰的視覺層次。布局應當讓頁面各元素之間的關系和重要性一目瞭然。你可以通過適當使用下列屬性來實現視覺層次：焦點：指用戶首先關注的區域。形式上被賦予焦點屬性的UI元素一定要表達重要的內容。視覺流：指用戶關注區域的順序。可以根據任務邏輯和用戶的瀏覽習慣來設計恰當的視覺流。好的視覺流應該清晰、合理、順暢、自然。02020202020202
020202020202020202
關聯：在邏輯上相關的UI元素應具有清晰的視覺關系。0202020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。對齊：使頁面工整，信息呈現有序，便於用戶掃視。02020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 沒有對齊影響了頁面效果且不便於用戶掃視。不要因為功能需要和對極限情況的顧慮而輕易犧牲掉頁面的視覺展現。強調：可以根據UI元素間的相對重要程度進行強調。2.針對用戶的閱讀模式來設計布局。大部分人的閱讀習慣是從左向右，至上而下。閱讀分為沉浸式閱讀（immersive reading）和掃視（scanning），前者的目的在於理解，後者在於定位。02020202020202
020202020202020202
瀏覽網站時，用戶不會沉浸在UI本身，而是沉浸在他們的目標任務中，因此掃視是最常使用的閱讀模式。用戶只在確信必要時才仔細閱讀大量文本。針對掃視的布局設計可以適當強調主要的UI元素，弱化次要的。包括：020202020202020202020202 1)將主UI元素放在掃視路徑上。
020202020202020202020202 2)避免將重要信息放在左下角或者頁面底端或者需要滾動很多的控制項上。
020202020202020202020202 3)考慮使用漸進展開方式來隱藏次要的UI元素。
020202020202020202020202 4)將任務相關的重要信息要直接表現在控制項上。用戶更傾向於關注交互控制項上的標簽，而不是輔助型的靜態文本。
錯誤：
02020202020202020202020202 02020202 用戶必須閱讀輔助型文本後才能明確「確定」按鈕的作用。02 正確：
直接將按鈕的作用描述作為控制項標簽，便於用戶理解。02020202020202 5）不要展示大段文本，去除不必要的文本。多文本時格式化展示。註：常規模式也存在例外。眼動議實驗指出，真實用戶的行為很沒有規律。此模式的目的在於幫助你做出更好的決定，而不是精準的描述用戶行為。3.合理利用頁面空間。保持頁面的視覺平衡。避免擁擠和對空間的浪費。確保關鍵數據沒有被截斷，除非數據特別長。02020202020202020202020202 錯誤：02020202020202020202020202
02020202020202020202020202 邏輯上相關的UI元素在空間上被分隔，且沒有明顯的視覺關聯。控制項的尺寸和間距恰當，沒有不必要的滾動。一個任務盡量在一屏內完成。實際情況中，我們用戶的頁面空間要小於屏幕解析度，它會因各種因素而壓縮，如：非全屏操作（彈出窗口和對比瀏覽），瀏覽器本身及各種輔助欄對屏幕的佔用等，設計中要考慮這些情況。02020202020202
020202020202020202
4.不要讓布局本身成為突出的UI元素，保持視覺簡潔（visual simplicity）。減少內容和展現上的嵌套層級。減少控制項不同尺寸的數量，例如，在界面上只使用一兩種按鈕寬度。採用輕量級的分組和分割方式，可以用布局本身和分隔符代替分組框。使用盡量少的對齊線。5.選擇與頁面類型相匹配的版式。在設計之初，應充分考慮頁面承載的內容、功能和屬性，繼而選擇適合該頁面的版式。不合適的版式會造成用戶的閱讀困擾，降低任務的完成效率。標准和規范：1.柵格化：我們所說的柵格化是指在網頁設計工作中對柵格系統的建立和應用。網頁柵格系統來源於平面柵格系統，它以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。柵格化可以使信息呈現工整簡潔、美觀易讀，降低頁面開發和運維成本。它結構變化相對靈活，擴展性強。022.以8px為橫向柵格單位：以8px為橫向柵格單位，頁面所有元素寬度都可以是2的倍數，包括圖片和版塊寬度，這樣可以在一定程度上加快頁面（特別是對於J-PEG圖片）的渲染速度（基於計算機內部二進制的運算機制）。其在擴展和兼容性上也有一定優勢。在阿里巴巴中文站中，布局間距的最小單位為8px，布局區塊採用32px（8px*4）和24（8px*3）兩種粒度單位，分別組成以下兩種可實現的柵格系統：02020202020202 32px:適用於市場、社區等相關頁面
02020202020202
02020202020202 24px:適用於旺鋪相關頁面
3.頁面定寬：自適應可以根據瀏覽器顯示情況自動調整頁面寬度，但是因為用戶水平方向的聚焦范圍有限，所以當頁面過寬時，用戶的瀏覽和操作成本會增加；而當頁面過窄時（如用戶同時開啟兩個瀏覽器對比查看商品搜索結果），自適應則會導致布局變形和內容錯亂。給頁面規定寬度可以避免這些問題。在綜合考慮當下主流解析度情況、瀏覽器外觀對顯示空間的佔用、人機工程學中對水平視角和聚焦范圍的規定以及8px單位等多種因素後，我們認為960px是一個相對更加合理的頁面寬度。在阿里巴巴中文網站中，推薦使用定寬960px的頁面，去除左右各4px的邊距，中間的可視寬度為952px。更多
6、網站首頁的設計和布局怎麼做
1.讓開始的頁面變得有趣
2.選擇視差滾動
3.使用游戲化
4.使用動畫
5.保持導航的特殊性
（在出奇網路上扒的，可以說言簡意賅了！）