第10章网页样式综合——灵活的电子相册学案.ppt

第10章 网页样式综合案例——灵活的电子相册 本章简介： 前面几章针对CSS设计中的几个专项分别进行了讲解，本章通过一个案例，对CSS的样式设计进行阶段复习。本章通过CSS对电子相册进行排版，进一步介绍CSS排版的方法。 搭建框架 10.1 阵列模式 10.2 单列模式 10.3 改进阵列模式 10.4 10.1　搭 建 框 架 首先来搭建页面的框架结构。搭建框架主要应考虑在实际页面中相册的具体结构和形式，包括照片整体排列的方法、用户可能的浏览情况、照片是否需要自动调整等。 首先对于阵列模式，不同的用户可能有不同的浏览器。显示器分辨率为“1024×768”的用户可能希望每行能显示5～6幅缩略图，而显示器分辨率为“1280×1024”的用户或许希望每行能容纳7～8幅，宽屏用户或许希望每行能显示更多。其次，即使在同一个浏览器下，用户也不一定能够全屏幕欣赏，这就需要照片能够自动排列和换行。如果使用table排版，是无论如何也不可能实现这一点的。 未设置CSS样式的效果 10.2　阵 列 模 式 首先来讨论阵列模式的实现方法，它主要要求照片能够根据浏览器的宽度自动调整每行的照片数，在CSS排版中正好可以用float属性来实现；另外考虑到需要排列整齐，而且照片有横向显示的也有纵向显示的，因此将块扩大为一个正方形，并且给照片加上边框。 以阵列模式显示 10.3　单 列 模 式 单列模式的照片竖直排列，每张照片的右侧显示关于该照片的详细信息，并且不更改页面的HTML结构。 单列模式 10.4　改进阵列模式 对于阵列模式，如果也能够看到详细信息就更好了。如果能够在鼠标指针经过某张照片时出现一个信息框，并显示文字内容，鼠标离开以后该信息框自动消失，这样不但页面非常简洁，而且可以方便浏览者掌握信息。 在阵列模式中动态显示文字信息 小结 在学习前面各章的技术专题之后，本章制作了一个比较完整的实例。 本章的电子相册的实例充分展示了CSS的作用，可以将一个非常基本、简单的页面制作成丰富多彩的样式。本章的目的并不仅仅是介绍电子相册的排版方法，更重要的是加深理解盒子模型、标准流、浮动和定位这4个最核心的原理，只有真正把这4个核心原理理解得非常透彻，才能真正掌握CSS 。