Transkript

1 DREAMWEAVERDA NESNELERE DAVRANIŞ EKLEME Dreamweaver da fare hareket olaylı, animasyonlu görüntüler oluşturmak istenildiğinde hazır scriptler anlamına gelen Davranışlar(behaviors) kullanılmaktadır. Yukarıdaki örnekte, fare ile düğmelerin üzerine gidilince resimler değişiyor, fare düğmelerden boş bir yere uzaklaşınca ortak bir resim geliyor. Şimdi bu örneği aşağıdaki aşamaları takip ederek oluşturalım. 1 Yerel sitemizin içinde web sayfa dosyası oluşturun.(ismini picture.html veriniz) 2 Tasarım yapmak için Picture.html üzerinde çift tıklayarak dosyayı açınız. 1

2 3 Mizanpaj sekmesinden aşağıdaki yuvarlak içine alınmış düğme seçiniz. 4 Sayfa üzerinde orta boyutta bir dörtgen oluşturunuz. 5 İmleci APDiv nesnesi içinde bir yere götürün ve tıklayın. İçerisine Ortak sekmesinden 2 satır ve 1 sütunluk bir tablo oluşturunuz. Tablo kenarlığını 0 yapınız. AP Bölümü Çiz düğmesi AP Bölümü Çiz düğmesi ile çizilir. 2

3 6 APDiv nesnesinin içinde yukarıda verdiğiniz tablo genişliği kadar (200 piksel) tablo oluşur. Daha sonra tabloyu, sağ alt köşesinden basılı tutarak APDiv nesnesinin içine yayınız. 7 Sonra tablonun ortasındaki çizgiyi ilk hücreye resim, ikinci hücreye menü düğmeleri yerleşecek şekilde ayarlayınız. 8 Tablodaki küçük hücreyi seçiniz ve 2 nolu metin kutusundaki işlem gerçekleştirilir. Resimlerin tümü bu hücreye yerleştirilmeyecek! Sayfa ilk açıldığında ve menülerden sürekli uzaklaşıldığında çıkacak resim buraya eklenecek. (Kopekler dizininin içindeki ortakresim.jpg eklenecek.) Yatay menü dosyası buraya eklenecek. Bu işlem için; Ekle menüsü Görüntü nesneleri Fireworks HTML seçilir. Gelen pencereden Gözat düğmesine basılarak yataymenu dizininin içindeki menu1.html dosyası seçilir. 2 kere TAMAM düğmesine basılır. Menü eklenmiş olur.. 3

4 9 Menüler hücreye yerleştiğinde her düğme görüntüsü <table> etiketindeki <td>..</td> arasında oluşturulacaktır. 10 Artık ilk görünüş için tek bir şey kaldı. İlk açılışta gelmesi istenen resmi Yerel Sitedeki 2.sitem\ Resimler\ Kopekler alt dizininin içindeki ortakresim.jpg dosyasını isterseniz sürükleyerek; isterseniz de Ekle menüsü Görüntü penceresinden ekleyebilirsiniz. Daha sonra fare ile görüntüye tıklayınız. Özellikler penceresinden aşağıdaki işlemi yapınız. Resmi seçiniz. Bu kısma ortakresim ismini verin. 4

5 Buraya kadar yaptığımız işlemler sayfanın browser de ilk açılıştaki görünümünün nasıl olacağı ile ilgili işlemlerdir. 11 Etiket <img> panelinden Davranışlar sekmesini açınız. Sayfa üzerinde boş bir yere tıklanılınca Davranışlar penceresinin içeriği aşağıdaki gibi görünecektir. Sayfanın üzerinde boş tıklama sonucunda oluşacak Davranış penceresi 2 script olayı içermelidir. Bunlar; a) OnLoad Görüntüleri Önceden Yükle b) OnLoad Öğeleri Göster/Gizle 12 Bu listede ilk defa script oluşturulacaksa OnLoad Görüntüleri Önceden Yükle scripti görünecektir. Diğer scripti tasarımcı tarafından oluşturulacaktır. 13 Şimdi OnLoad Görüntüleri Önceden Yükle scriptinin üzerinde çift tıklayınız. 14 Karşınıza gelen dialog penceresinden Gözat düğmesine basarak Kopekler dizinindeki resimleri listeye eklenecektir. İlk eklemede Gözat düğmesine basın ve 2.sitem\resimler\ dizininden ortakresim.jpg dosyasını ekleyiniz. 15 Daha sonra diğer görüntüleri yüklemek için önce düğmesiyle boş bir liste alanı oluşturun. Sonra Gözat düğmesinden diğer köpek resimlerini ekleyin. Bu işlemi Tüm resimler yükleninceye kadar gerçekleştirin. TAMAM düğmesine basın. 16 Şimdi de 2.scripti oluşturmak için Davranışlar sekmesindeki düğmesine basarak gelen yardım penceresinden Öğeleri Göster/Gizle komutu çalıştırılır. Sayfa üzerindeki APDiv nesnesindeki ortakresim ismini verdiğimiz resim, img ortakresim şeklinde listede görünür. Göster düğmesine basarak listedeki seçeneğin img ortakresim (göster) halini almasını sağlayınız. 5

