Dreamweaver'da rollover image özelliğini daha önce incelemiştik. Bu özelliği kullanarak sitemize pek çok düğme ekleyebiliriz. Bunları bir tablonun içerisinde dikey ya da yatay dizebilir ve böylece bir Dolaşma Çubuğu (Navigation Bar ya da navbar ya da button bar) oluşturabiliriz.
Normalde bu işlem için pek çok düzenleme yapmamız gerekir. Her düğme için tek tek kod yazmamız ya da Dreamweaver MX'i kullanarak kod oluşturmamız gerekir. Oysa Dreamweaver MX'in Dolaşma Çubuğunu iletişim kutusunu kullanarak bu işi kolayca yapabiliriz.
Insert Navigation Bar iletişim kutusuna Insert>>Interactive Images>>Navigation Bar menüsünden ulaşırız.
Bu özelliği kullanarak bir düğme oluştururken her bir düğmenin 4 farklı durumu olabilir. Bu durumlar;
Up: Düğmenin ilk hali.
Over: İmleç düğmenin üzerine geldiğinde görüntülenecek resim.
Down: Düğmeye tıklandığında görüntülenecek resim.
Over While Down: Düğme basılıyken, fare imleci düğmenin üzerinden çekildiğinde görüntülenecek resim.
durumlarıdır.
Bu pencerenin üst solunda üzerinde artı sembolü olan Add Item ve üzerinde eksi sembolü olan Remove Item düğmeleri vardır. Hemen altında ise Nav Bar Elements bölümü yer alır. Başlangıçta hiç rollover düğmemiz olmadığı için unnamed1 yazısı gözükür.
Her düğme için bir isim vermemiz gerekir ki bu ismi Element Name alanına yazarız. Örneğin ben ilk düğmem için Link1 ismini kullandım. Daha sonra Up Image metin kutusunda sağda yer alan Browse... düğmesine tıklayarak Up Image olarak kullanmayı düşündüğümüz resmi seçeriz. Sonrasında aynı işlemi Over Image, Down Image ve Over While Down Image için tekrarlarız.
Sayfamız ziyaretçiler tarafından görüntülenirken eklediğimiz düğmelerin üzerine gelindiğinde bir metin gözükmesini istiyorsak Alternate Text metin kutusuna bir metin yazarız. Örneğin "Bu bağ ile Ana Sayfaya geri dönebilirsiniz!" gibi. Bu sayede herhangi bir sebeple düğmeleri oluşturmak için kullandığımız resimler görüntülenemese dahi sayfayı ziyaret eden kişi görüntülenemeyen resimlerin üzerine geldiğinde bu bağın hangi sayfaya gittiğini görebilir.
Her durum için bir resim belirledikten sonra -ki ben örneğin Down Image ve Over While Down Image için aynı resmi kullandım- bu düğmeye tıklandığında açılacak sayfayı belirtmek için When Clicked, Go To URL metin kutusuna web adresimizi yazarız ya da eğer sitemizde kullanacağımız bir dosyaya bağ vermek istiyorsak Browse... düğmesini tıklayarak uygun dosyayı seçeriz.
Seçtiğimiz dosyanın açılacağı yer ana pencere olabileceği gibi çerçeveli bir sayfa kullanıyorsak Dolaşma Çubuğumuzun olduğu çerçevenin haricinde başka bir çervede de açtırabiliriz sayfamızı fakat bunu yapabilmek için daha önce çerçeveleri oluşturmuş ve oluşturmuş olduğumuz çerçevelere isim vermiş olmamız gerekir.
Bu bölümün altında Optins bölümünde iki seçenek vardır. Bunlar;
Preload Images: Bu onay kutusu işaretli ise sayfa yüklenirken Web tarayıcısı tüm düğme durumları için gerekli resimleri önceden yükler. Eğer bu onay kutusu işaretli değilse sadece Up Image'ler yüklenir ve sayfayı ziyaret eden kişi fare imleciyle bir düğmenin üzerine geldiğinde diğer resimlerin yüklenmesini bekler. Bu kabul edersiniz ki pek hoş olmaz
Bu sebeple bu onay kutusunun işaretli kalması daha uygundur.
Show "Down Image" Initially: Bu onay kutusu işaretlendiğinde ise o an işlem yapmakta olduğunuz düğmenin sayfa ilk yüklendiğinde diğer düğmeler gibi Up değil Down Image'i görünür olur. Bu özellik ana sayfaya ait düğme için kullanılabilir. Örneğin www.e-odie.com sayfasına ilk bağlandığınızda göreceğiniz yer ana sayfadır ve diğer sayfalara ait düğmelere tıklamadan önce bulunduğumuz yer Ana Sayfa olduğu için ana sayfa düğmesinin tıklanmış görünümde olması daha uygun olur.
Düğmemiz için bu özellikleri ayarladıktan sonra ekleyeceğimiz her düğme için önce Add Item düğmesini tıklayıp oluşturulacak düğme için yeni bir isim girip, sonra uygun durumlar için hazırladığımız resimleri seçip diğer düğmelerimizi ekleriz. Eğer bir düğmeyi silmek istiyorsak Remove Itemdüğmesini tıklarız. Bütün düğmelerimizi ekledikten sonra eğer Dolaşma Çubuğumuzun dikey olarak sayfaya yerleşmesini istiyorsak Insert çekme menüsünden Vertically, yok eğer yatay olarak olarak yerleştirmek istiyorsak Horizontally seçeneğini seçeriz. Son olarak düğmelerimizi bir tablo içerisine yerleştirmek istiyorsak "Use Tables" seçeneğini işaretleriz ki daha düzenli bir yapı için bu seçeneği işaretlemenizi öneririz.
Düğmelerimizin sırasını değiştirmek için ise Nav Bar Elements liste kutusunun sağ üstündeki okları kullanırız.
Son olarak OK diyerek Dolaşma Çubuğumuzu sayfamıza ekleriz.
Sayfamıza eklediğimiz Dolaşma Çubuğu üzerinde değişiklik yapmak için Modify>>Navigation Bar menüsünü kullanırız. Bu menü yardımıyla Modify Navigation Bar iletişim kutusuna ulaşırız ve buradan istediğimiz değişiklikleri yapabiliriz.
Fakat bu pencerede Insert çekme menüsü ile "Use Tables" seçenkleri yoktur. Bu iki özellik sadece Navigasyon Çubuğu'nu eklerken
Normalde bu işlem için pek çok düzenleme yapmamız gerekir. Her düğme için tek tek kod yazmamız ya da Dreamweaver MX'i kullanarak kod oluşturmamız gerekir. Oysa Dreamweaver MX'in Dolaşma Çubuğunu iletişim kutusunu kullanarak bu işi kolayca yapabiliriz.
Insert Navigation Bar iletişim kutusuna Insert>>Interactive Images>>Navigation Bar menüsünden ulaşırız.
Bu özelliği kullanarak bir düğme oluştururken her bir düğmenin 4 farklı durumu olabilir. Bu durumlar;
Up: Düğmenin ilk hali.
Over: İmleç düğmenin üzerine geldiğinde görüntülenecek resim.
Down: Düğmeye tıklandığında görüntülenecek resim.
Over While Down: Düğme basılıyken, fare imleci düğmenin üzerinden çekildiğinde görüntülenecek resim.
durumlarıdır.
Bu pencerenin üst solunda üzerinde artı sembolü olan Add Item ve üzerinde eksi sembolü olan Remove Item düğmeleri vardır. Hemen altında ise Nav Bar Elements bölümü yer alır. Başlangıçta hiç rollover düğmemiz olmadığı için unnamed1 yazısı gözükür.
Her düğme için bir isim vermemiz gerekir ki bu ismi Element Name alanına yazarız. Örneğin ben ilk düğmem için Link1 ismini kullandım. Daha sonra Up Image metin kutusunda sağda yer alan Browse... düğmesine tıklayarak Up Image olarak kullanmayı düşündüğümüz resmi seçeriz. Sonrasında aynı işlemi Over Image, Down Image ve Over While Down Image için tekrarlarız.
Sayfamız ziyaretçiler tarafından görüntülenirken eklediğimiz düğmelerin üzerine gelindiğinde bir metin gözükmesini istiyorsak Alternate Text metin kutusuna bir metin yazarız. Örneğin "Bu bağ ile Ana Sayfaya geri dönebilirsiniz!" gibi. Bu sayede herhangi bir sebeple düğmeleri oluşturmak için kullandığımız resimler görüntülenemese dahi sayfayı ziyaret eden kişi görüntülenemeyen resimlerin üzerine geldiğinde bu bağın hangi sayfaya gittiğini görebilir.
Her durum için bir resim belirledikten sonra -ki ben örneğin Down Image ve Over While Down Image için aynı resmi kullandım- bu düğmeye tıklandığında açılacak sayfayı belirtmek için When Clicked, Go To URL metin kutusuna web adresimizi yazarız ya da eğer sitemizde kullanacağımız bir dosyaya bağ vermek istiyorsak Browse... düğmesini tıklayarak uygun dosyayı seçeriz.
Seçtiğimiz dosyanın açılacağı yer ana pencere olabileceği gibi çerçeveli bir sayfa kullanıyorsak Dolaşma Çubuğumuzun olduğu çerçevenin haricinde başka bir çervede de açtırabiliriz sayfamızı fakat bunu yapabilmek için daha önce çerçeveleri oluşturmuş ve oluşturmuş olduğumuz çerçevelere isim vermiş olmamız gerekir.
Bu bölümün altında Optins bölümünde iki seçenek vardır. Bunlar;
Preload Images: Bu onay kutusu işaretli ise sayfa yüklenirken Web tarayıcısı tüm düğme durumları için gerekli resimleri önceden yükler. Eğer bu onay kutusu işaretli değilse sadece Up Image'ler yüklenir ve sayfayı ziyaret eden kişi fare imleciyle bir düğmenin üzerine geldiğinde diğer resimlerin yüklenmesini bekler. Bu kabul edersiniz ki pek hoş olmaz
Bu sebeple bu onay kutusunun işaretli kalması daha uygundur.Show "Down Image" Initially: Bu onay kutusu işaretlendiğinde ise o an işlem yapmakta olduğunuz düğmenin sayfa ilk yüklendiğinde diğer düğmeler gibi Up değil Down Image'i görünür olur. Bu özellik ana sayfaya ait düğme için kullanılabilir. Örneğin www.e-odie.com sayfasına ilk bağlandığınızda göreceğiniz yer ana sayfadır ve diğer sayfalara ait düğmelere tıklamadan önce bulunduğumuz yer Ana Sayfa olduğu için ana sayfa düğmesinin tıklanmış görünümde olması daha uygun olur.
Düğmemiz için bu özellikleri ayarladıktan sonra ekleyeceğimiz her düğme için önce Add Item düğmesini tıklayıp oluşturulacak düğme için yeni bir isim girip, sonra uygun durumlar için hazırladığımız resimleri seçip diğer düğmelerimizi ekleriz. Eğer bir düğmeyi silmek istiyorsak Remove Itemdüğmesini tıklarız. Bütün düğmelerimizi ekledikten sonra eğer Dolaşma Çubuğumuzun dikey olarak sayfaya yerleşmesini istiyorsak Insert çekme menüsünden Vertically, yok eğer yatay olarak olarak yerleştirmek istiyorsak Horizontally seçeneğini seçeriz. Son olarak düğmelerimizi bir tablo içerisine yerleştirmek istiyorsak "Use Tables" seçeneğini işaretleriz ki daha düzenli bir yapı için bu seçeneği işaretlemenizi öneririz.
Düğmelerimizin sırasını değiştirmek için ise Nav Bar Elements liste kutusunun sağ üstündeki okları kullanırız.
Son olarak OK diyerek Dolaşma Çubuğumuzu sayfamıza ekleriz.
Sayfamıza eklediğimiz Dolaşma Çubuğu üzerinde değişiklik yapmak için Modify>>Navigation Bar menüsünü kullanırız. Bu menü yardımıyla Modify Navigation Bar iletişim kutusuna ulaşırız ve buradan istediğimiz değişiklikleri yapabiliriz.
Fakat bu pencerede Insert çekme menüsü ile "Use Tables" seçenkleri yoktur. Bu iki özellik sadece Navigasyon Çubuğu'nu eklerken