AnasayfaAnasayfa  TakvimTakvim  SSSSSS  AramaArama  Üye ListesiÜye Listesi  Kullanıcı GruplarıKullanıcı Grupları  Kayıt OlKayıt Ol  Giriş yapGiriş yap  

 :: Yardim Destek Alanı :: Css AlanıPaylaş | 
 

 IceBlue Tasarım Yapımı. Geniş Anlatım ! ! !

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
mr.genc
Yönetici
Yönetici


Mesaj Sayısı: 14
Kayıt tarihi: 20/12/09

MesajKonu: IceBlue Tasarım Yapımı. Geniş Anlatım ! ! !   Ptsi Ara. 21, 2009 10:04 am
Merhaba Arkadaşlar,



Bu Anlatımı, Yeni Başlayanların Daha Kolay Tasarım Yapabilmesi İçin ve
Sürekli Artan Tasarım İsteği Başlıklarını Engellemek amaçlı Yapıyorum..

Bundan Sonra Alınan Bir Karar İle, Açılan Tasarım İsteği Başlıkları Kilitlenecektir..

Lafı Uzatmadan Konuya Girelim..



----------------------------------------------------------------------------------------------------------



İlk Başta Bilinmelidir ki IceBlue Tasarımda Kullanabileceğimiz En Önemli Komut ;

Kod:
<style type="text/css">


ve

Kod:
</style>


Komutlarıdır..



Bu Komutlar Olmadan Tasarım Yapılamaz..

İlk Verdiğim Komut Tasarımda Kodların En Başına, İkinci İse Kodların En Sonuna Konulan Komuttur...



Örneğin Bir Başlık Resmi Yapacaksak ;

