Macromedia Dreamweaver`ın programlama araçları ile kolayca JavaScript kodları yazdırabilirsiniz.. Mesela layerların gizlenip gösterilmesi, status barın değiştirilmesi, sayfadaki grafiklerin rollover yani üstüne gelince değişen hale getirilmesi vs. Behaviors adı verilen pencereden tüm bu JavaScript uygulamalarını yapabilirsiniz. Ayrıca bu JavaScript uygulamalarının listesini browser türüne göre alabilirsiniz.. Mesela Internet Explorer ve Netscape ile çalışacak uygulamaları veya sadece Internet Explorer ile çalışacak uygulamaların gösterilmesine siz karar verebilirsiniz.. Tabii browser sürümleride bu seçebileceğiniz seçenekler arasında..
Dreamweaver`ın CSS (Cascading Style Sheets) aracı ile kolayca sayfa stilleri yani CSS`ler hazırlayabilirsiniz. Ayrıca istediğiniz taktirde yine tek satır kod yazmadan harici stil dosyalarını (*.css) sayfanıza ekleyebilirsiniz.
Behaviors ile Çalışmak:
Behaviors ile JavaScript uygulamarı yapabileciğinizi daha önce söylemiştik.. Peki ne gibi uygulamalar yapabilirsiniz ve Behaviors nasıl kullanılır?... Behaviors penceresini açtığınızda karşınıza aşağıdaki gibi bir pencere gelecektir:
Bu pencerede bulunan “+” butonu ile seçtiğiniz sayfa öğesine uygulama ekleyebilir, “-“ butonu ile uygulama çıkarabilirsiniz..
Uygulama eklemek için ilk önce bir sayfa öğesi seçmeniz gerekir.. Mesela link üzerine gelince Status Bar`da bulunan yazının değişmesini istiyorsunuz.. Bunun için ilk önce linki seçin ve daha sonra Behaviors penceresinden “+” yı seçin ve çıkan menüde Set Text menüsünden Set Text of StatusBar`ı seçin.. Daha sonra çıkan dialog kutusunda yeni status bar yazısını yazın ve OK tuşu ile çıkın.. Daha sonra Behaviors penceresine eklediğiniz uygulamanın adı eklenecektir ve bu uygulama adının ortalarında aşağı doğru duran bir ok bulunacaktır. Bu ok yardımı ile Events menüsünü açın ve OnMouseOver`ı seçin.. Böylece linkin üzerine gelince browser statusbarındaki yazı sizin belirlediğiniz yazıya dönüşecektir.
Bu JavaScript uygulamasını silmek istediğiniz taktirde Behaviors penceresinden uygulama ismini seçin ve yukarda bulunan “-“ butonuna tıklayın.
Behaviors ile standart olarak gelen uygulamalar şunlardır:
Call JavaScript: Herhangi bir JavaScript fonksiyonunu çağırmanızı ve işlettirmenizi sağlar.
Change Property: Herhangi bir sayfa öğesinin özelliklerini değiştirmenizi sağlar.
Check Browser: Web tarayıcısı için test yapmanızı ve tarayıcıya göre yönlendirme vs. yapmanızı sağlar.
Check Plug-In: Web sayfanızda Flash, Shockwave gibi plug-in gerektiren nesneler ve teknolojiler kullanıyorsanız bu özellik ile ziyaretçinizin plug-inini kontrol ederek sonuca göre muamele yapabilirsiniz. Mesela Flash plug-ini yoksa başka bir sayfaya yönlendirerek uyarıda bulunabilirsiniz...
Control Shockwave or Flash: Check Plug-In özelliğinin sadece Macromedia Shockwave ve Macromedia Flash plug-ini kontrol edebilen versiyonu.. Böyle bir uygulamanın gereksiz yere niye konulduğu ise bilinmiyor!...
Drag Layer: Sayfanızda bulunan layerların yani katmanların sürüklenerek hareket ettirilmesini sağlar. Ayrıca bu özellik sayesinde layerların konumunu istediğiniz işleme göre değiştirebilirsiniz. Mesela bir butona tıklandığında X:22, Y:55 konumunda bulunan layerın konumunu X:66, Y:123 yapabilirsiniz..
GoTo URL: Bu uygulama ile herhangi bir işlem sonucu istediğiniz sayfaya gitmeyi sağlayabilirsiniz... Mesela bir layer drag edildiğinde filanca.asp`ye gitmeyi sağlayabilirsiniz.
Jump Menu: Bu uygulama ile form içinde bulunan drag-drop menüden herhangi bir seçim yapıldığında herhangi bir sayfanın çağırılmasını sağlayabilirsiniz.
Jump Menu Go: Jump Menu uygulamasının özelliğe göre sayfa çağırtan versiyonu...
Open Browser Window: İstediğiniz herhangi bir işleme göre browser penceresi açmanızı sağlar... Ayrıca browser penceresi için sayfa boyu, browser araç çubuğu özellikleri, browser başlığı gibi özelliklerde ayarlamanız mümkün...
Play Sound: Bu uygulama ile herhangi bir istediğiniz işlem sonucu ses dosyasının çalmasını sağlayabilirsiniz. Mesela bir butona veya linke tıklandığında herhangi bir ses dosyasını çalabilirsiniz.
Popup Message: Herhangi bir işlem sonucu sayfada mesaj çıkmasını sağlar.
Preload Images: Sayfa yüklenirken grafiklerin önden yüklenmesini sağlar.. Rollover grafikler için kullanılması tavsiye edilir.
Set Nav Bar Image: Navigasyon barı kullandığınız taktirde bu özellik aktif olabilir.. Bu özellik ile navigasyon barında bulunan grafikleri düzenleyebilirsiniz.
Set Text: Set Text özelliği sayesinde Status Bar (durum çubuğu), Text Field (metin kutusu), Layer (katman), Frame (çerçeve) özelliklerinin metinlerini ayarlayabilirsiniz.. Mesela bir linkin üstüne gelince browserın durum çubuğunda “Tıklayın” yazsın isterseniz Set Text kısmından Status Bar seçerek bunu kolayca yapabilirsiniz.
Show-Hide Layers: Türkçesi katmanları göster/gizle olan bu özellik ile sayfa üstündeki layerları gizleyip gösterebilirsiniz... Mesela açılır kapanır menüleri bu özellik ile kolayca yapabilirsiniz... Veya özelleştirilebilir sitelerde içeriği layerlara oturtarak özelleştirme işini kolay hale getirebilirsiniz.
Swap Image: Bu özellik sayesinde herhangi bir elementin üstüne gelince bir grafiğin değişmesini sağlayabilirsiniz. Mesela bir linkin üzerine gelince bir grafiğin değişerek linkle ilgili açıklama yapmasını sağlayabilirsiniz.
Swap Image Restore: Bu özellik ile swap image kullanılan grafiklerin eski haline dönmesini sağlayabilirsiniz.
Timeline: Dreamweaver`ın Timeline özelliğini yönetmenizi sağlar. Mesela bir butona tıklayınca bir layer için zaman verilmesini ve bu zaman bitiminde layerın gizlenmesini sağlayabilirsiniz.
Validate Form: Form elementlerinin form gönderilmeden hemen önce kontrol edilmesini bu özellik ile sağlayabilirsiniz. Mesela müşterileriniz için bir talep formu yaptınız ve müşterinin e-mail adresini mecburi olarak forma girmesini istiyorsunuz. O halde bu özelliği kullanarak e-mail kısmı girilmediği taktirde hata mesajı çıkarılmasını sağlayabilirsiniz. Ayrıca bu özellik ile e-mailin doğru olup olmadığıda kontrol edilecektir.
Show Events For: İstediğiniz browserı seçerek behaviorsların seçtiğiniz browser ve sürümüne göre gösterilmesini sağlayabilirsiniz.
Get More Behaviors...: Bu seçenek ile Macromedia sitesinde bulunan ilgili bölüme girerek daha fazla behaviors yükleyebilirsiniz... Mesela Nokia WML Editor...
CSS (Cascading Style Sheet) ile Çalışmak:
CSS (Cascading Style Sheet) ile sayfa stilleri oluşturabilirsiniz. Aslında CSS, HTML 4.0 ile gelen bir özelliktir ve manuel olarak kodlanabilir ama profesyönel çalışıyorsanız ve elinizde birden çok site işi varsa manuel yaptığınız herşey sizin için zaman kaybı olacaktır. Bunu düşünen Macromedia firması CSS tanımlamaları için çok basit ve kullanışlı bir kısım geliştirmiş. Bu kısmı kullanarak sayfa stillerini CSS 2.0`a göre düzenleyebilirsiniz. Ayrıca harici stil dosyalarını (*.css) sayfaya eklemek birkaç tuş yardımı ile çok basite indirgenmiş. CSS penceresini Window menüsünden CSS Styles seçeneği ile veya Shift + F11 tuş kombinasyonu ile açabilirsiniz. Pencereyi açtığınızda karşınıza aşağıdaki gibi bir pencere gelecektir.
Bu pencere üzerinde daha önce yaratmış olduğunuz stiller listelenecektir. Ayrıca herhangi bir sayfa elementini seçip (mesela link) CSS Styles penceresinden istediğiniz stili seçerseniz seçtiğiniz element seçtiğiniz stil ile eşleştirilecektir. (HTML`de Class olarak tanımlanmaktadır ve kod kullanılarak yazılması gerektiğinde <A HREF=”falanca.asp” class=”sectiginiz_stil”>tıklayın</a> şeklinde yazılır)
Sayfaya Stil Eklemek:
Sayfaya stil eklemek için ilk önce pencere köşesinde bulunan dört butondan sağdan üçüncüsünü seçmelisiniz. Bunun sonucu karşınıza aşağıdaki gibi bir pencere gelecektir.
Bu penceredeki “Name” kısmına stil için isim girmeniz gerekiyor... Ayrıca “Type” kısmından stil tipi seçmelisiniz. “Make Custom Style(class)” ile kendi stillerinizi oluşturabilirsiniz, “Redefine HTML Tag” ile istediğiniz HTML taglarına stil atayabilirsiniz. Mesela <TD> için stil atadığınız taktirde sayfadaki tüm tablo dizeleri bu stile göre görünecektir, son olarak “Use CSS Selector” ile stil için önceden tanımlanmış özellikleri kullanarak stil tanımı yapabilirsiniz.. Yani “a” kodu (link kodudur) için hover (üstüne gelme) özelliğine stil tanımı yapabilirsiniz.. Böyle bir durumda “a” stili için :hover özelliği tanımlanacaktır ve stili “a” olarak tanımlanmış bir nesnenin üstüne gelindiğinde :hover özelliği aktif olacak ve :hover ile tanımlanan a:hover stiline göre sayfa biçimlenecektir. Bu özellik daha çok üstüne gelince renk değiştiren linklerde kullanılır.
Yine “New Style” penceresinde bulunan “Define In” kısmından ekleyeceğiniz stilin harici bir dosyaya mı yoksa sadece düzenlediğiniz dökümana mı kayıt edileceğini ayarlayabilirsiniz. Eğer birden çok dosyada aynı stilleri kullanacaksanız harici bir dosyaya kayıt etmeniz ve daha sonra diğer sayfalara bu harici dosyayı bağlamanız daha mantıklı olacaktır. Böylece çok sayfalı sitelerinizde tek bir dosya düzenlemesi ile tüm stilleri güncelleyebileceksiniz.
Tüm bu seçenekleri ayarladıktan sonra “OK” butonuna tıklayın. Karşınıza oluşturduğunuz stili düzenlemeniz için yeni bir pencere gelecektir. Bu pencere aşağıdaki gibidir.
Bu pencerede bulunan kısımlar ile stillerinizi ayrıntılı olarak düzenleyebilirsiniz. Stillerinizin özelliklerini düzenledikten sonra “OK” butonu ile kaydedebilirsiniz.
Ayrıca stillerinizi düzenlerken dikkat etmeniz gereken birşeyde stillerin browserlara uyum sağlamasıdır. Hemen hemen tüm stiller ve ek stiller Internet Explorer 4 ve sonrası tarafından desteklendiği halde Netscape, Opera gibi browserlar tarafından desteklenmemektedir.
Sayfadaki Stilleri Düzenlemek:
Sayfadaki stilleri düzenlemek için “CSS Styles” penceresinden sağ alt köşeden sağ taraftan ikinci butonu seçin (üzerine gelince Edit Styles yazacaktır) daha sonra düzenlemek istediğiniz stilleri seçin ve Edit tuşuna basın. Bunun sonucunda sayfaya stil eklerken kullandığınız düzenleme penceresi ekrana gelecektir. Buradan stilleri istediğiniz şekilde düzenleyip “OK” butonu ile kaydedebilirsiniz.
Sayfadan Stil Silmek:
Sayfadan stil silmek için “CSS Styles” penceresinden istediğiniz stili seçin ve sağ alt köşeden sağ taraftaki birinci butona tıklayın.. (Üzerinde çöp kovası bulunur bu butonun) Hepsi bu kadar...
Ayrıca “CSS Styles” penceresinde bulunan “Apply” kısmının kutucuğu işaretli olduğu zaman stiller otomatik olarak uygulanacaktır. Eğer bu işareti kaldırırsanız stilleri manuel olarak sayfaya uygulatmanız gerekecektir.
Assets ile Kolay Ulaşım Seçeneklerini Kullanmak:
Assets penceresi ile sitenizde kullandığınız dosyalara, linklere, grafiklere, animasyonlara kolayca ulaşabilirsiniz. Eski Dreamweaver sürümlerinde bu bölümün adı Library yani kütüphane olarak geçiyordu fakat yeni Dreamweaverda (sürüm 4.0) Library Assets kısmına entegre edilmiş durumda. Assets penceresini açmak için Window menüsünden Assets veya Library seçebileceğiniz gibi F11 tuşunada basabilirsiniz. Bunun sonucunda aşağıdaki gibi bir pencere ekrana gelecektir.
Bu pencere 3 bölüme ayrılmıştır. Bir kısımda menü bulunur ve bu menü sayesinde sitenizde bulunan grafik dosyalarını, renk tonlarını, sayfa bağlantılarını, flash dosyalarını, shockwave dosyalarını, film dosyalarını, script dosyalarını, template (taslak) dosyalarını ve kütüphane dosyalarını görebilirsiniz.
Diğer bir kısımda seçtiğiniz özelliğe uyan dosyaların isimlerini, boyutlarını, türlerini ve dosya yollarını görebilirsiniz. Ayrıca seçtiğiniz dosyanın ayrıntıları üst kısımda çıkacaktır.. Mesela grafiklerde, grafiğin bir ön izlemesini göreceksiniz...
Tüm bunların yanında Assets penceresindeki elementleri sayfaya sürükle bırak (drag & drop) ile yerleştirebilirsiniz. Bu da zamandan azda olsa tasarruf sağlayacaktır.
References ile Çabuk ve Ayrıntılı Web Tasarım ve Web Programlama Yardımı:
Dünyaca ünlü bilgisayar ve programlama kitapları yayıncısı O`REILLY tarafından hazırlanmış olan references kısmı ile JavaScript, HTML 4.0 ve CSS Styles konularında hızlı ve kolayca yardım alabilirsiniz. Tek yapmanız gereken istediğiniz konuyu seçmek ve bu konuda yardım gereken kod kısımlarını menüden bulmak. Bunların sonucunda karşınıza o konuyla ve kodla ilgili mini ders ve örnek gelecektir. Özellikle manuel JavaScript kodu yazanlar için ve herşeyi sıfırdan kod ile yazabilecek kadar öğrenmek isteyenler için ideal...
Dreamweaver ile İlgili Son Olarak...
Son olarak Macromedia Dreamweaver her profesyönel webmaster için ideal program. Zaten bundan dolayıda tüm bilgisayar dergileri testlerinde editörlerden tam puan alıyor. Macromedia Dreamweaver bu kursta anlatılanlardan çok daha fazla özelliğe sahip fakat bu özelliklerin hepsini ince detayına kadar anlatmak kurs dökümanı yazmaktan çok kitap yazmaya girecektir. Kısa bir özet ile bitirilmek istenirse Dreamweaverı öğrenmek için menüleri biraz kurcalamanız yeterli.. Mesela Commands menüsünü biraz kurcalayınca bu menü ile yapılabilecek işlevleri (Word HTML kodlarını temizleme, HTML kodlarını temizleme, HTML kodlarını düzenleme vs.) anlamanız mümkün... Ayrıca Text menüsü ile yazıların özelliklerini oldukça detaylı olarak ayarlayabilirsiniz, Modify menüsü ile sayfa elementlerini düzenleyebilirsiniz, Insert menüsü ile sayfaya element ekleyebilirsiniz. File ve Help menüleri ise diğer programlarda olduğu gibi, Dosya ve Yardım işlemleri :-)