Dreamweaver'da Basit bir Site Oluşturmak - 2

Web sitemizi oluşturmak için 4 satırlı tablomuzu oluşturduktan sonra yapmamız gereken ilk şey tablodaki hücrelerimizin özelliklerini düzenlemek bunun için kullanabileceğimiz 2 yol var.

1. Properties Paneli
2. Css yani stil kuralları

Çok basit bir site oluşturacağımızdan bu seferlik properties panelini kullanacağız ancak şunu belirtmek isterim ki doğru olan yol bu değildir. Çok yanlış yada çok hatalı bir yol olmasada sayfamızın tüm görünüm özelliklerini belirtmek için size tavsiyem cssleri kullanmanız olacaktır. Bu yazımda css'lerden biraz olsun bahsedeceğim ancak tabloların genel özelliklerini belirtmek için şimdilik properties panelini kullanacağız.

Elimizde hiçte siteye benzemeyen alt alta 4 satır kolları sıvayalım ve bunu bir siteye dönüştürelim.

4 satırlı tablom birazdan web sayfası olacak

1. Hücremin içine logomu varsa sloganımı yerleştireceğim bu alanın daha yüksekliğini artırmam ve arka planına bir renk vermem gerekiyor.
2. Hücremin içine menumu koyacağım yan yana yazılmış birkaç yazı olacak ancak bunların daha düzgün durması için belki 2. hücrenin içine başka bir tablo daha koymam gerekebilir.
3. Hücremin içerisinde sayfamın içeriği her alacak. Hücrenin yüksekliğinin değişmesi ve gerekirse bir arka plan rengi uygulamak gerekebilir.
4. Hücremde ise copright bilgisi ve eğer istenirse telefon ve adres bilgisi gibi iletişim bilgileri yer alacak. Hücrenin yüksekliği bu alan için bile oldukça düşük aynı şekilde yine arka plan renginin değişmesi gerekmekte.

Tamam buraya kadarını zaten tahmin etmiştiniz olay bu söylediklerimizi nasıl yapacağız. İlk olarak Properties panelimizin açık olduğundan emin olmamız gerekmekte

Dreamweaver Properties Paneli

Dreamweaver properties paneli sayfamızın görüntülendiği alanın üzerinde yada altında yer alır eğer açık değilse Menu'den Window > Properties seçmeliyiz.

Properties panelini bulduktan sonra ilk yapacağımız tablomuzun tamamını sayfamıza ortalamak olacak bunun için tablomuzu seçili hale getirip, Align'dan center dememiz yeterlidir.

Design bölümünden hücrelerden birinin içine tıkladıktan sonra design panelinin hemen altındaki etiket seçici  bölümden table yazan yere tıklamaktır. Böylece tablomuz seçili hale gelir ve properties panelinden tüm özelilklerini görebilir istediklerimi de değiştirebilirim.

Etiket Seçici

Tablom seçili hale geldikten sonra properties panelinde gözüken özelliklerimize bir göz atalım.

Tablonun Özellikleri

Tablomuzun Özellikleri
Rows: Satır Sayımız 4 olarak gösteriliyor
Cols: Sütün sayımız 1 olarak gösteriliyor
W: Tablomuzun genişliği
W kutusunun hemen yanında genişlik ölçüsünün ölçü birimini seçebileceğimiz bölüm yer almaktadır. Şuan için pixels seçili
CellPad: Hücre ve içindekiler arasındaki boşluk
CellSpace: Hücreler arasındaki boşluk
Align: Tablomuzu hizalamak için şimdi kullanacağımız özellik bu olacak tablomuzun sayfamızın tam ortasına yerleşmesini istediğimizden Default olan değeri CENTER olarak değiştirelim ve tablomuz sayfamızın tam ortasına yerleşsin.
Border: Tablomuzun kenar çizgilerinin kalınlığı tablomuzda kenar çizgisi istemediğimizden bu değer 0 olarak girilmiş.

Tablomuzu sayfamıza ortaladığımıza göre şimdi yapmamız gereken hücrelerimizin özelliklerini düzeltmek olacak. Hücrelerimizin özelliklerini düzenlemek için yapmamız gereken hangi hücremizin özelliğini değiştireceksek onu seçili hale getirmek olacaktır. Böylece properties panelinde o hücrenin özelliklerini görüp değiştirebileceğiz.

İlk olarak 1. satırımızın içine tıklayalım ve

Hücrenin Özellikleri

Hücremizin özelliklerini görebilmek için properties panelinin sağ alt köşesindeki minik üçgenin resimdeki gibi yukarı bakması gerekmektedir.

Bundan emin olduktan sonra;
W: Hücremizin genişliğini belirteceğimiz alan ancak hücremizin genişliğinin tablonun genişliği kadar olacağı için bu kutunun içine bir değer girmesekte olur. Eğer girmek istersek girmemiz gereken değer tablomuzun genişliği olan 900 olacaktır.
H: Hücremizin yüksekliği belirleyeceğimiz alan bu bölüme üst kısmın yüksekliği kaç olsun istiyorsak o değeri girmemiz gerekmektedir. Biz şimdilik 200 değerini girelim hücremizin yüksekliği 200 olsun daha farklı bir değer girersenizde her hangi bir sorun çıkmayacaktır.
Bg: Hücremizin arka plan rengini belirteceğimiz alan sayfamızın üst bölümünün ne renkk olmasını istiyorsak minik kutuya bastıktan sonra istediğimiz rengi seçebiliriz. Seçtiğimiz rengin RGB koddu hemen yanındaki kutuya otomatik olarak yazılacaktır.

