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

　　pc端排版布局

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

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

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

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

　　3.用嵌套的方式形象地顯示從屬關(guān)系。

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

　　pc端布局代碼運用：

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

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

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

　　table表格布局：

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

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

　　DIV+CSS：

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

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

　　移動/wap端排版布局

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

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

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

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

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

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

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

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

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

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

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

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

　　pc端布局運用：

　　1、全適配：響應(yīng)式布局+流體布局

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

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