6 17 Bu işlemlerden sonra düğmelere davranış olayları oluşturmak için Tablonun içindeki 1 nolu görüntüyü seçin. 18 düğmesine basarak Görüntü Değiştir komutunu seçin. Açılan Pencereden Görüntüler bölümünden görüntü ortakresim içinde katman AppDiv görüntüsünü seçin. Gözat düğmesine basarak düğmenin üzerine gelince değişmesini istediğiniz resim dosyasını bulun. Bu dosya, Örneğimizde oluşturulan Yerel sitede (2.sitem klasörü) bulunan resimler klasörünün içindeki ortakresim.jpg dosyasıdır. (Yani farenin işaretçisinin menü düğmelerinin üzerinde olmadığı zaman çıkacak resim dosyası). img ortakresim seçilir. Göster düğmesine basılır. Tamam düğmesine basıldıktan sonra Davranışlar sekmesi 2 tane OnLoad scripti içerecektir.(hatırlatma: Bu davranış olayları fare sayfa üzerinde boş bir yere tıklanınca çıkan olaylar idi.) 6

7 19 Bu işlemleri yaptıktan sonra TAMAM düğmesine basıldığında Davranışlar panelinde onmouseover Görüntü Değiştir olayı oluşacaktır. Yani farenin işaretçisinin düğme üzerinde iken değişeceği görüntü anlamına gelen olay ismidir. Fakat bir üst aşamada uğraşılan tüm işlemler, farenin işaretçisinin düğme üzerinde olmadığı zaman çıkacak görüntü için yapıldığından onmouseover olayını aşağı şekildeki gibi onmouseout olarak değiştirmelisiniz. Bu script olayı değiştirildiğinde listede otomatik olarak onmouseout Görüntü Değiştirme Geri Yükleme script olayı oluşur. Bu scriptin üzerinde farenin sol tuşuna çift tıkladığınızda dialog penceresi açılacaktır. Bu dialog penceresi kullanıcıya bir ayar değiştirme hakkı sunmaz. Bu yüzden kullanıcıdan bu ayarın değiştirilmemesi istenir. 20 Şimdi fare işaretçisinin düğme üzerine götürüldüğünde değişmesi olayını gerçekleştirelim. 1 nolu düğmeyi tekrar seçip yine Davranışlar panelinden düğmesine tıklanılır. Görüntü Değiştir komutu seçilir. 18.aşamada anlatıldığı gibi sırasıyla önce Görüntüler bölümünden görüntü ortakresim içinde katman appdiv1 seçilir. Gözat düğmesine basarak bu kez yerel 7

8 sitede resimler klasöründeki kopekler2.jpg dosyasını seçin. Tamam düğmesine Basarak Gözat penceresinden, tekrar Tamam Düğmesine basarak da Görüntü Değiştir penceresinden çıkın. 21 Artık düğmeye olaylar eklenmiştir. Davranışlar panelindeki script penceresinin görünümü aşağıdaki gibi görünmelidir. 22 Bundan sonraki düğmelerde de bu script olaylarını gerçekleştirmek için aşamalar arası tekrar uygulayınız. Yalnız bu işlemleri yaparken Fare işaretçisinin düğme üzerinde olmadığı zaman görünecek resim tüm düğmelerde de ortakresim.jpg; fare işaretçisinin düğme üzerinde iken görünecek resimler ise yerel sitemizin resimler klasöründeki kopekler3.jpg, kopekler4.jpg, kopekler5.jpg, kopekler6.jpg resimleri olacak şekilde ayarlanmalıdır. 23 Artık tasarladığınız sayfayı F12 düğmesine basarak Browser görüntüsünü görebilirsiniz. Fare düğmelerin üzerinde iken yukarıdaki 6 görüntü oluşmalıdır. Farenin düğme üzerinde olmadığı zaman görünecek resim Ortakresim.jpg Farenin düğme üzerinde iken görünecek resim Kopekler2.jpg Fare düğmelerin üzerinde olmadığı zamanlar yandaki görüntü oluşmalıdır. 8