BIR WEB SAYFASININ HAREKETLENDİRİLMESİ

Yazar Hanzala

Sunday, 26 December 2004

12 Bir Web Sayfasının Hareketlendirilmesi

World Wide Web’de sayfaları izlerken, pek az şey hareketli grafikler kadar dikkatinizi çeker. Statik yazı ve durağan resimlerin, banner ilanlarındaki hareketli grafiklerle, dönen logo ve dans eden tavşanlar gibi diğer şeylerle rekabet etmesi zor olur.

FrontPage 2000, Web’lerinize hareket katmanızı kolaylaştırarak, bu alanda eşitliği sağlıyor.

Bu bölümde, yeni bir sayfa yüklenirken görülen geçiş efektleri veya fare üzerine geldiğinde değişen düğmeler gibi animasyon efektlerini göreceksiniz. Sayfalarınızdaki yazı ve resimlerin yukarıdan aşağıya hareket etmesi, belirli bir anda sadece bir kısmının sıçraması ve yerinde elastik olarak zıplaması için Dinamik HTML kullanacaksınız. Sayfalarınıza hareketli grafikleri nasıl yerleştireceğinizi de öğrenecek ve bunların nasıl gösterileceğini de kontrol edeceksiniz.

12.1 Bir Sayfaya Animasyon ve Diğer Özel Efektlerin Eklenmesi

Henüz farkına varmamış olabilirsiniz, ancak FrontPage 2000’de kullanabileceğiniz animasyon tiplerinden birini öğrendiniz. Bir sayfaya hareketli bir GIF dosyası eklemek, herhangi bir resmi eklemekten farklı bir işlem değildir.

Hareketli GIF’ler (animated GIF), Web’de animasyonun en temel formudur. Neredeyse tüm hareketli banner ilanlar, kişisel sayfalarda gördüğünüz dönen zarflar ve diğer küçük grafiklerin çoğu bu formattadır.

Bu GIF dosyaları, çok sayıda GIF resmini bir tek dosyada bir araya getiren bir yazılım tarafından yaratılır. Bu dosya, aynı zamanda bu resimleri hangi sırayla göstereceği, her resim arasında ne kadar duraklayacağı, ve tüm resimler arasında hangi sıklıkla döngü sağlayacağı hakkında da bilgi içerir.

FrontPage 2000’de son ürüne bir GIF gibi davranılır ve aynı dosya uzantısına sahiptir: .gif. Bu grafiği ithal edebilir, sayfalara ekleyebilir ve gösterim alanının boyunu değiştirebilirsiniz.

FrontPage’in içinden yapamayacağınız bir şey, bu dosyayı düzenlemek. Derinlik katamaz, kontrastını ayarlayamaz ve önceki saatte öğrendiğiniz diğer resim işleme özelliklerini kullanamazsınız. Bunun nedeni, GIF’te yapılan herhangi bir değişikliğin animasyonu kaldırarak dosyayı tek resme indirgemesidir. FrontPage, Pictures araç çubuğunda hareketli GIF’e zarar verebilecek tüm araçları gri renkte göstererek bunu önler.

Picture Properties iletişim kutusunu kullanarak, animasyonun ne kadar sıklıkla gösterileceğini belirleyebilirsiniz. Varsayılan durumda, FrontPage’e yüklenen bir GIF animasyonu tüm resimlerini bir kez gösterir; yani bir tek döngü (loop). Tekrarlanacak döngü sayısını belirleyebilir veya sonsuza (forever) ayarlayabilirsiniz.

Sonsuza kadar, oraya baktığınız sürece anlamına gelir. Siz sayfadan çıktıktan sonra animasyon devam ederek tarayıcının açık kalmasına neden olur mu? Bu, kimse ağacı görmezken düşen bir ağacın yine ses çıkarıp çıkarmadığını merak edenlerin sorduğu sorulardan biri.

Bu saatteki animasyonların yaratılması, hareketli GIF’lerle çalışmaktan sadece biraz daha zor.

12.1.1 Sayfalar Arasında Geçiş Efekti Yaratın

