Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tema Kodlama Ders!+Dersler10Ders!
#1
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 
Biz Tek Yazıyla Cevap Verelim Logo üst Bilgi Ve Orta Alt.tırPeki Başlayalaım
..
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ırBu divler "kapsayici" ve "temizle"Vardır Örnek
Kodumumuz
#Vatanım1998 {
 
   margin0 auto;
 
   width940px;


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;
 
padding10px;
 
margin0 0 10px 0;
}
#orta .icerik{
 
background#D2D0D1;
 
floatleft;
 
width650px;
 
padding10px;
 
margin0 10px 0 0;
 
positionrelative;
 
height500px;
}
#orta .yan-menu{
 
background#D2D0D1;
 
floatright;
 
width220px;
 
padding10px;
 
positionrelative;
 
height500px;
}
.
temizle{clearboth;} 
[b]Son olarak da alt kısımın Css kodlarını veriyorum...![/b]
Örnek Resim Vermek İsterim

PHP Kod:
#alt{
 
background#E6E5E3;
 
padding10px;
 
height150px;
}
Yıukarıda Gördünüz Kod Alt BilgisidirSimdi Bir Göz Atın Teşekkürler


css-tema1.jpg
Ara
Cevapla PGM
Teşekkür verenler:
#2
Paylaşım için teşekkürler :)
Cevapla PGM
Teşekkür verenler:
#3
Alıntı olduğu çok belli :)
Ara
Cevapla PGM
Teşekkür verenler:
#4
(21-04-2017 Saat: 10:45)Keisly Nickli Kullanıcıdan Alıntı: Alıntı olduğu çok belli :)
Alıntı Yapmama  Gerektirecek Usul YOk Kurallara Göre Ders Veririrm.Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#5
(21-04-2017 Saat: 08:45)Yusuf K. Nickli Kullanıcıdan Alıntı: Paylaşım için teşekkürler :)

yardımcı olduysam asıl ben  teşekürler..
Ara
Cevapla PGM
Teşekkür verenler:
#6
Alıntı yaptığınız şeyleri not olarak düşerseniz daha sağlıklı olur.
Kod:
http://www.serkandaglioglu.com/post/13/html-ve-css-ile-tema-yapimi
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



eXpertBoss -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping