第17章 项目学习：SmoothGallery相册剖析.pptVIP

第17章 项目学习：SmoothGallery相册剖析 俗话说：“站得高，看得远”。在本书接近尾声的时候，让我们把眼光放得远一些，通过项目来综合体会CSS技术的魅力。本章即将介绍的是一款长于展示图片的免费网页套件---SmoothGallery 2.0，通过剖析它在CSS技术方面的应用，使我们在知识的综合运用上更上一个台阶。 17.1 SmoothGallery简介 相信很多读者都拥有自己的网络个人相册，我们利用它来储存图片、展示图片、上传图片、分享图片。在国内也有很多知名的网络相册，比如网易相册、QQ相册等。但是，它们的优点不在于展示图片，而主要在于所提供的空间以及储存文件的方便性。SmoothGallery则是一套非常专业的相片展示网页，我们将用一章的篇幅对它的CSS样式应用进行剖析。 17.1.1 SmoothGallery简介 SmoothGallery（以下简称SG）由网站开发专家Jonathan Schemoul所制作，目前的必威体育精装版版本是2.0。SG能够创建非常酷的相片显示网页效果，还能支持幻灯片似的图片自动播放等等功能。图是官方网站上一个演示相册的效果： 17.1.2 SmoothGallery下载与安装 SG2.0可以在它的官方网站免费下载，地址为：/download/，本书的配套光盘提供了解压缩后的SG2.0文件夹，不用如下的安装过程，只需要直接拷贝到电脑的某盘根目录下即可。 【SG2.0的下载安装过程】 为了方便读者，简单讲述SG2.0的下载安装过程。 单击图17-2中被方框围住的链接，选择Zip文件包保存到本地硬盘的位置，单击确定后很快就能下载完毕，压缩包的大小约1M稍多。在电脑中找到下载的Zip文件，将其解压缩到一个空目录，就完成了。 17.1.3 SmoothGallery效果演示 在SG2.0文件夹内，我们发现了若干以Demo开头的HTML页面。Demo是英文Demonstration的简称，指的就是演示的意思。下面我们先逐个地观察这些演示效果，进一步熟悉SG2.0的结构。 【SG2.0效果演示：基本效果】 在浏览器中打开文件夹下的demo.html，页面显示如图所示，可以看出，与网站上显示的演示效果类似。 17.2 剖析SG2.0的CSS样式 SG2.0安装后的目录包含一个名为css的子文件夹，所有相关的图片及外部样式表都存放在这里。在绝大多数商业网站的结构中，css文件也都是单独存放在一个文件夹中的，这样很方便管理、修改。 本节将对该文件夹下的两个外部样式表进行剖析。在此之前，我们需要以Demo.html为例，熟悉演示页面的结构。 17.2.1 演示页面的结构 利用IE浏览器打开SG2.0安装根目录下的demo.html。如果我们在IE中安装了第10章所介绍的IE开发者工具条，则在浏览器工具栏中单击相应图标以显示界面（如果不熟悉使用方法请参看第10章），如图所示。 17.2.2 控制页面总体外观--- layout.css 利用Dreamweaver打开css文件夹下的layout.css。从文件名可以判断出它起到了控制页面结构与总体外观的作用。在本节中将逐行对其进行解读。 首先是对整个body标签的定义，决定了网页的基本外观，如代码所示。 代码对演示网页的Body进行样式定义 body { color: #ccc; font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, sans-serif; margin: 0 auto; padding: 0; font-size: 0.6em; background: #111 url(../images/bg/gradient1.gif) top left repeat-x; } 17.2.3 控制相片的外观 --- jd.gallery.css 将样式表文件jd.gallery.css用Dreamweaver打开，按照17.2.1节中所划分的结构，可以将样式表文件也分为如下几个部分： 控制相片框的基本样式部分。 控制缩略图样式的部分。 控制图片导航和打开全图链接的部分。 控制图片题目和说明的部分。 17.2.4 SG2.0样式表剖析小结 SG2.0的样式表已经讲解完毕，下面是对它们的总结： 样式表的重点是选择器的应用：后代选择器可以方便的根据层次关系来设置样式。类型选择器则适合页面整体样式的设置，可以单独放置于一个样式表中。ID选择器应用较少，但是应用范围精确。 对于学习一个复杂网页，首先要将它的层次结构理解清楚，必要的时候画出图形，或者利用IE开发者工具条等相关工具整理出树图，另外，边对照实际显示效果，边查看样式设置，也能更容易更准确的理解网页设计者的