第17章 案例二设计复杂页面_图文.pptVIP

第17章 案例二：设计复杂页面 本章将在第16章内容的基础上，将页面拆分得更细致化。并且在布局完成的页面基础上，熟悉如何去修饰页面、拓展页面的功能。学习了本章内容，掌握了这些千篇一律的操作技巧后，可以说足以应付市面上大部分主流的页面。 17.1 页面的框架布局 在设计一个页面时，首先是内容的定位，其次是依据页面内容排版进行页面布局，以配合需要放入页面中的内容。当设计好初级的页面布局后，如果页面内容需要，则可以进一步去细分页面布局。当页面布局完成之后，最后可以在相应的位置按照预先的设计放入相应的页面的修饰。 17.1.1 定位页面的内容 假如是一个具备大量信息的基本门户页面，需要较多一些的框模型的层，那么如何去处理好一层层的叠加，就是比较重要的一项工作了。这个案例是关于“页面设计的一个主题”，它看上去应该是这样的，如下图所示。 17.1.1 定位页面的内容 17.1.2 页面初级布局的代码 基于图17.1这样的框架，它的代码写法我们来看一下。 17.2 细化页面的局部 当页面的整体构架完成之后，接下来就是对于局部的修饰和细化，在上图中已经可以看出在每一个初级框架下是将要填入的内容，那么在本节中将一一揭开这些模块神秘的面纱。 17.2.1 intro部分 页面的头部在这里定义为intro，依照这个例子中的需要，将主要使用图像来填充这一部分。当然需要设计更详细的样式表来描述intro部分 intro部分效果如下图所示。 17.2.2 页面的左侧部分 当设计好页面的头部后，接下来我们选择先处理页面的左侧，从第一幅图中可以看出，页面的整个左侧栏都放在linklist对象中。页面的左侧部分最终的显示效果如下图所示。 17.2.2 页面的左侧部分 17.2.3 页面的右侧栏主体部分 这个复杂工程的最后一项就是完成页面所剩下的右侧主栏，事实上这是最容易的一部分。在页面中，主体部分通常用来放置最重要的信息，而不需要很多花样的摆设来彰显个性。页面的右侧栏主体部分最终的显示效果如下图所示。 17.2.3 页面的右侧栏主体部分 17.3 小结 设计页面并不是很难的一门学问，关键在于是否能够细心认真地处理好每一个细节，对设计保持热情，这才是保证一个设计者拥有不断创作灵感的源泉。