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

第17章项目学习：SmoothGallery相册剖析,俗话说：“站得高，看得远”。在本书接近尾声的时候，让我们把眼光放得远一些，通过项目来综合体会CSS技术的魅力。本章即将介绍的是一款长于展示图片的免费网页套件-SmoothGallery2.0，通过剖析它在CSS技术方面的应用，使我们在知识的综合运用上更上一个台阶。,17.1SmoothGallery简介,相信很多读者都拥有自己的网络个人相册，我们利用它来储存图片、展示图片、上传图片、分享图片。在国内也有很多知名的网络相册，比如网易相册、QQ相册等。但是，它们的优点不在于展示图片，而主要在于所提供的空间以及储存文件的方便性。SmoothGallery则是一套非常专业的相片展示网页，我们将用一章的篇幅对它的CSS样式应用进行剖析。,17.1.1SmoothGallery简介,SmoothGallery（以下简称SG）由网站开发专家JonathanSchemoul所制作，目前的最新版本是2.0。SG能够创建非常酷的相片显示网页效果，还能支持幻灯片似的图片自动播放等等功能。图是官方网站上一个演示相册的效果：,SG官方网站上的演示效果,17.1.2SmoothGallery下载与安装,SG2.0可以在它的官方网站免费下载，地址为：,SmoothGallery在官方网站的下载链接,17.1.3SmoothGallery效果演示,在SG2.0文件夹内，我们发现了若干以Demo开头的HTML页面。Demo是英文Demonstration的简称，指的就是演示的意思。下面我们先逐个地观察这些演示效果，进一步熟悉SG2.0的结构。【SG2.0效果演示：基本效果】在浏览器中打开文件夹下的demo.html，页面显示如图所示，可以看出，与网站上显示的演示效果类似。,基本效果演示：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章），如图所示。,利用IE开发者工具条分析演示网页demo.html,17.2.2控制页面总体外观-layout.css,利用Dreamweaver打开css文件夹下的layout.css。从文件名可以判断出它起到了控制页面结构与总体外观的作用。在本节中将逐行对其进行解读。首先是对整个body标签的定义，决定了网页的基本外观，如代码所示。代码对演示网页的Body进行样式定义bodycolor:#ccc;font-family:TrebuchetMS,LucidaGrande,Arial,Helvetica,sans-serif;margin:0auto;padding:0;font-size:0.6em;background:#111url(./images/bg/gradient1.gif)topleftrepeat-x;,17.2.3控制相片的外观-jd.gallery.css,将样式表文件jd.gallery.css用Dreamweaver打开，按照17.2.1节中所划分的结构，可以将样式表文件也分为如下几个部分：控制相片框的基本样式部分。控制缩略图样式的部分。控制图片导航和打开全图链接的部分。控制图片题目和说明的部分。,缩略图内部的层次关系与外观,17.2.4SG2.0样式表剖析小结,SG2.0的样式表已经讲解完毕，下面是对它们的总结：样式表的重点是选择器的应用：后代选择器可以方便的根据层次关系来设置样式。类型选择器则适合页面整体样式的设置，可以单独放置于一个样式表中。ID选择器应用较少，但是应用范围精确。对于学习一个复杂网页，首先要将它的层次结构理解清楚，必要的时候画出图形，或者利用IE开发者工具条等相关工具整理出树图，另外，边对照实际显示效果，边查看样式设置，也能更容易更准确的理解网页设计者的意图。不同浏览器对于透明度属性的设置语句不同，在使用的时候要注意都要列出。,17.3小结,本章对网络知名的SmoothGallery2.0专业相册进行了样式表方面的剖析，读者通过本章的学习，相信已经：进一步熟悉了IE开发者工具条的使用，并能够在其他网页上应用，查看和