第17章+項(xiàng)目學(xué)習(xí)：SmoothGallery相冊(cè)剖析.ppt

第17章項(xiàng)目學(xué)習(xí)：SmoothGallery相冊(cè)剖析,俗話說(shuō)：“站得高，看得遠(yuǎn)”。在本書接近尾聲的時(shí)候，讓我們把眼光放得遠(yuǎn)一些，通過(guò)項(xiàng)目來(lái)綜合體會(huì)CSS技術(shù)的魅力。本章即將介紹的是一款長(zhǎng)于展示圖片的免費(fèi)網(wǎng)頁(yè)套件-SmoothGallery2.0，通過(guò)剖析它在CSS技術(shù)方面的應(yīng)用，使我們?cè)谥R(shí)的綜合運(yùn)用上更上一個(gè)臺(tái)階。,17.1SmoothGallery簡(jiǎn)介,相信很多讀者都擁有自己的網(wǎng)絡(luò)個(gè)人相冊(cè)，我們利用它來(lái)儲(chǔ)存圖片、展示圖片、上傳圖片、分享圖片。在國(guó)內(nèi)也有很多知名的網(wǎng)絡(luò)相冊(cè)，比如網(wǎng)易相冊(cè)、QQ相冊(cè)等。但是，它們的優(yōu)點(diǎn)不在于展示圖片，而主要在于所提供的空間以及儲(chǔ)存文件的方便性。SmoothGallery則是一套非常專業(yè)的相片展示網(wǎng)頁(yè)，我們將用一章的篇幅對(duì)它的CSS樣式應(yīng)用進(jìn)行剖析。,17.1.1SmoothGallery簡(jiǎn)介,SmoothGallery（以下簡(jiǎn)稱SG）由網(wǎng)站開發(fā)專家JonathanSchemoul所制作，目前的最新版本是2.0。SG能夠創(chuàng)建非?？岬南嗥@示網(wǎng)頁(yè)效果，還能支持幻燈片似的圖片自動(dòng)播放等等功能。圖是官方網(wǎng)站上一個(gè)演示相冊(cè)的效果：,SG官方網(wǎng)站上的演示效果,17.1.2SmoothGallery下載與安裝,SG2.0可以在它的官方網(wǎng)站免費(fèi)下載，地址為：,SmoothGallery在官方網(wǎng)站的下載鏈接,17.1.3SmoothGallery效果演示,在SG2.0文件夾內(nèi)，我們發(fā)現(xiàn)了若干以Demo開頭的HTML頁(yè)面。Demo是英文Demonstration的簡(jiǎn)稱，指的就是演示的意思。下面我們先逐個(gè)地觀察這些演示效果，進(jìn)一步熟悉SG2.0的結(jié)構(gòu)。【SG2.0效果演示：基本效果】在瀏覽器中打開文件夾下的demo.html，頁(yè)面顯示如圖所示，可以看出，與網(wǎng)站上顯示的演示效果類似。,基本效果演示：Demo.html,17.2剖析SG2.0的CSS樣式,SG2.0安裝后的目錄包含一個(gè)名為css的子文件夾，所有相關(guān)的圖片及外部樣式表都存放在這里。在絕大多數(shù)商業(yè)網(wǎng)站的結(jié)構(gòu)中，css文件也都是單獨(dú)存放在一個(gè)文件夾中的，這樣很方便管理、修改。本節(jié)將對(duì)該文件夾下的兩個(gè)外部樣式表進(jìn)行剖析。在此之前，我們需要以Demo.html為例，熟悉演示頁(yè)面的結(jié)構(gòu)。,17.2.1演示頁(yè)面的結(jié)構(gòu),利用IE瀏覽器打開SG2.0安裝根目錄下的demo.html。如果我們?cè)贗E中安裝了第10章所介紹的IE開發(fā)者工具條，則在瀏覽器工具欄中單擊相應(yīng)圖標(biāo)以顯示界面（如果不熟悉使用方法請(qǐng)參看第10章），如圖所示。,利用IE開發(fā)者工具條分析演示網(wǎng)頁(yè)demo.html,17.2.2控制頁(yè)面總體外觀-layout.css,利用Dreamweaver打開css文件夾下的layout.css。從文件名可以判斷出它起到了控制頁(yè)面結(jié)構(gòu)與總體外觀的作用。在本節(jié)中將逐行對(duì)其進(jìn)行解讀。首先是對(duì)整個(gè)body標(biāo)簽的定義，決定了網(wǎng)頁(yè)的基本外觀，如代碼所示。代碼對(duì)演示網(wǎng)頁(yè)的Body進(jìn)行樣式定義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節(jié)中所劃分的結(jié)構(gòu)，可以將樣式表文件也分為如下幾個(gè)部分：控制相片框的基本樣式部分?？刂瓶s略圖樣式的部分。控制圖片導(dǎo)航和打開全圖鏈接的部分。控制圖片題目和說(shuō)明的部分。,縮略圖內(nèi)部的層次關(guān)系與外觀,17.2.4SG2.0樣式表剖析小結(jié),SG2.0的樣式表已經(jīng)講解完畢，下面是對(duì)它們的總結(jié)：樣式表的重點(diǎn)是選擇器的應(yīng)用：后代選擇器可以方便的根據(jù)層次關(guān)系來(lái)設(shè)置樣式。類型選擇器則適合頁(yè)面整體樣式的設(shè)置，可以單獨(dú)放置于一個(gè)樣式表中。ID選擇器應(yīng)用較少，但是應(yīng)用范圍精確。對(duì)于學(xué)習(xí)一個(gè)復(fù)雜網(wǎng)頁(yè)，首先要將它的層次結(jié)構(gòu)理解清楚，必要的時(shí)候畫出圖形，或者利用IE開發(fā)者工具條等相關(guān)工具整理出樹圖，另外，邊對(duì)照實(shí)際顯示效果，邊查看樣式設(shè)置，也能更容易更準(zhǔn)確的理解網(wǎng)頁(yè)設(shè)計(jì)者的意圖。不同瀏覽器對(duì)于透明度屬性的設(shè)置語(yǔ)句不同，在使用的時(shí)候要注意都要列出。,17.3小結(jié),本章對(duì)網(wǎng)絡(luò)知名的SmoothGallery2.0專業(yè)相冊(cè)進(jìn)行了樣式表方面的剖析，讀者通過(guò)本章的學(xué)習(xí)，相信已經(jīng)：進(jìn)一步熟悉了IE開發(fā)者工具條的使用，并能夠在其他網(wǎng)頁(yè)上應(yīng)用，查看和