Bu projede sayfa üzerindeki mevcut resimlerle rollover’lar oluşturacak ve aynı anda sayfadaki birden fazla resmin değişmesini nasıl sağlayacağınızı öğreneceksiniz
Kullanıcı Etkileşimi
Etkileşim ve kullanıcı geribildirimi, Web sitelerinin önemli bileşenleridir. Bunları etkin bir şekilde kullanarak çeşitli avantajlar elde edebilirsiniz. Bu bileşenleri kullanarak örneğin ziyaretçilerinizin sitenizin içeriğini ve amacını daha iyi anlamalarına yardımcı olabilir, sayfalarınızda dolaşmalarını kolaylaştırabilir ve sitenizde gezmeyi onlar için daha hoş ve faydalı bir deneyim haline getirebilirsiniz.
Bir Web sitesine etkileşim eklemenin pek çok yolu vardır. Etkileşimli sayfalar oluşturmak için kullanabileceğiniz birçok araca örnek olarak dinamik ve veritabanı destekli sayfalar, Macromedia Flash ve QTVR’ı (Quick Time Virtual Reality) verebiliriz. QTVR, 360°
panoramik görünümleri ve etkileşimli bileşenleri destekleyen filmlerdir. Etkileşimli Web siteleri oluşturmak için kullanılan araçların en yaygın ve etkili olanlarından biri (özellikle istemci taraflı script’lerin yazılmasında kullanılan) JavaScript’tir. İstemci taraflı script’ler, Web sayfalarında bulunan ve tarayıcı tarafından işlenen script’lerdir. JSP (Java Server Page) tarafından kullanılan script’ler de dahil olmak üzere diğer script’ler, sunucu taraflı script’lerdir. Bunlar sunucu tarafından işlenir ve kullanıcıya gönderilir.
8
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
Macromedia Dreamweaver, standart JavaScript fonksiyonlarının kullanılma sürecini, davranışları kullanıma sunarak basitleştirir. Davranışlar (behavior) Web sitenize kolaylıkla dahil edebileceğiniz önceden yazılmış JavaScript kod rutinleridir.
Davranış, bir kullanıcı olayını (örneğin imlecin Web tarayıcısındaki grafik tabanlı bir düğmenin üzerine getirilmesi), bu olayın sonucu olarak gerçekleşen bir eylemle ya da bir dizi eylemle birleştirir. Davranışları sayfalarınıza etkileşim eklemek, kullanıcıların eylemlerine bağlı olarak geribildirim almalarını ve gördükleri bilgileri değiştirmelerini ya da değiştiremiyorlarsa kontrol etmelerini sağlamak için kullanabilirsiniz. Bu derste Dreamweaver davranışlarını rollover’lar, yeni tarayıcı pencereleri ve menüler oluşturmak için kullanacaksınız. Dreamweaver’da önceden tanımlanmış bir dizi davranış bulunmaktadır. İlave davranışlar ekleyerek Dreamweaver’ı geliştirebilir ya da JavaScript konusunda ustaysanız kendi davranışlarınızı oluşturabilirsiniz.
Tamamlanmış sayfa örneklerini görmek istiyorsanız Completed/explorations/poses.html ve Lesson_08_Interactivity/Completed/explorations/meditations.html dosyalarını açın.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Rollover’lar oluşturacaksınız.
• Davranışları kullanarak sayfalarınıza kullanıcı etkileşimi ekleyeceksiniz.
• Bir kullanıcı eylemine birden fazla davranış ekleyeceksiniz
• Resim haritalarına davranışlar ekleyeceksiniz.
• Bir durum çubuğu mesajı oluşturacaksınız.
• Kullanıcıları, ellerinde bulunan tarayıcı sürümlerine göre yeniden yönlendireceksiniz.
• Yeni bir tarayıcı penceresi açacaksınız.
• Bir açılır (popup) menü oluşturacaksınız.
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık 2 saat sürecektir.
Ders Dosyaları
Başlangıç Dosyaları:
Lesson_08_Interactivity/explorations…(bütün dosyalar) Tamamlanmış Proje:
Lesson_08_Interactivity/Completed/explorations…(bütün dosyalar)
Bir Rollover Resmi Eklemek
Web sayfalarında JavaScript en çok rollover oluşturmak için kullanılır. (Rollover, kullanıcı imleci üzerine getirdiğinde değişen bir resimdir.) Rollover’lar, iki resmin kullanımını aynı alanda birleştirir. Bir ziyaretçi rollover’ların kullanıldığı bir sayfaya ilk girdiğinde, bu resim kombinasyonları orijinal durumlarında görüntülenir. İmleç rollover resminin üzerine getirildiğinde, bunun yerini yeni bir resim alır. Yeni resim, bazen resmin “on” ya da “over” durumu olarak adlandırılır. Kullanıcı imleci resimden uzaklaştırdığında, resim orijinal haline geri dönebilir ya da değişmiş olarak kalır. Rollover, etkileşimin temel bir uygulamasıdır. Kullanıcının imleci resmin üzerine getirme işlemine bir yanıt verir. Bu yanıt, genellikle mevcut resimde görsel bir efekt (örneğin bir düğmenin aydınlatılması, bir sekmenin vurgulanması ya da bir gezinti elemanının etkin görünmesini sağlamak için derinliğin değiştirilmesi) olarak görünür. Rollover yanıtında ayrıca, yeni resme içeriğin tanımı ya da açıklaması gibi ilave bilgiler de eklenebilir.
Web sitesindeki etkileşim, özellikle kullanıcı açısından önemlidir. Bu, ziyaretçi ile Web sitesi arasında gerçekleşen bir şeydir. Etkileşimin sağlanması için bir hareket ve bir yanıt gerekir; yani bu iki yönlü bir iletişim sürecidir. Sayfalarınıza etkileşim eklemeniz (yani ziyaretçilerin eylemlerine sitenizin vereceği yanıtı belirlemeniz), sitenize yapılan ziyaretlerin karmaşıklık derecesini ve derinliğini artırabilir. Ziyaretçileri belirli eylemler gerçekleştirmeye ya da katılımda bulunmaya teşvik eden Web siteleri, kullanıcı üzerinde yaratılan etki açısından, kullanıcıyı pasif bir konumda tutan sitelere göre muhtemelen daha başarılı ve işlevseldir ve akılda daha çok kalır.
Dreamweaver’da, hiç HTML ya da JavaScript kodu kullanmadan rollover’lar
oluşturabilirsiniz. Rollover, Insert çubuğunun Common kategorisinde yer alan basit bir davranıştır. Bu yöntemi kullandığınızda, davranış Dreamweaver tarafından oluşturulur.
1. Lesson_08_Interactivity/explorations klasöründeki poses.html dosyasını açın.
Belge penceresinin üst kısmında yer alan tablonun ilk boş hücresine tıklayın.
Insert araç çubuğunun Common kategorisindeki Images menüsünden Rollover Image düğmesini seçin.
Insert Rollover Image iletişim kutusu açılacaktır.
Dreamweaver, rollover oluşturma işleminde bu iletişim kutusu aracılığıyla size adım adım yardımcı olur. Rollover oluşturmak için kullanacağınız resimleri henüz sayfaya yerleştirmediyseniz bu yöntemi kullanmayı tercih edebilirsiniz, çünkü bu yöntemle aynı anda hem resmi ekleyebilir, hem de bunu rollover olarak tanımlayabilirsiniz. Bir sonraki uygulamada, sayfaya daha önceden yerleştirilmiş olan resimlerden rollover’lar oluşturacaksınız.
Bir rollover resmi eklemek için Insert > Image Objects > Rollover Image komutunu seçip yine aynı iletişim kutusunu kullanmanız da mümkündür.
2. Image name metin alanına home yazarak resmi adlandırın.
Bu alan, resmi adlandırmak için kullanılır. Rollover resimlerinize bir isim vermezseniz, Dreamweaver bunlara otomatik olarak numara sırasıyla isimler atar (Image1, Image2, vb).
Web sayfalarınızı oluştururken rollover’lara bunların ne için kullanılacaklarını gösteren özel ve anlamlı isimler vermeyi alışkanlık haline getirmeniz iyi olur. Resimlerinizi adlandırırken boşluk ya da herhangi bir özel karakter kullanmayın ve ismin başına bir numara yazmayın. Bunların herhangi birini yaptığınız takdirde, script’lerde sorun çıkabilir ve rollover’larınız doğru şekilde çalışmayabilir.
3. Original image metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_
08_Interactivity/explorations/images klasöründen home.gif resmini seçin.
Kullanıcı imleci resmin üzerine getirmeden önce sayfada bu resim görünecektir.
4. Rollover image metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_
08_Interactivity/explorations/images klasöründen home-on.gif rollover resmini seçin.
Bu sayfa bir Web tarayıcısında görüntülendiğinde, ziyaretçi ilk başta home.gif resmini görür. Kullanıcı imleci tarayıcı penceresindeki home.gif resminin üzerine getirdiğinde, bu resmin yerini home-on.gif resmi alır.
Rollover resimlerini hazırlarken, orijinal resmi ve bunun yerini alacak olan resmi aynı boyutlarda oluşturun. Bu iki resim aynı boyutlarda değilse, ikinci rollover resminin boyutları ilk resmin boyutlarına uyacak şekilde değiştirilebilir.
Boyutların değiştirilmesi ikinci resmi bozar, çünkü bu resim sadece ilk resmin bulunduğu alanı kullanabilir.
5. Alternate text metin alanına Home yazın. When clicked, Go to URL metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_08_Interactivity klasöründeki index.html dosyasını bulun. Preload rollover image onay kutusunu işaretli olarak bırakın ve OK düğmesine tıklayın.
Preload rollover image seçeneği varsayılan durumda işaretlidir ve kullanılması şiddetle tavsiye edilir. Bu ayar, belge ziyaretçinin tarayıcısına yüklendiğinde ikinci resmin yüklenmesine neden olur. Eğer bu ayar işaretli değilse, kullanıcı imleci birinci resmin üzerine getirinceye ve tarayıcı bu rollover resmini sunucudan talep edinceye kadar resim yüklenmez. Resmin sayfanın geri kalan kısmıyla birlikte yüklenmesi, resmin kullanıcı imleci üzerine getirdiği anda yüklenmesinden kaynaklanan gecikmeleri önleyerek rollover işleminin hızla gerçekleşmesini sağlar.
Rollover seçtiğiniz dosyaya bağlanacaktır. When clicked, Go to URL metin alanında seçtiğiniz dosya, resim seçildiğinde Properties denetçisindeki Link metin alanında
6. Dosyanızı kaydedin ve Web tarayıcınızda test edin.
Bu dosyayı kapatabilirsiniz.
Resimlerinizi oluştururken dosya boyutlarını mümkün olduğu kadar küçük tutun. Rollover’larda aynı düğme için bir değil, iki resim yüklediğinizi unutmayın. Bu uygulamada eklediğiniz rollover gibi bir rollover’ın dosya boyutu büyüktür, çünkü indirilmesi gereken iki resim vardır. Dosya boyutunun artma miktarı, resimlerin boyutlarına bağlı olarak değişir.
Davranış Eklemek
Bu uygulamada, sayfaya daha önce yerleştirilmiş olan resimlerle rollover oluşturmayı öğreneceksiniz. Burada elde edilen sonuç, bir önceki uygulamada elde edilen sonuçla aynıdır: İmleç resmin üzerine getirildiğinde bunun yerini başka bir resim alır. Ama bu uygulamada, rollover’ları eklemek için farklı bir yöntem kullanacaksınız: Rollover’ı oluşturmak için gereken davranışı Behaviors panelini kullanarak ekleyeceksiniz.
Kendi Web sayfalarınızı oluştururken, eğer bir sayfaya orijinal resimlerinizi daha önce yerleştirdiyseniz bu yöntemi kullanmanız gerekir. Orijinal resimler sayfaya
yerleştirilmemişse, bir önceki uygulamadaki yöntemi kullanarak orijinal resimle rollover resmini tek bir adımda ayarlayabilirsiniz.
1. Properties denetçisindeki Image Name metin alanını kullanarak sayfanın üst kısmındaki tabloda yer alan bölümlere ait altı gezinti resmini adlandırın.
Resimlerin şu şekilde adlandırılması gerekir: about.gif resmi about, community.
gif resmi community, explorations.gif resmi explorations, schedule.gif resmi schedule, teachers.gif resmi teachers ve training.gif resmi de training olarak adlandırılmalıdır. Gezinti resimlerinin her birini Ders 5’te “Resim Tabanlı Bağlantı Oluşturmak” bölümünde anlatılan tekniği kullanarak kendilerine karşılık gelen sayfalara bağlayın.
Resimlere içeriklerine ya da işlevlerine uygun isimler vermek iyi bir alışkanlıktır. Bu adlandırma yaklaşımı ayrıca, hangi resimlerin seçilen isimlerle ilişkili olduğunun net bir şekilde görülmesine yardımcı olur.
2. Etiket Seçici’yi kullanarak about bağlantısını seçin. Sadece resmi seçmediğinizden emin olun. Tag Inspector panelini açın ve Behaviors sekmesine tıklayın.
Behaviors paneli açılacaktır.
Behaviors panelini açmak için Window > Behaviors komutunu da kullanabilirsiniz.
3. Behaviors panelindeki artı işaretli (+) düğmesine tıklayın ve açılan Actions yani eylem menüsünden Swap Image’ı seçin.
Swap Image iletişim kutusu açılacaktır. Swap Image davranışı, önceki uygulamada kullandığınız rollover efektini oluşturur. Yani ziyaretçinin imleci üzerine getirdiği orijinal resmin yerine yeni bir resmin geçmesini sağlar. Davranış, bir eylem ve bir olayın kombinasyonudur.
Eylem (action), kullanıcı etkileşiminin sonucu olarak ortaya çıkar. Bir eylem seçtiğinizde, Dreamweaver bu eylemi Behaviors panelindeki listeye ekler. Actions menüsü, belge penceresinde seçtiğiniz elemana bağlı olarak eylemleri görüntüler ya da bunların etkinliklerini kaldırır. Bu örnekteki eylem, bir resmin diğeriyle değiştirilmesidir.
Dreamweaver ayrıca, bu eylemler için uygun bir olayı (ya da olayları) otomatik olarak ekler. Olay (event), eylemin gerçekleşmesini sağlar. Olay örneği olarak kullanıcının imleci bir resmin üzerine getirmesi ya da bir düğmeye tıklamasını sayabiliriz. Bu örnekte olay onMouseOver’dır. Bu, rollover’lar için Dreamweaver’ın varsayılan seçeneğidir. Bu dersin ilerleyen sayfalarında, belirli olayları seçmeyi öğreneceksiniz.
4. Images listesinde about resminin seçili olduğundan emin olun.
Resim listede “about” olarak yer alacaktır. Bu uygulamanın ikinci adımında seçtiğiniz resme bu ismi vermiş, dördüncü adımda da Behaviors panelini kullanarak buna bir eylem eklemiştiniz. Swap Image iletişim kutusundaki Images listesinde about resmini seçerek, kullanıcı imleci bu resmin üzerine getirdiğinde bunun bir rollover resmiyle değiştirileceğini göstermiş oldunuz. Rollover resmini bir sonraki adımda seçeceksiniz.
Bu listeden başka bir resim seçmiş olsaydınız, kullanıcı imleci about resminin üzerine getirdiğinde seçili resim rollover resmiyle değiştirilecekti, çünkü davranışın uygulandığı resim about resmidir. Bu işlemi bir sonraki uygulamada yapacaksınız.
Resimlerinizi adlandırmadığınız takdirde bunların bu iletişim kutusunda “unnamed
<img>” ismiyle görüneceğini unutmayın. Bu iletişim kutusunda “unnamed <img>”
isimli resim örnekleri görebilirsiniz, çünkü sadece yedi resmi adlandırdınız. Resimleri uygun şekilde adlandırmak bu yüzden önemlidir; resimler açık ve mantıklı bir şekilde adlandırılmadığı takdirde davranışlarla çalışmak çok zor olur. Adlandırılmamış resimlerle dolu bir listede üzerinde çalışmakta olduğunuz resimleri bulmanız zor olabilir.
5. Set source to metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_
08_Interactivity/explorations/images klasöründe yer alan about-on.gif resmini bulun. Rollover resmi olarak kullanmak üzere bu resmi seçmek için Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayın.
Set source to, rollover resmi olarak ne kullanılacağını tanımlar. Kaynağın (source) ayarlanması, bir önceki uygulamada rollover’ın seçilmesi işlemiyle aynı şekilde gerçekleştirilir. Genellikle bir resmin orijinal görünümü “off” durumu olarak, kullanıcı imleci resmin üzerine getirdiğinde resmin değişmesi de “on” durumu olarak bilinir. “On” durumlarında kullanılan resimler genellikle basılı bir düğme ya da vurgulanmış bir sözcük gibi görünür. Bu da ziyaretçiye, nesnenin etkin ya da bağlı bir eleman olduğunu gösterir.
Bu uygulamada kullanacağınız bütün rollover resimleri images klasöründe bulunmaktadır ve rollover resim dosyalarının isimlerinde _on soneki kullanılmıştır. Resimleriniz için mantıklı ve sıralı bir adlandırma sistemi oluşturmanız (örneğin orijinal resme about.gif, rollover resmine de about_on.gif ya da about_over.gif ismini vermeniz) resimlerinizi düzenli tutmanıza yardımcı olur ve böylece doğru resmi daha kolay bulursunuz.
Resmi seçtikten sonra Swap Image iletişim kutusuna geri dönersiniz. Images listesinde resmin sağında, buna rollover için alternatif bir resim atandığını gösteren bir yıldız işareti görünecektir.
6. Preload images ve Restore images onMouseOut onay kutularının işaretli olduğundan emin olun, sonra da OK düğmesine tıklayın.
Bir önceki uygulamada eklediğiniz rollover’larda da olduğu gibi, Preload images seçeneği varsayılan durumda işaretlidir. Bu seçenek, resimlerin, tarayıcı resmi göstermeye ihtiyaç duyup da yükleyene kadar beklemek yerine, sayfa tarayıcı tarafından çağrıldığında yüklenmelerine neden olur.
Restore images onMouseOut seçeneği de varsayılan olarak işaretlidir ve işaretli bırakılması tavsiye edilir. Bu seçenek, kullanıcı imleci resimden uzaklaştırdığında ilgili resmin orijinal durumuna geri dönmesini sağlar.
Restore images onMouseOut seçeneğiyle tanımlanan işlem, Behaviors panelinde ayrı bir eylem olarak bulunan Swap Image Restore tarafından gerçekleştirilir.
Davranışın her iki kısmı da Behaviors panelinde listelenecektir: onMouseOver olayı Swap Image eyleminin, onMouseOut olayı da Swap Image Restore eyleminin gerçekleşmesine neden olur. Bu eylemlerin ve olayların kombinasyonu, rollover efektini oluşturur: Ziyaretçi imleci resmin üzerine getirdiğinde resim değişir, imleç resimden uzaklaştırıldığında da eski durumuna geri döner.
7. Üçüncü ve yedinci adım arasındaki işlemleri geri kalan gezinti alanı bölüm başlıkları için de tekrarlayın. Set source to metin alanında tanımlanan rollover resimleri için ilgili resimlerin -on versiyonlarını kullanın.
Bir davranışı silmeniz gerekirse, belge penceresinde davranışı içeren nesneyi ve Behaviors panelinde silmek istediğiniz eylemi seçin, sonra da Behaviors panelinin üst kısmındaki eksi (–) işaretli düğmeye tıklayın. Bir davranışı, seçtikten sonra Delete (Macintosh’ta) ya da Backspace (Windows’ta) tuşuna basarak da silebilirsiniz.
Dreamweaver 8’de rollover’ların çalışması için artık ilgili resme bir bağlantı uygulanmış olması gerekmemektedir. Rollover’ların kendisini doğrudan resimlere uygulayabilirsiniz. Bu tekniği tercih etmemenin iki iyi sebebi vardır.
Birincisi bu, eski Web tarayıcılarında çalışmaz; ikinci olarak da, ziyaretçi üzerine tıkladığında hiçbir şey yapmayan rollover’lara sahip olursunuz. Web kullanıcıları rollover’ların tıklanabilir öğeler olduğunu bilirler ve resminizde bağlantısı olmayan bir rollover kullandığınızda bu durum ziyaretçilerin kafasını karıştırabilir.
8. Dosyayı kaydedin ve rollover’ları Web tarayıcınızda test edin.
İmleci üzerlerine getirdiğinizde resimlerin değiştiğine dikkat edin.
Bir Olayla Birden Fazla Resmi Değiştirmek
Tek bir olaya birden fazla eylem uygulayarak daha karmaşık bir etkileşim ortamı yaratabilirsiniz. Örneğin, aynı olayın sonucu olarak aynı anda birkaç resim alanında orijinal resimden rollover resmine geçilmesini sağlayabilirsiniz. Bu teknik, kullanıcı imleci bir düğmenin üzerine getirdiğinde iki orijinal resmin değişmesini ve rollover resmine geçiş yapılmasını sağlamak için kullanılabilir.
Bu uygulamada meditation resmine bir davranış uygulayacaksınız. Bu davranış, kullanıcı imleci ilk resmin üzerine getirdiğinde resmin altındaki boşluk resminin yerini başka bir resmin almasını sağlayacaktır. Bu uygulamada, ikinci rollover işleminin aynı olayı kullanarak gerçekleşebilmesi için mevcut Swap Image eylemini düzenleyecek ve ikinci resim değişikliğini tanımlayacaksınız.
1. Lesson_08_Interactivity/explorations klasöründeki meditations.html belgesini açın. meditation resmini seçin ve Behaviors panelindeki mevcut Swap Image eylemine çift tıklayın.
Swap Image Restore eyleminde değil de Swap Image eylemine çift tıkladığınızdan emin olun.
Swap Image iletişim kutusu açılacaktır.
2. Swap Image iletişim kutusunda photoArea adlı resmi seçin. Set Source To metin alanının sağındaki Browse düğmesine tıklayın ve Lesson_08_
Interactivity/explorations/images klasöründe yer alan med_hands.jpg resmini seçin.
meditation resminin altındaki boş resmi içeren photoArea resim alanı, sizin yerinize önceden adlandırılmıştır. Bu adımda, Swap Image iletişim kutusundaki boş resmi seçiyorsunuz. Böylece onu, meditasyon yapan kadın resmiyle değiştirebilirsiniz.
Swap Image iletişim kutusundaki Images listesine bakın. İsimlerinin sonunda yıldız işareti bulunan resimlere bir rollover resmi atanmış durumdadır. Örneğin, meditation resminin yanında bir yıldız işareti görünür, çünkü bu rollover tanımlanmıştır. Artık photoArea resminin yanında da bir yıldız işareti görünmektedir, çünkü bu adımda bu resme bir rollover atadınız. Hangi orijinal resimlerin değişerek rollover resimlerine dönüşeceğini bu listeye bakarak hemen anlayabilirsiniz.
3. OK düğmesine tıklayarak Swap Image iletişim kutusunu kapatın. Dosyayı tekrar kaydedin ve Web tarayıcınızda test edin.
Birden fazla resmin değiştirilmesi, kullanıcılara ilave bilgi vermek için faydalı olabilir, ama tek bir eylemle çok fazla resim değişikliği meydana geldiğinde tarayıcının yavaşlayabileceğini unutmayın.
İmleci meditation resminin üzerine getirdiğinizde sözcüğün değişerek daha açık bir renkle görüntülendiğine ve altta yer alan ilgili resmin de değiştiğine dikkat edin. İmleci başka bir yere götürdüğünüzde her iki resim de tekrar orijinal haline dönecektir.
Resim Haritalarına Davranış Eklemek
İmleci standart bir rollover resminin herhangi bir kısmının üzerine getirdiğinizde bir JavaScript kodu çağrılır ve resim değişikliği gerçekleşir. Ama bazen rollover işleminin sadece, kullanıcı imleci resmin belirli bir kısmının üzerine getirdiğinde gerçekleşmesini istersiniz. Böyle durumlarda, bu aktif alanları tanımlamak için resim haritalarını kullanabilirsiniz.
1. meditations.html dosyasında med_img_map.jpg resmini seçin ve nav olarak adlandırın. Ardından Properties denetçisindeki Rectangular Hotspot aracını kullanarak meditations sözcüğünün etrafında buna yakın olacak şekilde bir resim haritası oluşturun.
2. Behaviors panelindeki artı (+) işaretli düğmeye tıklayın ve Actions menüsünden Swap Image’i seçin.
Properties denetçisindeki Alt metin alanına bir açıklama girmeniz gerektiğini bildiren bir iletişim kutusuyla karşılaşabilirsiniz. Bu uygulamada açıklama önceden atanmış durumdadır, dolayısıyla bu mesajı görmezden gelebilirsiniz.
Burada bir resim haritasına bir swap image davranışı uyguluyorsunuz. Bu davranış asıl resim içinde bulunan ve resim haritasını çevreleyen alana uygulanmaz.
med_img_map.jpg resminin içindeki resim haritasını yeni oluşturduğunuz için, aktif alan (hotspot) otomatik olarak seçili hale gelecektir. Eğer davranışı resim haritasını oluşturduktan hemen sonra uygulamayacaksanız, aktif alanı etkin hale getirmek için Properties denetçisindeki işaretçi (pointer) aracını seçmeniz ve resim haritasına tıklamanız gerekir. Rollover’ın bütün resme uygulanmasını istemiyoruz.
3. Images listesinde photoArea resmini seçin. Set source to metin alanının yanındaki Browse düğmesine tıklayın ve images klasöründe med_hands.jpg resmini bulun. Resmi seçmek ve Swap Image iletişim kutusuna geri dönmek için, Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayarak resmi seçin ve Swap Image iletişim kutusuna geri dönün.
Böylece bir Web tarayıcısında imleci aktif alanın üzerine getirdiğinizde sol tarafta görünecek olan resmi seçmiş oldunuz.
Eğer aktif alanın bulunduğu resmi değiştirilecek resim olarak tanımlarsanız, tıklanabilir alan orijinal resmin sadece belirli bir kısmını oluştursa bile resmin tamamı değiştirilecektir.
4. Preload images ve Restore images onMouseOut onay kutularının işaretli olduğundan emin olun ve OK düğmesine tıklayın.
İletişim kutusunun kapandığını ve belge penceresine döndüğünüzü göreceksiniz. med_
img_map.jpg resminin üzerindeki resim haritası seçildiğinde, Behaviors panelinde Swap Image’in listelendiğini göreceksiniz. Resmi seçer, fakat resim haritasını seçmezseniz, Behaviors panelinde Swap Image görünmez.
5. Dosyayı kaydedin ve çalışmanızı Web tarayıcınızda test edin.
Resim haritalarını davranışlarla birlikte kullanarak resimler, eylemler ve olaylar üzerinde daha fazla kontrol imkânına sahip olabilirsiniz.
Eylemleri ve Olayları Düzenlemek
Davranış oluşturmak üzere birleştirilen eylemleri ve olayları birkaç yolla
düzenleyebilirsiniz: Bir eylemin karşılık geldiği olayı değiştirebilir, tek bir olaya birden fazla eylem iliştirebilir ve bu eylemlerin gerçekleşme sırasını değiştirebilirsiniz. Örneğin, bir önceki uygulamada rollover davranışına karşılık gelen eylem Swap Image eylemi, olay da OnMouseOver olayıdır. Bu uygulamada, bir açılır mesaj için bir eylem ekleyecek ve buna karşılık gelen bir olay seçeceksiniz.
1. meditations.html belgesinde med_img_map.jpg resmindeki “poses” sözcüğünün etrafında dikdörtgen şeklinde bir resim haritası aktif alanı (hotspot) oluşturun.
Aktif alanı seçerek Behaviors panelindeki artı işaretli (+) düğmeye tıklayın ve açılan eylem menüsünden Popup Message’ı seçin.
Popup Message iletişim kutusu açılacaktır. Burada mesajınızı girebileceğiniz bir metin alanı göreceksiniz.
2. Explore a variety of different yoga poses yazın ve OK düğmesine tıklayın.
Popup Message eylemi ve ona karşılık gelen olay (onClick) Behaviors panelinde belirecektir.
3. Behaviors panelindeki onClick olayına tıklayın. Geçerli olayın sağında açılan menüden onMouseOut olayını seçin.
Add Behavior menüsünün Show Events For kısmında istediğiniz seçimi yaparak olayları görüntüleyecek olan Web tarayıcısı tipini belirleyebilirsiniz.
Olayları belirli bir tarayıcı sürümünde (örneğin IE 6.0) ya da belirli bir sürüm numarasına sahip olan (örneğin 4.0 ve daha sonraki sürümlere sahip) bütün tarayıcılarda görüntülemeyi tercih edebilirsiniz. Tarayıcı tipini seçtikten sonra, Behaviors panelinde bir olay seçerek Events menüsünü
görüntüleyebilirsiniz. Events menüsünde, sadece seçtiğiniz tarayıcı tipinde kullanılabilen olaylar görünecektir.
Bu menüde yer alan olaylar, seçtiğiniz tarayıcı tipine ve eyleme bağlı olarak farklılık gösterebilir.
Events menüsü sadece Behaviors panelinde bir olay seçmeniz durumunda görünür.
Behaviors panelindeki yukarı ve aşağı ok tuşları, olayların Behaviors paneli listesindeki sırasını ayarlamak için kullanılabilir. Yukarı ok, seçili öğeyi listede yukarıya, aşağı ok da aşağıya taşır. Eylemlerin tarayıcı tarafından çalıştırılma sırasını değiştirmek için bu düğmeleri kullanın.
4. Sayfayı kaydedin ve Web tarayıcınızda önizleyin.
Popup Message davranışını sayfalarınıza eklerken dikkatli olun. Bu derste daha sonra göreceğimiz açılır pencerelerde olduğu gibi, açılır mesajlar da çok fazla kullanıldıkları takdirde ziyaretçilerinizin canını sıkabilir.
Bu dosyayı bir sonraki uygulamada kullanmak üzere açık bırakın.
Bir Durum Çubuğu Mesajı Oluşturmak
Durum çubuğu mesajı, kullanıcılara bağlantıların onları nereye götüreceği konusunda ek bilgi vermek için kullanılabilir. Tarayıcı penceresinin alt kısmındaki durum çubuğunda görünen bu mesaj, bağlı sayfaya giden URL ya da yolun yerini alır.
Oluşturacağınız durum çubuğu mesajı sadece sayfanın Internet Explorer ya da Netscape’te açılması durumunda görünür.
1. meditations.html belgesinde med_img_map.jpg resminin üzerinde yer alan
“practice” sözcüğünün etrafında dikdörtgen şeklinde bir resim haritası aktif alanı (hotspot) oluşturun. Aktif alanı seçerek Behaviors panelindeki artı işaretli (+) düğmesine tıklayın ve açılan Add Behavior eylem menüsünden Set Text > Set Text Of Status Bar komutunu seçin.
Set Text Of Status Bar iletişim kutusu açılacaktır. Burada mesajınızı yazabileceğiniz bir metin alanı göreceksiniz.
Behaviors panelinde Set Text of Status Bar eyleminin belirdiğine dikkat edin.
3. Dosyayı kaydedin ve sayfayı Web tarayıcınızda test edin.
İmleci “practice” sözcüğünün üzerine getirdiğinizde, oluşturduğunuz mesaj tarayıcı penceresinin alt kısmındaki durum çubuğunda görüntülenecektir. meditation.html dosyasını açık bırakabilirsiniz; bu dosyayı bu derste daha sonra yine kullanacaksınız.
Web Tarayıcısını Kontrol Etmek
JavaScript olayları ve diğer bazı özellikler bütün Web tarayıcıları tarafından desteklenmez.
Bunların bazıları, özellikle de sürüm numarası 4.0’dan eski olan tarayıcıların sağladığı destek son derece sınırlıdır. Eski Web tarayıcılarında düzgün bir şekilde gösterilemeyecek olan gelişmiş özellikler sunmak istiyorsanız, Check Browser eylemiyle Web sitenizi ziyaret edenlerin hangi tarayıcıları kullandığını algılayabilir ve kullanıcıları başka bir sayfaya yönlendirebilirsiniz. Örneğin sayfanız katmanlar içeriyorsa (bu konuyu Ders 9’da göreceğiz), katman içermeyen bir sayfa oluşturabilir ve tarayıcı sürümü 4.0 ya da daha yeni olan ziyaretçileri katmanlarla oluşturulmuş sayfaya yönlendirebilirsiniz. Bu durumda, daha eski tarayıcı sürümlerini kullanan ya da JavaScript’i etkinleştirmemiş olan kullanıcılar katmanların kullanılmadığı sayfada kalacaktır.
Bu uygulamada belirli bir sayfaya bir Check Browser davranışı ekleyecek ve tarayıcı sürümü 4.0 ya da daha yeni olan kullanan ziyaretçileri başka bir sayfaya yönlendireceksiniz.
Bu özelliği kullanacaksanız, Check Browser davranışını içeren sayfanın boyutunu çok küçük tutmanız iyi olabilir. Böylece bu sayfa hızla yüklenip ziyaretçileri hemen diğer tarafa yönlendirebilir. Sayfanın boyutu çok büyükse yüklenmesi uzun sürebilir; bu da ziyaretçilerin hem bu sayfanın, hem de yönlendirilecekleri sayfanın yüklenmesini beklemelerine neden olur.
1. explorations klasöründeki sequences.html dosyasını açın. Etiket Seçici’deki (belge penceresinin sol alt köşesinde yer alır) <body> ifadesine tıklayarak <body>
etiketini seçin.
Eylem, sayfa yüklendiğinde kullanıcının yeniden yönlendirilmesi için <body> etiketine eklenecektir. Behaviors panelinin başlık çubuğunda <body> ifadesini göreceksiniz. Bu da
<body> etiketinin seçili olduğunu gösterir.
<body> etiketi seçildiğinde belgedeki tüm içerik seçilmiş olarak görünür.
2. Behaviors panelindeki artı işaretli (+) düğmesine tıklayın ve açılan Add Behavior eylem menüsünden Check Browser’ı seçin.
Check Browser iletişim kutusu.
3. Netscape 4.0 ve Explorer 4.0 ya da daha sonraki sürümler için, ilgili menüden Go to URL’i seçin. Netscape ve Explorer’a ait Otherwise seçeneklerinin ikisinde de Stay on This Page’i seçin. Other Browsers seçeneğini de Stay on This Page olarak ayarlayın.
Check Browser davranışını eski tarayıcı sürümlerini kullanan ziyaretçileri başka bir sayfaya yönlendirmek için kullanmayı denerseniz, bu, JavaScript’i desteklemeyen bir tarayıcı kullanan ya da JavaScript’in etkinliğini kaldırmış olan ziyaretçilerin işine yaramaz.
Kullandıkları tarayıcı sürümünden bağımsız olarak bütün kullanıcıları başka bir sayfaya yönlendirmek istiyorsanız, Insert > HTML> Head Tags > Refresh komutunu seçerek ya da Insert araç çubuğunun HTML kategorisine geçip Head menüsündeki Refresh seçeneğine tıklayarak refresh meta etiketini kullanabilirsiniz. Açılan iletişim kutusundaki Go to URL metin alanına, kullanıcıların yönlendirilmesini istediğiniz URL’i yazın. Tarayıcı ziyaretçileri yönlendirmek istediğiniz sayfayı yüklemeden önce ziyaretçilerin belirli bir süre sayfada kalmalarını istiyorsanız, Delay metin alanına bu süreyi saniye cinsinden girin. Refresh This Document seçeneği, bu sayfayı tarayıcıya yeniden yükler.
4. URL metin alanının yanındaki Browse düğmesine tıklayın ve Lesson_08_
Interactivity/explorations klasöründeki poses.htm dosyasını bulun.
poses.html dosyası, en yeni tarayıcı sürümlerini kullanan ziyaretçilerin yönlendirileceği sayfadır.
5. JavaScript kodunu sayfanıza eklemek için OK düğmesine tıklayın.
Behaviors panelinde kendisine karşılık gelen Check Browser eylemiyle onLoad olayı belirecektir.
6. Dosyayı kaydedin ve sayfayı Web tarayıcınızda test edin.
Internet Explorer ya da Netscape’in 4.0 ya da daha yeni bir sürümünü kullanmıyorsanız, sabit sayfada kalırsınız. Firefox, Safari ve Opera gibi sık kullanılan tarayıcılar da buna dahildir.
Internet Explorer ya da Netscape’in 4.0 ya da daha yeni bir sürümünü kullanıyorsanız, tarayıcı sizi diğer sayfaya (poses.html) yönlendirmeden önce kısa bir süre için sequences.html sayfasını görebilirsiniz.
sequences.html dosyasını kapatabilirsiniz.
Yeni Bir Tarayıcı Penceresi Açmak
Bu uygulamada, sayfa yüklendiğinde yeni bir tarayıcı penceresinin nasıl açıldığını öğreneceksiniz. Bu yeni pencereyi reklamlar, terimler ya da başka bilgileri görüntülemek için kullanabilirsiniz. _blank hedefini standart bir bağlantı ile birlikte kullanarak bir tarayıcı penceresi açabilirsiniz, ama bu yeni pencerenin niteliklerini hiçbir şekilde kontrol edemezsiniz.
Diğer yandan, Open Browser Window seçeneği, yeni tarayıcı penceresinin büyüklüğü ile birlikte kaydırma çubukları ve menü çubukları gibi çeşitli niteliklerini kontrol etmenize imkân sağlar.
Open Browser Window seçeneğini eklemek kolay olsa da, bunu bir Web sayfasında kullanmadan önce iyi düşünün. Ekstra bir pencerenin gerekli olduğundan emin olun. Kullanıcılar Web’de dolaşırken sürekli olarak açılan yeni pencerelerden genellikle rahatsız olurlar. Bunları makul bir seviyede tutmak önemlidir. Yeni tarayıcı pencereleri oluştururken ya da başka davranışları kullanırken, ziyaretçilere sunduğunuz geribildirim ya da etkileşim seçeneklerinin miktarını göz önünde bulundurmayı unutmayın ve çok az (bu durumda
1. poses.html dosyasında ilk sütunun sekizinci satırındaki Uttanasana sözcüğünü seçin. Yeni bir davranış eklemek için Behaviors panelindeki artı düğmesine (+) tıklayın ve ardından açılan listeden Open Browser Window’u seçin.
Open Browser Window iletişim kutusu açılacaktır.
2. Browse düğmesine tıklayın ve explorations/images klasöründeki fwd-fold.jpg dosyasını bulun.
Bu dosya, yeni pencereye yüklenecek olan resimdir.
3. Pencerenin genişliğini (Window width) 405, yüksekliğini de (Window height) 605 olarak ayarlayın ve OK düğmesine tıklayın.
Buradaki genişlik ve yükseklik değerleri yeni pencerenin içeriğinin boyutlarına göre seçilir. Sadece bir banner görüntüleyecekseniz, yeni pencerenin büyüklüğünü bu reklam resminin genişliğine ve yüksekliğine göre ayarlamanız gerekir. Kullanacağınız içerik daha büyükse, pencerenin büyüklüğünü buna uygun olacak şekilde ayarlamalısınız. Ayrıca, gerekiyorsa çeşitli pencere niteliklerini de ayarlayabilirsiniz. Yeni pencerelere ait ilâve nitelikler şunlardır:
• Navigation toolbar (Gezinti araç çubuğu): Aralarında Back (Geri), Forward (İleri), Home (Giriş) ve Reload (Yenile) düğmelerinin de bulunduğu tarayıcı düğmeleri. Bu uygulama için bu kutuyu işaretsiz durumda bırakın.
• Location toolbar (Konum araç çubuğu): Aralarında location (konum) alanının da bulunduğu tarayıcı seçenekleri. Bu uygulama için bu kutuyu işaretsiz durumda bırakın.
• Status bar (Durum çubuğu): Tarayıcı penceresinin alt kısmında bulunan ve mesajların (kalan yükleme süresi ve bağlantılarla ilişkili URL’ler gibi) görüntülendiği alandır. Bu uygulama için bu kutuyu işaretsiz durumda bırakın.
• Menu bar (Menü çubuğu): Tarayıcı penceresinin (sadece Windows’ta) File (Dosya), Edit (Düzenle), View (Görünüm), Go (Git) ve Help (Yardım) gibi menülerin göründüğü alanıdır. Kullanıcıların yeni pencerede gezinti imkânına sahip olmalarını istiyorsanız bu seçeneği ayarlamanız gerekir. Eğer bu seçeneği ayarlamazsanız, kullanıcılar yeni pencerede sadece pencereyi kapatma ya da minimum boyuta getirme seçeneklerine sahip olurlar. Bu uygulama için bu kutuyu işaretsiz durumda bırakın.
• Scrollbars as needed (Gerektiğinde kaydırma çubuklarını görüntüle): İçeriğin görünür alanın dışına taşması durumunda kaydırma çubuklarının görüntülenmesi gerektiğini belirtir. Bu seçeneği ayarlamadığınız takdirde, kaydırma çubukları
görüntülenmeyebilir. Bunun yanında Resize Handles seçeneğinin etkinliği de kaldırılırsa, ziyaretçiler içeriğin pencerenin orijinal boyutlarına sığmayan kısmını hiçbir şekilde göremeyebilir. Eğer durum böyleyse, pencerenin sayfanın içeriğine uygun olacak şekilde boyutlandırıldığından emin olmanız gerekir. Pencerenin çok küçük ya da çok büyük olması ve kaydırma çubuklarının bulunmaması ziyaretçiler açısından sinir bozucu bir durumdur. Bazı Web tarayıcıları bu ayarı (yeniden boyutlandırma tutamaçları ayarıyla birlikte) dikkate almaz ve gerektiğinde kullanır. Bu uygulama için bu kutuyu da işaretsiz durumda bırakın.
• Resize handles (Yeniden boyutlandırma tutamaçları): Kullanıcıların pencerenin boyutlarını, pencerenin sağ alt köşesini sürükleyerek ya da sağ üst köşedeki Maximize (Ekranı Kapla) düğmesine (Windows’ta) veya boyutlandırma kutusuna (Macintosh’ta) tıklayarak değiştirebilmeleri gerektiğini belirtir. Bu seçeneği ayarlamadığınız takdirde, boyut değiştirme kontrolleri genellikle kullanılamaz durumda olur ve kullanıcı pencerenin boyutlarını değiştiremez. Bu uygulama için bu kutuyu işaretsiz durumda bırakın.
• Window name (Pencere ismi): Yeni pencerenin ismidir. Yeni pencereyi bağlantılar için hedef olarak tanımlamak ya da JavaScript ile kontrol etmek istiyorsanız, bu pencereyi adlandırmanız gerekir. Bu uygulama için bu metin alanını boş bırakın.
Behaviors panelinde Open Browser Window eylemi görüntülenecektir. Geçerli olay, olaylar için kullandığınız tarayıcılara bağlı olarak farklılık gösterir. Burada onFocus olayı görüntülenmektedir.
4. onFocus olayını onClick olayıyla değiştirin.
onClick olayı, kullanıcıların yeni pencereye tablo hücresinin içine tıklayarak
erişmesini sağlayacaktır. Tablo hücresine tıklanabileceğini belirten bir işaret kullanmak isteyebilirsiniz (örneğin ilgili sözcüğe farklı bir renk atayarak, alt çizgi ekleyerek ya da başka bir şekilde).
5. Dosyayı kaydedin ve sayfanızı Web tarayıcınızda test edin.
Tablodaki “Uttanasana” sözcüğünü içeren hücrenin içine tıkladığınızda seçtiğiniz resimle birlikte yeni bir pencere açılacaktır.
Bir Açılır Menü Oluşturmak
Ziyaretçilerinize sitenin çeşitli bölümlerine hızlı erişim imkânı vermek ve seçeneklerden oluşan bir liste sunmak için gezinti elemanlarınızla birlikte JavaScript açılır menülerini kullanabilirsiniz. Dreamweaver’ın Pop-Up Menu script’i Netscape’te (sürüm 4 ve daha yeni sürümler), Internet Explorer’da (sürüm 4 ve daha yeni sürümler) ve günümüzün diğer popüler Web tarayıcılarında çalışır.
1. poses.html belgesinde sayfanın üst kısmındaki tabloda yer alan explorations resmine tıklayın.
Resmi seçtikten sonra Behaviors panelinde iki eylemin görüntülendiğine dikkat edin. Buradaki bağlantı için bu derste daha önce bunları kullanarak bir rollover oluşturmuştunuz.
2. Properties denetçisindeki Link metin alanında yazan “index.html” metnini silin ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. JavaScript olaylarının silineceğini bildirerek sizi uyaran mesaj kutusundaki OK düğmesine tıklayın.
Artık explorations resmine iliştirilmiş bir bağlantı yok ve daha önce eklediğiniz davranışlar da silindi.
3. Üzerine tıklayarak explorations resmini seçin, ardından Behaviors panelindeki artı işaretli (+) düğmeye tıklayın ve eylem menüsünden Show Pop-Up Menu’yü seçin. Açılan Show Pop-up Menu iletişim kutusunda Continue düğmesine tıklayın.
Show Pop-Up Menu iletişim kutusu ilk açıldığında burada size Fireworks programını kullanarak daha gelişmiş açılır menüler oluşturabileceğinizi bildiren bir ipucu görürsünüz.
Dreamweaver’da açılır menü oluşturma işlemine devam etmek için Continue düğmesine tıklayın.
Show Pop-Up Menu iletişim kutusunun penceresinde Contents sekmesinin etkin durumda olduğunu göreceksiniz. İletişim kutusunun bu bölümünü kullanarak ziyaretçilerinize sunacağınız seçenekleri tanımlayacaksınız.
4. Text metin alanındaki varsayılan metni (New Item) Meditations yazarak
değiştirin. Link metin alanının yanındaki klasör simgesine tıklayın, explorations klasöründeki meditations.html dosyasını bulun ve seçin. Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayarak iletişim kutusunu kapatın.
Menü öğeleri listesine Meditations öğesi eklenecektir.
5. Yeni bir öğe eklemek için Menu alanındaki artı işaretli (+) düğmeye tıklayın.
Varsayılan metni (New Item) Sequences yazarak değiştirin. Link metin alanının yanındaki klasör simgesine tıklayın, sequences.html dosyasını bulun ve seçin.
Listeye üçüncü bir öğe ekleyin, bu öğeyi Philosophy olarak adlandırın ve philosophy.html dosyasına bağlayın. Listeye dördüncü bir öğe ekleyin, bu öğeyi de Media olarak adlandırın ve media.html dosyasına bağlayın.
Menü öğelerinin isimlerini ve bunların bağlandığı sayfaları, listeden ilgili öğeyi seçtikten
Kısa ve özlü menü seçenekleri kullanarak tasarımınızı daha anlaşılır ve kolay kullanılır bir hale getirebilirsiniz.
Bir öğeyi silmek isterseniz önce menü öğeleri listesinden bu öğeyi seçin ve Menu alanındaki eksi işaretli (–) düğmeye tıklayın.
6. Menü öğeleri listesinden Sequences’ı seçin. Move item up düğmesine
tıklayarak Sequences öğesini listenin en üstüne taşıyın. Listeden Philosophy’yi seçin ve Move item down düğmesine tıklayarak listenin en altına taşıyın.
Menü oku düğmelerini kullanarak menüdeki öğelerin sırasını kolayca değiştirebilirsiniz.
Menü öğelerini kullanarak alt kategoriler oluşturabilirsiniz. Bunun için, önce alt kategori haline getirmek istediğiniz öğeyi seçin, sonra da Indent Item düğmesine tıklayın. Bir öğeyi daha yüksek bir kategori seviyesine taşımak istiyorsanız, Outdent Item düğmesini kullanın.
7. Show Pop-Up Menu iletişim kutusundaki Appearance sekmesine tıklayın. En üstte yer alan yönlendirme menüsünde Vertical menu seçeneğini işaretleyin.
Font menüsünden Verdana font kümesini seçin ve Size metin alanına 10 değerini girin. Burada kalın (bold) ya da italik (italic) stil kullanılmamalı ve hizalama seçeneği Align left olarak ayarlanmalıdır.
Önizleme alanının tazelenmesi ve menüyü seçtiğiniz boyutlarda göstermesi için, Font menüsüne tekrar tıklamanız gerekebilir. Bir sonraki adımda renkleri belirlediğinizde de önizleme alanı tazelenecektir. Bir sonraki adımda renkleri belirlediğinizde de önizleme alanı tazelenecektir.
Burada, açılır menüdeki (pop-up) metin seçeneklerini, “Yoga Sangha” proje sitesinde kullanılan stillerle eşleştiriyorsunuz.
Menü listenizde dörtten az seçenek varsa, Dreamweaver son girişi, bu iletişim kutusundaki önizleme alanında dört seçenek oluncaya kadar tekrarlar. Bu sadece görüntü amacıyladır; belgenizde böyle bir şey görmezsiniz.
8. Renk kutularını kullanarak şu ayarları yapın: Up state alanında Text = #666600 (griye çalan yeşil), Up state alanında Cell = #FFFFFF (beyaz), Over state alanında Text = #FF9900 (turuncu) ve Over state alanında Cell = #FFFFFF (beyaz).
Bu seçenekler, açılır menünün görünümünü gezinti resimlerinin stiline mümkün olduğu kadar uyacak şekilde ayarlamanızı sağlar. Show Pop Up Menu iletişim kutusundaki önizleme alanında menünün nasıl gözükeceğini görebilirsiniz. İkinci menü seçeneğine Over State renkleri, diğer menü seçeneklerine de Up State renkleri uygulanacaktır.
Önizlemede sonuçları yaklaşık olarak görürsünüz; tarayıcıda renkler tam olarak böyle görünmeyebilir.
9. Show Pop-Up Menu iletişim kutusundaki Advanced sekmesine tıklayın.
Varsayılan ayarların şöyle olduğundan emin olun: Cell width ve Cell height menü seçenekleri Automatic, Cell padding 3, Cell spacing 0, Text indent 0 ve Menu delay 1000 olarak ayarlanmış olmalıdır. Gerekiyorsa uygun değişiklikleri yaparak seçenekleri bu şekilde ayarlayın. Pop-Up borders bölümündeki Show borders seçeneğini işaretlenmemiş olarak bırakın.
Menu delay, ziyaretçi imleci menüden uzaklaştırdığında menünün ne kadar sürede kaybolacağını belirler.
10. Show Pop-Up Menu iletişim kutusundaki Position sekmesine tıklayın. Soldan ikinci Menu position düğmesine tıklayın. X değerini 5, Y değerini 26 yapın.
Hide Menu on MouseOut event kutusunun işaretli olduğundan emin olun. OK düğmesine tıklayın.
Menünüzü sayfaya yerleştirmek için, X ve Y eksenlerinin dışında Show Pop-Up Menu iletişim kutusunun bu kısmındaki dört genel yerleştirme düğmesini de kullanabilirsiniz.
11. Dosyayı kaydedin ve Web tarayıcınızda önizleyin.
Behaviors panelinde Show Pop-Up Menu davranışı belirecektir. Bu davranış iki kısma ayrılmıştır: Show Pop-Up Menu ve Hide Pop-Up Menu.
Burada .js uzantısına sahip haricî bir JavaScript dosyası oluşturulur.
Genellikle mm_menu.js ismini taşıyan bu dosya, açılır menünün çalışabilmesi için gereklidir. Burada kullanılan harici dosyanın boyutu büyük olabilir, bu nedenle, bunun gibi script’leri eklediğinizde ortaya çıkan dosyanın boyutunun, ziyaretçilerinizin dosyayı hızla ve kolayca indirmelerine engel olup olmayacağına sizin karar vermeniz gerekir.
Menülerinizi olabildiğince ayrıntılı bir şekilde test edin. İmleci explorations gezinti resminin üzerine getirdiğinizde, “explorations” resminin altında bu uygulamada oluşturduğunuz menü belirecektir. Menünün görünümü ve konumuyla ilgili olarak yaptığınız ayarlar, menünün diğer gezinti elemanlarıyla uyumlu görünmesini sağlayacaktır.
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Temel tipte rollover’lar oluşturdunuz (Sayfa 279–282).
• Bir açılır mesaj oluştururken farklı olaylar seçerek ve eylemler ekleyerek davranışları nasıl düzenleyeceğinizi öğrendiniz (Sayfa 282–287).
• Bir kullanıcı eylemine birden fazla davranış ekleyerek kullanıcı imleci sayfadaki bir resmin üzerine getirdiğinde sayfada birden fazla resmin değişmesini sağlamayı öğrendiniz (Sayfa 287–293).
• Ziyaretçi imleci bir bağlantının üzerine getirdiğinde bununla ilgili daha fazla bilgi görüntülemek için bir durum çubuğu mesajı oluşturdunuz (Sayfa 293–294).
• Ziyaretçileri kullandıkları tarayıcı sürümüne bağlı olarak farklı sayfalara yönlendirmek için Check Browser davranışını kullandınız (Sayfa 294–297).
• Bir davranış kullanarak, sayfa yüklendiğinde yeni bir tarayıcı penceresinin açılmasını sağladınız (Sayfa 297–300).
• Birden fazla menü öğesi içeren bir JavaScript açılır menüsü oluşturdunuz (Sayfa 300–305).
