Web Tasarım ve Programlama Sitesi

Eğer cms sistem kullanmadan bir web sitesi hazırlamak istiyorsanız dreamweaver ile uzak sunucuda(remote server) site tanımlamanız gerekebilir. DW ile uzak sunucuda site tanımlama işlemi aşağıda resimli olarak anlatılmıştır.

İlk olarak site menüsünden new site… seçeneğini seçin.

Yukarıdaki şekilde 1 bölmünde yeni tanımlanacak site için herhangi bir isim yazılır. Örnekte yeni site abc olarak isimlendirilmiştir.

2 bölümünde ise site Tamamını Oku »

Bu yazıda css ile sitede birden fazla link biçimlendirmesi kullanma işlemi anlatılacaktır.

Not : Dreamweaver ile çalışırken yeni site tanımlamayı unutmayın.

• Yeni CSS oluşturmak için; CSS penceresinden CSS Styles sekmesinden All seçeneği seçili iken pencerenin alt tarafından new css rule seçeneğini seçin.

• New CSS Rule penceresi açılacaktır. Tamamını Oku »

Bu yazıda tasarımı anlatılacak sitenin önizlemesini buradan görebilirsiniz. Tasarımda yüzdelik(%) değerler kullanıldığı için tarayıcı tam ekran değilken orta kısım alt tarafa kayacaktır.

Örnek site dreamweaver kullanılarak oluşturulmuştur. Bu sitenin bir sonraki aşaması da siteyi template haline getirmek fakat onuda yaparsam anlatımı çok zor olacağı için siteyi template haline getimedim. Bu yazıda tasarımı template’e çevirme anlatılmıştır.

Uygulamaya geçmeden önce Dreamweaver ile css uygulamalarını kategorilere göre anlatan yazıları okumanızı tavsiye ederim. Sağdaki menüden CSS kategorisini incelerseniz css oluşturma ile ilgili bilgileri bulabilirsiniz.

Sitenin Bölümlerini Oluşturmak :

Yukarıdaki şekilde bölümler 1, 2, 3 ve 4 olarak isimlendirilmiştir. 1 üst bölümdür ve 3′ü (logo bölümünü)  içinde barındırır. 2 alt bölümdür ve 4′ü (içerik bölümünü) içinde barındırır.

Site için harici bir css oluşturun ve bütün css biçimlendirmelerini oradan çağırın.

1 Bölümü (Üst Bölüm) :

#ust olarak tanımlanmıştır. # işareti id selector’ü ifade eder. Bunun anlamı bu biçimlendirmenin sadece bir defa kullanılacağıdır. Dreamweaver ile oluşturulurken advanced seçilir ve name bölümüne #ust yazılır.   

Bu alanın css kodları aşağıda açıklamalı olarak verilmiştir.

#ust {
 background-color: #B6B4B5;  /* Zemin rengi*/
 width: 100%; /*Alan genişliğinin içinde bulunduğu alanın genişliğine oranı. Bu alan hiçbir
                          alanın içinde olmadığı genişiği sayfa genişliği ile aynı olur.                  
 height: 160px;  /*Yükeskliği 16 pixel*/
 border-bottom-width: thin; /*Alanın alt tarafına(bottom)  thin(ince) genişiğinde(width)
                                                 kenarlık(border) ekler.  */
 border-bottom-style: solid;  /*Alt tarafa eklencek çizginin sitili. solid (düz çizgi)*/
 border-bottom-color: #E1E1E1; /*Alt tarafa eklenecek çizginin rengi*/
}

2 Bölümü (Alt Bölüm) : Tamamını Oku »

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)  Tamamını Oku »

Bu yazıyı okumadan önce bu linkten önizlemesini göreceğiniz sitenin tasarımını buradan 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.

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. Tamamını Oku »

Web sayfasında taşınabilir alanlar oluşturmak için layer kullanılmalıdır.

Layout menü gurubundan “Draw Layer” seçeneği seçilerek sayfaya layer eklenir. Layer içerine istenilen eklemeler yapılır.

Eklenen bu layer a taşınabilirlik özelliği verilmelidir. Yani alan taşıma işlemi aslında layer(katman) taşıma işlemidir.

Bunu yapmak için code seçilerek sayfa kodları görüntülenir. Sayfa kodlarından <body></body> arası fare yardımı ile seçilir ve “Tag inspector” panelinden + seçeneği altından “Drag Layer” seçeneği seçilir.

Bu pencerede layer bölümenden ziyeretçi tarafından taşınması istenen layer seçilir. Movement bölümenden taşınacak layer için sınır olup olmayacağı belirlenir. Eğer Unconstrained seçeneği seçilirse kullanıcı layer ı istediği konuma taşıyabilir. Eğer constrained seçeneği seçilirse kullanıcı belirtilen konumlar arasında layer ı taşıyabilir.

up (yukarı) : layer taşınmasında üst taraftaki sınır.

down (aşağı), left (sol), right (sağ) layer taşımasında alt, sol ve sağ taraftaki sınırlar.

Dreamweaver ile açılır menü yapmak için öncelikle ana menü için buton hazırlanmalıdır. Photoshop ile buton hazırlama işlemi Photoshop Kullanarak Buton ve Menü Hazırlamak yazısında resimli olarak açıklanmıştır. Örnek olarak aşağıdaki buton oluşturulmuştur.

Photoshop ile oluşturulan buton Tamamını Oku »