Dreamweaver'da Bilinen Web Özellikleri Nelerdir?

Tekrar merhaba sevgili okurlarım,

Sıradaki yazımda web tasarım ile uğraşan arkadaşlarımıza yönelik faydalı bir makale yazacağım. Çoğu web tasarımcının buna tabii ki bende dahil olmak üzere Adobe Dreamweaver kullanıyoruz.

Biz web tasarımcılar için hız ve kısayol önemlidir. Bunların yanı sırada dreamweaver’da bulunan ve bilinen web özelliklerini de bilmemiz gerekiyor ki karşı taraf bize program ile ilgili bir soru sorduğunda donup kalmayalım.

Open Browser Window özelliği

Dreamweaver CS3 kullanarak, bu uygulamaları açıklaya bilmek için basit bir site taslağı hazırladım.

Taslak sitedeki resimlerin (ben resim seçtim yazı, resim, div ve tabloda olabilir) üzerlerine istediğimiz bir Mouse veya klavye olayı uyguladığımızda, resimin yeni bir pencerede ve istediğimiz boyut ve özellikte açılmasını sağlayabiliriz. (Bu özellik web te’Open Browser Window’adıyla geçmektedir. )

Bunun için önce resmimizi seçili hale getiriyoruz. Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerimizi açıyoruz.

Yeni pencerede açacağımız resim seçiliyken, açılan menü de Open Browser Window yazısına tıklıyoruz. Açılan penceredeki ayarları dilediğimiz gibi ayarlayabiliriz. Kısaca açıklamaya çalışacağım pencerenin özelliklerini ;

URL to display: Seçili resmi bir Mouse özelliği uygulandığında açılacak pencerenin içeriğinin adresiniz gireceğimiz yerdir. Bu içerik bir resimde olabilir bir web sayfası olabilir.
Window width: Açılacak pencerenin genişliğini gireceğimiz yerdir.
Window width: Açılacak pencerenin yüksekliğini gireceğimiz yerdir.
Navigation Toolbar: İşaretlediğiniz zaman açılan pencerede navigasyon özelliklerinin görünmesini sağlayacaktır.
Location Toolbar: İşaretlediğiniz zaman açılan pencerede adres çubuğun görünmesini sağlayacaktır.
Status Toolbar: İşaretlediğiniz zaman açılan pencerenin alt tarafında Status bar’ın görünmesini sağlayacaktır.
MenuToolbar: İşaretlediğiniz zaman açılan pencerede tarayıcınızda kendiniz belirlediğiniz üst menü aktif olacaktır.
Scrollbars as needed: İşaretlediğiniz anda açılacak pencereye yüklediğiniz içeriğin boyutları, verdiğiniz pencere ölçülerinden büyükse scrollbar çubuklarını aktif edecektir.
Resize Handles: İşaretlediğiniz anda açılacak pencerenin boyutlarını kullanıcının Mouse yardımıyla büyütüp küçültmesine izin verecektir. İşaretlemediğinizde pencereyi büyütüp küçültmeye sistem izin vermeyecektir.
Window Name: Boş kutucuğa yazdığınız içeriği açılan pencerenin üzerinde gösterecektir.

Pencerenin ayarlarını dilediğimiz gibi belirledikten’OK’butonunu kullanarak yaptığımız işlemleri onaylıyoruz. Ben resimin üzerine tıklandığında daha büyük boyutlarda açılması için daha büyük boyutlu resmin adresini girdim ve Mouse ile boyutları ile oynanabilmesi için’Resize Handles’seçeneğini işaretli bıraktım. Onayladıktan sonra behaviors paneline baktığımızda (özellik uyguladığımız resim seçili iken)yeni bir satır eklendiğini görüyoruz.

Bu satır seçili resime bir Open browser Window özelliği eklendiğini gösteriyor. Sol tarafta bulunan onClick özelliği ise Mouse veya klavye olayını tespit edeceğimiz alan.

onClick isimli alana tıkladığımızda bizi bir menü karşılamaktadır.

Buradan istediğimiz Mouse veya klavye olayını belirleye biliriz. Bu menüden herhangi birini seçtiğimiz anda ve seçtiğimiz olayı tarayıcılarda tetiklediğimizde hazırlamış olduğumuz pencere açılacaktır.

