Konular

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

Database Paneli

Database paneli

26,265 Okunma 1 Yorum 05/06/2008 10:46:38

Div Çatılı sayfalar Oluşturmak

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile

25,996 Okunma Henüz yorum yapılmamış 06/08/2007 17:55:00

Recordset ile verileri sayfaya yazdırmak

Kayıt dizisi (recordset) ile Dreamweaver içerisinden veritabanına erişim sağlayarak, kriterlere göre ve ya istediğimiz sayıda kaydı sayfaya yazdırmak mümkün. Bizde bu makale ile veritabanı kayıt erişimlerini yakından inceleyeceğiz

21,710 Okunma Henüz yorum yapılmamış 31/08/2007 14:19:45

Bindings Paneli

Dreamweaver bindings paneli

20,767 Okunma Henüz yorum yapılmamış 05/06/2008 10:03:38

Database Paneli

Veritabanlarına erişmek

19,758 Okunma Henüz yorum yapılmamış 05/06/2008 09:12:39

Datebases Paneli

Resimli anlatım

19,656 Okunma Henüz yorum yapılmamış 06/06/2008 11:05:53

Bindings Paneli

Veri bağlantılarının yönetildiği panel

19,028 Okunma Henüz yorum yapılmamış 05/06/2008 09:11:51

Named Anchor

Named anchor aracı ile ilgili açıklamalar

19,018 Okunma Henüz yorum yapılmamış 05/06/2008 10:18:51

Dreamweaver ile Site tanımlamaları

Dreamweaver birçok geliştirme ortamında olduğu gibi proje bazlı çalışmalar yapmaya olanak tanıyan bir yazılımdır. Bu makalede projelerimizi DW içerisinde nasıl yönetebileceğimizi göreceğiz

18,841 Okunma Henüz yorum yapılmamış 01/09/2007 02:25:54

ASP sayfası hazırlama

Dreamweaver mx de ASP çalışmak için daha önceden ASP ile uğraşmış olmak gereklidir. Her nekadar Dreamweaver Mx işimizi kolaylaştırsa da ASP 'den anlamak bazı durumlarda faydalı olacaktır. ASP öğrenmek için Dr. Hakkı ÖCAL 'ın ASP kitaplarını tavsiye ederim

18,722 Okunma Henüz yorum yapılmamış 12/08/2007 04:13:11

Yükleniyor...