
Dreamweaver şablonları
Bir HTML sayfası şablon olarak kaydedildiğinde, Dreamweaver yerel kök klasörün kök düzeyinde bir şablon klasörü oluşturur ve kendisine uygulanan tüm sayfalar için kaynak haline gelen bir .dwt dosyası üretir. Bir şablona bir HTML sayfanın uygulandığı her seferde, (Dosya > Şablondan yeni veya Değiştir > Şablon > Sayfaya şablon uygula) .dwt dosyası için site köküne görece bir bağlantı oluşturur. Bu siteye görece bağlantının her zaman doğru bağlantı olmasının nedeni, .dwt dosyasının sitenin klasör yapısındaki kök düzeyinde her zaman Templates klasöründe yer alacak olmasıdır. Templates klasöründen .dwt dosyası taşınırsa veya Templates klasörü taşınır ya da yeniden adlandırılırsa, bağlantı kesilir. Bu nedenle .dwt dosyasının, Dreamweaver'ın oluşturduğu Templates klasöründe tutulması çok önemlidir. Karışıklığı önlemek amacıyla sitenizin diğer öğelerinin (görüntü kaynak dosyaları veya HTML belgeleri) Templates klasörü içine KAYDEDİLMEMESİ iyi bir uygulama olacaktır.
Sayfalar şablon dosyalarına nasıl bağlanır?
Bir dosya mevcut bir sayfaya uygulandığında veya bir şablondan yeni oluşturulduğunda, kaynağa aşağıdaki kod eklenir:
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
Dreamweaver'ın ürettiği HTML kaynak kodunu görüntülemek için Pencere > HTML'i seçin.
Yukarıdaki yol, yeni bir sayfada görülecek normal HTML kaynağının yerini alır. Yeni dosyanın üreteceği normal etiketlerle başlamak yerine, yerel kök klasörün bir seviye içindeki Templates adı verilen bir klasörde, sayfanın düzenlenebilir bölümü içinde bulunmayan tüm bilgileri içeren bir .dwt dosyası bulunduğunu belirtmektedir. Bu yol tarayıcıyı, sayfa özellikleri, düzen ve grafikleri gibi sadece .dwt dosyası içinde bulunan tüm içeriği sayfaya sağlayacak dosyanın doğru konumuna bakmaya yönlendirir. Bu nedenle bir sayfanın düzenlenebilir alanları dışındaki değişiklikler doğrudan .dwt dosyasında yapılmalıdır. .dwt dosyası açılıp düzenlendiğinde, şablona uygulanan tüm sayfalar daha önce olduğu gibi aynı konumdaki dosya ile bağlantılandırılır. Şablona uygulanan tüm sayfalar otomatik olarak yeni bilgilerle güncellenir.
Belge-göreceli ile site kökü-göreceli karşılaştırması
Bir HTML sayfasını şablona bağlayan yol, site kökü-göreceli bir yoldur. Site köküne görece olarak adlandırılmasının nedeni dizin yapısının (yerel kök klasör) en üst düzeyinden başlaması ve bir sonraki alt klasörden (Templates) geçip, sonunda .dwt dosyası ile bağlantılanmasıdır. Dreamweaver, Templates klasöründeki şablonlara otomatik olarak site köküne görece bir yol üretir çünkü site yapısında başka hangi dosya klasörleri bulunursa bulunsun şablonun tam olarak nerede yer alacağını daima bilir.
Belgeye görece, bir dosyadan diğerine belirli bir yol oluşturur. Dosya klasör yapısının en üst düzeyinden (site kökü) başlamak yerine, bir dosyadan başlayan, gereken dosya klasörlerinden (dizinlerden) geçen ve diğer dosya konumunda duran bir yol üretir. Bir dosyadan diğerine görece bir bağlantı oluşturmadan ÖNCE her iki dosyanın da aynı yerel kök klasör içine kaydedilmesi gerekir.
Dosyaları uzak bir sunucuya yüklemeden önce sayfaların yerel bir tarayıcıda önizlemesini görmek istiyorsanız, belgeye görece bağlantı yapılmalıdır. Hem Internet Explorer'ın hem de Netscape'in hangi yerel kök klasörün tanımlandığını anlamasının bir yolu yok (Dreamweaver'da olduğu gibi), bu nedenle sadece görüntülenmekte olan belgeye görece bir yol takip edebilir. Çoğu kullanıcının sayfalarını karşıya yüklemeden önce bir tarayıcıda yerel olarak görüntülemeyi tercih etmesinden dolayı, bir sayfa bağlantılandırıldığı veya bir görüntü eklendiği zaman Dreamweaver varsayılan ayar olarak belgeye görece olur. Başka bir HTML sayfasına bir görüntü veya bir bağlantı eklemeye çalışmadan ÖNCE dosya kaydedilmediyse, Dreamweaver mevcut sayfanın konumuyla ilgili herhangi bir referansa sahip değildir, bu nedenle aşağıdaki gibi görünen bir yol üretir:
file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm
veya
file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm
Bu yollar SADECE iş istasyonunuza özgüdür ve dosyaları uzak bir sunucuya yüklediğinizde çalışmaz.
Aşağıdaki grafik, belge-göreceli ile site kökü-göreceli arasındaki farkın grafiksel açıklamasını sunar. Aşağıdaki örnekte, bio.htm sayfasına alternatif yol seçenekleri kullanılarak logo.jpg adlı bir görsel eklenmiştir.
|
|
Şablondaki belge-göreceli yollar
.dwt dosyasına doğrudan görsel ve bağlantı eklemek kafa karıştırıcı olabilir. Unutmayın; .dwt dosyasında çalışırken belgeye görece oluşturduğunuz tüm bağlantılar tam olarak .dwt dosyasına görece olacaktır. Oluşturulan yol bu HTML sayfasından veya görüntü kaynağından .dwt dosyasınadır. Dreamweaver, referans sayfaların canlı şablonda nereye uygulandığının bir kaydını tutar ve mevcut sayfa için doğru olması amacıyla yolu referans HTML sayfasına görece otomatik olarak ayarlar. Şablona uygulanan sayfa ve .dwt dosyası için HTML kaynağına baktığınızda, yollar farklı olacaktır ve böyle olması gerekir. Dreamweaver her bir sayfanın belirli konumu için yolu ayarlamadıysa, belgeye görece yol .dwt dosyası hariç tüm dosyalarda kırılır.
Aşağıda Dreamweaver'ın belgeye görece yolu nasıl ayarlayabileceğinin bir örneği bulunmaktadır:
|
Şablondan grafiğe orijinal yol: |
|
../graphics/images/banner.gif |
|
Şablona uygulanan sayfada ayarlanan yol: |
|
../../graphics/images/banner.gif |
Dreamweaver, site köküne görece veya mutlak (http://) yolları şablondan, şablona uygulanan sayfalara değiştirmez çünkü gözden geçirilmesi gerekmez.
Şablona uygulanan sayfalardaki belge-göreceli yollar
Şablona bağlı bir sayfanın düzenlenebilir bölgesine görsel ve bağlantı eklemek, şablona bağlı olmayan bir sayfaya görsel veya bağlantı eklemekle tamamen aynı şekilde çalışır. Diğer sayfalar veya görüntülere herhangi bir bağlantı oluşturmadan ÖNCE Dosya > Şablondan Yeni ve ardından Dosya > Kaydet'i seçerseniz (yerel kök klasörü içinde bir konum seçerek), Dreamweaver hem HTML Sayfası Seç hem de Görüntü Kaynağı Seç iletişim kutularında varsayılan olarak Belgeye görece olur. "Görece" açılır menüsü manuel olarak Site Kökünü seçecek şekilde değiştirilmediği sürece, çalışmanızın tarayıcıda yerel olarak önizlemesini görüntülediğinizde görüntüler ve bağlantılar kullanılabilir olur.
Şablondaki site kökü-göreceli yollar
Diğer sayfalara bağlantı oluşturmak veya görsellerin Image Source kaynağına referans vermek için şablon dosyası üzerinde çalışırken, HTML Dosyası Seç ve Görsel Kaynağı Seç iletişim kutularındaki açılır menü, belge-göreceli ve site kökü-göreceli arasında seçim yapma imkanı sunar. Yukarıdaki şemada görüldüğü gibi Site Kökünün seçilmesi, Dreamweaver'da açık olan .dwt dosyasından bağımsız olarak yerel kökten doğrudan seçilen dosyaya bir yol oluşturur. Site köküne görece bağlantıların kullanılması, site dizin yapısındaki içeriğin yerel kök klasörler birlikte taşınması olası olduğunda faydalı olabilir çünkü dosyalar orijinal konumundan taşınsa bile bağlantı kopmadan kalır.
|
Şablondan grafiğe orijinal yol: |
|
/graphics/images/banner.gif |
|
Şablona uygulanan sayfadaki yol: |
|
/graphics/images/banner.gif |
Dreamweaver, site köküne görece veya mutlak (http://) yolları şablondan, şablona uygulanan sayfalara değiştirmez çünkü gözden geçirilmesi gerekmez. Belgenin konumu (ister .dwt dosyası isterse de şablona bağlı bir HTML dosyası olsun) site köküne görece yolla ilgili değildir.
Şablona uygulanan sayfalardaki site köküne göreceli yollar
Site köküne göreceli bağlantılar kullanmak, site karmaşıksa, birlikte çalışan bir geliştirici ekibi söz konusuysa veya düzenli olarak revize edilecek bir site dizin yapısı varsa faydalı olabilir.Siteye görece bir bağlantı oluşturmak amacıyla, hem Görüntü Kaynağını Seç hem de HTML Dosyası iletişim kutularında yer alan "Görece" kelimelerinin yanındaki açılır menüden Site Kökü seçeneğini seçin.
Oluşturulan yol yerel kök klasöründen başlayıp, istenen sayıda alt klasörden geçip bağlantılı sayfa veya görüntüde nihai olarak sonlanacağından dolayı geliştiricilerin, bağlantıları koparmadan site dizini yapısında sayfaları veya varlıkları bir veya daha fazla alt klasör yukarı taşıması esnekliği sağlanır. Örneğin yukarıdaki şemada logo.jpg dosyası görüntüler klasöründen özellikler klasörüne taşındıysa ve bağlantı site köküne görece bir bağlantı idiyse, tarayıcı yine de grafiği bulmada zorlanmaz. Yol belgeye görece bir bağlantı ise, hem logo.jpg hem de bio.htm dosyaları, belgeye görece yolun oluşturulduğu zaman bulundukları aynı klasör yapısında kalmalıdır. Yol oluşturulduktan sonra bu dosyalardan birinin taşınması, yolun bozulmasına neden olur.
Yukarıda belirtildiği gibi sadece belgeye görece bağlantıların önizlemesi tarayıcıda yerel olarak yapılabilir. Site köküne görece bağlantıları kullanmayı seçerseniz, tarayıcıda sayfalarınızı görüntülemenin sadece iki yolu bulunmaktadır.
Birincisi dosyaları uzak sunucuya yüklemek (Koymak) ve ardından URL adresi alanına mutlak yolu yazarak sayfaya gitmek için tarayıcınızı kullanmaktır. Bu yöntemi kullanarak sayfalar, webde başkalarının göreceği gibi görüntülenecektir. Sayfalarda değişiklik yapmak için, dosyaların yerel bir kopyasını açın, değişiklikler yapın, HTML sayfalarını kaydedin, ftp sunucusuna bağlanın ve yeni dosyaları uzak sunucuya "Koyun". Aynı klasörde aynı ada sahip dosyalar, uzak sunucudaki dosyanın daha eski sürümleri üzerine yazılır.
Tarayıcıda siteye görece bağlantıları önizlemenin ikinci yolu kişisel bir web sunucusu kullanmaktır. Sadece Windows'ta bu seçenek, Tarayıcı > Tarayıcı Listesinde Düzenle'de Dosya > Önizleme'yi ve ardından Yerel Sunucuyu Kullanarak Önizleme'yi kullanarak Dreamweaver'a girerek ayarlanabilir. Bu seçeneğin ayarlanması Dreamweaver'ın kişisel bir web sunucusu kullanarak belgelerin önizlemesini görüntülemesine imkan tanır.
Not: Macintosh için kişisel bir web sunucusu sistem düzeyinde ayarlanır. Daha fazla yardım için sistem belgelerine bakınız.
Dreamweaver'da güzel web siteleri oluşturun
Güçlü bir hepsi bir arada araçta dinamik web sitelerini tasarlayın, kodlayın ve yönetin.