Konular

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

 

Kaynak www.dw.gen.tr/

Yorumunuzu Ekleyin

Database Paneli

Database paneli

26,244 Okunma 1 Yorum 05/06/2008 10:46:38

Div Çatılı sayfalar Oluşturmak

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile

25,984 Okunma Henüz yorum yapılmamış 06/08/2007 17:55:00

Recordset ile verileri sayfaya yazdırmak

Kayıt dizisi (recordset) ile Dreamweaver içerisinden veritabanına erişim sağlayarak, kriterlere göre ve ya istediğimiz sayıda kaydı sayfaya yazdırmak mümkün. Bizde bu makale ile veritabanı kayıt erişimlerini yakından inceleyeceğiz

21,701 Okunma Henüz yorum yapılmamış 31/08/2007 14:19:45

Bindings Paneli

Dreamweaver bindings paneli

20,759 Okunma Henüz yorum yapılmamış 05/06/2008 10:03:38

Database Paneli

Veritabanlarına erişmek

19,746 Okunma Henüz yorum yapılmamış 05/06/2008 09:12:39

Datebases Paneli

Resimli anlatım

19,646 Okunma Henüz yorum yapılmamış 06/06/2008 11:05:53

Bindings Paneli

Veri bağlantılarının yönetildiği panel

19,013 Okunma Henüz yorum yapılmamış 05/06/2008 09:11:51

Named Anchor

Named anchor aracı ile ilgili açıklamalar

19,005 Okunma Henüz yorum yapılmamış 05/06/2008 10:18:51

Dreamweaver ile Site tanımlamaları

Dreamweaver birçok geliştirme ortamında olduğu gibi proje bazlı çalışmalar yapmaya olanak tanıyan bir yazılımdır. Bu makalede projelerimizi DW içerisinde nasıl yönetebileceğimizi göreceğiz

18,833 Okunma Henüz yorum yapılmamış 01/09/2007 02:25:54

ASP sayfası hazırlama

Dreamweaver mx de ASP çalışmak için daha önceden ASP ile uğraşmış olmak gereklidir. Her nekadar Dreamweaver Mx işimizi kolaylaştırsa da ASP 'den anlamak bazı durumlarda faydalı olacaktır. ASP öğrenmek için Dr. Hakkı ÖCAL 'ın ASP kitaplarını tavsiye ederim

18,707 Okunma Henüz yorum yapılmamış 12/08/2007 04:13:11

Yükleniyor...