// 創作于2018年暑假，最近才將其上傳至 csdn

1 問題描述

?? ????在這次暑假期間，集中性的針對html開發進行了一次學習，但在實際制作網頁中遇到一些困難。你們也許認為肯定是關于技術的問題，其實不然，我所遇到的最大問題就是ui設計方面，不知道如何去布局一個網頁，使之既能完整的表達我所表達的東西，又能美觀地給展示出來。

2 問題分析

?? ????針對這個問題，我認為第一是自己經驗不足，第二沒有做好前期調研工作，若做好了第二點工作將大大加快制作的進程。例如在簡單的完成作業時，如果單純直接開始完成作業，這是盲目的，肯定每個同學都是從了解作業是由哪些科目的作業構成的吧，這也就是前面所提到的第二點。

3 解決方案

?? ????前面分析了造成這個問題的原因，從處理的角度，也就有了更多的處理方式。對于這次的漏洞，以下文章我將針對如何去制作一個網站的首頁進行研究與分析，該調研主要為新聞社交類和旅游類。
?? ????從調研的情況來說，對于網頁總體的布局，除導航、輪播圖和尾部三部分外，所有的內容都采用了左右分塊布局（大多數為左窄有寬的布局，個人意見此種布局更好看）。在我看來，對這種布局的實現可以采用大盒子里面嵌套兩個左右盒子，再分別進行添加各自的小盒子進行內容的填充。左邊的盒子可以根據實際網頁的作用添加一些興趣文章或主題相關的超鏈接等，右邊的盒子才是真正內容的東西。這種布局好處不僅可以使用戶注意力集中在一個區域內，也不會覺得網頁內容過于單一。

布局一之導航：

關于內容?? 無論是社交類、購物類還是旅游類，大多數的導航欄都有和網頁自己的特色標志或者特色功能（具有標志性代表的）。從導航界面一看，就能夠初步了解和認識該網頁是什么內容，例如新浪網導航內出現了“微博”“博客”類標簽，那么這個網站會更加偏向將事實類的信息發送給使用者。例如csdn的頂部導航里含有多個實用且快捷的標簽。
關于布局?? 大多都是采用淺色為底色、與內容更小的字體組成，不會分散使用者對整個網頁主題的注意力，但對于長期使用者來說，更加的方便快捷。
總結?? 導航應該使用一些圖標、特色功能（經典）和一些基本的登陸注冊的鏈接，布局簡單最好，也可對網頁所傾向的鏈接進行突出引導（不能太多）。

布局二之導航下方與網頁內容之上：

關于內容??新聞類網頁大多數此處框架是對一些信息的分類。購物類網頁大多數此處框架是對一些商品的分類。而一些旅游類的大多會用到輪播圖進行一些景點的展示，然后在輪播圖上添加復選框的搜索。
關于布局??針對旅游類網頁，我對排名前十的旅游網站進行了研究，大多數都是將購票放在首頁，更多繁瑣的超鏈接讓我眼花繚亂，減少了閱讀網頁的興趣。在其中，我最欣賞的是馬蜂窩的布局，這部分由輪播圖、就具有選擇功能的搜索浮框、圖片來源文字三個主要模塊構成，在整個頁面占據四分之三的內容。此布局具有簡單大方扁平化，而這些特點正是當前pc端用戶所喜歡的，大多說的客戶端和網頁都已經向扁平化進軍。
總結??這部分的內容主要是去引導閱讀者的使用該網頁，可以利用這個區域去突出網頁的主題。另外再調研中大多數網頁的搜索框部分都含有熱門推薦，指引讀者去了解可能會感興趣的詞語。但對于本人個人審美和使用感受來說，更喜歡簡潔和自己去選擇。
*以下是上述談論到的圖片

圖2-1社交類 新浪www.sina.cn

圖2-2社交類 CSDN https://www.csdn.net/

圖2-3購物類 京東www.jd.com
以下是排名靠前的旅游類網站

圖2-4旅游類 途牛www.tuniu.com

圖2-5旅游類 馬蜂窩www.mafengwo.cn

圖2-6旅游類 驢媽媽 https://www.china-10.com/

