Html div ile Sayfa Tasarımı Örnekleri
html kullanarak web tasarım yapan Web Masterlar için html div ile Sayfa Tasarımı Örnekleri konulu yazımıza başlamadan önce ; Div etiketleri ne için nasıl kullanılır sorusuna yanıt arayalım.
Div etiketi ; kutu modeli olarak bilinen Web Sitelerimize nesneleri yerleştirirken yada içerik oluştururken şablon oluşturmaya yarar. Özellikle mobil cihazların yaygınlaşmasıyla beraber div etiketinin kullanım ihtiyacı daha da artmıştır.
Div etiketi tek başına tasarımsal değeri olmamakla birlikte css ile kullanıldığında çok güçlü bir tasarım aracı olarak dikkat çekiyor. Div etiketinin genel kullanım şekli :
<div class=” ……”>içerik </div> kalıbıyla kullanılır.
burada class olarak tanımladığımız sınıf css ile özellik kazandırılmış div etiketimizi güçlendirmek için ihtiyaç duyduğumuz parametredir. class olarak tanımladığımız sınıf css tanımlamalarında .ust benzeri bir isim ile tanımlanmalıdır. Class yerine Id parametresini de kullanabilirdik. Id ile tanımlama yapacak olursak css id ismi #ust benzeri bir yapıda olması gerekecekti.
Bu girizgahtan sonra html div ile Sayfa Tasarımı Örnekleri konumuza dönelim.
Div ile Sayfa Tasarımı Örnek 1:
ulaşacağımız tasarım :
div tasarım örnekleri-1
oluşturacağımız Harici stilim.css dosya içeriği :
.tasiyici{ width:1202px; height:1300px; border:1px; border-style:solid; border-color:#F00;
}
.banner{ width:1187px; height:300px; border:1px; border-style:dotted;
border-color:#000; margin:3px 5px 3px 5px ; background-image:url(file:///C|/Users/ETKullanici/Desktop/csslitasarimlar/css11cdivler/banner.png);
}
.sol{ float:left; width:200px; height:900px; border:1px; border-color:#FF0;
border-style:double; margin-left:5px; margin-right:5px; margin-top:2px;
}/* CSS Document */
.icerik{ width:979px; height:898px; margin-top:2px; margin-right:5px; margin-bottom:2px;
border:1px; border:#30C; border-style:dotted; float:left;
background-color:#393; }
.footer{ border:1px; border-color:#903; border-style:groove; margin-left:5px;
margin-right:5px; margin-bottom:2px; height:77px; width:1188px; float:right; }
html Belgesi İçeriği :
<!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>
<link rel=”stylesheet” type=”text/css” href=”css/stilim.css” />
</head>
<body> <center>
<div class=”tasiyici”>
<div class=”banner”></div>
<div class=”sol”> </div>
<div class=”icerik”> </div>
<div class=”footer”> </div>
</div></center>
</body>
</html>
html div ile Sayfa Tasarımı Örnekleri – 2 :
Hedef Tasarım :
div tasarım örnekleri – 2
stilim2.css dosyası içeriği :
.container{ width:1200px; height:1300px;
border:1px; border-style:solid; border-color:#000;
margin-left:auto; margin-right:auto; margin-top:10px;
}
.ust { margin:5px 5px 5px 5px; width:1186px;
height:300px; border:1px solid #00F; background-color:#C03;}
.menu{ margin:0px 5px 5px 5px; width:1186px;
height:40px; border:1px solid #0F6; background-color:#06C;}
.icerik{ margin:0 5px 5px 5px; width:1186px;
height:845px; border:1px solid #FF0; background-color:#C9C;}
.alt{ margin:0px 5px 5px 5px; width:1186px;
height:80px; border:1px solid #F00; background-color:#0FF;}
Html Belgesi İçeriği :
<!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>
<link rel=”stylesheet” type=”text/css” href=”css/sitilim2.css” />
</head>
<body>
<div class=”container”>
<div class=”ust”>banner</div>
<div class=”menu”>menü</div>
<div class=”icerik”> içerik </div>
<div class=”alt”> footer bilgi alanı</div>
</div>
</body>
</html>
sizler için 2 adet Div ile Sayfa Tasarımı Örneği hazırladım. umarım faydalı olmuştur. Konu ile ilgili takıldığınız yada sormak istediğiniz soruları yorum olarak iletirseniz en kısa sürede cevaplayacağım.
Facebook
Pinterest
Google+
RSS