Dreamweaver'da Basit bir Site Oluşturmak - 3 (Sayfamızın genel görünümünü belirlemek)

Dreamweaver'da Basit bir site oluşturmak yazılarımın ilk ikisinde yaptığımız işlemler sayesinde sayfamızın iskelet yapısını oluşturduk. Bundan sonra yapıcağımız işlem sayfamızın genel görünümü için küçük ayarları yapmak olacaktır.



 Ne gibi ayarlar;

• Sayfamızın arkaplan rengi şuan tablonun bulunduğu alanın dışı tamamen beyaz rengi değişirip biraz daha farklı bir renk seçeceğiz.
• Sayfamızdaki fontların genel olarak hangileri olacağını belirticeğiz şuanda yazdığımız her yazıyı Times new roman fontu ile görüyoruz. Ancak unutmamız gerekiyor ki bu fontu bize times new roman gösteriliyor yani olağan font bizim bilgisayarımızda bu eğer kullanıcımız olağan fontunu geğiştirdiyse fontu çok farklı görebilir.
• Sayfamızdaki linklerin renklerinin ne olacağını seçeceğiz
• Sayfamızdaki Başlıkların büyüklüklerinin ne olacağını seçeceğiz.

Peki öyleyse işimize başlayalım esasında işlem oldukca basit her ne kadar çok doğru bir yol olmasada properties panelinde bulunan Kocaman bir düğmemiz var ve üzerinde Page Properties yazmak ta

Page Properties

Not: Page Properties düğmesinin gözükmesi için properties panelinin sağ alt tarafındaki minik okun yukarı bakması gerekmekte


Page Properties düğmesine tıkadığımızda sayfamızın genel görünümü ile ilgili değişiklikleri yapabileceğiniz bir pencere açılır. Şimdi bu pencereye biraz daha yakından bakalım.

Page Properties Apperance (css)

Page properties penceresi 6 ayrı kategoriye ayrılır.
1. Apperance Css: Sayfamızın genel görünümünü css ile söylemek için kullandığımı bölüm
2. Apperrance HTML: sayfamızın genel görünümünü HML ile söylemek için kullandığımız bölüm (bu bölüm Dreamweaver cs4 ile beraber gelmiş cs3 kullanıcıları apperance adında tek bir bölüm görürler.)
3. Links: Sayfamızdaki linklerin ne şekilde görüneceğini belirtiğimiz bölüm
4. Headings: Sayfamızdaki başlık yazılarının ne şekilde görüneceğini belirtiğimiz bölüm
5. Title / Encoding: Sayfamızın title'inı ve karakter kodlamasını düzenlediğimiz bölüm (Karakter kodlaması doğru yapılmamış bir sayfada türkçe karakterler kullanılamaz. Yani bazı sitelerde ş lerin ü lerin düzgün gözükmediğini görürsünüz işte o sayfaların karakter kodlaması doğru yapılmamıştır)
6. Tracing Image: Bana göre son derece gereksiz bir bölüm daha sonra anlatırım.

İlk bölümden başlayıp page properties penceresininden sayfamızın bazı özelliklerini değiştirelim.

Sayfamızda kullanılan fontları düzeltmek için font kutusundan kullanmak istediğimiz fontu seçeriz. Fakat bu da ne burda seçebileceğim tek bir font yok fontlar gruplar halinde;

Arial, Helvetica, sans-serif
Verdana, Geneva, sans-serif gibi

Peki ama neden bu şekilde olmasının çok mantıklı bir açıklaması var web sayfalarında yazılarımız kullanıcının bilgisayırındaki fontlar kullanılarak gösterilirler. Eğer kullanıcının bilgisayarında arial fontu yoksa Helvetica ile o da yoksa sans-serif ile göstermesi için fontlar gruplar halide yazılır bunlarada font family (font ailesi) denir. Font olarak verdana, geneva, sans-serif seçtim.

İstediğimiz font ailesini belirtikten sonra fontlarımızın büyüklüğünü belirtelim. web sayfarında normal yazılarda font büyüklüğü 12 ile 16 arasında olmalıdır. 12'nin altındaki yada 16'nin üzerindeki fontlar okumayı zorlaştırır. (Başlıklar yada dip notlar hariç) Font size olarak 14 pixel seçelim.

Yazılarımızın rengini text color kutusundan değiştirelim.

Background color kutusundan sayfamızın arka plan rengini değiştirelim.

Background image kullanmayacağımızdan background image kutusunu ve onun altındaki repeat kutusunu boş bırakalım. (Şimdilik)

Margins sayfamızın tarayıcının en tepesine yapışmadığını bilmiyorum fark ettiniz mi ancak tablomuzun sayfanın en tepesine yapışmaması bazen sorun yaratabilir eğer yapışmasını istiyorsanız. Margin Left, Right, Top, Bottom kutularının tamamına 0 değeri girmeniz gerekir girmediğiniz zaman sayfanız 10 pixel gibi bir değer içeri doğru ittirilir.