FrontPage 2000’de en kolay ekleyebileceğiniz özel efektlerden biri, sayfa geçişidir. Bu, tarayıcınıza bir sayfa yüklerken veya bir sayfadan çıkıp başka bir sayfaya geçerken alışık olmadığınız bir şey gösterir. Filmlerde, geçiş efektleri Star Wars gibi bilim kurgu filmlerinin demirbaş öğelerinden biri. Bir sahneden diğerine geçmek için, filmciler süpürme (wipe) gibi geçiş efektleri kullanıyor; bu efektte sahne bir bezle siliniyormuşçasına ekrandan silinir ve yerini yenisi alır.

Şekil 12.l’de geçişin ortasında bir Web sayfası görülüyor. İki Web sayfası görünür halde. Buna bir çember geçişi (circle transition) adı veriliyor, çünkü eski sayfa kaybolana kadar çember şeklinde küçülüyor.

Şekil 12.1: İki Web sayfası arasında bir çember geçişi

Format>Page Transition'a tıklayarak, bunlara geçiş ekleyebilir veya bir sayfadan kaldırabilirsiniz. Geçişleri, dört farklı olayla ilişkilendirebilirsiniz:

· Bir sayfa ilk kez yüklenirken

· Sayfadan çıkılırken

· Web ilk kez yüklenirken

· Web’den çıkılırken

Kullanabileceğiniz pek çok farklı sayfa geçişi var ve bunlar Circle (Çember), Checkerboard (Dama tahtası) ve Wipe (Silme) gibi anlaşılır isimlere sahip.

Bir geçiş bir yönle de ilişkilendirilebilir; örneğin Wipe Right'da ekrandaki yeni sayfa soldan sağa doğru süpürülür. Random (Rasgele) geçişi bağlı olduğu bir olay ortaya çıktığında diğer geçişlerden birini rasgele yükler.

Bir geçiş seçerken, saniye cinsinden süresini de seçebilirsiniz. Bu, efektin gösterilmesinin ne kadar süreceğini belirler. Efekt için 10 veya 20 saniye gibi daha uzun süreler seçebilirsiniz, ancak bunun Web'inizi ziyaret edecek insanları yavaşlatacağını aklınızdan çıkarmayın. Onlar, sayfaların yüklenmesi arasında bu kadar uzun beklemez.

Tüm geçişleri görmenin en kolay yolu, Random geçişini bir sayfaya uygulayarak test sayfasını yüklemek ve çıkmaktır.

12.1.2 Dinamik HTML ile Sayfa Öğelerini Hareketlendirme

FrontPage 2000, tüm sayfa yerine sayfadaki belirli öğelere ekleyebileceğiniz başka bir özel efekt grubuna da sahiptir. Bu efektler, yazı, hiperlink ve resimlerle ilişkilendirilebilir, bunlar bir sayfanın yüklenmesi, bir bağın tıklanması veya farenin metin veya bir resmin üzerinde tutulması gibi olaylara bağlanabilir.

Dinamik HTML, animasyon ve etkileşim için ek destek sağlayan bir HTML uzantısıdır ve FrontPage tarafından desteklenir.

Aslında, Microsoft'un Dinamik HTML versiyonunun FrontPage 2000 tarafından desteklendiğini söylemek daha doğru olacak. Önde gelen iki Web tarayıcısı üreticisi Netscape ve Microsoft, Dinamik HTML'in birbirleriyle rekabet eden sürümlerini geliştirdiler. FrontPage'de yarattığınız efektlerin çalışacağından emin olmak için, bunları Netscape Navigator'da da test etmelisiniz.

Bir Web sayfasındaki bir şeyi hareketlendirmek için, onu seçin ve Format>Dynamic HTML Effects'e tıklayın. Seçtiğiniz öğe üzerinde kullanılacak bir özel efekti seçmenizi sağlayan bir araç çubuğu açılır.

Dinamik HTML efektlerinin pek çoğu yazıya da uygulanabilir. Bu efektleri, yazıları ekrandaki yerlerine farklı şekillerde taşımak için kullanabilirsiniz:

· Elastic movement: Yazı, ekranın dışından, hedefin biraz ötesinden harekete başlar ve sonra doğru yere yerleşir.

· Drop in: Yazının her seferinde bir kelimesi yerine oturur.

· Fly in: Kelimeler farklı yönlerden uçarak gelir.