Evet artık test edebiliriz. File > Preview in Browser’ı tıkladığımızda seçtiğimiz tarayıcıda yapmış olduğumuz işlemler çalışacaktır.

Not: Tarayıcınızın ayarlarında yeni pencere açılımı için ayarlarınız yeni tab’ta aç olarak Seçilliyse Open Browser Window özelliği yeni pencerede açılmayacaktır.

Go to URL Özelliği
Bu özellik link verme özelliğidir diyebilirim. Normal link vermek dururken niye bunu kullanalım dediğinizi duyar gibiyim. Şunu unutmamalısınız ki behaviors panelinden kullandığınız her özelliğe dilediğiniz Mouse ve Klavye olaylarınız ekleyebilirsiniz.
Herhangi bir objeyi (yazı,div,tablo veya resim) seçili hale getirip, Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden’Go to URL’seçeneğini seçerek Go to URL penceresini açabilirsiniz.

Bu panel üzerinde URL bölümünde bulunan browser’a tıklayarak açılmasını istediğiniz dosyayı ekleyebilirsiniz. OK’ye tıklayarak işlemi onayladığınızda Go to URL özelliği çalışacaktır.

Open Browser Window’da olduğu gibi dilediğiniz Mouse ve klavye olayları ekleyebilirsiniz.

Popup Message
Bu özellik eklediğiniz objeye (bu gene resim seçtim) belirlediğiniz herhangi bir Mouse ve klavye olayında popup message açılmasını sağlayacaktır. Herhangi bir objeyi seçili hale getirip, Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden’Popup Message’seçeneğini seçerek Popup message penceresini açabilirsiniz.

Message bölümüne istediğinizi yazabilirsiniz ben Digital Arts yazdım.
Test ettiğinizde sonuç Resim de ki gibi olacaktır.