2. Bölüm olan Apperance HTML bölümünü atlıyorum. CS3 kullanıcıları bu ayarları zaten görmüyorlar.

3. Bölüm Links

Page Properties Links

Sayfamızdaki linklerin ne şekilde gözükmesini istiyorsak buradan ayarlayabiliriz.

Link Font: Sayfamızdaki linklerin hangi font ile gösterilmesini istiyorsak buradan seçeriz. Same as page font dediğimizde ilk bölümde sayfanın tamamında kullanmak için seçtiğimiz font burada da etkili olur farklı bir font seçmek istersek yine istediğimiz her hangi bir font ailesini seçebiliriz.
Size: Sayfamızadaki fontların büyüklüklerini buradan ayarlarız herhangi bir değer girmezsek sayfamızdaki diğer yazılar için seçtiğimiz font büyüklüğü buradada uygulanır.
Linklerimizin rengi: Linklerimizin rengi 4 ayrı renk olarak gösterilebilir.

• Link Color : Linklerin normalde ne renk olacakları
• Rollover Links: Linklerin mouse ile üzerine geldiğimizde ne renk olacakları
• Visited Links: Ziyaret edilmiş olan sayfaların linklerinin ne renk gözükeceği buna en iyi örnek Google'da arama yaptığımız zaman daha önceden baktığımıza sayfaların renkleri mor diğer sayfalar sa mavi olur çünkü mor olanlar ziyaret edilmiş sayfalardır.

Underline style: Linklerin alt çizgi durumu bir kaç tane seçeneğimiz var

• Always Underline: Linklerimizin altında her zaman alt çizgi olmasını istiyorsak Always Underline seçeneğini seçili bırakmalıyız.
• Never Underline: Linklerimizin altında hiç bir zaman çizgi olmasını istemiyorsak Never Underline seçeneğini seçmeliyiz.
• Show underline only on rollover: Mouse ile üzerine geldiğimizde alt çizgi çıkmasını istiyorsak bu seçeneği seçmeliyiz.
• Hide underline on rollover: Mouse ile üzerine geldiğimiz zaman alt çizgiyi göstermemesini istiyorsak bu seçeneği seçmeliyiz.

4. Bölüm Headings (Başlıklarımız)

Sayfamızda başlık olarak yazdığımız yazıların yani h1, h2, h3 gibi ne şekilde gözükmesini istiyorsak belirleye bileceğimiz alandır.

Page Properties Headings

Sayfamızdaki başlıkların fontunun ne olmasını istiyorsak Heading font alanından fontumuzu seçebiliriz yada istersek yine same as page font diyerek sayfamızda kullanmak için seçtiğimiz font ile yazmasını belirtebiliriz.

Heading 1 ilk kutuda fontun büyüklüğünü yanındaki diğer kutuda ise rengini seçeriz.

Heading 2 ikincil başlıktır. Yani heading 1 için bir alt başlık bununda büyüklüğünü ve rengini seçebiliriz.

Heading 3 üçüncül başlıktır, ve altıya kadar ilerler sayfamızın hiyerarşik yapısı için alt başıkları kullanmak önemlidir ve unutmamak gereken önemli şeylerden biri sayfamızdaki heading 1ler  sayfamızdaki diğer başlıklardan her zaman daha büyük olmalıdır. Yoksa sayfamızın hiyerarşik yapısı önemli ölçüde bozulur.

5. Bölüm Title / Encoding

Page Properties Title / Encoding

Buaradaki alanlar sayfamızın ne şekilde görüntüleceği ile ilgili olmaktan çok tarayıcılar tarafından ne şekilde okunacağı ve bize gösterileceği ile ilgilidir. Eğer sayfamızdaki kodları tarayıcılar düzgünce anlayamazlarsa bizlerede düzgünce gösteremezler. Bu yüzden buradaki ayarlar oldukça önemlidir.

Title Esasında sayfamızın title'ını daha sayfamızı kaydetmeden hemen yazmıştık zaten burada da orda yazdığımız o title gösteriliyor.

Onun hemen alında Document Type var sayfamız HTML ancak HTML'inde sürümleri var aynı Photoshop'da olduğu gibi hangi sürümünü kullandığımızı belirtmeliyiz ki tarayıcılarda sayfamızı bize gösterirken yazdığımız kodları ona göre yorumlasınlar 

Encoding: Sayfamızda kullanacağımız karakter kümesini seçtiğimiz alandır. Eğer karakter kümesi bu site için düzgün seçilmemiş olsaydı. Yazdığım yazıları okulmakta güçlük çekersiniz çünkü ü, ş, ğ, ö , ç, ı, İ gibi türkçe karakterler düzgün görüntülenemezlerdi.

Size bir sır vereyim Title / Encoding değerliyle hiç oynamazsanız hiç sorun yaşamazsınız. Çünkü Dreamweaver en uygun ayarları default olarak seçmiştir. :)