Macromedia Dreamweaver`da Sayfa Tasarımı

Macromedia Dreamweaver`ın şu andaki en iyi web tasarım aracı olmasının sebebi gelişmiş sayfa tasarım ve programlama araçlarıdır. Bu araçlar ile dakikalar içinde web sayfası oluşturabilirsiniz.

Properties Ekranı:
Macromedia Dreamweaver`da yaptığınız herşeyin ayarı için bu pencere kullanılacaktır. Bu pencere açık değil ise Window menüsünden Properties komutu ile veya CTRL+F3 tuş kombinasyonu ile açılabilir.



Yazı Yazma:
Dreamweaver`da sayfaya yazı yazma gibi olaylar çok basit olduğundan üzerinde fazla durmaya gerek yok. Bir kelime işlem programında yazı yazar gibi yazı yazıp biçimlendirebilirsiniz. Biçimlendirmeler sırasında çoğunlukla Properties kısmı işinize yarayacaktır. Bu bölümden yazı tipini, boyutunu, rengini, hizalamasını vs. seçebilirsiniz.

Sayfaya Grafik Ekleme:
Dreamweaver`da sayfaya grafik eklemek için Insert menüsünden Image`ı seçin, daha sonra açılacak dialog kutusundan eklemek istediğiniz grafiği seçin ve Select butonuna tıklayın. Bunun sonucunda sayfanıza grafik eklenecektir.

Sayfaya Tablo Eklemek, Tabloları Düzenlemek:
Web tasarımında sayfa düzeni için tablolar (table) kaçınılmazdır. Bundan dolayıda sayfaya tablo eklemeyi ve düzenlemeyi iyi bilmek gerekir. Aksi halde yamuk şekilli bir sayfa tasarımına sahip olmak işten bile değildir.

Sayfanıza tablo eklemek için Insert Menüsünden Table komutunu seçebilir veya Ctrl+Alt+T tuş kombinasyonunu uygulayabilirsiniz. Bu işlem sonucunda karşınıza bir dialog kutusu gelecektir.



Karşınıza gelen dialog kutusunda ekleyeceğiniz tablo için belirli özellikleri belirleyebilirsiniz.

Rows: Tablo için satır sayısını belirler.
Columns: Tablo için sütun sayısını belirler.
Cell Padding: Tablo hücreleri içindeki oluşturulacak boşluğu belirler.
Cell Spacing: Tablo hücreleri arasında oluşturulacak boşluğu belirler.
Width: Tablo için en boyutunu piksel ve yüzde olarak ayarlamanızı sağlar.

Tablonuzun ve tablonuzdaki hücrelerin ayarlarını daha sonra Properties kısmını kullanarak yapabileceğiniz gibi Modify menüsündeki Table menüsündeki komutlar ile de yapabilirsiniz. Bu yapabileceğiniz ayarlamalar arasında genel ayarlar haricinde yeni satır/sütun ekle gibi seçeneklerde bulunmaktadır.


Layer`lar ve Sayfaya Layer Eklemek:
Layer (katman) nesneleri ile bir sayfa üzerinde bağımsız tasarımlar yapabilirsiniz.. Mesela interaktif menülerde ve bazı grafiklerde layerlar kullanarak tablo düzenini değiştirmeden tasarım yapabilirsiniz.. Layerlar sayfa üzerinde katman olarak bulunur ve bundan dolayı alttaki grafik, tablo vs. vs. ile bağımsız biçimlendirilir.. Macromedia Dreamweaver ile layerları kolayca ekleyebilir ve düzenleyebilirsiniz...

Layer eklemek için Insert menüsünden Layer komutunu verin, daha sonra sayfa üzerinde layerı belirten bir seçim alanı oluşacaktır. Bu seçim alanının boyutunu ayarlamak için “Properties” ekranını kullanabileceğiniz gibi layerın seçim kutucuklarını mouse ile sürükleyerekte boyut ayarı yapabilirsiniz. Diğer renk, layer tipi gibi ayarları ise Properties ekranından yapabilirsiniz.


Sayfaya Frame (Çerçeve) Eklemek:
Frame yani çerçeveler doğru kullanıldığı taktirde çok güzel tasarımlar oluşturmanıza yardımcı olacaktır. Mesela menüsü çok geniş bir site yaparken frame kullanarak her sayfada menüyü yüklettirmekten ve hazırlamaktan kurtulursunuz. Dreamweaver`da frameler kolayca ayarlanabiliyor.. Bunun için Insert menüsünden Frames kısmına gelin ve eklemek istediğiniz frame için yön seçin (Sağ, Sol, Aşağı, Yukarı), bundan sonra sayfanıza frame eklenecektir. Frame ayarlarını yapmak için Properties penceresi kullanılacaktır ve ayrıca kolaylık sağlaması ve framelere isim verilebilmesi için Frames ekranı açılmalıdır.. Bunu Window menüsünden Frames komutu ile yapabileceğiniz gibi Shift + F2 tuş kombinasyonu ilede yapabilirsiniz. Frames penceresi aşağıdaki gibidir:



Bu pencere yardımı ile istediğiniz frame`i seçerek bu frame için özellikleri Properties yardımı ile ayarlayabilirsiniz.. Mesela frame ismi, frame boyutları, frame kenarlığı ayarlayabileceğiniz özelliklerden bazıları...

Siteniz için Form ve Form Öğeleri Eklemek:
Siteniz için herhangi bir feedback (geriye dönüş) veya iletişim formu gibi bir form yapmak isterseniz Dreamweaver`ın kolaylığından yararlanabilirsiniz. Form alanı eklemek için Insert menüsünden Form komutunu seçmeniz yeterli fakat bir form için sadece form alanı yetmeyecektir. Ziyaretçinin kullanımı için form öğeleride gerekmektedir. Bu form öğeleri, textbox (yazı kutusu), radio box (radyo kutusu), check box (işaret kutusu) vs. dir.. Bu öğeleri eklemek için Insert menüsünden Form Objects menüsüne girip buradan istediğiniz öğenin adını seçebilirsiniz fakat form öğeleri eklemeyi hızlaştıracak bir başka yol daha bulunuyor. Bu yol ile Objects penceresini kullanarak kolayca form öğeleri ekleyebilirsiniz.

Window menüsünden Objects komutunu vererek veya CTRL+F2 tuş kombinasyonunu kullanarak yanda görünen Objects penceresini açabilirsiniz. Fakat bu pencereyi ilk açtığınızda “Common” yani ortak öğeleri gösterecektir. Bundan dolayı bizim işimize yarayacak olan ve form öğelerinin bulunduğu “Forms” kısmına geçmeniz gerekir..

Bunun için Objects penceresinin üst kısmında yer alan ve yanında aşağı doğru küçük bir ok bulunan yere tıklayın ve karşınıza gelecek olan menüden Forms`u seçin. Bundan sonra Objects penceresinin içi yanda görüldüğü gibi olacaktır.

Bu kısımdan sonra Objects penceresinde bulunan ikonlar yardımı ile form öğelerini ekleyebilirsiniz. Her form öğesinin ismi ikonun üzerinde mouse ile bekleyince karşınıza gelecektir. Ayrıca Objects penceresindeki Forms kısmı daha sonra Macromedia Exchangeden temin edilebilecek eklentiler ile genişletilebilir..