1 / 30

KATMANLAR

KATMANLAR. WEB EDİTÖRÜ UFUK ÖZDEMİR. Neler Öğreneceğiz. Katman Nedir? Katman Oluşturma Katmanları Adlandırma Katmanlarda Değişiklik Yapma Katmanların Sırasını Değiştirmek Katmanların Görünürlük Özelliğini Değiştirmek Sayfa İçeriğini Kontrol Etmek Cetvel ve Izgara Ayarlamaları

megan
Download Presentation

KATMANLAR

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. KATMANLAR WEB EDİTÖRÜ UFUK ÖZDEMİR

  2. Neler Öğreneceğiz • Katman Nedir? • Katman Oluşturma • Katmanları Adlandırma • Katmanlarda Değişiklik Yapma • Katmanların Sırasını Değiştirmek • Katmanların Görünürlük Özelliğini Değiştirmek • Sayfa İçeriğini Kontrol Etmek • Cetvel ve Izgara Ayarlamaları • DragLayer Davranışını Kullanmak • Show-HideLayers Davranışını Kullanmak • Katmanları Tablolara Dönüştürmek • Timeline İle Çalışmak

  3. Katman Nedir? • Katman (layer) Divtagıolarakta bilenen, Web tarayıcısı penceresinde istediğiniz bir konuma yerleştirebileceğiniz ve HTML içeriği için kullanılan dikdörtgen şeklinde bir taşıyıcı elemandır. • Katmanlar çeşitli elemanları içerebilirler (metinler, resimler, tablolar ve hatta başka katmanlar).

  4. Katman Oluşturma • Insert araç çubuğunun Layout Objectskategorisinde yer alan DivTagdüğmesine tıklayarak div tagımızı oluşturuyoruz.

  5. Katmanları Adlandırmak • InsertDivTagpenceresinden katmana Class ve Idatayarak katmanımızı adlandırmış oluruz.

  6. Katmanlarda Değişiklik Yapma • Bir katmanı oluşturduktan sonra buna bir arka plan eklemek, katmanı taşımak ya da yeniden boyutlandırabiliriz. Katmanın kullanım avantajlarından biri, sayfa üzerinde tam olarak istenen konuma yerleştirebilmeleridir. • Properties denetçisini kullanarak konum değerleri girebilir ve katmanları diğer katmanlarla hizalayabiliriz. • Bir katman üzerinde değişiklik yapabilmemiz için önce o katmanın seçili olması lazımdır.

  7. Katmanlarda Değişiklik Yapma • Properties bölümünden New CSS Ruleözelliğine tıklayarak yeni bir stil dosyası oluşturuyoruz.

  8. Katmanlarda Değişiklik Yapma • New CSS Rulepenceresinde SelectorTypeözelliğinden daha önceden Class ve ya Idoluşturduğumuz isimi seçerek o isme ait stil dosyaları oluşturuyoruz.

  9. Katmanlarda Değişiklik Yapma • CSS Rule penceresinden katmanıza ait stil özelliklerini buradan ayarlayarak Apply diyerek özellikleri uyguluyoruz.

  10. Katmanların Sırasını Değiştirmek • Katmanların sırasını değiştirmek için Properties denetçisini kullanabiliriz. • Burada her bir katmanın z-index değeri kullanılır. • z-index değeri, katmanların Web tarayıcısında hangi sırayla oluşturulacağını belirler. • z-index numarası daha büyük olan bir katman, z-index numarası daha küçük olan katmanların üstünde yer alır. • z-indexdeğerleri pozitif ya da negatif değerler olabilir. • Birden fazla katman aynı z-index numarasına sahip olabilir.

  11. Katmanların Sırasını Değiştirmek • Z-index özelliğini kullanabilmek için CSS Rule penceresinden Positioning özelliğini kullanılır

  12. Katmanların Görünürlük Özelliğini Değiştirmek • Bir katmanı göstermek ya da gizlemek için görünürlük özelliğini değiştirebilirsiniz. Bu, kullanıcı etkileşimi özellikleri eklemek için katman kullanırken faydalı olabilir. • Bu özelliği kullanabilmek için CSS Rulepenceresinden Positioningkategorisinden Visibility: hiddenyani gizli özelliği kullanılır.

  13. Sayfa İçeriğini Kontrol Etmek • Katman içerisine alınan bilgilerin belirtilen uzunluk ve genişlikten büyük olması durumunda içeriğin sınırlandırılması mümkün olabilir. • Bu özelliği kullanabilmek için Properties penceresinden Positioning kategorisinden Overflowözelliği kullanılır. • Overflow4 temel özelliğe sahiptir. • Visible, Hidden, Scroll, Auto

  14. Sayfa İçeriğini Kontrol Etmek • Visible: katmanı bütün içeriği görünecek şekilde aşağıya ve sağa doğru gerektiği kadar genişleterek katmanın boyutlarını büyütür. • Hidden: katmanın boyutlarını korur ve sığmayan içeriği keser ve bu arada herhangi bir kaydırma çubuğu görüntülemez. • Scroll: içeriğin katmanın boyutlarını aşıp aşmadığına bakmaksızın katmana kaydırma çubukları ekler. • Auto: kaydırma çubuklarını sadece içeriğin katmanın sınırlarını aşması durumunda görüntüler.

  15. Cetvel ve Izgara Ayarlamaları • Tasarım yaparken bizlere kolaylık sağlaması açısından cetvel ve ızgaralardan yararlanırız. • Cetveli aktif etmek için View » Rules » Show seçeneği tıklanır (Ctrl+Alt+R). • Izgarayı aktif etmek için View» Grid » Show Gridtıklanır (Ctrl+Alt+G). • İstersek ızgara ayarlarını değiştirebiliriz. Bunun içinView » Grid » Show Settings

  16. DragLayer Davranışını Kullanmak • DragLayer davranışı, ziyaretçilerin tarayıcı penceresinde bir katmanı tutarak sayfadaki farklı bir konuma taşımalarını mümkün kılar. • Bu, kullanıcı tarafından taşınabilen elemanlarlaetkileşimli oyunlarya da öğretim araçları hazırlamak için harika bir yoldur.

  17. DragLayer Davranışını Kullanmak • Bu özelliği yapabilmek için ilk önce bir tane katman oluşturuyoruz. Daha sonra CSS ile şekillendiriyoruz. • Ardından TagInspector » Behaviors » AddBehaviors (+) » Drag AP Element tıklanır. • Movementbölümünden katmanın alanın sınırlayabilir ya da sınırsız yapabiliriz.

  18. Show-Hide Davranışlarını Kullanmak • Layerler DHTML animasyonlarında sık kullanılırlar. Resimler, yazılar layerler ile hareket ettirilebilir. Behavior penceresinde layerlerla ilgili iki özelik var. İlki show/hidelayer. • Örneğin; yeni bir sayfaya bir layer çizelim ve belli olması için bir arkaplan rengi verelim. Ardından form içermeyen iki buton ekleyip birinci butona Behavior > + > Show/hidelayer ile hide özelliği, ikinci butona ise show özelliği verelim. Böylece butonlara basıldığında layer görünür/gizli hale gelecek.

  19. Katmanları Tabloya Dönüştürmek • Tarayıcılardan kaynaklanan farklılıklardan dolayı katmanların görüntülenmesinde yaşanan sıkıntıların önüne geçmek için katman-tablo dönüşümü gerçekleştirilebilir. • Bu işlem için imleç sayfa içinde iken Modify menüsü altında bulunan Convert seçeneği içindeki AP DivstoTablekomutu tıklanmalıdır. • Karşımıza gelen Convert AP DivstoTablepenceresinden gerekli ayarları yaparak Ok diyerek katmanları tabloya dönüştürmüş oluyoruz.

  20. Timeline İle Çalışmak • "DHTML" (Dynamic HTML) olarak tabir edilebilen ve JavaScript-CSS ilişkisinin beklide en yoğun kullanım bulduğu alanlardan biridir bu timeline süreci. Birçok örneğine rastladığınız hareketli katmanları ve bir görünüp bir kaybolan objeleri timeline ile Dreamweaveriçerisinde yapmak mümkün olabilmekte. • Bütün zaman çizelgesi uygulamalarımızı yönetebilmemize olanak tanıyan bu panele eğer açık değilse Window / Timelines menüsü ile ulaşabilirsiniz.

  21. Timeline İle Çalışmak • Timeline Bileşenleri

  22. Timeline İle Çalışmak • Timeline pop-upmenu: Bu açılır menü o an üzerinde çalıştığımız zaman çizelgesini gösteriyor. Dikkat ederseniz bu alan açılır bir menü, yani bu, bir sayfada birden fazla zaman çizelgesi, birden fazla süreç olabileceği anlamına geliyor. Bu da çalışmalarımızda esneklik ve çeşitlilik kazandırmamızı sağlıyor. • Playbackhead: Bir zaman çizelgesi üzerinde kaçında karede (frame) yani animasyonun hangi anında olduğumuzu belirtiyor. • Framenumbers: Kare numarasını belirtiyor. Buradan da anlayacağınız üzere animasyonumuz (ya da olay, süreç ne derseniz artık) karelerden yani "frame" lerden oluşmakta. Buradaki "frame" kavramını daha önce anlatılan "Frame kullanımı" konusu ile karıştıranlar bu ikisinin farklı kavramlar olduğuna dikkat etmeliler.

  23. Timeline İle Çalışmak • Behaviorschannel: Zaman çizelgemizdeki objeleri etkileyen Behavior'ları gösteren kanaldır. • Animation bar: Animasyonun ne kadar süreceğini gösterir. Sağ ucundan tutup uzatıp kısaltarak sürecin kaç kare boyunca devam edeceğini belirleyebilirsiniz. • Keyframe: Anahtar kare olarak tabir edebileceğimiz animasyonun son karesidir. • Animationchannel: Animasyon kanalıdır. Bir zaman çizelgesi birden fazla animasyon kanalı içerebilir. Buda demek oluyor ki; bir süreç içersinde birden fazla olayı ve objeyi yönetebiliyoruz.

  24. Timeline İle Çalışmak • Behaviorschannel: Zaman çizelgemizdeki objeleri etkileyen Behavior'ları gösteren kanaldır. • Animation bar: Animasyonun ne kadar süreceğini gösterir. Sağ ucundan tutup uzatıp kısaltarak sürecin kaç kare boyunca devam edeceğini belirleyebilirsiniz. • Keyframe: Anahtar kare olarak tabir edebileceğimiz animasyonun son karesidir. • Animationchannel: Animasyon kanalıdır. Bir zaman çizelgesi birden fazla animasyon kanalı içerebilir. Buda demek oluyor ki; bir süreç içersinde birden fazla olayı ve objeyi yönetebiliyoruz.

  25. Timeline İle Çalışmak • Keyframe: Animasyon süreci belirli bir kareden başlar ve başka bir karede biter. Bu aradaki zaman dilimi içerisinde objeler çeşitli değişikliğe uğrayabilirler. • Örneğin 0 numaralı karede X ekseninde 150px konumunda bulunan bir katman 25. karede X eksenindeki 400. piksele hareket etmiş olabilir. Daha sonra ise 55. karede ise Y ekseninde 100px aşağı kaymış olabilir. İşte bu 25 ve 55. kareler birer "keyframe" olarak adlandırılır ve objelerin parametre ve ya özelliklerindeki belirli bir değişiklik olduğu anı belirtir.

  26. Timeline İle Çalışmak • Loop: Animasyon sürecinin bittikten sonra tekrar başa döneceğini belirtir. Animasyonumuz bu şekilde kendini sonsuza kadar tekrar edecektir. • Autoplay: Animasyon sürecinin kendiliğinden otomatik olarak başlaması anlamına gelir. • FPS: Framepersecondyani saniyedeki kare sayısını belirtir. Animasyonun akıcılığını belirtir. FPS değeri yüksek olan animasyon daha yumuşak hareketlere sahiptir. FPS ne kadar düşük olarsa animasyon o kadar kesik biçimde ilerler.

  27. Timeline İle Çalışmak • Sayfanıza Insert paneli altındaki "Layout" sekmesi altında yer alan "Draw layer" düğmesi ile bir katman oluşturuyoruz. • Yeni bir katman çizdiğimiz an bu katman ile aynı isimde bir stil dokümanımı ekliyoruz. • Bu katmanımızı zaman çizelgemiz içerisinde dahil edeceğiz. Eğer Timelinespaneli açık değilse Window / Timelines panelinden zaman çizelgesi panelimizi açıyoruz. 1. kareye sağ tıklayıp "Add Object" seçeneğine tıklıyoruz.

  28. Timeline İle Çalışmak • Ardından 30. kareye tıklıyoruz ve Properties panelinden "Left" değerini "500px" yapıyoruz. • "Autoplay" seçeneğini işaretleyip sayfayı kaydedip denediğinizde ise animasyonun sayfa açılır açılmaz yürütüldüğünü göreceksiniz.

  29. Kaynakça • http://ufukozdemirweb.com/dersler/WebEditoru/Dreamweaver8-Kitap.325-368.pdf

More Related