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