Set Nav Bar Image, Set Text, Show Hide Elements, Swap Image, Swap Image Restore

Set nav bar ımage, set text, show hide elements, swap ımage, swap ımage restore

 

Navigation Bar kullanımı

Sitenizde ziyaretçilerin kolayca dolaşabilmeleri ve aradıkları bölümü rahatça bulabilmeleri için bir navigasyon menüsü kullanmak en mantıklı çözümdür. Bu menüyü sadece tablo ve text-linkleri kullanarak yapabileceğiniz gibi göze daha hoş görünmesi adına resim ve/veya rollover resimler ile de yapabilirsiniz.

Eğer navigasyon menüsü için rollover tabanlı bir çözüm düşünüyorsanız her link için ayrı ayrı rollover resim eklemek zor olacaktır. Bu gibi durumlarda DW'ın kullanışlı araçlarından biri olan Insert Navigation Bar'ı kullanabilirsiniz.

Navigation bar kullanmak için;

Yeni bir doküman açın ve kaydedin. Rollover resimler ile çalışırken yaptığımız gibi resim dosyalarını önceden hazırlamış olmamız gerekmektedir. Hazırlanması gereken resimler şu şekilde sıralanabilir;

  • Up image: Rollover resimlerde gördüğümüz Orginal image ile aynı işleve sahip resim dosyasını belirtir. Yani fare imleci linkin üzerinde değilken görünene resim.
  • Over image: Fare imleci linkin üzerine geldiğinde görünecek resmi belirtir.
  • Down image: Fare ile linke tıklandığı anda görünecek resmi belirtir. (Genelde Over image deki ile aynı dosyayı kullanmak iyi bir sonuç verir fakat farklı da olabilirler)
  • Over While Down Image: Bu ise Over Image'in linke tıklandıktan sonraki versiyonu diyebiliriz. Yani diyelim ki linke bir kez tıklandı ve tıklandığı anda Down Image devreye girdi, işte bundan sonra Over image devre dışı kalacağından onun yerini bu dosya alır yani işlevi Over image ile aynıdır.

Yeri gelmişken belirtelim Down image ve Over While Down Image, Frame kullanılarak yapılmış navigasyon menülerinde bir işleve sahiptir. Yani navigasyon menüsünün sabit kaldığı ve değişmediği durumlar için geçerlidir.

 

Resim dosyalarını isimlendirirken son ekler kullanmak işleri oldukça kolaylaştıracaktır. Örneğin navigasyon barın ana sayfa linki için;

 

Up image: menu_anasayfa_a.gif
Over image: menu_anasayfa_b.gif
Down image: menu_anasayfa_c.gif
Over While Down Image: menu_anasayfa_d.gif

Gibi bir isimlendirme ile karışıklıklardan kurtulabilirsiniz.

 

Dosyalarımız da hazırsa navigation menümüzü yapalım. Insert paneldeki Image düğmesinin bir alt düğmesi olan Navigation Bar düğmesi veya Insert / Image Object / Navigation Bar menüsü ile sayfanıza navigasyon menüsü eklemeye başlayabilirsiniz.

 

Insert panelden Navigation Bar düğmesine tıklıyoruz

Insert panelden Navigation Bar düğmesine tıklıyoruz

 

 

Şimdi ayarları yapmaya başlıyoruz, sırasıyla;

 

Insert Navigation Bar iletişim penceresi