Not: RGB renk kodları #1289ff gibi olur başındaki diyez "#" bunun rgb renk kodu olduğunu belirtir. İlk iki sayı R Yani kırmızı için, ikinci iki sayı G yani yeşil için, üçüncü iki sayı B yani mavi'nin kodu şimdi şöyle bir soru sorabilirsiniz sondakiler sayı değil. Renk kodlarını belirtmek için 1'den 16 'ya kadar sayıları kullanıyoruz ancak 11 yazdığımızda iki tane bir mi yazıyoruz yoksa onbir mi yazıyoruz pek açıklayıcı olmaz ancak onun yerine 0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f yani a = 10, b = 11, c = 12 gibi gider.


Bg yanındaki kutudan istediğimiz her hangi bir rengi seçip sayfamızdaki değişikliğe bir bakalım.

Header

Sayfamızın en üst bölümüne genelde header adı verilir ve şuan sayfamızın header bölümünü oluşturmuş olduk Bundan bir sonraki adımımız sayfamızın menulerini yerleştireceğimiz nav diye isimlendirilen bölümünü oluşturmak.

Yapıcağımız işlemler yine aynı bu sefer 2. satıra tıklayıp properties panelinden

W: Yani genişliğimizi 900 pixel

H: Yani yüksekliğimizi 40 pixel

Bg: Yani arkaplan rengimizi yine renk kutusundan canımızın istediği herhangi renk olarak seçeriz

Nav bölümünüde oluşturduktan sonra sayfamız biraz şekil almaya başladı.

Header - Nav

Son iki bölümüzü de oluşturduktan sonra sayfamız en azından ana hatları ile ortaya çıkmış olacak. İçeriği yerleştireceğimiz bölüme genelde verdiğimiz isim content olur ve sayfadaki en büyük alanı kaplar ve alt bölüm genelde footer olarak isimlendirilir ve içine copyright bilgisi yerleştirilir. Şimdi Content olarak adlandırılan bölümümüzü oluşturmaya başlayalım.

3. satırımızın içine tıklayıp properties panelinden 

W: 900

H: 600

Bg: Yine canımızın istediği her hangi bir renk

4. satırımızın içine tıklayıp properties panelinden

W: 900

H: 50 

Bg: Yine canımızın istediği her hangi bir renk

Bütün bu işlemleri uyguladıktan sonra sayfamız ortaya çıktı bile sonuç olarak resimdekine benzer bir sayfaya sahip olacağız.

Sitemiz

Bundan sonra yapacağımız işlem menu alanımız için oluşturduğumuz 2. satırımızın içine yeni bir tablo daha yerleştirmek olacaktır. Bunun için yapmamız gereken 2. satırımızın içine tıkladıktan sonra insert panelinden table'a tıklayıp buraya tek satırlık ve 4 sütünlük bir tablo yerleştirmek olacaktır.

Hemen yapalım ve ana sayfamızı tamamlayalım ancak bundan önce sayfamızı kaydetmeyi unutmayalım unutmayın sayfamızın isminin yazdığı yerin hemen yanında eğer küçük bir yıldız görüyorsanız. Sayfamızı kaydetmek olacaktır bunun için tek yapmamız gereken PCler için CNTR+C, Macler için Elma+C yapmak.

Öyleyse şimdi 2. hücremizin içine tıklayalım ve insert panelinden table tuşuna tıklayalım.

Tablo içine tablo eklemek

Her hangibir tablonun içine başka bir tablo eklemek oldukca basit bir işlemdir. Yapmamız gereken ilk şey tabloyu koymak istediğimiz hücreye tıklamak ve daha sonra insert panelinden common sekmesindeki table tuşuna tıklamak ve açılan pencereden tablomuzun özelliklerini belirtmek olduki tablomuzun özelliklerini belirtirken yanlış bir işlem yaptık tek yapmamız gerek tabloyu seçip properties panelinden özelliklerini değiştirmektir. 

Şimdi ekleyeceğimiz tabloda 1 satıra ve 4 sütüna ihtiyacamız var çünkü yanyana menumü dizeceğim.

• Ana sayfa
• Hakkımızda
• Ürünler
• İletişim

Her bir hücrenin içine bir menu elemanını yerleştireceğiz. Bu sebepten yanyana dizilmiş bir menu istediğimizden 1 satır 4 menu elemanımız olduğundan 4 sütün bizim için yeterli olacaktır. Tablomuzu oluşturduktan sonra her hücremizin içine tıklayıp sırasıyla Ana sayfa, Hakkımızda, Ürünler, İletişim yazılarını yazalım.

Bu işlemide gerçekleştirdikten sonra sayfamız ortaya çıkmaya başladı bundan sonra sayfamıza bir tarayıcının içinden bakalım  ve internette ne biçimde gözükeceğini görelim. Bunun için yapmamız gereken sadece 

Preview in Browser

Design kısmının hemen üzerindeki Preview in Browser Tuşuna tıkladıktan sonra hangi tarayıcının içinden görüntülemek istediğinizi seçmektir. Yada sadece F12 tuşuna basabiliriz.

Sayfalarımızı birbirine bağlamak için linkleme yapmayı menu elemanlarımızı düzenlemeyi ve sayfalarımızı çoğaltmayı bundan sonraki yazılarımda anlatacağım.