关于如何将网页做的完整且美观的解决办法

// 创作于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博客