A-PDF Split DEMO : Purchase from www.a-pdf.com to remove the watermark 12 Kütüphane Öğelerini Kullanmak Web sitenizde tekrar tekrar kullanmanız gerekebilecek pek çok öğe ve öğe grubu vardır. Bunların arasında gezinti öğeleri, telif hakkı bilgileri, üstbilgiler ve altbilgiler de yer alır, ama bu öğeler bunlarla sınırlı değildir. Dreamweaver, sık kullanılan bu içerik bileşenlerini kütüphane öğeleri olarak saklamanıza imkân sağlar. Tek bir içerik bileşeni kütüphane öğesi (library item) olarak adlandırılır ve bunlar, her bir örnek orijinal öğeye bağlanacak ve onun tarafından kontrol edilecek şekilde birden fazla sayfaya eklenebilir. Kütüphane öğeleri oluşturarak aynı içeriği birden fazla belgeye hızla ve kolayca ekleyebilirsiniz. Sitenizde birçok sayfada kullanılabilen telif hakkı tarihleri gibi bilgileri değiştirmeniz gerekirse, kütüphane öğeleri içeriği düzenlemenizi ve bunu içeren bütün belgeleri tek bir komutla güncellemenizi mümkün kılar. Kütüphane öğelerini kullanmazsanız, sayfaların hepsini açıp bilgileri tek tek düzenlemek ya da Bu ve Değiştir (Find & Replace) özelliğini (bu konuyu Ders 17 de göreceğiz) kullanmak zorunda kalırsınız. Küçük bir sitede bu iş pek zor olmayabilir; ama bunu çok büyük bir sitede yapmaya çalıştığınız takdirde zaman kaybedebilirsiniz ve hata yapma olasılığı ciddi şekilde artabilir Bu projede bir sayfaya bir kütüphane öğesi ekleyeceksiniz. Kütüphane öğesinde değişiklik yaptıktan sonra, aynı değişiklikleri sitede bu öğeyi içeren bütün sayfalarda hızlı ve etkili bir şekilde yapmak için güncelleme özelliğini kullanacaksınız.
Kütüphane öğelerini, sitenizin tutarlılığını muhafaza etmek ve güncelleme işlemini otomatikleştirmek için kullanabilirsiniz. Kütüphane öğeleri, belirli elemanları birden fazla sayfada kullanmanıza imkân sağlar. Kütüphane öğelerini etkili bir şekilde kullanmanız, sadece Web sitenizi geliştirme aşamasında değil, daha sonraki güncelleme ve bakım işlemlerinde de size zaman kazandırabilir. Bu derse ait tamamlanmış sayfaların örneklerini görmek için Lesson_12_Libraries/ Completed klasöründeki Community/community.html dosyasını açabilirsiniz. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Kütüphane öğelerini ne zaman ve neden kullanmanız gerektiğini öğreneceksiniz. Bir kütüphane öğesi oluşturacak ve bunu sayfalarınıza ekleyeceksiniz. Bir kütüphane öğesini yeniden oluşturacaksınız. Mevcut bir kütüphane öğesini düzenleyeceksiniz. Bir kütüphane öğesine ait bütün referansları güncelleyeceksiniz. Bir kütüphane öğesiyle kaynak dosyası arasındaki bağlantıyı koparacaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 1 saat sürecektir. Ders Dosyaları Başlangıç Dosyaları: Lesson_08_Interactivity/index.html Lesson_12_Libraries/Community/community.html Lesson_12_Libraries/Community/community_intro.html Lesson_12_Libraries/Community/BeginningGreen.html Lesson_12_Libraries/Community/AboutGreen.html Lesson_12_Libraries/Community/sidebar.html Tamamlanmış Proje: Lesson_12_Libraries/Completed/Community/Community.html Completed klasörlerinde yer alan kütüphane öğelerinin adlarının sonuna, bunları bu derste sizin oluşturacağınız kütüphane öğelerinden ayırt edebilmeniz için _solution ifadesi eklenmiştir. 414 DERS 12
Bir Kütüphane Öğesi Oluşturmak Kütüphane öğesi, birden fazla sayfada kullanılabilen bir içerik bileşenidir. Sitenizdeki sayfalardan ayrılmış durumdadır ve kütüphanede bulunan bir dosyada tutulur. Kütüphane öğesi, ilgili içeriğe ait koddan ibarettir; kendi başına bir HTML sayfası değildir. Bir kütüphane öğesini, belgedeki bir ya da daha fazla elemanı seçip kütüphaneye ekleyerek oluşturabilirsiniz. Bunu yaptığınızda, Dreamweaver bu seçimi kendisine karşılık gelen kütüphane öğesine bağlı olan ve düzenlenemeyen bir içeriğe dönüştürür. Aşağıdaki uygulamada bu işlemin nasıl yapıldığını göreceksiniz. 1. Lesson_08_Interactivity klasöründeki index.html dosyasını açın. Ekranı kaydırarak sayfanın en altına gelin ve telif hakkı (copyright) metnini bulun. Bu paragrafın tamamını seçin. Kütüphane öğeleri, sadece <body> ve </body> etiketleri arasında görünen içeriği ihtiva edebilir. Bunların arasında her türlü belge elemanı (örneğin metinler, tablolar, formlar, resimler, Java applet leri, eklentiler ya da ActiveX öğeleri) yer alabilir. Birden fazla elemandan bir kütüphane öğesi oluşturulabilmesi için, bu elemanların belgede bitişik bir seçim oluşturması gerekir. Bitişik olmayan öğelerin bir kütüphane öğesi görevi görmesini istiyorsanız, birden fazla kütüphane öğesi oluşturmanız gerekir. Telif hakkı metni, e-posta adresi ve değiştirme tarihi, bir Web sitesindeki bütün sayfaların alt kısmında kullanılabilecek standart bilgilerdir. Kütüphaneler bu tip bilgiler için çok faydalı olabilir. Göreceli yollar (örneğin sayfalara ya da resimlere giden bağlantılar) içeren bir kütüphane öğesini sitenizin dizin yapısında istediğiniz seviyeye yerleştirebilirsiniz. Dreamweaver, kütüphane öğesinin içerebileceği elemanlara giden doğru yolları otomatik olarak hesaplar. Belgeye bağlı ve sitenin kök klasörüne bağlı yolları Ders 3 ve Ders 5 te görmüştük. 2. Files panel grubundaki Assets sekmesine tıklayın ve Assets panelinin sol alt kısmındaki Library düğmesine tıklayarak kütüphaneyi açın. Library düğmesi Kütüphane Öğelerİnİ Kullanmak 415
Assets panelinin Library kategorisi açılacaktır. Bütün kütüphane öğelerinizi buradan yönetebilirsiniz. 3. Seçili durumdaki telif hakkı metnini Assets panelinin üzerine sürükleyin. Modify > Library > Add Object to Library komutunu seçerek de yeni bir kütüphane öğesi oluşturabilirsiniz. Assets panelinin Library kategorisinde, Untitled genel isminin vurgulu olarak görüntülendiği bir metin alanının yanında yeni bir kütüphane simgesi belirecektir. Bir kütüphane öğesi oluşturduğunuzda, Dreamweaver yerel kök klasörünüzün en üst seviyesinde Library adında bir klasör oluşturur ve oluşturduğunuz bütün kütüphane öğelerini bu konumda saklar. Kütüphane özelliğinin çalışabilmesi için, Library klasörünün sitenizin kök seviyesindeki orijinal konumunda kalması gerekir. Bu Library klasörü ve içerdiği kütüphane dosyaları sadece yerel olarak saklanır; Web ekibinizin diğer üyeleriyle paylaşmak istemediğiniz sürece bunları bir sunucuya yüklemenize gerek yoktur. Dreamweaver, her bir kütüphane öğesini.lbi dosya uzantısıyla kaydeder. 4. Yeni kütüphane öğesini copyright olarak adlandırın, sonra da Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Artık bu kütüphane öğesi Library panelinde copyright olarak görünecektir. Kütüphane öğelerinize kolayca tanınabilecek isimler vermeniz, bunları sitenizde kontrol etmenizi oldukça kolaylaştırır. Bu isimler sadece sizin referans olarak kullanmanız içindir; kullanıcılar bunları tarayıcı penceresinde göremez. 416 DERS 12
Panelin üst kısmında kütüphane öğesinin bir önizleme görüntüsü oluşturulur. Elemanları görebilmek için, kütüphane öğesinin simgesine tıklayarak bu görüntüyü tazelemeniz gerekebilir. index.html dosyasını kapatın. Bir Kütüphane Öğesini Bir Sayfaya Yerleştirmek Bir kütüphane öğesini bir belgeye yerleştirdiğinizde, kütüphane öğesi dosyasının içeriği belgeye eklenir ve bu kütüphane öğesine ait bir referans oluşturulur. Bir kütüphane öğesini eklediğinizde asıl HTML kodu eklenir, yani kütüphane öğesine Library klasöründen erişilemese bile içerik her zaman görünür. Dreamweaver, kütüphane dosyasının adını ve orijinal öğeye ait referansı göstermek için, öğenin etrafındaki koda açıklamalar ekler. Açıklamalar ve referans tarayıcı penceresinde görünmez. Haricî kütüphane öğesi dosyasına ait referans, sadece kütüphane öğesini değiştirerek sitenin tamamındaki içeriği güncellemenize imkân sağlar. 1. Lesson_12_Libraries/Community klasöründeki community_intro.html dosyasını açın. Ekleme noktasını One of the most important teachings ifadesiyle başlayan paragrafın hemen altındaki boş paragrafın içine yerleştirin. Aşağıdaki adımlarda, bir önceki uygulamada oluşturduğunuz kütüphane öğesini bu belgeye yerleştireceksiniz. Library paneli görünmüyorsa, Window > Assets komutunu seçin ve Assets panelindeki Library düğmesine tıklayın. Assets paneli Files panel grubunda yer alır. Kütüphane Öğelerİnİ Kullanmak 417
2. Assets panelinin Library kategorisindeki copyright kütüphane öğesini seçin ve panelin sol alt köşesindeki Insert düğmesine tıklayarak öğeyi belgeye ekleyin. Alternatif olarak copyright dosya simgesini Library panelinden belge penceresinde bu öğenin görünmesini istediğiniz konuma sürükleyebilirsiniz. Metin belgeye eklenecektir. copyright kütüphane öğesinin arka planı sarı renkte olacaktır. Kütüphane öğeleri varsayılan olarak sarı renkle vurgulanır, ama Preferences iletişim kutusunu kullanarak bu özelliği tamamen kapatabilir ya da rengi değiştirebilirsiniz. Bu öğe doğrudan sayfanın üzerinde değiştirilemez. Kütüphane öğelerini bir sonraki uygulamada değiştireceksiniz. 418 DERS 12
Belge penceresinde seçili durumda olan kütüphane öğesiyle ilgili sürekliliği sağlamak, güncellemek gibi işlemleri gerçekleştirmek ve kaynak dosyasının adını görmek için Properties denetçisini kullanabilirsiniz. Properties denetçisinde bununla ilgili birkaç seçenek mevcuttur: Src: Kütüphane öğesine ait kaynak dosyanın konumunu ve dosya adını gösterir. Open düğmesine tıklayarak kütüphane öğesini düzenlemek üzere açabilirsiniz. Yaptığınız değişiklikleri korumak için dosyayı kaydetmeniz gerekir. Detach from original: Seçili kütüphane öğesiyle bunun kaynak dosyası arasındaki bağlantıyı koparır. Bu durumda kütüphane öğesinin içeriği düzenlenebilir hale gelir, ama artık kütüphanenin ilgili özellikleri kullanılarak güncellenemez. Recreate: Geçerli seçimi orijinal kütüphane öğesinin üzerine kaydeder. Kütüphane dosyasının mevcut olmadığı, öğenin adının değiştirildiği ya da öğenin düzenlendiği durumlarda kütüphane öğelerini tekrar oluşturmak için bu seçeneği kullanın. 3. Birinci ve ikinci adımı tekrar ederek copyright kütüphane öğesini Community/ BeginningGreen.html dosyasının alt kısmına ekleyin. Bir kütüphane öğesini birden fazla sayfada tekrar tekrar kullanırken kütüphane öğelerinin ne kadar faydalı olduğunu anlarsınız. 4. Community/AboutGreen.html dosyasını açın ve ekleme noktasını For more information ifadesiyle başlayan paragrafın altındaki boş paragrafın içine yerleştirin. Bu sayfaya, telif hakkı bilgisini içeren kütüphane öğesinin kaynak dosyasından ayrılmış bir kopyasını yerleştireceksiniz. Bu yüzden bu öğeyi belge içinde düzenlemek mümkün olacaktır. 5. Option (Macintosh ta) ya da Ctrl (Windows ta) tuşunu basılı tutun ve copyright dosya simgesini Library panelinden belgenin alt kısmına sürükleyin. Kütüphane içeriği belgeye kopyalanacak, ama kütüphaneye bağlanmayacaktır. Bu nedenle de sarı renkle vurgulanmayacaktır. Elemanlar doğrudan sayfa üzerinde düzenlenebilir, çünkü bunlar bir kütüphane öğesine bağlı değildir. Bağlantıları koparılmış olduğu için, orijinal kütüphane öğesinde değişiklik yapıldığında bu elemanlar güncellenmez. 6. Bütün dosyaları kaydedin ve kapatın. Kütüphane Öğelerİnİ Kullanmak 419
Bir Kütüphane Öğesini Yeniden Oluşturmak Eğer bir kütüphane öğesi Assets panelinin Library kategorisinden kazara silindiyse ve elinizde bunun bulunduğu bir sayfa varsa, bu öğeyi tekrar oluşturabilirsiniz. 1. sidebar.html belgesini açın ve bir kez tıklayarak, sayfanın alt kısmındaki gezinti amacıyla kullanılan kütüphane öğesini seçin. Bu, Library klasörünüzde bulunmayan bir kütüphane öğesidir. Frame tabanlı Community sayfaları için kullanılan gezinti bağlantılarının yer aldığı üç satıra sahip basit bir tablodur. Tabloya tıkladığınızda, kütüphane öğesinin tamamı seçili hale gelir ve belge üzerinde düzenlenemeyeceğini gösterecek şekilde rengi griye dönüşür. Bunun bir kütüphane öğesi olduğunu, Etiket Seçici de <mm:libitem> yazısının görünmesinden de anlayabilirsiniz. Bu eleman belge penceresinde bir kütüphane öğesi olarak işaretli olmasına rağmen Assets panelinin Library kategorisinde görünmez, çünkü orijinal öğe sitenizin içinde değildir. 420 DERS 12
2. Properties denetçisindeki Recreate düğmesine tıklayın. Kütüphane öğesine ait dosya, bu sayfada kullanılan öğe adıyla yeniden oluşturulacaktır. Bu öğe artık Assets panelinin Library kategorisinde CommunitySubNav başlığı ile görüntülenecektir. Ayrıca sağ tıklayarak (Macintosh ve Windows ta) veya Control tuşunu basılı tutup tıklayarak (Macintosh ta tek düğmeli fare kullananlar) Recreate komutunu ve seçili kütüphane öğesiyle ilgili diğer seçenekleri içeren bir bağlam menüsü de açabilirsiniz. 3. sidebar.html belgesini kapatın. Bir Kütüphane Öğesinde Değişiklik Yapmak Bir kütüphane öğesini düzenlerken, öğenin Library klasöründeki kaynak dosyasını düzenlemeniz gerekir. Kaynak dosya, orijinal kütüphane öğesi ya da yukarıdaki uygulamada kullanılan tekniklerle tekrar oluşturulan öğe olabilir. Bir kütüphane öğesini düzenlediğinizde sadece kütüphane öğesi değişir. Düzenleme işlemini tamamladığınızda, Dreamweaver sitede bu öğeyi kullanan bütün sayfaların güncellenmesi gerektiği konusunda sizi uyarır. Bu değişiklikleri sitenin tamamına uygulamak ya da uygulamamak arasında seçim yapabilirsiniz. Dreamweaver, yeni düzenlediğiniz kütüphane dosyasına göndermede bulunan açıklamaları arayarak ve eski HTML kodunu yeni HTML kodunuzla değiştirerek güncelleme işlemini gerçekleştirir. Koddan kütüphane açıklamalarını çıkarırsanız, içerikler artık kütüphane öğesiyle ilişkili olmayacaktır ve bunları kütüphane öğesini güncelleyerek değiştiremezsiniz. Kütüphane öğesinde yapılan bütün değişiklikler, Library klasöründe yer alan kaynak dosyasına uygulanmalıdır. İçeriği doğrudan bir belgede düzenlemek istiyorsanız, önce kütüphane öğesine giden bağlantıyı koparmanız gerekir. Bunu yapmak için, öğeyi eklerken Ctrl (Windows ta) ya da Option (Macintosh ta) tuşunu basılı tutabilir ya da sayfada öğeyi seçip Properties denetçisindeki Detach from original düğmesine tıklayabilirsiniz. 1. Assets panelinin Library kategorisindeki copyright dosya simgesine çift tıklayın. Assets panelinin Library kategorisi açık değilse, Window > Assets komutunu seçin ve Assets panelindeki Library simgesine tıklayın. Kütüphane Öğelerİnİ Kullanmak 421
Dreamweaver, düzenleme işlemi için copyright kütüphane öğesini açacaktır. Dahili CSS stillerini ya da diğer biçimlendirme özelliklerini doğrudan kütüphane öğesinde tanımlamadığınız takdirde, bunlar bir sayfaya eklendiği zaman o belgenin özelliklerini alırlar; metin ve bağlantı renkleri belge için ayarlanmış olan varsayılan renklere uyacak şekilde değişir. Alternatif olarak Library panelinde copyright ı seçtikten sonra paneldeki Edit düğmesine de tıklayabilirsiniz. Ayrıca sayfadaki kütüphane öğesini seçtikten sonra Properties denetçisindeki Open düğmesine tıklamanız da mümkündür. 2. copyright kütüphane öğesinin (copyright.lbi) belge penceresinde, copyright (telif hakkı) metninin üzerine bir yatay cetvel ekleyin. Yatay cetvelin tanımlanmamış olan yükseklik ayarını Properties denetçisi aracılığıyla 1 olarak değiştirin. Belgeyi kaydedin. Yatay cetveli Ders 2 de öğrendiğiniz gibi ekleyebilirsiniz: Insert araç çubuğunun HTML kategorisindeki Horizontal Rule düğmesine tıklayarak ya da Insert > HTML > Horizontal Rule komutunu seçerek. 422 DERS 12
Update Library Items iletişim kutusu açılacaktır. Burada sitenizde copyright kütüphane öğesini kullanan bütün dosyaların listesini görebilirsiniz. 3. Sitenizde copyright kütüphane öğesini kullanan bütün belgeleri güncellemek için Update düğmesine tıklayın. Update Pages iletişim kutusu, yaptığınız değişiklikler sonucunda hangi sayfaların güncellendiğini gösterecektir. Eğer büyük bir siteniz varsa, sitenizi bütün değişikliklerle birlikte tek bir seferde güncellemek için beklemeyi tercih edebilirsiniz. Eğer tercihiniz buysa, kütüphane öğesini kaydederken Don t Update düğmesine tıklayın. 4. Close düğmesine tıklayarak Update Pages iletişim kutusunu kapatın. Yatay cetvel, hem community_intro.html, hem de BeginningGreen.html belgesinde yeni konumunda görünecektir. Kütüphane Öğelerİnİ Kullanmak 423
Kütüphane Referanslarını Güncellemek Eğer sayfalarınızı bir kütüphane öğesini düzenlerken değil de daha sonra güncellemeyi tercih ederseniz, Dreamweaver bütün güncelleme işlemlerini tek bir komutla yapmanıza imkân sağlar. Örneğin, Web ekibinizin üyelerinde kütüphane öğeleri içeren sayfalar varsa, sayfaları daha sonra güncellemek isteyebilirsiniz. Ders 14 te göreceğimiz bir site sürekliliğini sağlama özelliği olan Check In ve Check Out u kullanıyor ve bir kütüphane öğesini kullanan sayfaları güncellemek istiyorsanız, Dreamweaver bu öğeyi içeren sayfalara bakmak isteyip istemediğinizi sorar. Güncellenmesini istiyorsanız, Dreamweaver ın dosyaya bakmasına izin vermek için bu isteği onaylamanız gerekir. 1. copyright.lbi dosyasında telif hakkı tarihini 2006 olarak değiştirin ve belgeyi kaydedin. Update Library Items iletişim kutusundaki Don t Update düğmesine tıklayın. Yeni telif hakkı tarihi henüz community_intro.html dosyasında da, BeginningGreen.html dosyasında da görünmeyecektir. 2. Menü çubuğunu kullanarak Modify > Library > Update Pages komutunu seçin. Update Pages iletişim kutusu açılacaktır. 3. Look In menüsünde Entire Site ın seçili olduğundan emin olun. Sağ taraftaki menü geçerli siteyi (Yoga Sangha) gösterir. Burada, kütüphane öğelerini kullanan bütün dosyaları güncellemeyi tercih ediyorsunuz. Bu seçenekleri kullandığınızda, sitedeki bütün kütüphane öğesi referansları güncellenecektir (sadece copyright.lbi değil, bütün kütüphane öğeleri için geçerli). Tek bir kütüphane öğesine ait referansları güncellemek istiyorsanız, Look in menüsünde Files That Use seçeneğini işaretleyin, sonra da sağdaki menüden istediğiniz kütüphane öğesini seçin. 424 DERS 12
4. Update seçeneklerinden Library items kutusunun işaretli olduğundan, Templates kutusunun da işaretli olmadığından emin olun. Show log onay kutusunu işaretleyin ve Start düğmesine tıklayın. Update Pages iletişim kutusu hangi dosyaların güncellendiğini gösterecektir. 5. Close düğmesine tıklayarak iletişim kutusunu kapatın. Yeni telif hakkı tarihi hem BeginningGreen.html, hem de community_intro.html belgesinde görünecektir. copyright kütüphane öğesi belgesini kapatabilirsiniz. Aynı işlemleri Server Side Includes (SSI) ile de yapabilirsiniz. Ama sayfalarınızda SSI kullanabilmeniz için, sunucunuzun SSI ı destekleyecek şekilde yapılandırılmış olması gerekir. Snippet olarak adlandırılan bir Dreamweaver özelliği vardır. Her ne kadar güncellenemeseler bile (çünkü orijinal bir öğeye bağlı değildirler) snippet ları kullanarak kodların sık kullanılan bölümlerini ekleyebilirsiniz. Snippet konusunu Ders 16 da göreceğiz. Ne Öğrendiniz? Bu derste şunları öğrendiniz: Bir sitede birden fazla sayfada tekrarlanması gereken elemanlar için kütüphane öğelerinin nasıl kullanıldığını öğrendiniz (Sayfa 415 419). Assets panelinin Library kategorisini kullanarak bir kütüphane öğesi oluşturdunuz, bunu bir sayfaya kütüphane öğesine giden bir bağlantıyla birlikte, başka bir sayfaya da kütüphane öğesine giden bir bağlantı olmadan eklediniz (Sayfa 415 419). Properties denetçisini kullanarak, Library panelinden silinmiş olan bir kütüphane öğesini tekrar oluşturdunuz (Sayfa 420 421). Library panelinde mevcut olan bir kütüphane öğesini düzenlediniz ve değişiklikleri, sitede bu öğeyi kullanan bütün sayfalara uyguladınız (Sayfa 421 423). Bir kütüphane öğesine ait bütün referansları güncellediniz (Sayfa 423 425). Kütüphane Öğelerİnİ Kullanmak 425