· Hop in: Kelimeler keyfi bir dairesel hareketle birer birer yerine yerleşir.

Bu efektler ve diğerleri, bir olay meydana geldiğinde gerçekleşmek üzere ayarlanır. Bu olaylardan biri, yazıyı içeren sayfanın yüklenmesi olabilir. Hiperlink ve resimler için, bir efekti fare hareketlerine bağlı olarak da tetikleyebilirsiniz. Bir yazı hiperlink'ini tıklandığında veya çift tıklandığında hareketlendirebilir, fare üzerine geldiğinde bir resmin tepki göstermesini sağlayabilirsiniz. Şekil 12.2’de “Welcome to my web site” başlığıyla ilişkili bir özel efektin uygulanmasında kullanılan Dynamic HTML araç çubuğu görülüyor.

Şekil 12.2: Bir Dinamik HTML efektinin ayarlanması

12.1.3 Bir Mouseover Resminin Yaratılması

World Wide Web'deki en popüler Dinamik HTML efektlerinden biri, mouseover (fare-üzerinde) resmidir. Bu efekt, farenin resmin üzerine getirilmesiyle resmin değişmesinden dolayı bu ismi almıştır.

Bir FrontPage 2000 temasını uygularken Active Graphics seçeneğini seçerseniz, tüm grafiksel gezinti çubukları mouseover resimleri olarak davranır. Bu çubuklardaki düğmeler, fare üzerlerine geldiğinde görüntü değiştirir.

Bu efekti yaratabilmek için iki resme ihtiyacınız olacak: Orijinal resim ve fare üzerine geldiğinde gösterilecek diğer resim. Bu ikinci resim, orijinalin üzerinde değişiklik yapılmış bir kopyası ya da tümüyle farklı bir resim olabilir.

Bu resimleri Web’inize dahil etmenin en kolay yolu, önce onları ithal etmektir. Fare üzerinde değilken, resmin orijinal versiyonu gösterilir. Bu resmin sayfaya diğer resimlerin eklendiği şekilde eklenmesi gerekir.

İkinci resim, bir Dinamik HTML efekti olarak tanımlanır. Orijinal resmi seçin ve Dynamic Effects araç çubuğunu açın. Olay bir mouseover, efekt Swap Picture (Resmi Değiştir) ve araç çubuğundaki üçüncü çekme menü, değiştirilecek resmi seçmenizi sağlar.

Şekil 12.3, resim seçmekte kullanılan iletişim kutusunu ve resmin önizlemesini gösteriyor.

Şekil 12.3: Bir mouseover efekti için değiştirilecek resmin seçilmesi

Değiştirilecek resim, orijinal resimle aynı boyda olmalıdır. Aynı boyda değilse, resmin görüntülenecek kısmını kullanılacak boya uygun şekilde ölçekler.

Swap Picture efekti, bir fare tıklamasıyla da ilişkilendirilebilir, böylece üç resimli bir dizi yaratabilirsiniz: Orijinal, fare-üzerinde ve tıklama resmi.

12.1.4 Bir Formatı Sayfada Farklı Yerlere Kopyalamak

Dinamik HTML’i kullanmanız, aynı efekti bir gezinti düğmesi dizisi gibi sayfadaki çok sayıda farklı öğeye uyguladığınızda sıkıcı olabilir. FrontPage 2000, bu sayfa öğesinin formatının diğer öğelere kopyalanmasını kolaylaştıran bir özelliğe sahiptir: Format Painter (Biçim Boyacısı).

Şekil 12.4’te, Standard araç çubuğundaki Format Painter düğmesi görülüyor.

Format Painter, bir sayfa öğesiyle ilişkili yazı tiplerini, renkleri, özel efektleri ve diğer biçimleri depolar. Onu kullanmak için, kopyalamak istediğiniz formata sahip öğeyi seçin ve Format Painter’a tıklayın. Düğme, kopyalama için kullanılabileceğini belirtmek için aydınlık hale geçer. Depolanan format bilgisini alacak öğeye tıklayın.

Sadece bir tek öğeye yetecek kadar biçim boyası vardır, bu yüzden her kopyalama işleminden önce bir kez bu düğmeye tıklamanız gerekir.

Şekil 12.4: