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

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