STİL (CSS) LERİ KULLANALIM

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.