網(wǎng)站不管是pc端還是wap端都是講究層次結(jié)構(gòu)和排版布局的，這個是為用戶方便瀏覽體驗的重要操作。在網(wǎng)站制作過程中有兩大點是一定要注意的，第一是頁面混亂，主次不清，所有東西都引人注目；第二是背景干擾用戶瀏覽。這個是直接干擾用戶查看網(wǎng)站的視覺，在用戶受到這方面的影響一定大大增高了網(wǎng)站跳出率。網(wǎng)站建設★網(wǎng)站設計★網(wǎng)站制作★網(wǎng)頁設計-599元全包;企業(yè)網(wǎng)絡推廣☆網(wǎng)站優(yōu)化☆seo☆關鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-網(wǎng)站建設公司

　　pc端排版布局

　　1.把頁面分割成清晰明確的不同區(qū)域，因為可以使用戶迅速判斷出哪些區(qū)域是重點，哪些模塊內(nèi)容不是用戶需求。

　　例如：站點版塊不清晰不明確，對用戶瀏覽體驗大大降低。

　　2.創(chuàng)建清晰直觀的頁面層次結(jié)構(gòu)；越重要越要突出；邏輯相關的內(nèi)容視覺上也應該相關。

　　例如：頁面層次結(jié)構(gòu)不清晰，相當于頁面邏輯不通順，不符合要求。

　　3.用嵌套的方式形象地顯示從屬關系。

　　例如：站點層級嵌套混亂，讓用戶找不到對應信息，不符合要求。

　　pc端布局代碼運用：

　　1、table布局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現(xiàn)布局。這種布局方式也叫傳統(tǒng)布局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的布局方式不用這種。

　　2、HTML+CSS布局(DIV+CSS)：主要通過CSS樣式設置來布局文字或圖片等元素，需要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來布局，它比傳統(tǒng)布局要復雜，目前是主流的布局方式。

　　table布局和HTML+CSS布局(DIV+CSS)優(yōu)缺點：

　　table表格布局：

　　優(yōu)點：布局容易、快捷、兼容性好。

　　缺點：改動不便，需重新調(diào)整，工作量大。

　　DIV+CSS：

　　優(yōu)點：布局靈活、改動方便。

　　缺點：需考慮平臺的兼容性，對制作人員技能要求較高。

　　移動/wap端排版布局

　　1.頁面應注意排版精良，段落分明，合理使用不同字號區(qū)分頁面的主次信息，圖片、視頻等多媒體資源的位置及尺寸選擇配合頁面整體布局，保證頁面整體的美觀度和用戶瀏覽頁面信息的最佳可讀性。

　　例如：站點頁面排版差、段落距離不合理影響用戶閱讀

　　2.首屏主體內(nèi)容必須占屏幕的50%以上。并且主體內(nèi)容應位于手機屏幕的中心位置。

　　例如：首屏主體內(nèi)容小于50%，廣告等其他內(nèi)容過多，不符合要求

　　3.展開全文功能：展開全文的設置必須具有文字標示，且功能實際可用；展開全文功能最多只能出現(xiàn)一次，但不可出現(xiàn)在落地頁的首屏內(nèi)容中（列表頁除外）；展開全文與廣告等引導性內(nèi)容要設置一定距離間隔，避免干擾用戶操作。

　　例如：展開功能無文字標示，且與APP調(diào)起按鈕距離過近，不符合要求

　　例如：小程序展開全文按鈕出現(xiàn)在首屏，不符合要求

　　4.主體內(nèi)容應與廣告、相關推薦等次要內(nèi)容板塊之間有明顯間隔距離或分割線，使用戶獲取信息時不受任何干擾。

　　例如：翻頁功能鍵與廣告之間無間距，易引發(fā)用戶誤點擊，不符合要求

　　例如：小程序主體內(nèi)容與廣告之間距離過近，不符合要求

　　5.頁面的導航的功能與位置明確，避免用戶使用過程中被誤導。

　　例如：點擊服務導航按鈕，小程序未跳轉(zhuǎn)到對應頁面，不符合要求

　　pc端布局運用：

　　1、全適配：響應式布局+流體布局

　　2、移動端適配：流體布局+少量響應式、基于rem的布局。

　　注意：留白，這是網(wǎng)站都要考慮的問題。網(wǎng)頁要有留白的作用，使整個內(nèi)容排布得松緊有度，利用留白使頁面布局平衡，可以提高網(wǎng)頁的視覺效果和藝術感染力。減少頁面的干擾；使有用的內(nèi)容更突出；使頁面篇幅較短，無需滾屏。