html+css网页设计指南 9课件.pptVIP

第17章 综合案例二：设计复杂页面 本章将在第16章的基础上，继续细分页面，引导读者学习如何修饰页面和拓展页面的功能。学完这些内容，读者就足以应付市面上大部分主流页面的开发和设计工作。 本章的知识点主要有： 构思页面的布局 按照结构顺序制作页面 设计对应于每个模块的样式表 制作页面的整体思路 17.1 页面的框架布局 在设计一个页面时，首先要进行内容定位，然后要对页面内容进行排版和页面布局。设计好初级的页面布局后，可根据需要，决定是否需要进一步细分页面布局。 当页面布局最终完成后，就可以在相应的位置按照预先的设计放入相应的页面修饰了。 设计页面的方式有很多种，最重要的是要保证页面源码的可读性、可扩展性和良好的兼容性。 【本章示例参考：资料光盘\第17章\案例二.html】 17.1.1 定位页面的内容 假如读者要设计的是一个具有大量信息的门户网站页面，就需要设计较多的框模型层。因此，如何处理好一层层的叠加，就成为比较重要的工作。 在本案例中，页面的初级布局效果如图17.1所示。 17.1.2 页面初级布局的代码 基于这样的框架，页面初级布局的代码见书中的代码17-1。 footer框模型部分嵌套在supportText框模型中，这样可以保证footer框只局限在页面主体的右侧部分，而不是页面页脚撑满页面的整个宽度。 如果设计者的不希望是这样的效果，也完全可以把它独立出来。 17.2 细化页面的局部 页面的整体构架完成之后，接着就需要对局部进行修饰和细化。我们来一步一步进行制作。 17.2.1 intro部分（页面的头部） 页面的头部是intro部分。在本例中，头部主要通过填充图像来实现。当然，还需要设计更详细的样式表来描述intro部分，详细代码参见书中的代码17-3，制作后的效果如图17.2所示。 17.2.2 页面的左侧栏部分 设计好页面的头部后，接下来处理页面的左侧栏部分。从图17.3可以看出，页面的整个左侧栏都放在linklist对象中。左侧栏的结构性代码见书中的代码17-5。 17.2.3 页面的右侧栏主体部分 最后，我们来完成页面的右侧栏部分，其主体部分的代码见书中的代码17-7。 事实上这是最容易制作的一部分。在页面中，主体部分通常用来放置重要信息，一般不需要弄很多花样来彰显个性。 17.3 小结 网页设计并不是一门很难的学问，关键在于设计者是否能够认真细致地处理好每个细节，并对设计始终保持热情。这才是一个设计者保持创作灵感的根本。 当然，要成为一个优秀的设计师没有什么捷径可走。只有通过大量的训练练就良好的制作感觉，才能成为一个出色的前端页面设计师。 * *