Insert Navigation Bar iletişim penceresi

 

 

  • Nav. Bar Elements: Navigasyon menüsü öğelerini belirtir. Buradan + ve - düğmelerini kullanarak yeni bir öğe ekleyebilir ya da çıkarabilirsiniz. Düzenlemek istediğiniz öğenin üzerine tıklamanız yeterli olacaktır.
  • Element Name: Her öğenin bir ismi olmalıdır. Buraya öğeyi en iyi tanımlayan ismi girmelisiniz. Boşluk ve Türkçe karakter kullanmamaya dikkat etmelisiniz.
  • Up, Over, Down, Over While Down image'lerin neler olduğunu yukarda belirtmiştik. Uygun resimleri seçmelisiniz.
  • Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen yazı, açıklama vs...
  • When Clicked Goto URL: Eğer elemente link vermek istiyorsak buraya ilgili dosyanın adresini yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.
    • ..in: Bu kısım Target kısmıdır. Kullandığınız Framelere göre bunu nasıl düzenleyeceğiniz Frame konusunda ayrıntılı bir biçimde anlatılmıştır.
  • Options
    • Preload images : Rollover resimlerin yüklenmesi uzun sürebilir, ve bu süre zarfında ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak Over image arka planda yükleninceye kadar, Up image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun ortadan kalkmış olur.
    • Show Down Image Initialy: Bir öğeye tıklandığında ziyaretçinin hangi sayfayı gezdiğini vurgulamak için bu seçeneği kullanabiliriz. Örneğin ziyaretçi linkler kısmını gezerken Linkler elementinin Down image gösterilmelidir ki, ziyaretçi o anda gezdiği sayfanın linkler sayfası olduğunu anlayabilsin. Eğer Frame kullanmıyorsanız bu seçenek ile navigasyon menüsü eklediğiniz sayfaya ait elemente tıklayıp bu seçeneği işaretlerseniz bu sayfada bu sayfaya ait elementin Down image'i varsayılan olarak yüklenecektir. Bu şekilde anlatınca biraz karışık oluyor fakat bir örnek yapıp daha iyi anlayabilirsiniz.
  • Insert : Horizontaly (yatay) - Verticaly (dikey) burada navigasyon menüsünün yatay mı yoksa dikey mi olacağını belirtiyoruz.
  • Use Table: her zaman işaretli kalması gereken bir noktadır. Menünün daha düzgün görünmesini sağlayacaktır.

 

Eğer baştan Show Down Image Initialy seçeneğini işaretlemeyi unuttuysanız Nav barı ekledikten sonra ilgili elementin üzerine bir kez tıklayıp Behaviors Panelden / Set Nav Bar Image seçeneğini kullanabilirsiniz.

 

Tüm ayarları uygun bir biçimde yaptıysanız OK diyip vanigasyon barınızı sayfaya dahil edebiliriz. . Menü resimleri DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test edebilirsiniz.

 

Her sayfada sadece bir Nav. Bar kullanabilirsiniz. Önceden eklediğiniz bir Nav. Bar üzerinde değişiklik yapmak için; tekrar Insert / Oöage Objects / Navigation Bar menüsü ile yeni bir nav. Bar ekliyormuş gibi yapmalısınız. DW size "Each page can only have one Navigation Bar, an done already exist on this page Would you like to modify the existing one?" şeklinde sayfada zaten var olan nav. Barı düzenlemek isteyip istemediğiniz soracaktır. Buna olumlu yanıt vererek önceden eklediğiniz nav. Barı düzenleyebilirsiniz.

 

 

Her sayfada sadece bir navigasyon menüsü olabilir

Her sayfada sadece bir navigasyon menüsü olabilir

 

 

Show-Hide Layer

Bazı durumlarda dokümandaki katmanların belli durumlarda görünüp belli durumlarda gizlenmesi isteriz. Bu biraz DHTML teknikleri gerektiren bir husus.

Fakat DW içerisinde bu konu oldukça pratik bir hâl almış durumdadır. Sadece bir iki fare tıklaması ile onlarca JavaScript kodu derlemeye gerek kalmaksızın bu soruna çözüm getirebiliriz.

Show-hide layer kullanmak için;

Yeni bir doküman açın ve sayfanıza farklı boyut ve özelliklerde katmanlar ekleyin (Draw layer ile) ve bunların arka fon renklerini değiştirin. (Arka fon renklerini değiştirmemizin sebebi katmanların Show (Görünür) ve Hide (Gizli) durumlarını daha rahat bir şekilde görebilmek içindir)

