Şablonları Kullanmak

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 13 Ş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ü 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.

2 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. 428 DERS 13

3 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. Şablonları Kullanmak 429

4 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 430 DERS 13

5 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. Templates düğmesi 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. Şablonları Kullanmak 431

6 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. 432 DERS 13

7 <<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. Şablonları Kullanmak 433

8 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. 434 DERS 13

9 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. Şablonları Kullanmak 435

10 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. 436 DERS 13

11 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 Şablonları Kullanmak 437

12 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. 438 DERS 13

13 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. Şablonları Kullanmak 439

14 İ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. 440 DERS 13

15 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. Şablonları Kullanmak 441

16 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 442 DERS 13

17 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. Şablonları Kullanmak 443

18 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. 444 DERS 13

19 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. Şablonları Kullanmak 445

20 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 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. 446 DERS 13

21 İ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. Şablonları Kullanmak 447

22 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. 448 DERS 13