Dreamweaver'da Bilinen Web Özellikleri Nelerdir?

Dreamweaver’da Bilinen Web Özellikleri Nelerdir? Tekrar selam 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 natürel ki bende dahil olmak üzere Adobe Dreamweaver kullanıyoruz. Biz web tasarımcılar için sürat ve kısayol önemlidir. Bunların yanı sırada dreamweaver’da bulunan ve adlandırılan web niteliklerini de bilmemiz gerekiyor ki karşı taraf bize program ile ilgili bir soru sorduğunda donup kalmayalım.   Open Browser Window niteliğ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 ve ya klavye olayı uyguladığımızda, resimin yeni bir pencerede ve istediğimiz ebat ve özellikte açılmasını sağlayabiliriz. (Bu özellik web te’Open Browser Window’adıyla geçmektedir. ) Bunun için evvela resmimizi seçili bir duruma 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 benzeri ayarlayabiliriz. Kısaca açıklamaya çalışacağım pencerenin niteliklerini ;   URL to display: Seçili resmi bir Mouse niteliği kullanıldığında açılacak pencerenin içeriğinin adresiniz gireceğimiz yerdir. Bu metin bir resimde olabilmekte 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 süre açılan pencerede navigasyon özelliklerinin görünmesini sağlayacaktır. Location Toolbar: İşaretlediğiniz süre açılan pencerede adres çubuğun görünmesini sağlayacaktır. Status Toolbar: İşaretlediğiniz süre açılan pencerenin alt tarafında Status bar’ın görünmesini sağlayacaktır. MenuToolbar: İşaretlediğiniz süre 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ı ile 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 üstünde gösterecektir. Pencerenin ayarlarını dilediğimiz bu 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 niteliği eklendiğini gösteriyor. Sol tarafta bulunan onClick niteliği ise Mouse ve ya klavye olayını tetkik edeceğimiz alan. onClick isimli alana tıkladığımızda bizi bir menü karşılamaktadır.   Buradan istediğimiz Mouse yada klavye olayını belirleye biliriz. Bu menüden herhangi birisini seçtiğimiz anda ve seçtiğimiz olayı tarayıcılarda tetiklediğimizde hazırlamış olduğumuz pencere açılacaktır. Evet bundan sonra 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ç şekilde Seçilliyse Open Browser Window niteliği yeni pencerede açılmayacaktır. Go to URL Özelliği Bu özellik link eda ö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 istediğiniz Mouse ve Klavye olaylarınız ekleyebilirsiniz. Herhangi bir objeyi (yazı,div,tablo yada resim) seçili duruma 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 üstünde URL bölümünde bulunan browser’a tıklayarak açılmasını dilediğiniz dosyayı ekleyebilirsiniz. OK’ye tıklayarak işlemi onayladığınızda Go to URL niteliği çalışacaktır. Open Browser Window’da bulunduğu benzeri arzuladığınız Mouse ve klavye olayları ekleyebilirsiniz. Popup Message Bu özellik eklediğiniz objeye (bu tekrardan 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 bir duruma 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 netice Resim de ki benzeri olacaktır.   Effects Özellikleri Dreamweaver CS3 ile beraberinde gelen bu yeni özellikler gerçekten çok fazla kullanışlı,Digital Arts dergisine ilk yazımda behaviors panelini seçmemin sebebi bu yeni efektlerdir. Özellikleri tarafından yalnızca Flash programını kullanarak yapabileceklerimizi Java Script sayesinde hem de hiç Java Script bilmeden yapabilmek gerçekten çok fazla keyifli bunları sizinle bilhassa paylaşmak istedim. Bu yeni efektleri sırasıyla açıklamaya çalışacağım.   Appear/Fade Görüntünün saydamlık niteliği kullanarak kaybolup yine arka gelmesini veren bir efekttir. Objenizi seçili bir hale getirip (yazı, div, tablo ya da 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 halde ise yalnızca seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde öbür alternatifleri gözleyebilirsiniz bu tercihler sayfa arasında kullandığınız Div’ler yada Tablo’lar olacaktır. Yani ova ve resimlere uyguladığınız bu gibi Tablo ve Div’lere de bu efektin niteliklerini uygulayabilirsiniz.   Effect Duration: Bu kutucuk görünümün ne kadar sürede kaybolmasını ve tıpkı biçimde ne kadar sürede arka gelmesini belirleyecektir.   Effect: Bu kutucukta iki alternatif mevcuttur. Birincisi Appear görünmeyen bir görüntünün arka gelmesi, ikincisi Fade mevcut 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çer iseniz 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 arzuladığınız bu gibi girip, behaviors panelinden Mouse ve ya Klavye olayını ayarladığınızda efekttiniz sorunsuzca çalışacaktır.   Blind Gene Appear/Fade efekti benzeri kaybolup ve yeniden 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 yada yukarı doğru kaybolup arka gelmektedir. Öncelikle bu özelliğin yalnızca Div’lere verildiğini belirtmeliyim. Mouse ve klavye olayını tetikleyecek objenizi seçtikten sonra (yazı,div,table ya da 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 halde gelir. Buradan Blind efektinden etkilenmesini dilediğiniz Div’i seçimini yapabilirsiniz. Not: Bu durumda bırakırsanız hata mesajı verecektir. Bu efekti uygulamak için her zaman bir Div eklemek durumundasınız. Effect Duration: Bu kutucuk görünümün ne kadar sürede kaybolmasını ve tıpkı biçimde ne kadar sürede arka gelmesini belirleyecektir. Effect: Bu kutucukta iki alternatif mevcuttur. Birincisi Blind Up Div’in yukarı doğru kaybolması ve yukarıdan arka gelmesi, ikincisi Blind down mevcut olan bir görüntünün aşağı doğru kaybolması ve aşağıdan arka 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 kullanılan Div’in yüzde şekilde ne kadarının göründüğünü belirler, Blind up to herhangi bir Mouse ve klavye olayı sonucunda yukarı doğru kaybolmak üzere devinim edecek Div’in yüzde şekilde ne kadarının görüneceğini belirler. ‘Effect’özelliğinde’Blind Down’seçeneğini seçer iseniz 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 ya da sol köşeye doğru küçülerek kaybolup arka gelmektedir. Objenizi seçtikten sonra (yazı,div ya da 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 halde ise yalnızca seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde öbür alternatifleri görebilirsiniz bu tercihler sayfa arasında kullandığınız Div’ler olacaktır. Yani ova ve resimlere uyguladığınız bunun gibi Div’lerede bütün efekt niteliklerini uygulayabilirsiniz. Effect Duration: Bu kutucuk görünümün ne kadar sürede kaybolmasını ve tıpkı biçimde ne kadar sürede arka gelmesini belirleyecektir. Effect: Bu kutucukta iki alternatif mevcuttur. Birincisi Grow görünmeyen bir görüntünün büyüyerek arka gelmesi, ikincisi Shrink mevcut 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 manzara yüzdesini, Grow to herhangi bir Mouse ve klavye olayı sonucunda oluşacak görüntünün yüzde şekilde değerini belirler. ‘Effect’özelliğinde’Shrink’seçeneğini seçer iseniz 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şim işlemi sağlamaktedır. Bu efektimiz resimlere uygulanamamaktadır. Objenizi seçili bir duruma getirip (yazı,div yada 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 halde ise yalnızca seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde öbür alternatifleri görebilirsiniz bu tercihler sayfa arasında kullandığınız Div’ler ve Tablolar olacaktır. Yani ova ve resimlere uyguladığınız bunun gibi Div ve Tablolarada bu efektin niteliklerini uygulayabilirsiniz. Effect Duration: Bu kutucuk belirlediğiniz renklerin ne kadar sürede görünmesini ve tıpkı biçimde ne kadar sürede kaybolmasını belirleyecektir. Start Color: Bu kutucuk sayesinde objenizin alacağı ilk rengi belirleyebilirsiniz. End Color: Bu kutucuk yardımı ile Mouse ve Klavye olayından sonra objenizin alacağı rengi belirleyebilirsiniz. Color After Effect: Bu kutucuk sayesinde efekt tamamlanmasından 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 duruma getirip (yazı,div, table yada 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 halde ise yalnızca seçmiş olduğunuz objeye bu özellik uygulanacaktır. Üzerine tıkladığınızda açılan menüde öbür alternatifleri görebilirsiniz bu tercihler sayfa arasında kullandığınız Div’ler ve tablolar olacaktır. Yani ova ve resimlere uyguladığınız benzeri Div ve Tablolarada bu efektin niteliklerini uygulayabilirsiniz. Slide Öncelikle bu özelliğin Blind benzeri yalnızca Div’lere verildiğini belirtmeliyim. Mouse ve klavye olayını tetikleyecek objenizi seçtikten sonra (yazı,div,table ve ya 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 halde gelir. Buradan Slide efektinden etkilenmesini dilediğiniz Div’i seçimini yapabilirsiniz. Not: Bu durumda bırakırsanız hata mesajı verecektir. B u efekti uygulamak için her zaman bir Div eklemek durumundasınız. Effect Duration: Bu kutucuk görünümün ne kadar sürede kaybolmasını ve tıpkı biçimde ne kadar sürede arka gelmesini belirleyecektir. Özellikler şekilde tamamıyla Blind efektine benzemektedir. Blind efetktinde belirtiğim nitelikleri incelerseniz Slide efektini rahatlıkla uygulayabilirsiniz. Squish Efekt verdiğimiz obje evvela kaybolup sonra yukarı aşağı salınım yaparak arka gelmektedir. Objenizi seçili duruma getirip (yazı,div, table ve ya 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 halde gelir. Buradan Squish efektinden etkilenmesini dilediğiniz Div’i seçimini yapabilirsiniz. Not: Bu durumda bırakırsanız hata mesajı verecektir. Bu efekti uygulamak için her zaman bir Div eklemek durumundasınız. mühim Not: Tüm Behaviors nitelikleri için Dreamweaver CS3 size bir ‘SpryEffects. js’ isimli bir dosya oluşturacak bu Java Script dosyası her zaman web klasörünüzde bulunmalıdır.


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar