docHtml Dersleri : Web Site Tasarımında DIV Kullanımı
download 
Şikayet Transkript
Html Dersleri : Web Site Tasarımında DIV Kullanımı
Web Site Tasarımında DIV Kullanımı
Web Site Tasarımında DIV Kullanımı
Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı
kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu
sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları
ekranları için) kolay olmasıdır.
Aşağıdaki gibi bir DIV yapısına sahip iskeleti oluşturalım.
www.dersmax.net
Web Site Tasarımında DIV Kullanımı
1
Web Site Tasarımında DIV Kullanımı
HTML Kodu:
<body>
<div class="tual">
</div>
</body>
CSS Kodu:
.tual { width: 960px; margin: auto; }
HTML Kodu:
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik"></div>
<div style="clear: both"></div>
</div>
CSS Kodu:
.tual { width: 960px; margin: auto; background-color: burlywood; }
.sol_menu { width: 300px; height: 600px; float:left; background-color: aqua; }
.sag_icerik { width: 660px; height: 600px; float:left; background-color: gold; }
www.dersmax.net
Web Site Tasarımında DIV Kullanımı
2
Web Site Tasarımında DIV Kullanımı
HTML Kodları:
<body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
<div class="sag_icerik_alt"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
CSS Kodları:
.tual { width: 960px; margin: auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; background-color: sandybrown; }
.sag_icerik_alt { height: 300px; background-color: blueviolet; }
www.dersmax.net
Web Site Tasarımında DIV Kullanımı
3
Web Site Tasarımında DIV Kullanımı
HTML Kodu:
<body>
<div class="tual">
<div class="sol_menu"></div>
<div class="sag_icerik">
<div class="sag_icerik_ust"></div>
<div class="sag_icerik_orta"></div>
www.dersmax.net
Web Site Tasarımında DIV Kullanımı
4
Web Site Tasarımında DIV Kullanımı
<div class="sag_icerik_alt">
<div
<div
<div
<div
class="sag_icerik_alt_sol"></div>
class="sag_icerik_alt_orta"></div>
class="sag_icerik_alt_sag"></div>
style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
</body>
CSS Kodu:
.tual { width: 960px; margin: auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua; }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}
.sag_icerik_ust { height: 200px; width:600px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; width:600px; background-color: deeppink; }
.sag_icerik_alt { height: 300px; width:560px; background-color: blueviolet; padding: 20px; }
.sag_icerik_alt_sol { height: 300px; width: 33.3%; float: left; background-color: darkorange; }
.sag_icerik_alt_orta { height: 300px; width: 33.3%; float: left; background-color: tomato; }
.sag_icerik_alt_sag { height: 300px; width: 33.3%; float: left; background-color: cyan; }
www.dersmax.net
Web Site Tasarımında DIV Kullanımı
5
Benzer belgeler
Photoshop Dersleri : Automate Menüsünden Picture Package
Automate Menüsünden Picture Package
Automate menüsünden picture package
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl
Basit Bir Photoshop ile Yapılmış Web Sayfası Nasıl Tasarlanır?
Detaylı
Photoshop Dersleri : Adobe Photoshop CS3 Background Eraser Tool
Adobe Photoshop CS3 Background Eraser Tool
Arka plan silme işlemlerinde kullanılan araçtır
Background Eraser Tool : Arkaplan rengini silme işlemlerinde kullanılır.
Java Temelleri : Java Set Font Kullanımı
Font t = new Font("Bradley Hand ITC", Font.TRUETYPE_FONT, 20);
Font r = new Font("Bodoni MT Poster Compressed", Font.BOLD, 20);
Font a = new Font("Algerian", Font.LAYOUT_NO_START_CONTEXT, 20);
Font...
