20-04-2017 Saat: 22:35
PHP Kod:
Merhaba Arkadaşlar Biliyorum.ki Herkez Tema Kodlamak İster Ben Sadece Pospit Gİzlilik Bİlmiyorum Ve Tema Kodlama Derslerimiz Başlamıştır...Hayırlı Olsun!
1:Peki Tema Kodlama Tasarım İşlemleri Nasıl Yaplır Örnek Kodla Yapalım!
Verice
..
Bu yazımızın sonunda Html ve Css kullanarak tema hazırlayabilecek bilgileri edinmiz olacağız.
Tema yapımına başlamadan önce temamızda neler olacağını belirleyelim. Temamız 3 üst kısım, orta kısım olmak üzere 3 ana kısımdan oluşacak. Üst kısımda bir logomuz ve bir menümüz olacak. Orta kısıma gelince bu kısmıda kendi içinde icerik ve yan menü olarak iki bölüme ayıracağız.
Temamızın genel şablonunu photoshop ile çizmeye çalıştım pek beceremedim ama en azından size genel bir fikir verecektir :) .Peki Html Css Kodlar Nereye Yazılır.....
Cevap
Şablonlar İlgili Tema Sablonu Üst Kısım.İçin.[b] Header - [Üst Kısım] Şablonlar header Menü Düzenleme header_quicksearch'Arama Ekleme ve header_welcomeblock_guest Bir Giriş Papaneli Eklenebilir. Hadi şimdi Devam Edelim Kodlarımızla[/b]
[b]Şimdi kodlama kısmına geçelim isterseniz. Yeni bir html sayfası oluşturalım ve aşağıdaki kodları yapıştıralım .[/b]
[b]Html İndex Kodları Silinip Düzelenebilir[/b]
[b]Kod[/b]
PHP Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Html ve Css Tema Yapımı</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="kapsayici">
<div id="ust">
<div class="logo">Logo</div>
<div class="menu">Menü</div>
</div>
<div id="orta">
<div class="icerik">İçerik</div>
<div class="yan-menu">Yan menü</div>
<div class="temizle"></div>
</div>
<div id="alt">Alt ısım</div>
</div>
</body>
</html>
Şimdi Css Öelleştirmeye Geçilebilir.
Html kodları içerisinde bize yabancı gelen 2 div bulunmaktadır. Bu divler "kapsayici" ve "temizle"Vardır Örnek
Kodumumuz
#Vatanım1998 {
margin: 0 auto;
width: 940px;
}
Kod:
Üst kısımın Css kodu :
#Vatanım{
background: #E6E5E3;
margin: 0 0 10px 0;
padding: 10px 10px 10px 10px;
height: 150px;
}
#Vatanım .logo {
padding: 10px;
font-size: 24px;
font-weight: bold;
height: 70px;
}
#Vatamım .menu{
background: #D2D0D1;
padding: 10px;
height: 40px;
}Kod:
Orta kısımda ise "icerik" ve "yan-menu" class isimlerine sahip iki div bulunmaktadır. "icerik" classa sahip divi sola dayalı(float:left;), 650px genişlik, 500px yükseklik, "yan-menu" classa sahip divi ise sağa dayalı bir şekilde(float:right;) 220px genişlik, 500px yükseklik değerlerini veriyoruz.
Orta kısım içerisinde gördüğünüz "temizle" adlı classa sahip divi diğer divlerde kullandığımız float özelliğinden dolayı oluşan yükseklik problemini çözmek için ekledik. Bu işi yapan Css kodumuz "clear: both;" dir. "temizle" adlı divimizi kaldırdığımızda oluşan yükseklik sorunun ekran görüntüsüne bakmak için tıklayın.
Orta kısımın Css kodu :PHP Kod:
#orta{
background: #E6E5E3;
padding: 10px;
margin: 0 0 10px 0;
}
#orta .icerik{
background: #D2D0D1;
float: left;
width: 650px;
padding: 10px;
margin: 0 10px 0 0;
position: relative;
height: 500px;
}
#orta .yan-menu{
background: #D2D0D1;
float: right;
width: 220px;
padding: 10px;
position: relative;
height: 500px;
}
.temizle{clear: both;}
Örnek Resim Vermek İsterim
PHP Kod:
#alt{
background: #E6E5E3;
padding: 10px;
height: 150px;
}
Yıukarıda Gördünüz Kod Alt Bilgisidir. Simdi Bir Göz Atın Teşekkürler.
