Dreamweaver İle Stil (CSS) Kullanalım - Geniş Kapsamlı Doküman ve Makale Sitesi

Eğitim serimize yeni derslerle devam ediyoruz. Birçok okuyucumuz tarafından ilgiyle takip edilen DreamWeaver Dersleri 8. bölüm ile karşınızdayız.
Hatırlanacağı üzere; geçtiğimiz bölümde sitemizi yapmaya başlamıştık. Bu bölümde ise CSS kullanımı inceleyeceğiz.

STİL (CSS) LERİ KULLANALIM

Dreamweaver Mx te stilleri kullanmak gerçekten çok kolaydır. Stiller ile yazı fontlarını ve butonların görünümlerini değiştirerek hoş görüntüler elde edebiliriz. Stilleri kullanmak için window > CSS styles penceresini aktif hale getirmeliyiz. Bu penceredeki özellikler;

Attach style sheet: Diskten bir stil dosyası ekler
New css style: Yeni bir stil oluşturur
edit style sheet: Mevcut stili düzenler
Delete CSS style: Mevcut stili siler

Şimdi ise örnek olarak bir stil oluşturalım. CSS styles penceresinden New CSS style seçelim.

Tag : CSS stilin adı
Type : Burada ilk kutucuğu seçiyoruz
Define In: Stil dosyasının adı
This document only: Stilin sadece mevcut sayfada kullanılmasını sağlar.Ayrı bir dosya oluşturmaz.

Bazı özellikler dreamweaver da gözükmezler.Ancak browserda görebiliriz. Bunlar * ile gösterilmiştir. Ayrıca gene bazı özellikleri tüm browserler desteklemiyor.

Type (Tipi)

Font : Yazı fontu
Size : Yazı büyüklüğü (piksel, cm, mm...)
Style : Yazı stili (Yatık veya normal)
Line height: Satır yüksekliği
Weight: Yazı fontun kalınlığı
Variant: Yazı biçimi *
Case: uppercase=tüm harfler büyük, lowercase=tüm harfler küçük, capitalizes=kelimelerin ilk harfleri büyük
Color: Yazı font rengi
Decoration: Yazı şekli (underline=altçizgili...)

Background (Arkaplan)

Background color: Arkaplan rengi
Background image: Arkaplan resmi
Attachment: Arkaplan resmini fixed=sabitler, scroll=kaydırır
Horizontal position: Arkaplan resmini sağ-sol ayarı yapar. Attachment den fixed seçilmişse kullanılamaz.
Vertical position: Arkaplan resmini yukarı-aşağı ayarı yapar.Attachment den fixed seçilmişse kullanılamaz.

Block (Boşluklar ve hizalamalar)

Word spacing : Kelimeler arası boşluk *
Letter spacing : Harfler veya karakterler arası boşluk *
Vertical alignment : tablo, resim gibi elemanların hizalanması
Text align: Yazıların hizalanması
Text indent: Paragrafın girinti miktarı
Whitespace: Buradaki pre seçeneği metni yazıldığı şekilde görüntülemeyi sağlar. Bir kod satırı yazacaksak kullanabiliriz. *
Display: Stilin etkileyeceği elementi belirler.

Box (kutular)

Width and height: Genişlik ve yükseklik
Float: Tüm elementleri; yazıları, tabloları, vb. sağa veya sola yanaştırır.
Clear: Float ile beraber kullanılır. Float=right ise Clear=right olmalı
Padding ve Margin: Elementlerin köşelerinden olan uzaklığı .Same for all seçeneği ile tüm köşelerin hepsine ayarları uygular.

Border (Kenarlar)

Style: Kenar stilleri. Normalde görülen tüm kenarlar solid şeklindedir.
Width: Kenar kalınlığı
Color: Kenar renkleri

List (Listeler)

Type: Liste simgesi. Burada numara, daire, kare gibi şekiller kullanılabilir.
Bullet image: Liste simgesi için diskten dosya belirlemeyi sağlar.
Position: Liste pozisyonu. Girintili veya girintisiz.

Positioning (Blok yazıları katmana çevirirek yerleştirirme)

Type: Tip iptali için kutucuğu silin. Genişlik ve yükseklik ayarını weight-height kutucuklarından yapın.
Absolute: Yazı katmanlarını sayfanın sol-üst köşesine oranlar.
Relative: Yazı katmanlarını orjinal pozisyonlarına göre oranlar.*
Static: Yazı katmanlarını sabitler.
Visibility: Görüş netliği. Browserlar için en iyi ayar inherit dir.
Visible: Görünür
Hidden: Gizler
Z-index: Katmanların yığılma sırası. Pozitif veya negatif sayılar kullanılabilir.Büyük sayılar küçük sayıların üstünde gözükür.
Overflow: Katman içeriği gereğinden fazla olma durumunu kontrol eder.
Visible: Fazla olan kısmı gösterir.
Hidden: Fazla olan kısmı göstermez.
Scroll: Kaydırma çubuğu oluşturur.*
Placement: Katmanların yerini ve büyüklüğünü ayarlar.
Clip: Katmanların görünebilir kısmını ayarlar.

Extensions (Filtreler, sayfa araları, mouse işaretçileri)

Pagebreaks: Sayfa araları
cursor: Linklerde ve resimlerde farenin simgesi ayarlanabilir.
Filters: Objelere uygulanan efektler.

BEHAVIOUR (HAREKETLER) I KULLANALIM

Behaviour lar Dreamweaver'de kullanılan hazır scriptlerdir. Bunlar; status bara yazı yazdırma, popup pencere açma, müzik çaldırma gibi şeylerdir. Behaviourları kullanmak için Window > Behaviours penceresini aktif hale getirin. Bir behaviour kullanmak için + simgesine tıklayarak uygun hareketi seçebiliriz.Burada kullanılan bazı hareketler;
Goto url Adrese yönlendirir.
Open browser window Yeni bir pencere açar
Play sound Ses dosyası çalar.
Popup message Popup mesaj yazdırır.
Set text of status bar Status bara yazı yazdırır.

Hareket ekledikten sonra Events sekmesinde hareketin hangi olay sonunda oluşmasını belirleriz. Buradaki olaylardan bazıları;
OnClick Mouse tıklaması ile
OnDblClick Mouse çift tıklaması ile
OnMouseOver Mouse üzerine geldiğinde
OnMouseOut Mouse üzerinde olmadığında

Behaviourları kullanırken kullanılacak alana "#" linkini vermeliyiz. Yani örneğin aşağıdaki popup pencere açmak için önce "popup pencere örneği" yazısını seçili yaptık sonra "#" linkini verdik. Sonra da popup message hareketini kullandık.

Bu makalenin yazar yada kaynağını bildirmek için tıklayınız.

Kullanıcı Yorumları

İlgili Dökümanlar