Daha sonra sayfaya bir link ekleyin. Link olarak # kullanın. Zira linkin ne olduğu çok da önemli değil. Boş linkler kullanıyoruz çünkü JavaScript çağrılmasını sağlayacağız.

Daha sonra bu linki seçip Behaviors Panel'den Show Hide Layers seçeneği ile ilgili pencereye ulaşabilirsiniz.

Behaviors panelden Show-hide layer seçeneğini seçiyoruz

Behaviors panelden Show-hide layer seçeneğini seçiyoruz

Named Layers kısmından üzerinde değişiklik olmasını istediğiniz katmanları seçip eğer görünmesini istiyorsanız Show, gizlenmesini istiyorsanız Hide, durumdan bir değişiklik olmasını istemiyorsanız Default düğmelerinden herhangi birine tıklayıp bu katmanın özelliklerini belirleyebilirsiniz.

Show-hide layer iletişim penceresi

Show-hide layer iletişim penceresi

İlgili ayarları yaptıktan sonra OK dediğinizde bu linke ait behavior sayfaya eklenecektir. Linki seçip Behaviors paneline baktığınızda Events listesinde onClick bölümünde Show-Hide Layer adında bir olay eklendiğini görebilirsiniz. Bu tıklandığında bu olayın gerçekleşeceği anlamına gelir.

Behaviors panelden değişiklikleri yapabilir ve durumu takip edebiliriz

Behaviors panelden değişiklikleri yapabilir ve durumu takip edebiliriz

Swap Image

 

Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image" isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz.

 Photoshop dosyasının da dahil olduğu tüm uygulamayı indirmek için

 http://www.dw.gen.tr/?module=files&page=detail&id=297

tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim.

Önce materyalleri hazırlayalım

İşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım

 

Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz

 

Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip "Save" düğmesine bastım.

 

File / Save for web menüsünden çalışmamızı kaydediyoruz

File / Save for web menüsünden çalışmamızı kaydediyoruz

 

Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini seçip tüm dilimleri (All slices) kaydettim.

 

Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz

 

Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve "images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını hazırlayarak konuyu takip edebilirsiniz.

 

Çalışmamızı Dreamweaver içerisine aktardık

Çalışmamızı Dreamweaver içerisine aktardık

 

Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala / Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.

 

Eğer tabloyu kopyaladığınız yeni sayfada dilimler arasında boşluklar olursa yeni bir stil yaratıp border, padding, magrin değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1 piksel olarak atayın ve bu stili tabloya uygulayın. Böylece genişlemeleri önlemiş olacaksınız.

 

Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:

 

  1. .TabloIcinStil{
  2. font-size: 1px;
  3. line-height: 1px;
  4. border-collapse: collapse;
  5. margin: 0px;
  6. padding: 0px;
  7. border: 0px;
  8. }
  9.  

 

Neyse işin hazırlık kısmı bu şekilde sizde kendi uygulamalarınızı yapıp bu aşamaya geldiyseniz şimdi asıl konumuza dönelim.

Resim Değiştirmece (Swap Image)

Şimdi bu örnekteki tasarımımızda menü linkleri bulunmakta (Hakkımızda, Ürünlerimiz, Projelerimiz...). Resimdeki ilgili dilimleri seçip ilgili linkleri atıyoruz.

 

İlgili dilimi seçip Properties panelinden link atıyoruz

İlgili dilimi seçip Properties panelinden link atıyoruz

 

Bu şekilde tüm menü elemanlarına link atadıktan sonra resim değiştirme işlemine geçebiliriz. Şimdi burada yapacağımız örnekte menü elemanlarından birinin üzerine gittiğimizde ortadaki alan değişecek ve ilgili bölümün resmi çıkacak.