圖2-7旅游類 窮游網http://www.qyer.com/

布局三之熱門推薦

關于內容：目前我所調研的網頁中發現，每個網頁都含有熱門推薦的功能：購物類網站大多是一些關于秒殺或銷售較好的產品信息鏈接；社交類網站大多是一些關于當前熱門、實時或者具有討論意義的文章；旅游類網站大多是一些關于購買優惠頭條、旅游套餐的推薦。
關于布局：在我本人看來，這一部分可以采用左右分塊布局。如果是制作新聞和社交類網頁，這部分應該去使用大面積的去堆積；如果是制作旅游類網頁，這部分不建議使用太大面積，就個人調研大部分網頁來看，旅游類網站若使用大面積的熱門推薦（特別是關于金錢有關的推薦，以窮游網為例），會讓使用者從該網頁去獲得旅游相關信息的興趣大大減少。該部分一般為三個浮動小盒子構成較美觀，且每個小盒子的內容能夠獨立且抓住眼球。
總結：根據制作網頁本身的性質對其進行相應的調整，才能夠得到很好的效果。
*以下是上述談論到的圖片

圖3-1購物類 京東www.jd.com

圖3-2社交類 新浪www.sina.cn

圖3-3旅游類 途牛www.tuniu.com

圖3-4旅游類 馬蜂窩www.mafengwo.cn

圖3-5社交類 CSDN https://www.csdn.net/

圖3-6旅游類 窮游網http://www.qyer.com/

布局四之內容分類

關于內容：我調研中的所有網頁中都是一個一個盒子構成，每個盒子類型各不同，展示了網頁的個性化和豐富化。每個盒子又以鏈接的形式進行填充，里面會含有更多內容的鏈接。對于新聞社交類網站，傳遞的更多應該是信息與文字，所以整體都以文字鏈接堆積進行填充，讓使用者能夠得到更多更豐富的信息；對于旅游類網站，傳遞的更多是景點信息與特色，所以在整體可以使用標題突出、圖片展示、簡短的文字描述的一個小盒子。
關于布局：首先從整體布局來講，依舊采用左右分塊布局。左側制作一些標準流的小盒子進行堆積，每一個小盒子的內容和性質各不相同且最好實時；右側制作一些浮動流的小盒子，一行中三個小盒子比較適當，每一個小盒子是具有不同的方向但性質相同。其次這一部分也將是整個網站首頁的主要布局，最好在整個頁面的二分之一以上。
總結：根據制作網頁本身的性質對其盒子進行調整，獲得到獨特的效果。
以下是上述談論到的圖片

圖4-1社交類 新浪www.sina.cn

圖4-2購物類 京東www.jd.com

圖4-3旅游類 馬蜂窩www.mafengwo.cn

布局五之尾部

關于內容：以馬蜂窩為例，大多數的尾部都是對自身網站所屬公司的版權聲明和備案工號的聲明，一般會對自身的app、微博、微信進行宣傳，和一些友情合作網站公司進行宣傳。
關于布局：大多數都采用左右布局，也會有一些是標準流式布局。左右布局大多左側為“指南”、“關于我們”、總體服務類型，右側為一些二維碼。最后底端就是一些聲明和客服電話與幫助中心，底端部分會再次放入網頁的標志。
總結：尾部部分的備案相關是必備的內容，布局可以隨個人偏好進行血案則標準流或者浮動布局。個人覺得上下標準流較好。

圖5-1旅游類 馬蜂窩www.mafengwo.cn

4 總結

本文對網頁整體布局和一些個人覺得較好的布局進行了簡單的分析。網頁整體布局對于整個網站的發展至關重要。
我個人覺得一個優秀的網站應該具備以下幾點：
（1）結構清晰，扁平化
（2）體驗優秀，界面便捷
（3）新穎個性，風格獨特
網頁的界面將會直接決定用戶的去和留，頁面的結構也是衡量用戶體驗度的重要標準。

參考文獻

濤痕————《如何借鑒一個優秀的網站》————CSDN博客

總結

以上是生活随笔為你收集整理的关于如何将网页做的完整且美观的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。