网页底部制作

在前面的内容中我们已经把网页的header导航区以及body主体区的内容划分设计好了，那么接下来我们将完成网页设计的最后一部分，网页底部的制作。

开始学习制作之前，我们再回过头来去看看一开始我们画出来的网页的整体布局图：

大家可以发现，我们网页的设计是以一个个区域为顺序，一步步逐个设计搭建出来的。这也是本书想要传递给大家的一种方法，当我们接到一些任务时，学会先搭框架，然后按计划和步骤，将任务划分，有条理地将任务和目标实现。话不多说，接下来我们开始网页底部的制作和学习。

网页底部的作用

与header区和body区不同的是，网页的底部footer区域由于用户的使用习惯常常会被忽略。但其实在整个网站的设计和建设中，footer页尾的区域具有非常重要的作用。

我们先去了解一下常见的科技媒体的网页底部是如何设计的：

通过观察可以发现，网页底部的设计可以帮助网站传达信息给用户。如果设计得当，不仅可以为网站锦上添花，提升整体的设计水平，还可以为其他的页面引流起到帮助和效果。另外，网页的底部也是传达品牌理念的重要领域，可以添加一些“加入我们”等链接来让用户更好地认识这个品牌和网站。

网页底部的设计要点

前面介绍了网页底部在整个网页设计中的重要作用，那么网页的底部设计有什么注意点呢？

首先，要注意将网页区域与内容区域明确区分开来。

网页部分内容的颜色和背景颜色都需要与网站主体部分的颜色进行区分，这样做的好处就是让网页主体和网页页的底部形成对比，同时也告诉用户网站展示结束，使得网页的结构更加有层次。当然了页脚颜色的选择依然要与网站整体风格相符，不能相差太多。

其次，注意内容的可读性，保持简洁。

网页的底部虽然可供展示的区域不多，但是仍然有一些重要的信息需要呈现。那么我们在设计底部的时候就要注意整个底部的简洁性，合理安排各项元素的间距和排版，方便用户的点击和阅读，以保证整个网站的视觉效果。

最后，要做好链接的整理和分类。

一般在网页的底部都会添加一些链接，这些链接有可能是“关于我们”、“服务条款”、“常见问题”等常见网页相关的信息，也可能是由当前网页所引流出去的其他推荐网站的一些链接。列如36kr的网页底部就添加了它旗下的其他网站品牌和合作伙伴的链接。

链接的整理分类不仅能为相关网站更好地引流，同时也让整个网站看起来更加有严谨有条理。

添加右侧小图标

在制作网页底部的区域前，网页右下方的小图标还需要我们添加一下。

选择矩形框选工具，沿着整个画布的右侧边缘，框选出70px的宽度，然后拉出一根垂直方向的参考线。这个区域内用来放置“回到顶部”等相关的图标。

接着我们利用之前所学的下载图标的方式下载好如下图所示的“消息”、“手机”、“二维码”和“回到顶部”相类似的小图标。

然后我们将这些图标拖至网页刚刚用参考线所划分的区域之中，利用自有变换的功能，快捷键【Ctrl】+【T】将其等比较缩小至合适的尺寸。图标的左侧与刚刚拉出的参考线对齐，底部与文章列表5的分割线对齐，如下图所示：

接下来我们创建一个矩形图层，命名为页尾背景矩形：长1820像素x高150像素，颜色#2e3237，然后沿着画布的页尾放置好：

接着我们在页尾的背景矩形上添加文字：文字内容：“关于我们”、“加入我们”、“合作伙伴”、“常见问题解答”，字体微软雅黑，大小18px，颜色#6d7081。接着将其位置调整下，“关于我们”的左侧与参考线对齐，高度放置到距离背景矩形顶端45px的位置，接着将这几个文字垂直居中对齐，如下图所示：

接着我们在距离这排字的底部30px的地方添加另外一排文字，这些文字通常用来展示网站的备案编号。当然这里面的文字内容是要根据你具体的网站情况进行填写的，我这里只是做一个演示。

同样的，字体微软雅黑，大小18px，颜色#6d7081。

同样地，这里面用到的图标同样可以通过我们之前学习的找图标的方式找到。

这时候我们还需要在网页底部的右侧根据自己的实际应用需求去添加一些相关需要加链接的图标，如下图所示：

到这一步，我们网页底部的设计就告一段落了，我们将这部分的图层整理打组，然后来看下整体的效果：

我们可以看出，整个网页设计下来，我们的图层组也是在有顺序有条理的整理的，这样对于我们后续的调整和修改都会带来很大的便利。

知识点总结

到这里我们网页制作设计的部分就正式结束了，回顾这一阶段的学习，我们不仅仅掌握了很多PS上的学习知识，同样的，我们更是学习了如何将一个繁杂的软件工具消化，举一反三，内化为更多学习和工作上的技巧。我想这也是本书想带给大家的，我们更希望的是让大家学习掌握如何在互联网时代有技巧地去学习新的知识。

工具可能丰富多变，但是学习方式是可以融会贯通的。学习方法的掌握与不断迭代是我们学习一门课程最有力的武器 ！