DIV KAVRAMI <style> position: absolute

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "DIV KAVRAMI <style> position: absolute"

Ebru Alptekin
7 yıl önce
İzleme sayısı:

Aşağıdaki şekilde görüldüğü gibi 2 div oluşturulmuş ve zemin rengi verilmiştir. Div ler aynı tablolar gibi komple bir sayfanın tasarımında kullanılabilirler.

1 DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden <style> tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde görüldüğü gibi 2 div oluşturulmuş ve zemin rengi verilmiştir. Div ler aynı tablolar gibi komple bir sayfanın tasarımında kullanılabilirler. İç içe divler kullanılarak anasayfa oluşturulabilir. Div ler çok esnek yapıdadır sayfanın her noktasına div konumlandırabilirsiniz. Mesela aşağıdaki örnekte 2 div sayfanın Soldan Uzaklık farklı yerlerine konumlandırılmıştır. Farklı bir yere div konumlandırmak için <style> tag i içerisinde div özelliklerine position: absolute eklenmelidir.

2 Soldan Üsten Uzaklık Yükseklik (piksel olarak) Genişlik (yüzde olarak),

3 Aşağıdaki div ler kullanılarak örnekte basit bir anasayfa tasarlanmıştır. Sayfanın ortalanmasını sağlar Div lerin sola doğru yan yana konumlanmasını sağlar

4 Banner Menü Duyurular Diğer Linkler Footer Bu şekilde ana sayfanın taslağı tasarlandıktan sonra içerisi yeni div ler kullanılarak doldurulur. Örnek olarak aşağıda menü örneği gösterilmiştir.

5 YANA AÇILIR MENU Aşağıda verilen yana açılır menü <ul><li></li><ul> tagleri yani liste oluşturma tagleri ve css (style) kullanılarak yapılmıştır. Bu menü istenilen <div> içerisine yerleştirilebilir. Menu nun liste kısmı aşağıda verilmiştir. Liste başlangıcı Ana liste öğesi Liste içine liste oluşturulmuş Böylece yana açılan kısmın içeriği verilmiş Liste sonu Yukarıda verilen kod <body> ana tag i içerisinde istenilen <div> içerisine konulabilir. <ul><li>..</li></ul> tag yapısı menü dışında maddeli listeler oluşturmak için de kullanılabilir.

stilleri sıfırlanmıştır 1px kalınlığında düz çizgi biçiminde kırmızı çerçeve eklenmiş Konumun bağımsız olarak verilmesini sağlar İç

6 Menu nün CSS (Style) kısmı; Dış Kenar boşlukları sıfırlanmış İç Kenar boşlukları sıfırlanmış Liste öğesinin konumlanmasını bir üst tag e bağımlı yapar yanmenu div inin ul tagi Linklerin, ziyaret edilen linklerin, üzerine gelince değişen linklerin ve aktif olan linklerin stilleri sıfırlanmıştır 1px kalınlığında düz çizgi biçiminde kırmızı çerçeve eklenmiş Konumun bağımsız olarak verilmesini sağlar İç menunun gözükmemesini sağlar Fare ile üzerine gelince iç menunun gösterilmesini sağlar Çerçevenin alt kısmının kapatır, gözükmemesini sağlar

7 JAVASCRIPT Javascript web tasarımın hareketli/dinamik kodlama yapısıdır. HTML ile kodladığınız tüm görsellere dinamik içerikler ekleyebilirsiniz. Yazılan yazıları alabilir veya yenilerini ekleyebilirsiniz. Hatta bir işlem veya bir buttona tıklandığında yeni HTML kodlarının dinamik oluşturulmasını da sağlayabilirsiniz. Bu bakımdan Javascript web kodlama içerisinde önemli bir yer tutar. Java script kodları <script> </script> tagleri içersine yazılır. Aşağıdaki örnekte yazı yazmak için kutu oluşturulmuştur. Bu kutuya yazılan herhangi bir şey buttona tıklanılınca hemen altına yazılmaktadır. isim_yaz() fonksiyon tanımı Kutuya yazılan değeri isim değişkenine atar isim değişkenini <p> içerisine yazdırır Boş metin giriş kutusu oluşturulmuş ve ad isim yapılmıştır Bu kısım kutu içerisine yazılanın gösterilmesin sağlayan tag dir Üzerinde Tıklayınız yazan Button oluşturulmuş ismi dugme konmuştur. Ayrıca; buttona tıklanılınca isim_yaz() isimli javascript fonksiyonu çağırılmıştır. Javascript te herhangi bir HTML tag ine ID kullanarak ulaşıp üzerinde işlemler yapmak için; document.getelementbyid( tag in ID si) kullanılır. document.getelementbyid( tag in ID si).value kodu HTML taginin değerini almak için kullanılır. document.getelementbyid( tag in ID si).innerhtml kodu HTML tag i içerisine bir şeyler yazmak için kullanılır. İçerisinde değerler tutmak için değişken oluşturmak istenişe de var değişken ismi biçiminde tanımlama yapılır. Değişkenler kullanılarak 4 işlem dahil yapılabilir.

8 Aşağıdaki örnekte iki metin giriş kutusu oluşturulmuştur. Bu kutulara girilen sayılar buttona basılınca toplanıp altına yazılmıştır. sonuc değişkeni oluşturulup toplama işlemi yapılmıştır sayi1 ve sayi2 giriş kutularındaki değerler almıştır. Değerler metin olduğu için matematiksel işlem yapabilmek için tam sayıya çevrilmiştir sayi1 isimli boş giriş kutusu sayi2 isimli boş giriş kutusu HTML giriş kutusundan alınan değerler metin tipindedir. Bu nedenle üzerinde matematiksel işlem yapılamaz. + işareti metinleri birbirine ekler. Eğer giriş kutusu ile alınan değer tam sayıya çevrilmezse toplama işlemi yapılmayacaktır. Alınan değeri tam sayıya çevirmek için parseint fonksiyonu kullanılmıştır. Örnekte verilen koda benzer olarak 4 işlemin tamamı (+, -, *, /) ve diğer matematiksel işlemler yapılabilir.

9 Renk Değiştiren Yazı Rengin mavi veya kırmızı olup olmadığını kontrol etmek için değişken 1 sn arayla degistir fonksiyonunu çalıştırır Eğer tick değişkeni 0 ise kırmızı olsun değişse mavi olsun Yazının renk stilini kırmızı yapar Yazının renk stilini mavi yapar Rengi değişecek yazı Belirli bir süre ile belirlenen bir fonksiyonun çağırılması için setintervar(fonksiyon ismi, süre) kodu kullanılır. Bu kodda bir tane fonksiyon ismi verilir ve bu fonksiyon alt tarafta oluşturulmak zorundadır. Süre yerine de milisaniye girilir. Örneğin; 1000 milisaniye 1 sn demektir. Bunu 5 saniye yapmak için 5000 değeri girilir. Yukarıdaki örnekte tick değişkeni fonksiyon her çağırıldığında rengin kırmızı mı yoksa mavi mi olduğunu kontrol etmek için kullanılır, eğer tick=0 ise kırmızı, tick=1 ise mavi renk aldığı varsayılır. if (tick==0) {..} else {..} kod parçası javascript te şartlı ifade oluşturmak için kullanılır. Eğer tick==0 ise süslü parantez içerisindeki işleri yap, değilse (else) yine devam eden süslü parantez içindeki işleri yap biçimindedir. Her renk değişiminden sonra tick değişkeni bir sonraki renk için ayarlanmalıdır yoksa renk değişmez.

10 Tarih ve Saatin alınması ve Gösterilmesi Aşağıdaki örnekte her saniye saat_goster() fonksiyonu çağırıldığı için ekranda saniyesi sürekli değişen saat, dakika ve saniye gösterilecektir. Javascript kodu body içerisine ve <p> taginden sonraya yazılması gerekmektedir. Saatin gösterileceği tag Tarih ve saat için nesne oluşturulur Saatin sürekli saniye sayması için fonksiyon her saniye çağırılır Tarih ve saatin sadece saat, dakika, saniyesini alır Örnekte var time=new Date() kodu ile sistemin saati alınır ve bu time değişkenine atanır. Sadece document.getelementbyid( tarih ).innethtml=time; yazılırsa eğer gün, ay, yıl, saat ve saat dilimi gösterilir. Ayrıca time.gethours(), time.getminutes(), time.getseconds() kodları yazılarak sadece saat, dakika veya saniye de alınabilir. Ayrıca time.getday(), time.getmonth(), time.getyear() kodları ile de sadece gün, ay ve yıl alınabilir. Yani; Ayrıca; document.getelementbyid( tarih ).innethtml=time.gethours() sadece saati document.getelementbyid( tarih ).innethtml=time.getminutes() sadece dakikayı document.getelementbyid( tarih ).innethtml=time.getseconds() sadece saniyeyi verir. document.getelementbyid( tarih ).innethtml=time.gethours() + : +time.getminutes() şeklinde kendiniz de saat, dakika veya istenirse saniyeler birleştirilebilir, arada : gösterilir.

Benzer belgeler

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,