Table yerine DIV ve CSS Kullanarak Site Tasarlama

Herkese merhabalar bu dersimde sizlere table yerine div tag larını kullanmanın avantajlarından bahsedeceğim.

Öncelikle hepimiz bir siteyi açarken hızlı yüklenmesine bakarız.Herhangi bir konuyla ilgili arama yaparken veya sitelerde gezinirken bir bağlantıya tıkladığımızda site hemen açılırsa ne güzel ancak açılma süresi 15-20 sn yi geçtikten sonra hemen o siteden çıkarız ve bir daha o siteyi açmayız çünkü bilincimizde o site açılmayan bir site olarak yer alır. İşte bu dersimizde yapmış olduğunuz web sayfalarının hızlı açılmasını sağlayacak olan div taglarından ve Css ten bahsedeceğim.

Neden Tablosuz Tasarım ?

 

Arkadaşlar günümüz tasarım teknolojilerinde; web siteleri artık yerini “div”  taglarına ve Css’e bıraktı. Eskiden tasarımcılar kodları Word,Notepad gibi text belgelerinde yazarlardı. Oysa şimdi Adobe’nin bizlere sunduğu Dreamweaver CS5 var. Hiçbir kod bilgisine gerek kalmadan otomatik olarak tasarımlarımızı kodlamaya dökebilme yeteneğine sahip bir program ve bunda gayet başarılı. Evet “div” taglarıyla ilgili olan konumuzu daha da genişletelim, Tablosuz tasarımı tercih etmeniz için ana sebepler:

 

1- W3 Standartlarında bir yapıya sahip olması;

2- Tarayıcılar ile uyumuluk ve buna bağlı olarak hızlı açılması;

3- Site içeriğine daha kolay müdahele edebilme olanağı;

4- Modern Tasarım’ı yakalama ve uyarlama;

5- Daha doğru,gerçekçi ve creative tasarımlar oluşturma.

 

“Div” Nedir?

Arkadaşlar “div” Dreamweaver programı içerisinde aynı tablo gibi kutular oluşturmaya yarayan ancak tablodan farkı, oluşturmuş olduğumuz <div></div> tagının rengine,yazı tipine,hizalamasına ve daha birçok özelliğine müdahele edebilmemizdir. “div” tagları CSS ile tam uyumludur, “div” kullanarak daha yaratıcı sitelere imza atabilirsiniz. Ayrıca “div” leri tablolardan ayıran en büyük özellik sayfa içerinde oluşan kod kalabanı azaltmasıdır.

Örneğin;  800 x 600 boyutunda bir sayfa hazırlamak istiyoruz. Bunu bir tablo ile oluşturmak istersek kodları aşağıdaki gibi olacaktır.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> </head> <body> <table width=”800″ height=”600″> <tr> <td>&nbsp;</td> </tr> </table> </body> </html>

Ancak bunu “div”ile yapmak istersek kodlarımız aşağıdaki gibi olacaktır.

<body>

<div id=”govde”>Content for  id “govde” Goes Here</div>

</body>

</html>

Görmüş olduğunuz gibi kodlaması gayet sade ve kullanışlı. Bunu tam bir site için uygulamış olduğunuzda tablo ile yapacağınız siteden çok daha kullanışlı ve kodlaması daha basitleştirilmiş bir site ortaya çıktığını göreceksiniz.

Bir sonraki dersimizde “div” lerin Css ile olan bağlantısını ve “div” lerin nasıl kullanıldığını öğreneceksiniz.Hepinize iyi çalışmalar…

Hazırlayan : MURAT KARTAL AYDIN || ADOBE CERTIFIED WEB DESIGNER

Yorum Yaz
Arkadaşların Burada !
Arkadaşların Burada !