Behaviors Drag Ap Elements Basic Ve Advanced Menülerinin Anlatımı

Behaviors drag ap elements basic ve advanced menülerinin anlatımı

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.

Behaviors Drag AP Elements Basic ve Advanced Menülerininanlatımı

Not: Bir katman aktif durumdaysa Drag Layer eylemi kullanılmaz.Eğer kullanılmaz durumda ise (gri olarak gösterilir), <body> etiketinin seçili olduğundan emin olun.

Drag Layer iki bölümden oluşmaktadır bular Basic ve Advanced Bu ilk aşamada size Basic ‘I anlatacağız.

Basic Ekranı aşağıdaki gibidir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Basic Ekranındaki Layer ekli olan Draw layerini gösterir.

Movement:Hareket biçiminin hangi şekilde olacağını belirtir.(koordinatları kendinizde verebilrisiniz diğer seçeneği seçerseniz.

Drop Target : Draw layerini otamatik olarak bulunduğu koordinatı alır.

Snap if Within: Belirlenen genişliğie geldiğinde draw layeri istenen noktaya otomatik olarak oturucaktır(ileride detaylı şekilde görülücektir)

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Yukarıkı resimde saydamızda ekli olan Draw Layerlerini görebilirsiniz.

Draw Layeri daha iyi anlayabilmek için bir uygulama yapalım bu uygulamada draw tagının kullanım şeklini ve mantığını anlayacaksınız.
Uygulama Adı: puzzle Yapımı

 Adım1: Puzzel yapabilmek için bir resim dosyasına ihtiyacımız var ilk once bir resim dosyası alın ve onu paint ya da Photoshop da parçalara bölün (photoshop ile yapmanız tercih edilir.)

 Adım2: Resim dosyalarını kesme işlemi bittikden sonra Dreamweaver’I açınız ve bir HTML sayfası oluşturunuz HTML sayfasını oluşturdukdan sonra Sayfaya bir Draw Layer ekleyiniz(Layout menüsü altındadır). Şekilde ‘de gösterilmektedir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım3:Eklemiş olduğumuz Draw Layer’e arkaplan resmi ekleme (Bunun için Dıv tagı seçili olmalıdır ), arka plan resmi dediğim photoshop’da kesmiş olduğumuz resmin ilk parçası (Sol En üstden başlayınız) resim ekleme şekli aşağıdaki gibidir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Mavi alanla seçili olan Bg İmage yazan bölgeye puzzelin ilk parçasının yolunu veriniz.
Örnek uygulama için benim kullandığım resim (bu uyugulama için en iyi örnek aslında bir harita üzerinde yapmaktır):

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım4: Bu adımda eklemeiş olduğumuz Draw layere puzzelimizin birinci parçasını ekliyorum(mavi seçili alandada görüldüğü gibi resmin yolu (Browser) gözükmektedir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım5:Şimdi Bir adet draw layer daha ekleyin ve bu layerede puzzelin ikinci paçasını ekleyin draw layere (üst şekildeki gibi)

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Yukarıdaki görüldüğü gib ikinci layer’I ekledim ve layerin içine arkaplan olarak puzzelimin ikinci parçasını ekledim.

Adım6:Şimdide puzzelimizn üçüncü parçası için Draw Layer ekleyin ve draw layerin arkaplan resmi olarak puzzlein üçüncü resmini ekleyiniz
Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Üst şekildede görüldüğü gib draw layer lar alt alta dizilerek puzzelin bir bölümü oluşturuldu.
Şimdi puzzelin diğer parçalarınıda aynı şekilde ekleyelim.

Adım7:Puzzelin dördüncü parçasınıda yukarıda anlatılan şekilde ekleyiniz.

 

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım8:Puzzelin beşinci parçası aşağıdaki gibidir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım9:
Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım10:Resimleri Draw Tadlara ekledikden soran son görüntü şu şekildir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım11:Oluşturmuş olduğumuz bu Draw Taglar Hareket edebilmesi için Tag Inspector paletinden (F9 kısayol Tuşu) faydalanacağız. Tag palatine gelin Behaviors’u seçin

 


Adım12: Draw layerlerden oluşturduğumuz birinci layere hareket ettirme işlemine başlayalım bunun için ilk once body Tag’ını seçiniz.ve Behaviors’a geliniz orada (+) işaretine basın ve açılan menüden Drag Layeri seçiniz ve aşağıdaki gib bir pencere açılacaktır.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı


-Layer yazan kısıma puzzelimizn birinci parçası olan resmin üzerinde buldunuğu divi seçiniz.

Ve Get Current position Butonuna basınız ve o sizing için otomatik olarak koordinatları versin.

Butona bastıkdan sonra dikkat edinizki aşağıda Snap if within yazan kısım otomatik olarak değer alacaktır bu değer hareket sırasında layeri belirtiğiniz koordinatların yakınından geçirirken otomatik olarak o o noktaya oturur bu mesafeyle puzzle resimlerinin yerleri belirlenecek.

 

Adım13:

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Yukarıdaki şekilde de gözüktüğü gibi bu kooridanatlar 2 draw taga yani resmin ikinci parçasına ait.(Eğer Behaviors’da Drag Laye ‘I aktif olarak göremiyor iseniz Body Tag I aktif değildir Body tagını seçip ondan sonra Drag Layer deyiniz.).

Adım14: Bu işlemi son draw layera kadar uygulayın ve bütün layerlara uygulatın son layer aşağdıaki gibidir.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım15:Bütün layera Drag Layer uygulandıkdan sonra resmilerin yerlerini değişin ve save deyip kaydedin bu şekil. Ve Tarayıcıda çalıştırın.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım 16: Tarayıcdaki son görüntü aşağıdaki gibidir(Activex Denetimine izin vermyei unutmayınız)

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Adım17: Ve son hali olarak dizilmiş hali aşağıdadır.

Behaviors Drag Ap Elements Basic Ve Advanced Menülerininanlatımı

Kaynak: Samet ERDEM
Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...