Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

KATMANLAR WEB ED İ TÖRÜ UFUK ÖZDEM İ R Neler Öğreneceğiz  Katman Nedir?  Katman Oluşturma  Katmanları Adlandırma  Katmanlarda Değişiklik Yapma 

Benzer bir sunumlar


... konulu sunumlar: "KATMANLAR WEB ED İ TÖRÜ UFUK ÖZDEM İ R Neler Öğreneceğiz  Katman Nedir?  Katman Oluşturma  Katmanları Adlandırma  Katmanlarda Değişiklik Yapma "— Sunum transkripti:

1

2 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 (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). Katman Nedir?

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  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. Katmanlarda Değişiklik Yapma

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

9  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. Katmanlarda Değişiklik Yapma

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

11  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. Katmanların Sırasını Değiştirmek

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

13  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. Katmanların Görünürlük Özelliğini Değiştirmek

14 K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. BBu özelliği kullanabilmek için Properties penceresinden Positioning kategorisinden Overflow ö zelliği kullanılır. OOverflow 4 temel özelliğe sahiptir. VVisible, Hidden, Scroll, Auto Sayfa İçeriğini Kontrol Etmek

15  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. Sayfa İçeriğini Kontrol Etmek

16  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 Cetvel ve Izgara Ayarlamaları

17  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. Drag Layer Davranışını Kullanmak

18  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. Drag Layer Davranışını Kullanmak

19  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. Show-Hide Davranışlarını Kullanmak

20  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. Katmanları Tabloya Dönüştürmek

21  " 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. Timeline İle Çalışmak

22  Timeline Bileşenleri

23  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. Timeline İle Çalışmak

24  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. Timeline İle Çalışmak

25  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. Timeline İle Çalışmak

26  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. Timeline İle Çalışmak

27  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. Timeline İle Çalışmak

28  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. Timeline İle Çalışmak

29  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 hhttp:// ufukozdemirweb.com/dersler/WebEditoru/Dreamweaver8-Kitap pdf Kaynakça


"KATMANLAR WEB ED İ TÖRÜ UFUK ÖZDEM İ R Neler Öğreneceğiz  Katman Nedir?  Katman Oluşturma  Katmanları Adlandırma  Katmanlarda Değişiklik Yapma " indir ppt

Benzer bir sunumlar


Google Reklamları