Bu derste, mevcut bir sayfadan bir şablon oluşturacak, bu şablonu kullanarak başka sayfalar hazırlayacak ve şablonu düzenleyerek sayfalarda değişiklik yapacaksınız.
Şablonları Kullanmak
Şablon (template), diğer belgeleri oluşturmak için temel olarak kullanabileceğiniz bir belgedir. Şablon kullanılarak oluşturulan her belge, bu şablonla aynı yerleşim düzenini ve yapıyı kullanır. Bir şablon oluşturulurken, bu şablonu temel alan belgelerde düzenlenebilir durumda olması gereken alanların gösterilmesi gerekir. Şablonun diğer kısımları kilitli durumdadır ve ebeveyn şablon tarafından kontrol edilir. Şablonlar, birden fazla sayfanın yapısını ve içeriğini güncellemek için kullanılabilecek hızlı bir yol sunmaları açısından kütüphane öğelerine benzer.
İster pek çok bölümden oluşan büyük bir Web siteniz, ister ortak bir tasarım kullanan birden fazla sayfanız olsun, bir şablon oluşturarak prodüksiyon sürecini hızlandırabilirsiniz.
Bir şablon kullanırsanız, birkaç dakika içinde birden fazla sayfada değişiklik yaparak sitenizin görünümünü değiştirebilir ya da güncelleyebilirsiniz. Sitenin belirli bir bölümünü
13
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
hazırlayan bir ekiple çalıştığınız durumlarda şablonlar çok faydalı olur. Web tasarımcısı bir şablon oluşturabilir ve sayfanın düzenlenebilecek olan kısımlarına yer tutucular ekleyebilir. Sayfanın genel tasarımı kilitli durumda kalır. Ekip üyeleri, bir şablonu temel alıp Macromedia Dreamweaver ya da Macromedia Contribute kullanarak sayfaları hazırlayabilir ve düzenleyebilirler. (Macromedia Contribute, Web sitelerini oluşturma konusunda çok az deneyime sahip olan ya da hiç deneyimli olmayan içerik editörleri gibi teknik konularla ilgilenmeyen kullanıcılara yönelik bir programdır.)
Şablonların avantajları iki durumda net olarak ortaya çıkar: Bir bölüm ya da sayfa grubunda aynı tasarımın ve yerleşim düzeninin kullanılması gereken durumlarda ya da sayfanın görünümünün tasarımcı tarafından oluşturulduğu, ama sayfa içeriklerinin içerik editörleri tarafından eklendiği durumlarda. Eğer sayfalarda sadece üstbilgilerin ve altbilgilerin aynı olmasını, aradaki yerleşim düzenlerinin de birbirinden farklı olmasını istiyorsanız, kütüphaneleri kullanın (bu konuyu Ders 12’de görmüştük). Ama aynı tasarımı birden fazla sayfada kullanmak istiyorsanız, şablonları kullanın. Kütüphaneler, belirli elemanları ya da eleman gruplarını sitenin genelinde tekrar tekrar kullanmanıza ve sayfaların yerleşim düzenlerini daha iyi kontrol etmenize imkân sağlar. Şablonlar ise, aynı yerleşim düzenini ve tasarımı kullanmanızı sağlar. Örneğin, diyelim ki ürünleriniz için online bir kataloğunuz var ve ürünün resmi, tanımı ve fiyatı dışında bütün sayfaların görünümünün aynı olmasını istiyorsunuz. Bir şablon oluşturursanız, ekibiniz sayfaları Dreamweaver ya da Contribute kullanarak hazırlayabilir ve her sayfanın görünümü aynı olur.
Bu derste elde edilen sonuçları görmek isterseniz Lesson_13_Templates/Completed/
Teachers klasöründeki Katchie.html, Hillman.html ve Lyon.html dosyalarını açın.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Bir şablon oluşturacaksınız.
• Şablona düzenlenebilir bölgeler ekleyeceksiniz.
• Düzenlenebilir bölgeleri şablondan sileceksiniz.
• İsteğe bağlı bölgeler oluşturacaksınız.
• Tekrarlanan bölgeler ekleyeceksiniz.
• Şablondaki vurgu renklerini değiştireceksiniz.
• Şablonu temel alan birden fazla sayfa hazırlayacaksınız.
• Şablonu değiştirerek siteyi güncelleyeceksiniz.
• Düzenlenebilir etiket nitelikleri tanımlayacaksınız.
• Yuvalanmış bir şablon (nested template) oluşturacaksınız.
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık 2 saat sürecektir.
Ders Dosyaları
Ortam Dosyaları:
Lesson_13_Templates/Images/…(bütün dosyalar) Başlangıç Dosyaları:
Lesson_13_Templates/Teachers/teacher.html Text Files:
Lesson_13_Templates/Text/katchie.txt Lesson_13_Templates/Text/hillman.txt Lesson_13_Templates/Text/lyon.txt Tamamlanmış Proje:
Lesson_13_Templates/Completed/Teachers…(bütün dosyalar)
Completed klasöründeki dosyaların oluşturulmasında, teacher_completed.
dwt şablonu kullanılmıştır. Bu dosya, bu derste oluşturacağınız şablon dosyalarıyla karışmaması ya da uyuşmazlık yaratmaması için Completed/
Template_Files klasörüne yerleştirilmiştir. Gerçek bir sitede bu dosyaların yerleştirilmesi gereken konum, siz bu dersteki uygulamaları yaparken Dreamweaver’ın oluşturduğu Templates klasörüdür. Tamamlanmış dosyaların şablonlarını kullanmanız gerekirse, bunları Templates klasörüne taşıyın.
Şablon Oluşturmak
Şablonlar, bunları kullanarak oluşturduğunuz sayfaların yerleşim düzenini ve tasarımını tanımlar. Bu derste oluşturacağınız şablon, Yoga Sangha proje sitesindeki teacher profiles (hocalar) bölümünün görünümünün ve insanlarda uyandıracağı hissin, site kimliğinin ve gezinti özelliklerinin nasıl olacağını belirleyecektir.
Bir şablon oluştururken uygulamanız gereken ilk adım, genellikle sayfa tasarımının hazırlanmasını içerir. Bu projede bu adım sizin için önceden uygulanmıştır. teacher.
html belgesi, yapıyı, yerleşim düzenini ve gezinti özelliklerini içermektedir. Bu sayfadan oluşturacağınız şablonla hazırlanan sayfalarda tanımlanacak olan içerikler dışında her şey bu dosyada yer alır.
Bu derste, ortak bir şablondan bir dizi Web sayfası oluşturacaksınız. Bu sayfaların her biri farklı bir hocayı tanıtacak. Bu uygulamada mevcut bir sayfayı kullanarak şablonu oluşturacaksınız, daha sonraki uygulamalarda da bu şablondan faydalanarak diğer sayfaları hazırlayacaksınız.
1. Lesson_13_Templates/Teachers klasöründeki teacher.html dosyasını açın.
Bu belgede, içerik alanlarına yerleştirilecek olan ve her sayfada farklı olması istenen materyaller, açıklayıcı yer tutucu metinlerle gösterilmiştir.
2. File > Save As Template komutunu seçin.
Save As Template iletişim kutusu açılacaktır. Buradan şablonu kaydetmek istediğiniz siteyi seçebilirsiniz. Bu projede, şablonu Yoga Sangha sitesine kaydetmeniz gerekiyor.
Dreamweaver şablona otomatik olarak “teacher” ismini (dosyanızın ismi) atayacaktır. Bu uygulamada otomatik olarak atanan bu ismi kullanın. Bu isim, şablonun kullanım amacını doğru bir şekilde açıklamaktadır.
Şablonun ismini değiştirmek istiyorsanız, yeni ismi Save As (Farklı Kaydet) metin alanına yazın. Şablonun ismi sadece ekibiniz ve sizin için bir referans niteliğindedir. Bu ismi sitenizin ziyaretçileri görmeyecektir. Şablonlarınız için mümkün olduğu kadar açıklayıcı isimler kullanmaya gayret edin.
Sayfayı şablon olarak kaydettiniz. Bu derste daha sonra başka sayfalar hazırlamak için bu şablonu kullanabilirsiniz.
3. Save düğmesine tıklayarak iletişim kutusunu kapatın. Dreamweaver
“Update Links?”(Bağlantıları Güncelleyeyim mi?) diye soran bir uyarı kutusu görüntülediğinde Yes düğmesine tıklayın.
Bağlantıların güncellenmesi, Dreamweaver’ın bağlantılara ve resimlere giden yolları doğru olarak muhafaza etmesini sağlayacaktır.
Artık şablonunuz sitenize eklendi ve .dwt uzantısıyla Templates klasörüne kaydedildi.
Templates adında bir klasör mevcut değilse, Dreamweaver bu klasörü otomatik olarak
ekler. Templates klasörünü görmek için, Files panelindeki Refresh (Tazele) düğmesine tıklamanız gerekebilir. Bu dosyayı bir sonraki uygulamada kullanmak üzere açık bırakın.
Artık teacher.dwt dosyası üzerinde çalışıyorsunuz. Belge penceresinin üst kısmında
<<Template>> (teacher.dwt) yazdığını göreceksiniz.
4. Files panel grubundaki Assets (Varlıklar) sekmesine tıklayın ve ardından Templates kategorisine geçin.
Bir şablon, yani teacher.dwt açık olduğu için Assets panelinde Templates kategorisi otomatik olarak açılabilir.
Böylece Assets panelini Templates kategorisini gösterecek şekilde açmış oldunuz. Yeni oluşturduğunuz şablon listede görünecektir. Ayrıca, bu sitede daha sonra oluşturacağınız şablonlar da bu listede yer alacaktır. Listedeki bir şablon seçildiğinde, bu belgenin bir kısmı panelin tepesindeki önizleme alanında belirir.
Yukarıda yaptığınız gibi mevcut bir sayfayı şablon olarak kaydetmek yerine, Assets panelinde Templates kategorisi etkinken panelin alt kısmında yer alan New Template simgesine tıklayarak yeni, boş bir şablon oluşturmanız da mümkündür. Siz bu işlemi yaptıktan sonra, paneldeki şablon listesine başlıksız yeni bir şablon eklenir. Seçili durumdayken bu şablonu adlandırın.
New Document iletişim kutusunun General sekmesindeki Category listesinden Template page seçeneğini işaretleyip bir şablonu sıfırdan oluşturmanız da mümkündür. New Document iletişim kutusunun Templates sekmesi mevcut şablonlardan yeni sayfalar oluşturmak için kullanılır; bu sekmeyi kullanarak yeni şablonlar oluşturamazsınız.
Templates düğmesi
Bir Şablona Düzenlenebilir Alanlar Eklemek
Bir şablonun oluşturulmasında ikinci adım, bu şablon temel alınarak oluşturulan belgelerde düzenlenebilir durumda olması gereken alanları tanımlamaktır.
(Düzenlenebilir alanlar, belgenin şablon temel alınarak oluşturulan sayfalardaki değiştirilebilen bölümleridir.)
Kural olarak, bir şablondaki bütün alanlar başlangıçta kilitli durumdadır. Şablonu kullanan sayfalardaki bilgileri değiştirmek istiyorsanız, düzenlenebilir alanlar ya da bölgeler oluşturmanız gerekir. Birçok Web sitesinde, bu bölgeler genellikle içerik alanlarıdır. Şablonda açıkça düzenlenebilir olarak tanımlanmayan her şey, şablonu temel alan sayfalarda kilitli durumdadır. Orijinal şablonu düzenlerken hem düzenlenebilir, hem de kilitli alanlarda değişiklik yapabilirsiniz; ama şablon kullanılarak hazırlanmış olan bir sayfada sadece düzenlenebilir bölgelerde değişiklik yapabilirsiniz.
1. teacher.dwt şablonunda hem Code, hem de Design görünümlerini aynı anda görüntülemek için Document araç çubuğundaki Split görünüm düğmesine tıklayın. Hocanın biyografisinin yazıldığı (teacher bio) alanın üst kısmındaki
“teacher’s full name” metnini seçin. Koda bakarak <h2 class=”tagline-style”>
açılış ve </h2> kapanış etiketlerinin seçime dahil edilmediğinden emin olun.
Daha sonraki sayfaların içeriğini değiştirebilmeniz için, sayfanın bu kısmının düzenlenebilir olması gerekir. Bu örnekte sadece <h2> blok etiketinin içinde bulunan içeriği seçiyorsunuz; bu yüzden bu şablonla oluşturulan tüm sayfalarda sadece metnin değiştirilmesine izin verilecek, bu düzenlenebilir bölgeye herhangi bir blok etiketinin eklenmesine izin verilmeyecektir.
<<Template>> (teacher.dwt) dosyası açık değilse, bunu Assets panelinin Templates kategorisini kullanarak açabilirsiniz. Bir önceki uygulamada oluşturduğunuz şablon (teacher.dwt) listede “teacher” olarak görünür.
Assets panelinde şablonun ismine çift tıklayarak bunu açın. Aynı işlemi Assets paneli listesinde ismini seçtikten sonra panelin alt kısmındaki Edit düğmesine tıklayarak da gerçekleştirebilirsiniz.
2. Insert araç çubuğunun Common kategorisinde yer alan Templates menüsündeki Editable Region simgesine tıklayın.
New Editable Region iletişim kutusu açılacaktır. Başlangıçta Name metin alanında, Dreamweaver tarafından verilen genel bir isim görünür. Bu ismin sonundaki numara otomatik olarak artırılır ve sizin çalışmanızda aşağıdaki örnektekinden farklı bir sayı olabilir.
3. Name metin alanına teacherName yazın ve OK düğmesine tıklayın. Document araç çubuğundaki Design düğmesine tıklayarak tekrar Design görünümüne geçin.
Bölge isimlerinde özel karakterler (örneğin tırnak işaretleri, köşeli parantezler) kullanmayın. Bu isimler birbirlerinden farklı olmalıdır. Bir şablonda aynı bölge ismini birden fazla yerde kullanamazsınız.
Belge penceresinde, düzenlenebilir alan mavi bir dış hatla çevrilir. Üst kısmında da bölgenin ismini gösteren bir sekme yer alır. Tablonun üst kenarlığı ile yer tutucu resim arasında görünen ekstra boşluğun nedeni, düzenlenebilir bölgenin sekmesidir. Aslında fazladan boşluk eklenmemiştir.
Bölge isimleri ve dış hatlar görünmüyorsa, View > Visual Aids > Invisible Elements komutunu seçin.
Üstbilginin içinde yeni bir düzenlenebilir bölge oluşturulacaktır. Burada da yine aynı mavi dış hattı ve üstte de düzenlenebilir bölgenin ismini belirten sekmeyi göreceksiniz, düzenlenebilir alanın içine de “description” sözcüğü yerleştirilecektir. Daha sonra bu şablonu bir belgeye uyguladığınızda bu alanın içindeki metni seçecek ve bunu asıl metinle değiştireceksiniz.
4. File > Save komutunu seçerek şablonu kaydedin. Açılan uyarı mesajı penceresinde OK düğmesine tıklayın.
Eğer bir blok etiketinin içinde düzenlenebilir bölgeleriniz varsa, şablonu her kaydedişinizde bir uyarı mesajıyla karşılaşırsınız.
5. Etiket Seçici’yi kullanarak bio metnini ve teacherImage resim yer tutucusunu içeren tablo hücresini seçin. Insert araç çubuğunda yer alan Templates menüsündeki Editable Region düğmesine tıklayın. Bölgeyi teacherBio olarak adlandırın ve OK düğmesine tıklayın.
Tablo hücresini Etiket Seçici’yi kullanarak seçmek için belge penceresinde teacherImage resmine tıklayın ve ardından Etiket Seçici’de ondan hemen önce yer alan <td> etiketini seçin.
Oluşturduğunuz bütün düzenlenebilir bölgelerin isimleri, Modify > Templates menüsünün en alt kısmında listelenir. Bu listedeki bir düzenlenebilir bölge seçiliyse, ekleme noktası bu bölgedeyse ya da bu bölgedeki bir öğe seçiliyse, bu düzenlenebilir bölgenin yanında bir onay işareti görürsünüz.
6. copyright (telif hakkı) metnini içeren tablo hücresini seçin. Insert araç çubuğundaki Templates menüsünde yer alan Editable Region düğmesine tıklayın, bölümü copyright olarak adlandırın ve OK düğmesine tıklayın.
Bir şablon temel alınarak oluşturulan belgelerde değiştirilmesi gereken her bileşen (bağlantılar da dahil olmak üzere) bir düzenlenebilir bölge içinde bulunmalıdır.
7. Dosyanızı kaydedin. <h2> etiketinin içindeki düzenlenebilir bölgeyle ilgili uyarı mesajı ekrana geldiğinde OK düğmesine tıklayın.
Bölgelerin isimleri dış hatla çevrilen alanın üzerinde bir sekme içinde görüntülenir.
Böylece hangi alanları düzenlenebilir olarak tanımladığınızı kolayca anlayabilirsiniz.
Orijinal şablonlarınızı oluşturmak ve düzenlemek için kullanabileceğiniz araçların ve özelliklerin pek çoğu sadece, bu örneklerde çalıştığınız Design görünümünde yer alır. Code görünümündeyseniz, bazı şablon kontrollerini kullanamazsınız (Ders 16’da bu görünümde çalışacaksınız). Code
görünümünde çalışıyorsanız ve belirli şablon işlemlerini yapamadığınızı fark ettiyseniz, Design görünümüne geçin.
Bu dosyayı bir sonraki uygulamada kullanmak üzere açık bırakın.
Düzenlenebilir Bölgeleri Kaldırmak
Önceki uygulamada şablonun belirli alanlarını “düzenlenebilir” hale getirmiştiniz. Bunları yeniden kilitlemeniz de mümkündür. Şablondan oluşturulan bir sayfadaki kilitli alanlarda yer alan elemanlar değiştirilemez. Kilitli alanlardaki bütün elemanların, orijinal şablon dosyasında düzenlenmeleri gerekir.
1. teacher.dwt belgesinde, belge penceresinde yer alan copyright bölgesine ait sekmeyi üzerine tıklayarak seçin.
Belge penceresinin alt kısmında yer alan Etiket Seçici, şablon etiketini (<mmtemplate:
editable>) gösterecektir. Dreamweaver etiketin seçili olduğunu göstermek üzere bunu Etiket Seçici’de vurgulu olarak görüntüleyecektir.
Düzenlemek istediğiniz şablon dosyası açık değilse, Assets panelindeki Templates kategorisinde ismine çift tıklayarak bu şablonu açabilirsiniz.
Şablon dosyalarını taşımak, yeniden adlandırmak ve silmek için Assets panelini kullanabilirsiniz. Şablon dosyalarını silerken dikkatli olun, çünkü bunları yeniden oluşturmak kütüphane öğelerindeki kadar kolay değildir.
2. Modify > Templates > Remove Template Markup komutunu seçin.
copyright hücresinin düzenlenebilir olduğunu gösteren dış hat kaybolacaktır. Şablonun bu kısmı artık kilitli haldedir ve bu şablonu temel alan dosyalarda bu kısım artık değiştirilemez.
Kendisinden sayfalar oluşturulmuş olan bir şablondan düzenlenebilir bir bölgeyi kaldırırsanız, şablonu kaydettikten sonra sayfaları güncellediğinizde (sayfaların nasıl güncellendiğini bu derste daha sonra öğreneceksiniz) daha önce düzenlenebilir bölgelerde değişiklik yaptığınız bütün sayfalar değiştirilir.
Bu sayfalarda bölgede yapılan bütün değişiklikler silinir, çünkü daha önceki düzenlenebilir bölgenin bulunduğu alan, alanın şablondaki görünümünü yansıtacak şekilde değişir. Kaldırılan alanda bulunan içeriğin yerleştirileceği bir bölge seçebilirsiniz.
İsteğe Bağlı İçerik Oluşturmak
İsteğe bağlı içerik özelliği, şablonu temel alan sayfalarda içeriğin gizli olmasıyla görüntülenmesi arasında seçim yapmanıza imkân sağlar. İçeriğin görüntülenmesi için koşullu ya da özel değerler ayarlayabilirsiniz. Bu değerleri şablon parametreleri ve koşullu ifadeler aracılığıyla kontrol edersiniz.
Belirli elemanları şablonu temel alan sayfaların sadece bazılarında kullanmak için, isteğe bağlı bir içerik bölgesi oluşturabilirsiniz. Belirli elemanların tek tek dahil edilebilmesine imkân vermek, şablonunuza büyük oranda esneklik kazandırır. Örneğin bazı sayfalarda illüstrasyonlar ya da açıklamalar kullanılması gerekebilir. Böyle illüstrasyonların ve açıklamaların yerleşim düzenlerini kontrol eden bir tablo oluşturabilir, sonra da bunu
isteğe bağlı bir içerik bölgesi olarak tanımlayabilirsiniz. Böylece, şablonu temel alan belgelerde bu bölgeleri ekleme ya da eklememe seçeneğine sahip olursunuz.
1. teacher.dwt belgesinde Etiket Seçici’yi kullanarak yuvalanmış tabloyu ve teacherName Certifications” ifadesini içeren tablo hücresinin <td> etiketini seçin.
Yaptığınız seçim, bu alanın seçildiğini belirtmek üzere gri bir renkle gösterilecektir. Bu bölüm, teacher şablonunu kullanan sayfalarda isteğe bağlı bir eleman olacaktır.
2. Insert araç çubuğunda yer alan Templates menüsündeki Optional Region düğmesine tıklayın.
New Optional Region iletişim kutusu açılacak ve burada Basic sekmesi etkin olacaktır.
3. New Optional Region iletişim kutusunun Basic sekmesinde yer alan Show By Default onay kutusunun işaretini kaldırın. OK düğmesine tıklayarak iletişim kutusunu kapatın.
Kendi Web sitenizi oluştururken, eğer “isteğe bağlı” olarak tanımladığınız içerik sayfaların büyük kısmında kullanılacaksa bu kutuyu işaretli bırakabilirsiniz. Ama bu derste, bu içerik sayfalardan sadece birinde kullanılacağı için, bu içerik varsayılan durumda gizli olursa sonraki sayfaların oluşturulması daha kolay olacaktır.
Bu örnekte, isteğe bağlı bölge için varsayılan ismi kullanacağız.
Daha önce sayfanın başka bir yerinde isteğe bağlı bir içerik bölgesi
oluşturduysanız, Optional Content iletişim kutusunun Advanced sekmesini kullanarak mevcut isteğe bağlı içerik bölgesini yeni oluşturduğunuz bölgeye bağlayabilirsiniz. Advanced sekmesi ayrıca, Şablon İfadeleri (Template Expressions) oluşturmanıza da imkân sağlar.
İsteğe bağlı bir bölge düzenlenemez. İsteğe bağlı bölgenin düzenlenebilmesini istediğiniz alanını tanımlamanız gerekir. Bu da, alanın sadece bir kısmını “düzenlenebilir” olarak tanımlamanıza imkân verir. Bir sonraki adım olarak bu işlemi yapacaksınız.
4. teacherName Certifications metnini seçin. Insert araç çubuğunda yer alan Templates menüsünden Editable Region’ı seçin, bölgeyi teacherNameCert olarak adlandırın ve OK düğmesine tıklayın.
İsteğe bağlı bölgeleri oluştururken bu bölgelerde yer alan içerik, siz bir ya da daha fazla düzenlenebilir bölge tanımlayana kadar tümüyle kilitlenir.
Tekrarlanan Bölgeler Eklemek
Tekrarlanan bir bölge, sayfada bir ya da daha fazla kez kopyalanması gereken bir alandır.
Tekrarlanan bölgeler, şablonlarınızı temel alan sayfalara birden fazla giriş yapmanızı gerektiren durumlarda çok faydalı olabilir. Örneğin, yemek tarifleri için bir şablon oluşturulduysa ve bu şablonu temel alan her sayfada farklı bir tarif olacaksa, malzeme listesinin her sayfada değişmesi gerekir. Liste öğeleri tekrarlanan bölgeler olarak tanımlanmışsa, bu bölgelerden istediğiniz kadarını her bir sayfaya gerektiği şekilde ekleyebilirsiniz. Tekrarlanan bölgeler, size birden fazla girişin görünümünü kontrol edebilme imkânı verir. Bu uygulamada, müşteri yorumlarının listelendiği tabloda tekrarlanan bölgeler kullanacağız.
1. teacher.dwt belgesinde Etiket Seçici’yi kullanarak hoca sertifikalarına ait yer tutucu metnini içeren tablo satırının <tr> etiketini seçin.
Bu satırın etrafında, seçili olduğunu gösteren dış hatlar belirecektir.
2. Insert araç çubuğunda yer alan Templates menüsündeki Repeating Region seçeneğine tıklayın.
New Repeating Region iletişim kutusu açılacaktır.
3. Bölgeyi certs olarak adlandırın ve OK düğmesine tıklayın.
Seçtiğiniz satır açık mavi renkli bir dış hatla çevrilecek ve dış hattın üst kısmında “certs”
isminin göründüğü bir sekme belirecektir. Tekrarlanan bölgelerin vurgu rengi isteğe bağlı bölgelerin vurgu rengiyle aynı, düzenlenebilir bölgelerin rengine göre ise daha açıktır.
Kendi Web sitelerinizi hazırlarken, vurgulu bölgelerin renkleri sayfanızda
kullanılan renklerin arasında görünmüyorsa bu renkleri değiştirmek isteyebilirsiniz.
Dreamweaver > Preferences (Macintosh’ta) ya da Edit > Preferences (Windows’ta) komutunu, sonra da açılan iletişim kutusunda Highlighting
kategorisini seçin. Editable regions renk kutusuna tıklayıp buradan bir vurgu rengi seçebilir ya da doğrudan metin alanına ilgili onaltılık renk kodunu girebilirsiniz.
Gerekiyorsa aynı işlemi diğer vurgu renkleri için de yapabilirsiniz. Düzenlenebilir bölgenin rengi şablonun kendisinde ve bu şablonu temel alan belgelerde, kilitli bölgenin rengi ise sadece şablonu temel alan belgelerde görünür. Varsayılan renkler, düzenlenebilir bölgeler için mavi (#66CCCC), kilitli bölgeler için de açık sarıdır (#FFFFCC). Bu renklerin belge penceresinde görüntülenmesini ya da görüntülenmemesini sağlamak için Show kutularını kullanabilirsiniz. Bu vurgu renkleri belge penceresinde ancak görünmez elemanların görüntülenmesini sağlayan seçenek etkin durumdayken görüntülenebilir. Şablon bölgelerindeki vurgular gibi görünmez elemanlar belge penceresinde görünmüyorsa, View >
Visual Aids > Invisible Elements komutunu seçin ve Preferences iletişim
kutusundaki Highlighting kategorisinde şablonun görsel yardımcılarına ait Show kutularının işaretli olup olmadığını kontrol edin. Şablon tabanlı sayfalar
ekibinizdeki birkaç kişi tarafından hazırlanıyorsa, ekibin diğer üyelerinin varsayılan renk ayarlarını kullanıyor olabileceğini göz önünde bulundurmanız gerekir.
4. Etiket Seçici’de, yer tutucu sertifika tarihi xx/xx/xxxx’i içeren tablo hücresine ait <td> etiketini seçin. Insert araç çubuğundaki Templates menüsünde Editable Region seçeneğine tıklayın ve bölge adını certDate olarak ayarlayın.
Birden fazla tablo hücresi tek bir düzenlenebilir bölge olarak tanımlanamaz. Birden fazla hücrenin düzenlenebilmesi gerekiyorsa, ya tablonun tamamını düzenlenebilir hale getirmeniz ya da tabloyu düzenlenebilir birkaç bölgeye ayırmanız gerekir. Bir tablonun içinde birden fazla hücreyi seçip bunları düzenlenebilir hale getirmeye çalışırsanız tüm tablo düzenlenebilir bir bölge haline gelir.
5. Etiket Seçici’de, certification yer tutucu ismini içeren tablo hücresinin <td>
etiketini seçin. Insert araç çubuğundaki Editable Region düğmesine tıklayın ve bölgenin adını certName olarak ayarlayın.
Bir hücreyi, Etiket Seçici’de uygun <td> etiketine tıklama dışında, ekleme noktasını ilgili hücreye yerleştirdikten sonra Cmd (Macintosh’ta) ya da Ctrl (Windows’ta) klavye kısayolunu basılı tutup tıklayarak da kolayca seçebilirsiniz.
teacher şablonunuzu temel alan belgelerdeki tekrarlanan bölgelerde değişiklik yapabilmeniz için, tekrarlanan bölgenin gereken sayıda düzenlenebilir bölge içermesi gerekir. Tekrarlanan
bölgeler varsayılan durumda kilitlidir. Bu bölgelerde hangi alanların düzenlenebilir özellikte olacağını tanımlamalısınız.
Düzenlenebilir bir bölgeyi gösteren dış hattı ya da sekmeyi görmek zorsa, düzenlenebilir hale getirdiğiniz bir hücrenin gerçekten düzenlenebilir bir bölge olduğunu doğrulamak için, hücrenin içine tıklayıp Etiket Seçici’ye bakabilirsiniz. Vurgulu <td> etiketi, tıkladığınız hücreye karşılık gelir. bu <td>
etiketinden sonra <mmtemplate:editable>.şablon etiketi yer alır.
Belgenizin görünümü buradaki örneğe benzeyecektir.
teacher.dwt dosyasını kaydedin ve kapatın.
Belirli Bir Şablonu Temel Alan Sayfalar Hazırlamak
Şablonların kullanıldığı bir site oluşturma sürecinde bir sonraki adım, orijinal şablonu temel alan sayfaları oluşturmaktır.
Bu uygulamada, bu dersin daha önceki uygulamalarında oluşturduğunuz teacher
şablonunu kullanan yeni sayfalar oluşturacaksınız. Orijinal şablonun içeriği bu sayfalarda da yer alacaktır. Bu yeni sayfalarda sadece şablonda düzenlenebilir olarak tanımladığınız kısımları değiştirebilirsiniz.
Sayfaları oluşturmak için ihtiyaç duyacağınız resimleri Lesson_13_Templates/Images klasöründe bulabilirsiniz.
1. File > New komutunu seçin. New Document iletişim kutusunda Templates sekmesine tıklayın.
New Document iletişim kutusu açılacaktır. Kutunun Templates kısmında, tanımladığınız sitelerin bir listesi ve seçili site için oluşturduğunuz bütün şablonların bir listesi
görünecektir.
2. Yoga Sangha sitesine ait şablon listesinden teacher şablonunu seçin, Update page when Template changes kutusunu işaretli durumda bırakın, sonra da Create düğmesine tıklayın.
Şablondan yeni bir sayfa oluşturulacaktır. Bu belgede şablondaki içerik görünüyor olsa da, bunun yine de kaydedilmesi gerekir.
3. Dosyayı Lesson_13_Templates/Teachers klasörüne Katchie.html olarak kaydedin. Sayfanın başlığını Yoga Sangha: Teachers: Katchie Ananda olarak değiştirin.
Yeni sayfada, kilitli bölgelere ait vurgu renginin (varsayılan renk açık sarıdır) sayfayı çevrelediğini göreceksiniz. Ayrıca, belge penceresinin sağ üst köşesinde aynı renkteki bir sekmede şablonun ismini de göreceksiniz.
Dreamweaver belgenin başlığının etrafında otomatik olarak doctitle adında düzenlenebilir bir bölge oluşturur. Böylece şablondan oluşturulan bütün sayfaların ismini değiştirebilirsiniz.
Üzerine getirdiğinizde ya da kilitli bölgelerden birine tıklamayı denediğinizde, imleç, ortasından çizgi geçen bir daireye dönüşür. Bu da söz konusu alanların düzenlenemeyeceğini gösterir.
4. “teacher’s full name” yer tutucu metnini Katchie Ananda ile değiştirin.
Yer tutucu üstbilgi metni bu şablon tabanlı belgedeki gerçek içerikle değiştirilecektir.
5. Lesson_13_Templates/Text klasöründeki katchie.txt dosyasını açın. Metnin tamamını seçin, kopyalayın ve teacherBio yer tutucu metninin üzerine yapıştırın.
Metin ve resim bir kenarlıkla çevrelenmiş olarak belirecektir. Kenarlık rengi,
düzenlenebilir bölgelerin rengiyle aynıdır. Bölgenin sol üst köşesinde yer alan sekmede bölgenin adı yazılıdır.
Bazen metnin biçimlendirilmesi tablonun genişlemesine neden olur. Stili daha küçük boyutlu metinler kullanan bir stille değiştirirseniz, normal bir belgede yaptığınız gibi tablonun dışına tıklayıp tabloyu tekrar küçülterek uygun büyüklüğe getirmeniz mümkün olmaz. Bu belge bir şablon kullanılarak oluşturulduğundan, tabloların büyüklük açısından içeriklerine uygun şekilde ayarlanabilmesi için dosyayı kapatıp yeniden açmanız gerekir. Yeni bir stil oluşturmadan bu belgedeki metnin büyüklüğünü değiştiremezsiniz, çünkü metni tanımlayan dahilî stil sayfası düzenlenebilir durumda değildir.
6. Resim yer tutucusunu seçin ve Src’yi Properties denetçisini kullanarak Lesson_
13_Templates/Images klasöründeki Katchie_sm.jpg resmiyle değiştirin.
Sayfanızın görünümü aşağıdaki resme benzeyecektir.
Katchie.html dosyasını kaydedebilirsiniz.
7. 1’den 6’ya kadar olan adımları tekrarlayarak şablon tabanlı iki dosya daha oluşturun ve bunları Lesson_13_Templates/Teachers klasörüne Hillman.html ve Lyon.html olarak kaydedin. Sayfalarda yer alan yer tutucu metinleri Text klasöründeki hillman.txt ve lyon.txt dosyalarındaki metinlerle, yer tutucu resimleri de Images klasöründeki jayne.jpg ve darcy.jpg resimleriyle değiştirin.
Başlangıç sayfasındaki Create New sütununda yer alan More seçeneğine tıklayarak New Document iletişim kutusunu çabucak açabilirsiniz.
Jayne Hillman belgesinin başlığı Yoga Sangha Teacher: Jayne Hillman.
Darcy Lyon belgesinin başlığı da Yoga Sangha Teacher: Darcy Lyon olarak ayarlanmalıdır.
Böylece teacher şablonundan üç sayfa oluşturdunuz. Hillman.html ve Lyon.html dosyalarını kapatabilirsiniz. Katchie.html dosyasını bir sonraki uygulamada kullanmak üzere açık bırakın.
İsteğe Bağlı İçeriği Kontrol Etmek
Bu dersin başında teacher şablonunu oluştururken, sertifikaların listesini gösterecek olan tabloyu, bu şablonla oluşturulan sayfalarda varsayılan durumda gizlenen isteğe bağlı bir bölge olarak tanımlamıştınız. Bir şablon kullanarak yeni sayfalar oluşturup düzenlerken, orijinal şablonda oluşturulan isteğe bağlı içerik alanlarını gösterebilir ya da gizleyebilirsiniz. Bu uygulamada bölgeyi görüntüleyerek, Katchie Ananda profili için isteğe bağlı içeriği geliştirmeye hazırlanacaksınız.
1. Katchie.html belgesinde Modify > Template Properties komutunu seçin.
Template Properties seçeneği, Modify menüsünün üst kısmına yakın bir konumda, Page Properties seçeneğinin altında yer alır.
Template Properties iletişim kutusu açılacaktır.
2. Name listesinden OptionalRegion1’i seçin ve Show OptionalRegion1 onay kutusunu işaretleyin.
Değerler listesinde false (gizli) olarak görünen OptionalRegion1 değeri değişerek true (görünür) olacaktır.
3. OK düğmesine tıklayarak Template Properties iletişim kutusunu kapatın.
Belgenize geri dönecek ve teacher şablonundaki isteğe bağlı bölgede oluşturduğunuz tabloda Katchie.html belgesinin görüntülendiğiniz göreceksiniz. Bir sonraki uygulama için bu dosyayı açık bırakın.
Tekrarlanan Girişler Eklemek
Şu anda Katchie.html belgesinde görüntülenen “teacherName Certifications” tablosu, daha önce teacher şablonunda oluşturduğunuz tekrarlanan bölgeyi içerir.
Buradaki uygulamada, bu tekrarlanan bölgeyi iki sertifika için girişler eklemek amacıyla kullanacaksınız.
1. Şu anda görünür durumda olan isteğe bağlı bölgede yer alan Katchie.
html belgesindeki certDate düzenlenebilir bölgesine 05/15/2000 ve cert düzenlenebilir bölgesine de Sample Yoga Certification yazın.
Her bir hücreye yerleştirdiğiniz düzenlenebilir bölgeler, tekrarlanan bölgelere içerik girmenizi sağlar.
Bu satırda bir bölgeden diğerine geçmek için Tab tuşunu kullanabilirsiniz (tıpkı bir tabloda hücreden hücreye geçmek için yaptığınız gibi). Ancak Tab tuşunu yeni bir satır oluşturmak için kullanamazsınız. Yeni bir satır eklemek için, aşağıdaki adımı uygulamanız gerekir.
2. Repeat: certs sekmesinde üzerinde artı işareti (+) bulunan düğmeye tıklayın.
Tekrarlanan bölgenin bir kopyası, Sample Yoga Certification’a ait bilgileri yazdığınız satırın altına eklenecektir.
Tekrarlanan bölge sekmesindeki dört düğme, bu bölgeye giriş eklemenizi, girişleri silmenizi ve bunların sırasını değiştirmenizi sağlar.
3. Yeni eklenen satırdaki certDate düzenlenebilir bölgesine 01/20/1998, cert düzenlenebilir bölgesine de Sample Yoga 200 Hour Certification yazın.
Böylece bu tabloya sertifika bilgisiyle ilgili iki giriş yapmış oldunuz.
4. Eleme noktasını Sample Yoga 200 Hour Certification hücresine yerleştirin.
Tekrarlanan bölgeye ait sekmedeki yukarı ok düğmesini kullanarak bu girişi listenin en üstüne taşıyın.
Buradaki ok tuşlarını kullanarak girişleri bölge içinde yukarıya ya da aşağıya taşıyabilirsiniz.
5. Certification alanının üzerindeki teacherName Certifications metnini seçin ve bu metni Katchie’s Certifications ifadesiyle değiştirin. Dosyayı kaydedin.
Katchie.html dosyasını kaydedin ve kapatın.
Şablonda Değişiklik Yapmak
Bir şablon yardımıyla, bu orijinal şablonun tasarımını kullanan sayfaları çok kolay bir şekilde hazırlayabilirsiniz. Sayfayı oluşturan kişi sayfadan sayfaya farklılık gösterecek olan içeriği ekleyebilir, fakat kilitli alanların hiçbirinde değişiklik yapamaz.
Şablon kullanılarak hazırlanan sayfaların hepsinde değişiklik yapmanız gereken durumlarda, şablonlar size ciddi ölçüde zaman kazandırır. Şablon kullanmıyorsanız, her bir sayfayı tek tek düzenlemeniz gerekir. Şablon kullandığınızda ise, şablondan oluşturulmuş bütün sayfaları güncellemek için sadece orijinal şablon dosyasını düzenlemeniz yeterlidir.
1. Assets panelindeki Templates kategorisinde, teacher şablonuna çift tıklayın.
Bu derste daha önce oluşturduğunuz orijinal şablon açılacaktır.
2. Ekleme noktasını yan taraftaki Katchie Ananda gezinti metninin içine yerleştirin ve Properties denetçisini kullanarak bağlantıyı Katchie.html olarak değiştirin.
Jayne Hillman bağlantısını Hillman.html olarak, Darcy Lyon bağlantısını da Lyon.
html olarak değiştirin. Şablonu kaydedin.
Blok etiketi içindeki düzenlenebilir bölgeyle ilgili uyarı mesajını kabul etmek için OK düğmesine tıklayın. Şablonda değişiklik yaptığınız için Update Template Files iletişim kutusu açılacaktır. Bu iletişim kutusunda şablondan oluşturulan bütün dosyaların bir listesini göreceksiniz.
Kendi Web sitelerinizi oluştururken, isterseniz Don’t Update düğmesine tıklayabilirsiniz. Sayfaları daha sonra Modify > Templates > Update Pages komutunu seçerek güncelleyebilirsiniz.
3. Yeni yaptığınız değişikliklerle bütün sayfaları güncellemek için Update düğmesine tıklayın. Güncelleme kaydını inceledikten sonra Update Pages iletişim kutusunu kapatın.
Şablondan daha önce oluşturduğunuz Katchie.html, Hillman.html ve Lyon.html belgeleri, yeni bağlantılarla güncellenecektir. Bir şablonla ilişkili bütün sayfaları güncelleyebilme özelliği son derece faydalı olabilir. Şablonda bağlantılar içeren bir gezinti bölümünüz varsa (üzerinde çalıştığınız Yoga Sangha sayfaları gibi), bunları şablonda ayarlayabilirsiniz.
Bağlantıların değişmesi durumunda şablonu değiştirmeniz yeterli olur; böylece şablon kullanılarak tasarlanan bütün sayfalar güncellenir.
Modify > Templates > Detach from Template komutunu seçerek bir sayfayla bir şablon arasındaki bağlantıyı koparabilirsiniz. Bağlantısı koparılan bir sayfa tamamen düzenlenebilir durumdadır, ama şablon değiştirildiğinde bu sayfa artık güncellenmez. Ayrıca, New Document iletişim kutusundaki Update Page When Template Changes onay kutusunun işaretini kaldırarak
şablondan tamamen bağımsız olarak sayfanın bir kopyasını oluşturabilirsiniz.
Bunu yaptığınızda, sabit sayfalara çok benzer şekilde çalışan ve herhangi bir şablon bağlantısına sahip olmayan bir sayfa oluşturulur. Bu şekilde
oluşturulan sayfalar şablon değiştirildiğinde güncellenmez.
4. Katchie.html dosyasını açın ve Web tarayıcınızda önizleyin.
Artık sayfanın yan tarafındaki bağlantılar, bu şablondan oluşturulan diğer iki sayfadaki bağlantılar gibi kendilerine karşılık gelen sayfaları gösterecektir.
CSS (Ders 4’te görmüştük) tarafından kontrol edilen bir içerik oluşturmak isterseniz, bir harici stil sayfası kullanarak şablonu güncellemek zorunda kalmadan stil sayfasını güncellemeyi mümkün kılabilirsiniz.
Düzenlenebilir Etiket Nitelikleri Oluşturmak
Düzenlenebilir etiket nitelikleri, orijinal şablon temel alınarak oluşturulan yeni belgelerde değiştirilebilen etiketler tanımlamanızı sağlar.
1. teacher şablonunda (teacher.dwt) hoca resmini ve biyografisini içeren tabloyu seçin.
Dıştaki kenarlığına tıklayarak tabloyu seçin.
Belge penceresinde tablonun etrafı, seçili olduğunu gösterecek şekilde bir dış hatla çevrilecektir.
2. Modify > Templates > Make Attribute Editable komutunu seçin.
Editable Tag Attributes iletişim kutusu açılacaktır.
3. Editable Tag Attributes iletişim kutusunda Add düğmesine tıklayın ve nitelik (Attribute) olarak BGCOLOR yazın. OK düğmesine tıklayın ve bu niteliğin Attribute menüsüne eklendiğine dikkat edin.
BGCOLOR niteliği sadece bu menüde görünmez, çünkü tablo için bir arka plan rengi tanımlanmamıştır. Bir niteliğin görünmesi için, başlangıçta bu niteliği ayarlamanız gerekir. Listedeki diğer nitelikler WIDTH, BORDER, CELLPADDING ve CELLSPACING nitelikleridir (tablonun daha önce tanımlanmış olan bütün özellikleri).
Nitelik isimleri büyük harfle yazılmalıdır. Bir niteliği kendiniz ekleyebilmek için, HTML etiketleri ve bunlara ait nitelikler hakkında bilgi sahibi olmanız gerekir. Etiketler ve bunlara ait nitelikler hakkında daha fazla bilgi edinmek için, Reference panelini kullanabilirsiniz. Örneğin Reference panelindeki Tag menüsünde TD etiketini seçerseniz, Description menüsüne tıklayıp etiket niteliklerinden birini (örneğin bgcolor) seçerek bu etiketin nitelikleri hakkında bilgi edinebilirsiniz. HTML ve Reference panelini Ders 16’da göreceksiniz.
4. Make attribute editable onay kutusuna tıklayın. Label metin alanına bgcolor yazın, Type seçeneğini Color olarak ayarlayın ve Default alanına #FFFFFF yazın. OK düğmesine tıklayın. teacher şablonunu kaydedin, Update düğmesine tıklayın, Update Pages iletişim kutusunu kapatın, sonra da teacher.dwt şablon dosyasını kapatın.
Make attribute editable onay kutusuna tıkladığınızda, niteliğin değeri şablonda tanımlandığı şekilde tabloya eklenir.
Editable Tag Attributes iletişim kutusu kapanacaktır. Tablonun arka plan rengi artık düzenlenebilir bir etiket niteliğidir. bgcolor niteliğini düzenlenebilir hale getirdikten sonra teacher.dwt şablonunu bir tarayıcıda önizlerseniz, şablon beklediğiniz gibi görünmeyebilir.
Dreamweaver’ın şablonu temel alan bütün belgeleri kontrol etmesine imkân sağlayacak olan şablon işaretlemesini (markup) oluşturabilmesi için, Bgcolor metin alanında @@(bgcolor)@@
kodu görüntülenir. Şablonun çalışabilmesi için bu tür bir işaretleme gerekir. Ayrıca bu işaretleme, şablonu temel alan asıl belgelerin görünümünde sorun çıkarmaz.
Daha önce düzenlenebilir olarak tanımlanmış olan bir etiketi tekrar kilitlemek için, etiketi seçtikten sonra Modify > Templates > Make Attribute Editable komutunu seçmeniz gerekir. Attribute açılır menüsünden kilitlemek istediğiniz niteliği seçin ve Make attribute editable onay kutusunun işaretini kaldırın.
Düzenlenebilir Bir Etiket Niteliğinde Değişiklik Yapmak
Düzenlenebilir etiket niteliklerinin oluşturulabilmesi, şablon oluşturmayla ilgili seçenekleri önemli ölçüde artırır. Potansiyel olarak pek çok etiket niteliğini düzenlenebilir hale
getirebilirsiniz; bu da size orijinal şablonunuzdan oluşturulan belgeler üzerinde önemli ölçüde kontrol imkânı sağlar. Arka plan rengi, hizalama ve büyüklük gibi nitelikler, şablon tabanlı belgelerinizi daha kullanışlı ve daha esnek hale getirebilir.
1. Katchie.html belgesini açın ve Modify > Template Properties komutunu seçin.
Template Properties iletişim kutusu açılacaktır. Bir önceki uygulamada düzenlenebilir hale getirdiğiniz bgcolor etiket niteliği Name listesinde görünecektir. Value sütununda bu niteliğin varsayılan ayarının #FFFFFF olduğunu görebilirsiniz.
2. bgcolor niteliğini seçin.
Etiketi düzenlemek için kullanabileceğiniz seçenekler listenin altında belirecektir. Burada, rengi değiştirmek için kullanabileceğiniz bir metin alanı da mevcuttur.
3. bgcolor metin alanındaki #FFFFFF seçeneğini #FFFFCC ile değiştirin, sonra da OK düğmesine tıklayarak iletişim kutusunu kapatın.
İsteğe bağlı tablonun rengi açık sarı olarak değiştirilecektir.
Katchie.html dosyasını kaydedip kapatabilirsiniz.
HTML bilgisi, düzenlenebilir etiket niteliklerinden en iyi şekilde
faydalanmanıza yardımcı olur. HTML bilmiyorsanız, Reference panelini kullanarak çeşitli etiketler ve bunlara ait niteliklerin işlevleri hakkında bilgi edinebilirsiniz. Niteliği düzenlenebilir hale getirmeden önce tanımlamak da faydalı olacaktır. HTML biliyorsanız, çok güçlü bir şablon özelliğini
kullanabilirsiniz.
Yuvalanmış Şablonlar Oluşturmak
Yuvalanmış bir şablon (nested template), asıl yerleşim düzenini temel bir şablondan alan bir şablondur. Bütün sayfalarda görünmesi gereken asıl içeriğin bulunduğu temel bir şablon oluşturduktan sonra yuvalanmış bir şablon kullanarak sitenizin belirli bir bölümü için özel içerikler ya da bir yerleşim düzeni stili oluşturabilirsiniz. Ana gezinti elemanları, altbilgi ve üstbilgi gibi ana site bileşenlerini muhafaza ederek farklı bir yerleşim düzeni kullanmak istediğiniz bir bölüm varsa, yine ana şablonunuzu temel alan başka bir yuvalanmış şablon oluşturabilirsiniz. Yuvalanmış şablonların en faydalı olduğu durum, yerleşim düzenleri ve tasarımlarında farklılıklar olan ve ortak içeriklerini bir ana şablondan alan bir dizi sayfa stilinin oluşturulduğu projelerdir.
Normalde yuvalanmış şablonlar oluşturma işleminin ilk adımını planlama oluşturur. Önce sitenin görünümünü ve ziyaretçilerde yaratacağı hissi planlamanız ve bir ebeveyn şablon oluşturmanız, sonra da sitenin her bir bölümü için yuvalanmış şablonları, son olarak da yuvalanmış şablonlardan sitenin sayfalarını oluşturmanız gerekir. Yuvalanmış şablonlarla çalışılırken asla sayfalar doğudan ebeveyn şablon kullanılarak oluşturulmaz. Bu şablon, sitedeki sayfa çalışmaları için faydalanılan yuvalanmış şablonlarla birlikte site tasarımı için bir taşıyıcı bileşen tanımlamak için kullanılır.
1. Lesson_13_Templates klasöründeki ys-layout.html sayfasını açın. Bu dosyayı bir şablon olarak kaydedin ve varsayılan ismini (ys-layout) değiştirmeyin. Açılan mesaj penceresinde Yes (Evet) düğmesine tıklayarak bağlantıları güncelleyin.
Bu sayfa, Yoga Sangha sitesinin genel görünümünü içermekte ve atmosferini
yansıtmaktadır. Bu genel site tasarımı kullanılarak bütün site sayfaları (frame tabanlı sayfalar dışında) oluşturulabilir. Burada iki ana içerik alanı olduğuna dikkat edin:
mainContent ve rightContent. Bu alanlarda düzenlenebilir bölgeler oluşturacaksınız.
Böylece çocuk şablonlar Web sitesinin her bölümü için özel bir görünüm ve atmosfer tanımlayabilecektir.
2. Ekleme noktasını ana içerik alanına yerleştirin. div tutamacını seçerek ya da Etiket Seçici’nin yardımıyla <div#mainContent> etiketini seçerek tüm alanı seçin.
Insert > Template Objects > Editable Region komutunu seçin.
Bölgeyi mainContent olarak adlandırın ve OK düğmesine tıklayın.
Ekleme noktası alanın içindeyken div etkin durumda olacak, ancak
seçilmeyecektir. Köşelerde ve orta noktalarda yer alan içi dolu küçük kareler div’in seçili olduğunu gösterir.
Bu alan, bütün çocuk sayfalar (yani bu şablondan oluşturulan sayfalar) için kullanılacak olan ana içeriği tutması için tasarlanmıştır.
Div’lerin etrafında düzenlenebilir alan sekmesi ve görsel yardımcılar belirmeyecektir. Fakat bu bölgenin düzenlenebilir hale getirildiğini Tag Inspector’a bakarak anlayabilirsiniz. Bu durumda burada <mmtemplate.editable><div#mainContent> ifadesini görmeniz gerekir.
3. İkinci adımı tekrarlayarak rightContent alanında bir düzenlenebilir bölge oluşturun. yeni düzenlenebilir bölgeyi rightContent olarak adlandırın. Dosyayı kaydedin ve kapatın.
Artık orijinal Yoga Sangha şablonunu oluşturduğunuza göre geri kalan adımlarda yuvalanmış şablonu oluşturmaya hazırsınız demektir.
4. File > New komutunu seçin. Templates sekmesine geçerek ys-layout şablonunu bulun ve Create düğmesine tıklayın.
ys-layout şablonu kullanılarak yeni bir sayfa oluşturulacaktır. Bir sonraki adımda ys- layout şablonunu temel şablonunuz olarak kullanacaksınız.
5. File > Save As Template komutunu seçin, oluşturduğunuz yuvalanmış şablonu ys-teacher olarak adlandırın ve Save düğmesine tıklayın.
Orijinal şablonu kullanarak oluşturduğunuz belgeyi bir şablon olarak kaydederek bir yuvalanmış şablon oluşturursunuz. Yuvalanmış şablonu oluşturduğunuza göre artık onu düzenleyebilirsiniz. Dreamweaver .dwt uzantısını otomatik olarak ekleyecektir, dolayısıyla bu uzantıyı sizin belirtmeniz gerekmez.
Sitenin Teachers bölümündeki her sayfa ys-teacher şablonu kullanılarak oluşturulabilir.
ys-layout ebeveyn şablonunu kullanarak sitenin her bölümü için çocuk şablonlar oluşturabilirsiniz.
Çocuk şablonda değişiklik yapmak için ebeveyn şablonda düzenlenebilir bölgeler oluşturmanız gerekir; çocuk şablondaki düzenlenebilir bölgeleri yuvalanmış şablondan oluşturulan yeni sayfalarda düzenlenebilir alanlara dönüştürmeniz gerekir.
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Mevcut bir sayfayı şablon olarak kaydederek bu sayfadan bir şablon oluşturdunuz (Sayfa 429–431).
• Şablondan oluşturulan sayfalarda değişiklik yapılmasını sağlamak için şablona düzenlenebilir alanlar eklediniz (Sayfa 432–436).
• Şablon temel alınarak hazırlanan sayfalarda değişiklik yapılmasını önlemek için şablondan düzenlenebilir alanları kaldırdınız (Sayfa 436–437).
• Daha sonraki sayfalarda gösterilebilen ya da gizlenebilen isteğe bağlı içerik alanları oluşturdunuz (Sayfa 437–440).
• Şablonu temel alan sayfalara gerektiği kadar çok ya da az giriş yapılabilmesine imkân sağlayan “tekrarlanan bölgeler” eklediniz (Sayfa 440–443).
• Hem düzenlenebilir, hem de kilitli bölgeler için kullanılan şablon vurgu renklerini değiştirdiniz (Sayfa 442).
• Aynı yerleşim düzenine sahip sayfalar oluşturmak için, şablonu temel alan birden fazla sayfa hazırladınız (Sayfa 450–451).
• Şablonda değişiklikler yaptınız ve sitede birden fazla sayfayı bu değişiklikleri yansıtacak şekilde güncellediniz (Sayfa 450–451).
• Belirli elemanları daha iyi kontrol edebilmek için, düzenlenebilir etiket nitelikleri oluşturdunuz ve bunları kullandınız (Sayfa 452–455).
• Orijinal şablon tarafından kontrol edilen ana yerleşim düzeninde bazı farklılıklar oluşturmak için yuvalanmış bir şablon kullandınız (Sayfa 455–457).