Kod:
<style
type="text/css"><!--td.edit_header_full{background-image:
url(RESİM URLSİNİ BURAYA YAZIN);background-repeat:
no-repeat;--></style>




Kodunu Kullanmamız Gerekiyor..

Koddaki Trikler ;

td.edit_header_full ==> Bir Başlık Resmi Olduğunu Gösterir..

Komuttaki "Full" Bu Başlık Resminin IceBlue Tasarıma Ait Olduğunu Belirtir..

Full yazmazsak Başlık Resmi Görünmez..

Full Yazısı Olmayan Başlık Resmi Kodu Butterfly ve Red Tasarımda Kullanılır...



Yine Kodda {background-image: url (URL); yazan kısımda URL yazan yere Bir Resim URL si Yazılacağını Belirtiyor..

Resim URLsini imageshack.us sitesine girip, resimlerinizi Upload Edip URLsine Ulaşabilirsiniz..

URL yazılan kızımın Devamındaki Komut ;

background-repeat: no-repeat; ==> Resmin Kendisini Tekrarlamayacağı Komutunu Veriyor..

Hatırlatma : Repeat : Tekrarlamak Anlamına Gelir... Verdiği Komut İse No-Repeat

Diğer Arkaplana Verilen Komutlar İçin Bakınız ;

http://www.bedava-sitem.com/forum/viewtopic.php?t=39280



Yine En Başta Söylediğim Gibi Kodun en Başında ve En Sonunda Komutlarımızı Yazdık..



Bu Şekilde Tasarımımızı Yapacağız..



Sitemize Arkaplan Yapalım ;

Kod:
<style type="text/css">

<!--

body{background-image:url(RESMİN URL'Sİ BURAYA YAZILACAK);background-attachment: fixed}

-->

</style>




body{background-image:url(URL); ==> Arkaplan Oluşturma Komutudur..

background-attachment: fixed ==> Arkaplanı Sabitleme Komutudur..
Yani Arkaplan Hep Sabit Kalacak , Sitenizin Nesneleri Arkaplanın
Üstünden Kayacak..
Buna Bir de TekrarlaMAma Komutu Verecek Olursak ;

background-attachment: fixed} ==> Hemen Bu Kodun Soruna Noktalı Virgül (

Ekliyoruz ve Devamına background-repeat: no-repeat; Komutunu Yazıyor ve
Yine en Sonundaki Noktalı Virgül İşaretini Unutmuyoruz...


td.nav{background-image:url(URL);} ==> Buton Oluşturma Komutudur..

td.nav:hover{background-image: url(URL);} ==> Butonun Mouse İle Üzerine Geldiğinizde Oluşacak Halidir..

td.nav_heading{background-image:url(URL);} ==> Navigasyon Yazan Kızıma Buton Oluşturma Komutudur..

td.sidebar_heading{background-image:url(URL);} ==> Sağ Kutuların En Başındaki Başlıklara Buton Oluşturma Komutudur...

td.edit_content_top{background-image:url(URL);} ==> Sayfalar Arası
Dolaşırken En Üstte Hangi Sayfada Olduğunuzu Yazan Kısıma Buton
Oluşturma Komutudur...

td.edit_content{background-image:url(URL);} ==> İçeriğinizin
Bulunduğu Bölüme Bir Renk Resmi Yada Dilediğini Resmi Yerleştirme
Komutudur...

td.edit_content_bottom{background-image:url(URL);} ==> Orta Sayfanın Bittiği Yere Bir Buton Oluşturma Komutudur..

td.shouty{background-image:url(URL);} ==> 1. Sağ Kutucuk Arkaplanına Resim Oluşturma Komutudur..

Bu Kodun başındaki td.shouty Komutunu td.shouty2 yaparsak ikinci
Kutunun Arkaplanını Oluşturur.. Bunu 5 e kadar yazabilirsiniz...
td.edit_rb_footer{background-image:url(URL);} ==> Sağ Kutuları
Biribirinden Ayırmak İçin Aralarına Bir Buton Oluşturma Komutudur...



Bu Bölümlere Resim URLsi Yazmayıp, Renk Kodları İle Renk Verebiliriz..

Bunun İçin Herhangi Bir Komutun Sonundaki } İşaretini Silip Ardına
background-color:#;} Komutunu Yazıyoruz.. burada # işaretinden Sonra
Bir Renk Kodu Yazıyoruz..
İstediğiniz Rengin Kodunu Öğrenmek İçin İnceleyiniz ;

http://www.bedava-sitem.com/forum/viewtopic.php?t=38947



Şimdi Tüm Bu Komutların En Başına <style type="text/css">
Komutunu ve En Sonuna </style> Komutunu Eklemek Yerine, Tüm
Bunları Bir Komut Altında Toplayalım..



Şöyle ki ;

Kod:
<style
type="text/css"> <!--
td.edit_header_full{background-image:url(-----------BAŞLIK RESMİ
URL-------);background-color:;} td.headline{visibility:hidden;}
body{background-image:url(---------ARKAPLAN
URL-------);background-attachment: fixed}
td.nav{background-image:url(---------BUTON URL--------);}
td.nav:hover{background-image: url(-------2.BUTON URL------);}
td.nav_heading{background-image:url(-------NAVİGASYON
URL-------);background-color:#;}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url();}
td.edit_rechts_sbg{visibility:hidden;}
td.sidebar_heading{background-image:url(------SAĞ KUTU BAŞLIK BUTON
URL-----);background-color:#;}
td.edit_content_top{background-image:url(-------SAYFA YER İMİ
URL-------);background-color:#;}
td.edit_content{background-image:url(------İÇERİK ALANI
URL------);background-color:#;}
td.edit_content_bottom{background-image:url(------İÇERİK ALANI BİTİŞ
BUTON URL-----);background-color:#;}
td.edit_content_bottom2{background-image:url(URL);}
td.shouty{background-image:url(------SAĞ KUTU 1 BUTON
URL-----);background-color:#;}
td.shouty2{background-image:url(-----SAĞ KUTU 2 BUTON
URL-----);background-color:#;}
td.shouty3{background-image:url(-------SAĞ KUTU 3 BUTON
URL-----);background-color:#;}
td.shouty4{background-image:url(-----SAĞ KUTU 4 BUTON
URL-----);background-color:#;}
td.shouty5{background-image:url(-------SAĞ KUTU 5 BUTON
URL------);background-color:#;} td.edit_rechts_cbg{background-image:
url(URL);} td.edit_rb_footer{background-image:url(------SAĞ KUTU
AYIRAÇ BUTON URL-----);background-color:#;}
td.edit_rechts_bottom{background-image: url(URL);}
td.edit_content_bottom:hover{background-image:url(URL);background-color:;}
--> </style>




Bu Kodu Not Defterine Yapıştırın..

Kendinize Göre Düzenleyiniz..



Bir Kaç Resmin Boyutları ;

Başlık Resmi ==> 921x104

Buton ==> 185x33

Arkaplan ==> Kendinize göre Boyutlandırabilirsiniz.. Tavsiye : 1024x768

Orta Sayfa ==> Renk Kodu Girmeniz Tavsiyedir...



Şu Resimde de Bu Yaptığınız Yerlerin Neresi Olduğuna Bakabilirsiniz ;





Kendinize buton Bulmak İçin ;

Çoğu Sitede Buton Paylaşımları Yapılmaktadır..

Google dan Araştırıp Bulabilirsiniz..



Yine Başlık Resmi bulmak İçin ;

Google Görseller de ; Aşk Tasarımı Yapıyorsanız ;

Love Header, yada Aşk Header yada Aşk Başlık Resmi Şeklinde Arattırabilrsiniz..


Umarım Kolaylıkla Bu Tasarımı Yapabileceksiniz..
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://bsgenclik.foruma.biz
 

IceBlue Tasarım Yapımı. Geniş Anlatım ! ! !

Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası

 Similar topics

-
» Fenerbahçe tasarım İceblue
» Transformice İcat yapımı
» Havai Fişey Yazı Şekli (photoshop) | Resimli Anlatım | Anlaşılabilir
» İMVU TASARIM SORUNU
» arkadaşlare ıceblue tasarımları üzerine üstümüze yoktur sadece lafta deildir girinde görün

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
 :: Yardim Destek Alanı :: Css Alanı-