第16篇 综合案例一：制作主流网站界面.pptx

第16章 综合案例一：制作主流网站界面 在本章中，将综合一些基本的知识技能，详细介绍一个页面是如何从构思到计划，最终成型展现在互联网上，如下图所示。这是目前大部分网站所运用的一种页面布局。布局中分为头部、底部和中间主要部分。其中，中间的部分又通常会被拆分成几列，用来放置不同的页面内容。 16.1 构思基础的布局 从前面的知识中已经了解到，要设计一个页面，首先，设计师心中需要明确摆放哪些内容，接着就是构思如何去布局这样的页面。在这个草图中，设计师可以大致将页面的布局规划出来，如下图所示。 16.2 设计基础模块的样式表 针对不同的结构部分，设计好相对应的CSS样式表。它目前在浏览器中看起来是这样的，如下图所示。 16.3 完善网站的子模块 接下来所要进行的工作，就是基于已经创建好的页面结构，一点点地去细化完成网站的各个部分，如头部、底部、侧栏和页面的主体部分。只要按部就班，这些都不会很难。 16.3.1 网站的导航栏 在这个例子中，希望网站的导航栏最后出现这样的效果，如下图所示。 16.3.2 页面的侧栏 页面的侧栏是一个浮动层，它的中间可以放入任何页面对象。这个例子中，希望它最终看到的样子如下图所示。 16.4 最终页面 最终，将所有的代码放在一个文档中，可以看到最终的页面效果。如下图所示。 16.5 小结 本章主要介绍了一个页面从构思到成型的过程。相同页面不同代码的例子有很多，这里给出了最易于理解的一种基础的做法。即便今后遇到更复杂的页面，其基于的原理都是一样的，都是建立于这样的一种制作思路上，即将页面结构和表现分离开，针对不同的页面对象去进行编辑。