Burada yapmamız gereken ek bir işlem var oda değişimin yapılacağı resimlere birer ID atamaktır. Böylece hangi resmin ne zaman değişeceğini ID sini zikrederek belirtebileceğiz. Bunun için, DW'da resimlerin üzerine bir kez tıklayıp seçtikten sonra Properties panelindeki ID bölümüne resim ile ilgili bir ID girmeliyiz. ID girerken Türkçe karakter ve özel karakterler girmemeye ve "_ -" gibi ifadeler kullanmamaya özen göstermelisiniz.

 

Değişecek  resimlere ID atıyoruz

Değişecek resimlere ID atıyoruz

 

Olaya dahil olacak bütün resimlere birer ID atadıktan sonra ortadaki resim olan ve değişecek resme de ID atmayı unutmadığımızdan emin olarak işleme devam edebiliriz.

Eğer açık değilse Window / Behaviors (Shift+F4) menüsü ile Behaviors panelini açıyoruz. Şimdi menü elemanlarından "Hakkımızda" linkinin üzerine bir kez tıklıyor ve seçiyoruz. Seçim işlemini "Tag selector" panelinden de yapabiliriz.

 

Seçim işlemini Tag selector panelinden de yapabiliriz.

Seçim işlemini Tag selector panelinden de yapabiliriz.

 

Ardından Behaviors panelindeki artı işaretine (+) tıklayıp açılan menüden "Swap Image" seçeneğini seçiyoruz.

 

Behaviors panelinden Swap Image seçeneğine tıklıyoruz.

Behaviors panelinden Swap Image seçeneğine tıklıyoruz.

 

Açılan iletişim penceresinde doküman içerisindeki resimlerin listelendiğini göreceksiniz. Buradan "Hakkımızda" menü elemanının üzerine gelindiğinde değişecek kısımda çıkmasını istediğiniz resmi seçip "Set soruce to" bölümünde "Browse / Gözat" düğmesine tıklayıp ilgili resmi seçiyoruz.

 

Swap image iletişim penceresi

Swap image iletişim penceresi

 

"Preload images" seçeneği doküman yüklenirken resimlerin arka fonda yüklenmesini ve linklerin üzerine gidildiğinde henüz yüklenmemiş resim olmamasını sağlayan bir seçenektir. "Restore images onMouseOut" seçeneği ise fare imlecinin resim üzerinden çekilmesi durumunda tekrar eski resmin yerine gelmesini belirtir. İlgili ayarları yapıp "OK" dediğinizde Behaviors panelde bu link için 2 olay (event) atandığını göreceksiniz. Bunlardan

  • "onMosueOver" (fare imleci üzerine geldiğinde) olayına atanan "Swap image"; resim değiştirme işlemini yapan fonksiyonu çağır
  • "onMouseOut" (fare imleci üzerinden gidince) "Swap image Restore"; tekrar eski resmin çıkmasını sağlayan fonksiyonu çağırır.

 

İşlem sonrası Behaviors panelin görünümü

İşlem sonrası Behaviors panelin görünümü

 

Dokümanı kaydedip tarayıcı ile görüntülediğinizde ilgili link üzerine fare imleci ile gidildiğinde ortadaki resmin değiştiğini göreceksiniz.

Tüm linkler için bu işlemi tekrarlayarak değişmesini istediğiniz resimleri atayabilirsiniz. Çalışmanın son halini görmek için

http://www.dw.gen.tr/samples/swap-image/

tıklayınız. Bu örnekte sadece bir resmin değişmesini sağladık fakat aynı anda birkaç resmin değişmesini de sağlamak mümkündür. "Swap image" iletişim penceresinde listeden değişik resimler seçip teker teker "Set source to" ayarı yaparsanız aynı anda çoklu resim değişimi sağlayabilirsiniz. Örneğin sitemizde kullandığımız oylama sisteminde böyle çoklu bir resim değiştirme işlemi yapılmaktadır. Sizde bir örnek yaparak işleyişi daha iyi kavrayabilirsiniz.

 

Oylama sisteminde aynı anda 5 yıldız birden değişiyor

Oylama sisteminde aynı anda 5 yıldız birden değişiyor

 

Alıntıdır : http://www.dw.gen.tr

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...