DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda oluşturulacak çerçeve miktarı kadar dosya index sayfasına dahil edilir. Örneğin; 3 çerçeveden oluşan bir index sayfa 3+1 tane dosyaya sahiptir. Aşağıda çerçeve ana yapısının şematik ve kod yapısı görülmektedir. Frame 2 (Çerçeve 2) Menülerin, kategorilenmiş konu başlıklarının konulacağı Çerçeve ismi : _left Dosya ismi: menu.html Frameset (Çerçeve Ana yapısı) Tüm Frame (Çerçeve) yapısını üzerinde barındırır. Çerçeve ismi : UntitledFrameset Dosya İsmi : index.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>başlıksız Belge</title> </head> Frame 1 (Çerçeve 1) Resim,Logo için kullanılacak sayfa Çerçeve ismi : _top Dosya ismi : logo.html Frame 3 (Çerçeve3) Menülerin içeriklerinin gösterileceği çerçeve ve sayfa Çerçeve ismi : MainFrame Dosya İsmi : main.html <frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src="file:///f /2.sitem/UntitledFrame 8" name="topframe" scrolling="no" noresize="noresize" id="topframe" title="topframe" /> <frameset cols="80,*" frameborder="no" border="0" framespacing="0"> <frame src="file:///f /2.sitem/UntitledFrame 9" name="leftframe" scrolling="no" ="noresize" id="leftframe" title="leftframe" /> <frame src="file:///f /2.sitem/Başlıksız 5" name="mainframe" id="mainframe" title="mainframe" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> 1
Tablo oluşturarak index web sayfası oluşturma işleminde, sayfamıza bir tablo oluşturup, Tablodaki hücrelerde hangi içerikleri kullanacağımızı belirten algoritma bilgilerini aşağıdaki şekilde hücrelere yazarız. Bu işlemler sayesinde kullanıcı, hangi hücreye neler yapacağını tasarlamış olur. Yalnız, tablo yapılı index sayfalarında bilgilerin gösterileceği çerçeve (mainframe) olmadığından bilgiler boş sayfada (_blank page) çıkacaktır. İşte bu olayı engellemek için tablolarda ANASAYFA olarak kullanılacak bölgenin çerçeve olarak tanımlanması gerekir. Bu işlemi yapabilmek için aşağıdaki işlem sırasını takip ederek uygulayınız. 1 İmleci Tabloda Anasayfa yazan hücreye konumlandırın. 2 Dreamweaver Kod Sayfası görünümüne geçiniz. 2
3 Kod Ekranındaki ANASAYFA yazısının önüne <iframe> etiketi yazılır. <iframe> etiketi tablolarda bir hücreyi hedef çerçeve (Mainframe gibi.) olarak ayarlamayı sağlayan bir HTML etiketidir. <iframe> etiketi tek başına kullanılmaz. Çerçeveye özellik kazandıracak Parametreleri vardır. Bu parametreler; Name : Çerçeveye verilecek isim, Src : Çerçevede ilk çıkacak.html uzantılı dosya (Anasayfa linkinin dosyası : main.html) Width : Çerçevenin genişliğini ayarlamak için, Height : Çerçevenin yüksekliğini ayarlamak için, Frameborder : Çerçeve kenarlığının olup olmamaması, 0: Çerçeve yok 1: Çerçeve var 3
4 Şimdi Menü yazan hücreye basit olarak hazırlanılan tablolu menü hazırlanır. Bu işlem için Ortak sekmesinden Tablo seçilir ve 4 satırlı, 1 sütunlu tablo eklenir. Menü1 yazısı seçilip Özellikler panelinden Bağ kısmından link verildiğinde içeriğin oluşturulan iframe içerisinde görüntülenmesi için Hedef : main yazılmalıdır. 5 Haberler veya Duyurular bölümünde yayınlamak istediğiniz haberleri,duyuruları statik veya animasyonlu bir şekilde yayınlayabilirsiniz. Yazıların animasyonlu bir şekilde yayınlanması için en güzel, en kolay örnek <marquee> etiket kullanımıdır. Bu etiketle resimleri, tabloları, paragrafları soldan sağa, sağdan sola, yukarıdan aşağıya, aşağıdan yukarı yöne doğru hareket ettirebilir; Fare olayları ile javascript kodları eklenerek a) üzerine gelince durmasını, b) üzerinden gidince tekrar çalışmasını, c) basınca istenilen linki açması sağlayabilirsiniz. Bu işlemleri yaparken, kayacak bilgilerin kod bilgileri <marquee>..</marquee> etiketleri arasına yazılmalıdır. Bu hücre çerçeve haline getirilmiştir. Çerçeve ismi : main Dosya ismi : main.html 4
6 Örneğin; haberleri kayan yazı halinde göstermek isterseniz, Haberler yazısının içinde 4 satırlı, 1 sütunlu tablo oluşturun. 7 Kayan yazı eklemek için Haberler tablosunu seçin. 8 Kod sayfasına geçerek <marquee> etiketlerini aşağıdaki belirtilen yere ekleyiniz. 9 Tasarım alanına geçip F12 düğmesi ile sayfanın web önizlemesi alındığında yukarıdan aşağıya doğru hareket eden, fare ile üzerine gidince duran, farenin üzerinden çekilmesiyle tekrar çalışan bir Kayan yazı oluşacaktır. Buradan da tablo seçilebilir. <marquee direction= down onmouseover= javascript:stop() onmouseout= javascript:start() > </marquee> 5