Effects Özellikleri
Dreamweaver CS3 ile birlikte gelen bu yeni özellikler gerçekten çok kullanışlı,Digital Arts dergisine ilk yazımda behaviors panelini seçmemin sebebi bu yeni efektlerdir. Özellikleri itibariyle sadece Flash programını kullanarak yapabileceklerimizi Java Script yardımıyla hem de hiç Java Script bilmeden yapabilmek gerçekten çok keyifli bunları sizinle özellikle paylaşmak istedim. Bu yeni efektleri sırasıyla açıklamaya çalışacağım.

 
Appear/Fade
Görüntünün saydamlık özelliği kullanarak kaybolup tekrar geri gelmesini sağlayan bir efekttir. Objenizi seçili hale getirip (yazı, div, tablo veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden Effects > Appear/Fade seçimini yapınız. Appear/ Fade penceresi açılacaktır.

Appear/Fade panelini kısaca açıklamaya çalışacağım.

Target Element: Burada seçili durumda ise sadece seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde diğer seçenekleri görürsünüz bu seçenekler sayfa içerisinde kullandığınız Div’ler veya Tablo’lar olacaktır. Yani yazı ve resimlere uyguladığınız gibi Tablo ve Div’lere de bu efektin özelliklerini uygulayabilirsiniz.

 
Effect Duration: Bu kutucuk görünümün ne kadar zamanda kaybolmasını ve aynı şekilde ne kadar zamanda geri gelmesini belirleyecektir.

 
Effect: Bu kutucukta iki seçenek mevcuttur. Birincisi Appear görünmeyen bir görüntünün geri gelmesi, ikincisi Fade var olan bir görüntünün kaybolmasıdır.

 
Fade From ve Fade to: Bu kutucuklar bir üstte açıkladığım’Effect’özelliğine göre değişiklik gösterir. Fade from başlangıçtaki transparanlık değeri, Fade to herhangi bir Mouse ve klavye olayı sonucunda oluşacağı saydamlık değerini belirler. ‘Effect’ özelliğinde ‘Appear’ seçeneğini seçerseniz kutucuklar Appear from ve Appear to değerlerini alacaklardır. Bu değerler Fade from ve Fade to seçeneklerinin tam tersidir.

Appear/ Fade penceresindeki değerleri dilediğiniz gibi girip, behaviors panelinden Mouse veya Klavye olayını ayarladığınızda efekttiniz sorunsuz çalışacaktır.

 
Blind
Gene Appear/Fade efekti gibi kaybolup ve tekrar görünme özelliğidir. Fakat Appear/Fade efektinden biraz farklıdır. Görüntü sizin seçeneğinize göre aşağı doğru veya yukarı doğru kaybolup geri gelmektedir. Öncelikle bu özelliğin sadece Div’lere verildiğini belirtmeliyim. Mouse ve klavye olayını tetikleyecek objenizi seçtikten sonra (yazı,div,table veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden Effects > Blind seçimini yapınız. Blind penceresi açılacaktır.

Target Element: Burada standart olarak’***Select Target Element ID***’seçili durumda gelir. Buradan Blind efektinden etkilenmesini istediğiniz Div’i seçimini yapabilirsiniz.

Not: Bu halde bırakırsanız hata mesajı verecektir. Bu efekti uygulamak için mutlaka bir Div eklemek durumundasınız.

Effect Duration: Bu kutucuk görünümün ne kadar zamanda kaybolmasını ve aynı şekilde ne kadar zamanda geri gelmesini belirleyecektir.

Effect: Bu kutucukta iki seçenek mevcuttur. Birincisi Blind Up Div’in yukarı doğru kaybolması ve yukarıdan geri gelmesi, ikincisi Blind down var olan bir görüntünün aşağı doğru kaybolması ve aşağıdan geri gelmesidir.

Blind up From ve Blind up to: Bu kutucuklar bir üstte açıkladığım’Effect’özelliğine göre değişiklik gösterir. Blind up From başlangıçtaki özellik uygulanan Div’in yüzde olarak ne kadarının göründüğünü belirler, Blind up to herhangi bir Mouse ve klavye olayı sonucunda yukarı doğru kaybolmak üzere hareket edecek Div’in yüzde olarak ne kadarının görüneceğini belirler. ‘Effect’özelliğinde’Blind Down’seçeneğini seçerseniz kutucuklar Blind down from ve Blind down to değerlerini alacaklardır. Bu değerler Blind up From ve Blind up to seçeneklerinin tam tersidir.

Grow/Shrink
Görüntü sizin seçiminize göre alt köşeye doğru veya sol köşeye doğru küçülerek kaybolup geri gelmektedir. Objenizi seçtikten sonra (yazı,div veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden Effects > Grow/Shrink seçimini yapınız. Grow/Shrink penceresi açılacaktır.

Not: Bu efekt tablolara uygulanmamaktadır.

Target Element: Burada”seçili durumda ise sadece seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde diğer seçenekleri görürsünüz bu seçenekler sayfa içerisinde kullandığınız Div’ler olacaktır. Yani yazı ve resimlere uyguladığınız gibi Div’lerede tüm efekt özelliklerini uygulayabilirsiniz.
Effect Duration: Bu kutucuk görünümün ne kadar zamanda kaybolmasını ve aynı şekilde ne kadar zamanda geri gelmesini belirleyecektir.
Effect: Bu kutucukta iki seçenek mevcuttur. Birincisi Grow görünmeyen bir görüntünün büyüyerek geri gelmesi, ikincisi Shrink var olan bir görüntünün küçülerek kaybolmasıdır.

 
Grow from ve Grow to: Bu kutucuklar bir üstte açıkladığım’Effect’özelliğine göre değişiklik gösterir. Grow from başlangıçtaki görünüm yüzdesini, Grow to herhangi bir Mouse ve klavye olayı sonucunda oluşacak görüntünün yüzde olarak değerini belirler. ‘Effect’özelliğinde’Shrink’seçeneğini seçerseniz kutucuklar Shrink from ve Shrink to değerlerini alacaklardır. Bu değerler Shrink from ve Shrink to seçeneklerinin tam tersidir.

Grow From: Bu kutucukta’Effect’kutucuğunda yapmış olduğunuz seçime göre değişiklik gösterecektir. ‘Top Left Corner’seçeneğini işaretlerseniz efektiniz sol orta noktaya doğru çalışacaktır. ‘Center’seçeneğini işaretlerseniz efektiniz alt orta noktaya doğru çalışacaktır.

Highlight

Bu efektimiz efekt verdiğimiz objeye renk değişimi sağlamaktedır. Bu efektimiz resimlere uygulanamamaktadır. Objenizi seçili hale getirip (yazı,div veya table) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak Behaviors özelliklerinden Effects > Highlight seçimini yapınız. Highlight penceresi açılacaktır.

Target Element: Burada”seçili durumda ise sadece seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde diğer seçenekleri görürsünüz bu seçenekler sayfa içerisinde kullandığınız Div’ler ve Tablolar olacaktır. Yani yazı ve resimlere uyguladığınız gibi Div ve Tablolarada bu efektin özelliklerini uygulayabilirsiniz.

Effect Duration: Bu kutucuk belirlediğiniz renklerin ne kadar zamanda görünmesini ve aynı şekilde ne kadar zamanda kaybolmasını belirleyecektir.
Start Color: Bu kutucuk yardımıyla objenizin alacağı ilk rengi belirleyebilirsiniz.
End Color: Bu kutucuk yardımıyla Mouse ve Klavye olayından sonra objenizin alacağı rengi belirleyebilirsiniz.
Color After Effect: Bu kutucuk yardımıyla efekt tamamlandıktan sonra objenizin alacağı rengi belirleyebilirsiniz.

Shake
Efekt verdiğimiz objeye sağ ve sola doğru salınım yapmasını sağlamaktedır. Objenizi seçili hale getirip (yazı,div, table veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak Behaviors özelliklerinden Effects > Shake seçimini yapınız. Shake penceresi açılacaktır.

Target Element: Burada”seçili durumda ise sadece seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde diğer seçenekleri görürsünüz bu seçenekler sayfa içerisinde kullandığınız Div’ler ve tablolar olacaktır. Yani yazı ve resimlere uyguladığınız gibi Div ve Tablolarada bu efektin özelliklerini uygulayabilirsiniz.

Slide
Öncelikle bu özelliğin Blind gibi sadece Div’lere verildiğini belirtmeliyim. Mouse ve klavye olayını tetikleyecek objenizi seçtikten sonra (yazı,div,table veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak behaviors özelliklerinden Effects > Slide seçimini yapınız. Slide penceresi açılacaktır.

Target Element: Burada standart olarak’***Select Target Element ID***’seçili durumda gelir. Buradan Slide efektinden etkilenmesini istediğiniz Div’i seçimini yapabilirsiniz.

Not: Bu halde bırakırsanız hata mesajı verecektir. B u efekti uygulamak için mutlaka bir Div eklemek durumundasınız.

Effect Duration: Bu kutucuk görünümün ne kadar zamanda kaybolmasını ve aynı şekilde ne kadar zamanda geri gelmesini belirleyecektir.

Özellikler olarak tamamen Blind efektine benzemektedir. Blind efetktinde belirtiğim özellikleri incelerseniz Slide efektini rahatlıkla uygulayabilirsiniz.

Squish
Efekt verdiğimiz obje önce kaybolup sonra yukarı aşağı salınım yaparak geri gelmektedir. Objenizi seçili hale getirip (yazı,div, table veya resim) Behaviors panelinden (kapalı durumdaysa Window > Behaviors’a tıklayarak açabilirsiniz. ) (+) simgesine tıklayarak Behaviors özelliklerinden Effects > Squish seçimini yapınız. Squish penceresi açılacaktır.

Target Element:  Burada standart olarak’***Select Target Element ID***’seçili durumda gelir. Buradan Squish efektinden etkilenmesini istediğiniz Div’i seçimini yapabilirsiniz.

Not: Bu halde bırakırsanız hata mesajı verecektir. Bu efekti uygulamak için mutlaka bir Div eklemek durumundasınız.

Önemli Not: Tüm Behaviors özellikleri için Dreamweaver CS3 size bir ‘SpryEffects. js’ isimli bir dosya oluşturacak bu Java Script dosyası mutlaka web klasörünüzde bulunmalıdır.