Dreamweaver ile Template (Site) Yapımı (Resimli Anlatım)
Bu yazıyı okumadan önce [Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ] önizlemesini göreceğiniz sitenin tasarımını [Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ] inceleyebilirsiniz. Bu yazıda dreamweaver kullanarak site tasarlamak, daha doğrusu site için template hazırlamak anlatılmıştır. Örnek olarak bu sitenin teması hazırlanacaktır.
Dreamweaver ile Template Oluştururken Hangi Dosya ve Klasörleri Oluşturmalıyım :
Dreamweaver template uygulamaları için template isimli bir klasör zaten oluşturur. Bunun yanında kullanılacak resimler için resimler (images) isimli bir klasör ve biçimlendirmelerde kullanılacak css sayfaları için sitil isimli bir klasör.
Siteyi Oluşturmadan Önce Gerekli Resimlerin Toplanması :
Siteyi oluşturmaya başlamadan önce tasarımın nasıl olacağı planlanmalı ve gerekli resimler toplanmalıdır. Örnekte bu site yapılacaktır. Bu sitenin yapımı için gerekli resimlerin listesi aşağıda verilmiştir.
[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]
Resim 1 : Ana Sayfa, Hakkında gibi menülerin olduğu menü çubuğu.
Resim 2 : Site başlığının yazılı olduğu siyah zemin.
Resim 3 : Fare ile menülerin üzerine gelince menünün alacağı şekil.
Resim 4 : Sitenin sol ve sağ tarafında bulunan mavi resimler.
Resim 5 : Sitenin sağ ve solunda bulunan mavi resimlerin yanlarındaki gri resimler.
Eğer bir siteden beğendiğiniz bir grafiği almak isterseniz; klavyeden PrtScn tuşu ile ekran hafızaya alın. Photoshop veya benzeri bir programla crop kullanarak istediğiniz bölgeyi alabilirsiniz.
Grafikler hazırlanırken dikkat edilmesi gereken nokta, mesela yatay olarak döşenecek resmin genişilği 1 piksel, dikey olarak döşenecek resmin yüksekliği 1 piksel olmalıdır. Resim arkaplan olacağı için kendisi zaten istenilen bölgede sürekli tekrarlayarak (repeat) döşenecektir.
Mesela yukarıdaki grafiklerden resim1, resim2 ve resim 3 için genişlik (width) değeri 1, resim4 ve resim5 için yükseklik (height) değeri 1 olarak ayarlanmalıdır. Phtoshop’ta bu işlem “image” menüsünden “image size” seçeneği ile yapılır. Pencerede width veya height değeri 1 yapılmalı ve ”Constrain Proportions” seçeneğindeki işaret kaldırılarak en boy oranı korunarak boyutlandırma iptal edilmelidir.
Siteyi oluşturmak için masaüstüne sitedefteri isimli bir klasör oluşturun ve bu klasörün içerisine resimler isimli bir klasör oluşturup oluşturduğunuz resimleri buraya kaydedin.
Dreamweaver ile Yeni Site Oluşturmak :
Öncelikle yeni bir site tanımlanmalıdır.
- Site menüsünden new site seçeneği seçilir.
- Gelen pencereden “Unnamed Site 1″ yazan bölüme sitem (herşey olabilir) yazın ve next seçilir.
- Sonraki ekranda server teknolojisi kullanılıp kullanılmayacağı soruluyor. No ile başlayan seçeneği seçerek server kullanılmayacağınızı belirtin ve next tuşu ile ilerleyin.
- Sonraki pencerede uzun olan ilk seçenek seçili olsun alt taraftanda dosya simgesini tıklayarak masaüstündeki sitedefteri klasörünün içerisini gösterip kaydet düğmesini tıklayın ve next ile ilerleyin.
- Sonraki pencerede server bağlantısının nasıl yapılacağı soruluyor. None seçeneğini seçip next tuşuna basın.
- Son pencere karşınıza gelecektir. Done seçeneğini seçin.
Dreamweaver ile Yeni Template Oluşturmak :
Common menü gurubundan “make template” seçeneğini seçerek
[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]
Karşımıza gelecek pencereden site bölümünden sitemizin adını (sitem) seçeriz. save as bölümünden kaydedilecek template ismi seçilir. Description bölümüne açıklama yazılır.
[Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ]
Ok düğmesi tıklandığı zaman anatema.dwt isimli template sayfası oluşmuş olacaktır.
Dreamweaver ile Template Tasarlamak :
Artık anatema.dwt isimli sayfada template oluşturulabilir. Oluşturulacak template içerisinde tablolar kullanılacaktır.
Tabloları kullanarak template oluşturma konusunu [Üyeler Mesaj Yazmandan Misafirlerde Kayıt Olmadan Link GöremezlerKayıt İçin Tıklayın ! ] anlatılmıştır.
Alıntıdır :1:
