HTML Web sayfalarına div’ler ekleyip onları şekillendireceğiz. HTML sayfaların en büyük sorunu sayfaların çok sade olmasıydı. Bu sadelik resimler ve tablolarla zenginleştiriliyordu ancak bir çok tasarımcıya yeterli gelmiyordu. div desteği sayesinde HTML sayfayı istediğiniz gibi şekillendirebiliyorsunuz. Şimdi bunu nasıl yapabileceğinize bir bakalım:
HTML Web sayfalarına div’ler ekleyip onları şekillendireceğiz. HTML sayfaların en büyük sorunu sayfaların çok sade olmasıydı. Bu sadelik resimler ve tablolarla zenginleştiriliyordu ancak bir çok tasarımcıya yeterli gelmiyordu. div desteği sayesinde HTML sayfayı istediğiniz gibi şekillendirebiliyorsunuz. Şimdi bunu nasıl yapabileceğinize bir bakalım:
Sayfamızda şekillendirilebilir bir “bölüm” yaratmak için, <div> etiketiyle başlayan ve </div> etiketiyle biten bir alan tanımlıyoruz. Bu iki etiketin arasına metni yazabilir, resim ve animasyon gibi içerikleri yerleştirebiliriz.
div’imizi şekillendirmek için <div> etiketinin içinde STYLE parametresini kullanabiliriz. <div> ifadesinden sonra STYLE parametresini yazdığımızda, Dreamweaver kullanılabilecek biçimlendirme seçeneklerini önümüze getiriyor.
div etiketinin içine ekleyeceğimiz STYLE=“background-color:#CCCCCC” parametresi, div’imizin gri bir arka plana sahip olmasını sağlayacak. Böylece div’in tasarımını yaparken ne kadar yer kapladığını rahatça görebileceğiz.
Sayfada gördüğümüz üzere div’imizin “Bölüm içeriği… Bölüm içeriği…” şeklinde bir içeriği ve gri arka planı bulunuyor. div etiketine yazdığımız STYLE parametresinin içeriğini değiştirdiğimizde belgeyi kaydedebilir ve değişikliği tarayıcıda görüntüleyebiliriz.
STYLE parametresine eklediğimiz WIDTH=“600px” ifadesi, div’imizin genişliğinin 600 pikselle sınırlandırılmasını sağlıyor. PADDING=“20px” ifadesiyse div’in içeriğinin tüm kenarlardan 20 piksellik boşlukla görüntülenmesini sağlıyor.
div etiketinin içindeki STYLE parametresine eklediğimiz tüm biçimlendirme bilgileri, tarayıcıda yukarıda gördüğünüz gibi bir sonuç veriyor. Artık div’imiz belirli bir boyuta, kenar boşluklarına ve metin rengine sahip.
