Kullanıcı İşlemlerini Aç/Kapat

forum.webasalet.com
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tema Kodlama Ders!+Dersler10Ders!
*
Banlı Üye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 30
Konu Sayısı: 10
Üyelik Tarihi: Apr 2017
Teşekkürler: 0
4 Mesajına 5 Teşekkür Edildi.

SanalPara (SP): 73.85₺
#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
Cevapla
Teşekkür Edenler: Helper
Forum Üyesi
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 1,466
Konu Sayısı: 113
Üyelik Tarihi: Apr 2017
Rep Puanı: 24
Teşekkürler: 1220
507 Mesajına 618 Teşekkür Edildi.

SanalPara (SP): 2,644.67₺
Eşya: (Tüm Eşyaları Göster)
#2
Paylaşım için teşekkürler :)
F E N E R L Y
WWW
Cevapla
Teşekkür Edenler:
Forum Üyesi
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 2,767
Konu Sayısı: 435
Üyelik Tarihi: Mar 2014
Rep Puanı: 148
Teşekkürler: 648
350 Mesajına 405 Teşekkür Edildi.

SanalPara (SP): 384.33₺
Eşya: (Tüm Eşyaları Göster)
#3
Alıntı olduğu çok belli :)
      ~ Keisly ~
WWW
Cevapla
Teşekkür Edenler:
*
Banlı Üye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 30
Konu Sayısı: 10
Üyelik Tarihi: Apr 2017
Teşekkürler: 0
4 Mesajına 5 Teşekkür Edildi.

SanalPara (SP): 73.85₺
#4
(04-21-2017, 09:45 AM)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.
Cevapla
Teşekkür Edenler:
*
Banlı Üye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 30
Konu Sayısı: 10
Üyelik Tarihi: Apr 2017
Teşekkürler: 0
4 Mesajına 5 Teşekkür Edildi.

SanalPara (SP): 73.85₺
#5
(04-21-2017, 07:45 AM)Yusuf K. Nickli Kullanıcıdan Alıntı:  Paylaşım için teşekkürler :)

yardımcı olduysam asıl ben  teşekürler..
Cevapla
Teşekkür Edenler:
*
Bölüm Şefi 1. Seviye
İzinli
Kullanıcı Bilgileri Göster
Yorum Sayısı: 4,483
Konu Sayısı: 274
Üyelik Tarihi: Aug 2012
Rep Puanı: 184
Teşekkürler: 1231
646 Mesajına 968 Teşekkür Edildi.

SanalPara (SP): 547.23₺
Eşya: (Tüm Eşyaları Göster)
#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
GIRIFIT
FantastikSeriler

# Önemli olan Tasarımı yapmak değil, kafanda kurgulamaktır.
# Taklitler aslını her zaman yükseltmez. Taklit edilenlerin sözüdür. Seni taklit edenden başarılı değilsen, bu senin başarısızlığındır.

#GRIZI7 
WWW
Cevapla
Teşekkür Edenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi
Tema yapımcısı: Metehan Durmuş
Tüm hakları saklıdır. 10TL.Net sistemi için yazılmıştır.


***