第八章 8.3 页脚-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Web Layout Elements 第八章 网页布局 要素 页面的尺寸 Page Size 1 页面整体造型 Page Overall Modeling 2 目 录 CONTENTS 页眉 Page Header 3 文本文字 Textual Worf 4 页脚 Page Footer 5 2 多媒体 Page Size 7 导航栏的位置 Page Overall Modeling 8 目 录 CONTENTS 网页中的交互式表单 Page Header 9 图像 Image 6 3 页 脚 5 PART 页脚设计 页脚设计案例解析 文字应用案例分析 网页中文字布局形式 4 页 脚 Page Footer 8.5 页脚 正文页面设计完成后也不要忘记页面底下的页脚设计，设计者应从整体的角度考虑页面的全面性，避免头重脚轻。设计者往往容易忽视页脚，但页脚放置的基本都是联系信息、链接网站、版权声明等重要内容，所以简洁、明了又同时富有创意性是整个页面完整、美观的重要因素。 5 页 脚 Page Footer 通常设计师在接到任务时，大多数设计师都会集中精力投身于网站主页和页眉的设计，因此，再无余力对页脚进行加工的情况下，往往会选择将免责声明和版权信息等放置页脚。其实，页脚不应该是以这种方式存在，事实上，页脚的重要性和页眉相当，或者更甚，因为对大多数用户来说，页脚是他们最后的“停泊港”。而这恰好应该成为一个绝佳的入口：为访客提供注册服务、联系网站（提供信息/问题咨询）等。所以，此刻可以问问你自己，当访客到达网页底部时，你想给他们看什么？当然是让页脚变得好看，就算页脚没有任何东西（按钮、链接等），只要视觉效果出众，它依然可以成为网站整体中有力的那部分，下面简单介绍几种处理页脚的方式方法。 6 8.5.1页脚设计 页 脚 Page Footer 1.有良好的视觉层次 访客阅读文章时需要的不是一屏到底，然后糊里糊涂地结束，而是段落分明的层次感，先是标题，然后正文、页脚、诸如此类，因此建立一个优秀的列表样式能帮用户提高聚焦性和可读性。 当然，干净良好的排版也至关重要。 这个在设计中属于老生常谈了，当你有 大量信息要处理时，简约风格是不二选 择。在页脚设计上，同样要保证排版干 净，元素有序，空间通透不拥挤，如图 8-46所示。 图8-46简约风格页脚 7 8.5.1页脚设计 页 脚 Page Footer 2.合理留白 留白在页脚设计中同样重要，因为涉及到布局，留白能分割出不同的区块，起到绘制不同区域的效果。当然，留白不是仅存白色空间，只要是无内容填充的部分都可以称为留白，如图8-47所示。 图8-47留白风格页脚 8 8.5.1页脚设计 页 脚 Page Footer 3.把页脚和内容分离开 大多数页脚都是以深色背景为主的，有些是直接用插画做背景，无论哪个，你要确定的是页脚看起来是和内容分离开的，这样才不会混乱，保证了视觉上的层次性，如图8-48所示。 图8-48内容分开式页脚 9 8.5.1页脚设计 页 脚 Page Footer 8.5.2页脚设计案例解析 1.观赏感 如图8-49所示主页中的页脚偶然一看恐怕没人以为是个了不起的页脚，说它是个页眉恐怕更会有人相信，虽说是一个页面中最不起眼的一部分，却也做得如此精良，有复古色彩，耐人寻味且观赏价值也很高。 图8-49观赏感页脚 10 页 脚 Page Footer 2.简洁感 如图8-50所示主页中的这个页脚可以用两个字“简洁”来形容。不过这也是近年来网页的一个流行趋势，其特点是这个页脚并没有用普通的直线或是线条来划分，而是采用流畅的曲线来造成流动的感觉，工整而不沉闷，几个色块、两条直线就能做到，也是很好地页脚设计。 图8-50简洁感页脚 11 8.5.2页脚设计案例解析 页 脚 Page Footer 3.方便感 如图8-51所示主页，乍一看这个页脚也没什么特别，但它最特别之处就是即使在页脚处也添加了搜索栏和导航栏，一般用户在浏览网页时浏览到底部时往往需要拉到最上面找搜索栏和导航栏，有些页面很长，这时有些急躁的用户就会觉得很麻烦，但这个页脚就不需要了，浏览到页面的最下面可以直接搜索和查找，非常贴心的设计。 图8-51方便感页脚 12 8.5.2页脚设计案例解析 页 脚 Page Footer 4.时代感 如图8-52所示主页中的页脚的设计跟随时下流行的扁平化，用大幅照片做背景，跟随时代变化而变化也是