Dreamweaver ile Template Oluşturmak

[HaNıM aGa]

Bu yazıyı okumadan önce bu linkten önizlemesini göreceğiniz sitenin tasarımını buradan inceleyebilirsiniz.
Bir önceki yazıda bu sitenin temasını oluşturmak için gerekli hazırlıklar anlatılmıştı. Site oluşturma grafikleri toplama gibi işlemler anlatılmıştı. Bu yazıda yeni tema oluşturma işlemi bu sitenin teması için anlatılacaktır.
Öncelikle tablolar kullanılarak html sayfası oluşturulup, html sayfa template olarak kaydedilmelidir. Bu template içine seçime bağlı alanlar (editable region) ve seçime bağlı alanlar (optional region) eklenerek temaya esneklik kazandırılılacaktır.

• Yeni bir site tanımlayın ve yeni html sayfası açın. Template tablolar ile oluşturulacaktır.
• Eklencek tablodaki satır ve sütun sayısı site tasarımına göre değişmektedir. Site içerisinde her sayfada görüntülenecek, her sayfada değiştirilebilecek (editable) ve bazı sayfalarda görüntülenecek (optional) alanlar bulunur.
• Bu site için menüler (üstteki ve sağdaki iki sütunda bulunanlar) ve içerik kısmı değiştirilecektir. İlk olarak hiç değişmiyecek olan alanlar için tablo oluşturup daha sonra değişecek olan alanlar bu tablo içerisine başka bir tablolar eklenmelidir.
• Common menü gurubundan Table seçeneği seçilir. 4 satırlık tablo eklenir. En üstteki başlık bölümü, üst menü, içerik ve sağdaki menüler, alt bölüm için birer satır kullanılacaktır.

• Rows=4 ile 4 satır belirtildi, columns=1 ile bir sütun (kolon) belirtildi. Table width = 100 percent ile tablo genişliği %100 olarak belirtildi. Yani tablo tarayıcıyı genişliğine eşit olacaktır. Border thickness=0 ile tablo kenarlık kalınlığı 0 olarak belirlendi.
• Şimdi ortadaki iki satıra yeni tablolar eklenmelidir. Üstteki satıra üst menü için alttaki satıra ise içerik, sağ ve soldaki küçük resimler ve sağdaki menüler için.
• İlk olarak üstten ikinci satıra 6 sütun 1 satırlık bir tablo eklenir. 4 sütun 4 menü seçeneği için, 2 sütun ise sağdaki ve soldaki boşluklar için.
• Alltan ikinci satıra ise 5 sütun ve 1 satır tablo eklenir. Sağ ve soldaki küçük resimler için 2 sütun, sağdaki kategoriler ve arama butonu ile başlayan menüler için 2 sütun, içerik için 1 sütun eklenmelidir. Toplamda 5 sütun yapar.
• İkinci eklenen tabloların içerisindeki bilgiler sürekli değişeceği için bu değerlerin genişlikleri belirtilmelidir. İçerik yüzde cinsinden belirtilirse farklı durumlarda template bozulmaz. Mesela en sağdaki ve soldaki sütunlar için %3 değeri verilebilir. İkisi toplam %6 yapar. Sağdaki menüler için %22 verilir. Menülerde %44 yapar. Geriye kalan % 50 ise içerik alanına verilir.
• Tabloya % değeri vermek için imleç hücre içinde iken properties penceresinden w değerine 50% (yüzde elli için) yazılmalıdır.
• Tablo oluşturma işlemi tamamlandı. Şimdi sayfa özellikleri belirlenmeli. Modify menüsünden page properties seçeneği seçilir.

• Appearance seçili iken sayfanın gürünüm ayrları yapılır. Sayfada kullanılacak yazı fontu, yazı boyutu(10 points) , yazı rengi (siyah), zemin rengi (beyaz) gibi özellikler belirlenir. Sol taraftan link seçeneği seçilerek link özellikleri belirlenir. Link color(normal link rengi), visited (ziyaret edilmiş) color, active (o anda seçili) color ve rollover (üstüne gelince) kırmızı seçilir. Çünkü ana sayfada linkler hep kırmızı görünüyor. Sağdaki menüler biraz daha farklı, normal zamanda mavi renkliler. Bu nedenler sağdaki menüler için css ile link ve visited mavi olarak belirlenmelidir.
• Şimdi her sayfada aynı kalacak öğeler yerleştirilmeli. İlk olarak en üste siyah zemin resmi (önceki yazıda resim 2) arkaplan olarak eklenmeli. Bunun için imleç en üstteki hücrenin içinde iken properties panelinden bg bölümündeki dosya işareti seçilerek resim seçilmelidir.

• Aynı işlem sağ ve sol kenarlar için de yapılmalıdır. Alttan ikinci satıra eklenen 6 sütunluk tabloya arkaplan resmi (resim4 ve resim5 ) eklenerek sağ ve sol kenarlıklar oluşturulur.
• Sayfa üzerinde gerekli biçimlendirmeler yapıldıktan sonra sayfa template’e çevrilmelidir. Bunun için common menü gurubundan make template seçeneği seçilir.

• Karşınıza aşağıdaki pencere gelecektir.

• Site bölümünden tanımladığınız siteyi seçin. Save as bölümüne template adını yazın. Description bölümüne tema ile ilgili açıklamalar yazın. Ok düğmesini tıkladığınızda sayfanızın adı anatema.dwt olarak değişecektir. Artık template hazırlanmış demektir. Şimdi template içinde değişecek alanlar eklenmelidir. Mesela alttan ikinci satırdaki 5 sütunluk tablonun ortaki üç sütunu içerik ve menü bölümüdür. Bu bölümleri editable (değiştirilebilir alan) olarak tanımlamalıyız.

Click this bar to view the full image.

• Resimde template anlatılan boyutlarda değil, ekrana sığsın diye küçülttüm. Aynı şekilde üstteki menü seçilerek o menüde değiştirilebilir alan olarak tenımlanmalıdır. İstenirse son yazılar ve son yorumlar da optional tanımlanarak bazı sayfalarda görüntülenmeyebilir. Template hazırlama işlemi tamamlandı.
• Artık sitede hazırlanacak sayfalara bu template uygulanmalıdır.
• Bunu yapmak için yeni html sayfası açılır. Assets paneli kullanılır. Panel görünmüyorsa window menüsünden görünür hale getirilir. Asset panelinden Templates seçeneği seçildikten sonra panelde site için tanımlı template’ler görüntülenir. Buradan template sağ tıklanarak apply seçeneği seçilir.

Artık istediğiniz her sayfaya bu temayı ekleyebilirsiniz. Editable region (değiştirilebilir alan) seçeneğini kullandığınız bölümleri değiştirebilirsiniz. Diğer alanları değiştiremessiniz



Alıntıdr......

[RoHaN]

bu diğerinden daha geniş olmuş. tşk.ler