WEB EDİTÖRÜ UFUK ÖZDEMİR

... konulu sunumlar: "WEB EDİTÖRÜ UFUK ÖZDEMİR"— Sunum transkripti:

1

2 WEB EDİTÖRÜ UFUK ÖZDEMİR
KATMANLAR WEB EDİTÖRÜ UFUK ÖZDEMİR

3 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ı Drag Layer Davranışını Kullanmak Show-Hide Layers Davranışını Kullanmak Katmanları Tablolara Dönüştürmek Timeline İle Çalışmak

4 Katman Nedir? Katman (layer) Div tagı 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).

5 Katman Oluşturma Insert araç çubuğunun Layout Objects kategorisinde yer alan Div Tag düğmesine tıklayarak div tagımızı oluşturuyoruz.

6 Katmanları Adlandırmak
Insert Div Tag penceresinden katmana Class ve Id atayarak katmanımızı adlandırmış oluruz.

7 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.

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

9 Katmanlarda Değişiklik Yapma
New CSS Rule penceresinde Selector Type özelliğinden daha önceden Class ve ya Id oluşturduğumuz isimi seçerek o isme ait stil dosyaları oluşturuyoruz.

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

11 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-index değerleri pozitif ya da negatif değerler olabilir. Birden fazla katman aynı z-index numarasına sahip olabilir.

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

13 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 Rule penceresinden Positioning kategorisinden Visibility: hidden yani gizli özelliği kullanılır.

14 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. Overflow 4 temel özelliğe sahiptir. Visible, Hidden, Scroll, Auto

15 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.

16 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 Grid tıklanır (Ctrl+Alt+G). İstersek ızgara ayarlarını değiştirebiliriz. Bunun için View » Grid » Show Settings

17 Drag Layer Davranışını Kullanmak
Drag Layer 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 elemanlarla etkileşimli oyunlar ya da öğretim araçları hazırlamak için harika bir yoldur.

18 Drag Layer Davranışını Kullanmak
Bu özelliği yapabilmek için ilk önce bir tane katman oluşturuyoruz. Daha sonra CSS ile şekillendiriyoruz. Ardından Tag Inspector » Behaviors » Add Behaviors (+) » Drag AP Element tıklanır. Movement bölümünden katmanın alanın sınırlayabilir ya da sınırsız yapabiliriz.

19 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/hide layer. Ö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/hide layer 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.

20 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 Divs to Table komutu tıklanmalıdır. Karşımıza gelen Convert AP Divs to Table penceresinden gerekli ayarları yaparak Ok diyerek katmanları tabloya dönüştürmüş oluyoruz.

21 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 Dreamweaver iç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.

22 Timeline İle Çalışmak Timeline Bileşenleri

23 Timeline İle Çalışmak Timeline pop-up menu: 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. Playback head: Bir zaman çizelgesi üzerinde kaçında karede (frame) yani animasyonun hangi anında olduğumuzu belirtiyor. Frame numbers: 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.

24 Timeline İle Çalışmak Behaviors channel: 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. Animation channel: 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 Behaviors channel: 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. Animation channel: 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.

26 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.

27 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: Frame per second yani 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.

28 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 Timelines paneli 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.

29 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.

30 Kaynakça