-
ironarchives
Uzman Üye
Konum: Antalya / Merkez
|
 14.10.2008, 11:22 (UTC)
Mesaj konusu: IceBlue Tasarım Yapımı. Geniş Anlatım ! ! ! |
|
|
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
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..
Yada Kendinize Başlık Resmi Yapabilirsiniz..
Hareketli Yada Değil İnceleyiniz;
http://www.bedava-sitem.com/forum/viewtopic.php?t=36149
Buradaki Anlatımda Kullanılan Programda Bir Çok Effect Vardır..
Beğenin ve Uygulayın...
Umarım Kolaylıkla Bu Tasarımı Yapabileceksiniz..
Kolay Gelsin,
İyi Eğlenceler...______________ www.ironarchives.tr.gg
En son ironarchives tarafından 16.10.2010 12:29:29 tarihinde değiştirildi, toplam 2 kere değiştirildi
|
|
-
ysnsen
Uzman Üye
Konum: YsnseN
|
27.01.2010, 12:59 (UTC)
Mesaj konusu: |
|
|
Hyperend.tr.gg anlatımıdır
Alıntı: <style type="text/css">
<!--
table {margin-left: auto;margin-right: auto}
/* Tasarımın Arka Planı */
body {
background-color:#343434;
background-image:url(Arka Plan);
}
/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }
/* Link Özellikleri */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }
/* Ziyaret Edilen Link Özellikleri */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}
/*Hover Effekti Özellikleri*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}
/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0;
background-image:url(Başlık Resmi Url);
background-repeat:no-repeat; }
/* Header Yazısı */
td.headline {visibility:hidden;}
/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
font-weight:600;
height:27px;
background-color:#2b4f7a;
background-image:url(Sol Menü Ana Başlık Resimi);
border:1px solid #000; }
/* Menü Butonları */
td.nav {
background-color:#ccc;
background-image: url(Sol Menü Buton 1);
border:1px solid #000; }
/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc;
background-image:url(Sol Menü Buton 2);
border:1px solid #000;}
/* Text Linklerin Özellikleri */
td.nav a {
color:#000000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
font-weight:500;
text-align:left; }
/* TextLinklerin Hover Özellikleri */
td.nav a:hover{
color:#000000;
font-weight:500;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }
/* Resim Engelle */
td.edit_below_nav {display:none;}
/* Kaydırma Çubuklarını Engelle */
td.edit_main_tr {
height: 50% !important; }
/* İçerik Ana Menü */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image:url();
border:0px solid #000000; }
/* İçerik Ana Menü 2 */
td.edit_content_top {
height:27px;
background-color:#2f4b7a;
background-image:url(İçerik Menüsü Resimi);
border:1px solid #000; }
/* Bar Metin alanı */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }
/* Metin alanı */
td.edit_content {
width:610px;
background-color:#FFFFFF;
background-image: url();
border:1px solid #000; }
/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3;
background-image:url(); }
/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3;
background-image:url(); }
/* Alt Bar */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(Alt Bar Resimi);
border:1px solid #000000; }
/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image: url();
border:0px solid #000000; }
/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:14px;
color:#000;
background-color:#c9c9c9;
border:1px solid #000000; }
/* Metin Alanı / Büyük Kutu */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image: url();
border:0px solid #000000; }
/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;}
/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
font-weight:600px;
height:27px;
background-color:#000000;
background-image: url(Sağ Navbar Resimi);
border:1px solid #000000; }
/* Sağ Kutu / Orta Kısım */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }
/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; }
/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ;
background-image: url();
border:0px solid #000000; }
-->
</style>
Gördüğünüz taslak kodumuz budur.Kodumuzun bazı yerlerinde değişiklik yaparak ice bluede çok güzel işler çıkartacaz...
Baştan başlayalım kodları inceleyemeye....
Alıntı: Genel Özellikler
/* Tasarımın Arka Planı */
body {
background-color:#343434; /* Arka plan rengini belirler. */
background-image:url(Arka Plan Resim Urlsi); /* Arka plan resmini belirler. */
}
Font Özellikleri
/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000; /* Yazıların renigini belirleyebilirsiniz.(Şuan Siyah) */
font-size:14px; /* Yazıların boyutunu pixel cinsinden belirler. */
text-align:left; /* Yazıların nereye dayalı olmasını belirler.Left=Sol */
font-family: arial,verdana; /* Yazıların türünü belirler. */
}
Link Özellikleri
/* Link Özellikleri */
a:link { /* Link Özellikleri */
color:#000080; /* Linklerin aktif olmadan önceki rengi. */
font-size:14px; /* Linklerin boyutu. */
font-family:arial,verdana; /* Linklerin yazı fontları */
text-decoration:none; /* Linklerin dekor özellikleri(altı çizili gibi). */
}
/* Ziyaret Edilen Link Özellikleri */
a:visited { /* Ziyaret Edilen Link Özellikleri (Tıklanan) */
color:#800000; /* Linklerin ziyaret edildikten sonraki renkleri */
font-size:14px; /* Linklerin ziyaret edildikten sonraki boyutu */
font-family:arial,verdana; /* Linklerin ziyaret edildikten sonraki fontu. */
text-decoration:none; /* Linklerin ziyaret edildikten dekor özellikleri(altı çizi) */
}
/*Hover Effekti Özellikleri*/
a:hover{ /* Linklerin üzerine gelinceki durumu (Effekt) */
color:#000080; /* Linklerine üzerindeyken yazı rengi */
font-size:14px; /* Linklerin üzerindeyken font boyutu. */
font-family:arial,verdana; /* Linklerin üzerindeyken font türü. */
text-decoration:none;/* Linklerin üzerindeyken dekor özellikleri(altı çizi) */
}
Header (Başlık) Özellikleri
/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0; /* Başlık resmi arka plan rengi.*/
background-image:url(Başlık Resmi Url);/* Başlık resmi urlsi. */
background-repeat:no-repeat;/* Başlık resminin tekrar edip etmemesi. */
}
/* Header Yazısı */
td.headline {visibility:hidden;} /* Site titlesini yani başlık yazını kaldırmak.*/
Sol Menü Özellikleri
/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px; /* Soldan ne kadar boşluk verileceği. */
color:#FFFFFF; /* Menü yazısının rengi */
font-size:14px; /* Menü yazının font büyüklüğü */
font-family:arial,verdana; /* Menü yazının font türü */
height:27px; /* Menü arka planın boyutu */
background-color:#2b4f7a; /* Menü arka plan rengi */
background-image:url(Sol Menü Ana Başlık Resimi); /* Menü arka plan resmi */
border:1px solid #000; /* Menü border özellikleri. */
}
/* Menü Butonları */
td.nav {
background-color:#ccc; /* Menü butonlarının üstüne gelmeden önce arka plan rengi */
background-image: url(Sol Menü Buton 1); /* Menü butonlarının üstüne gelmeden önceki resimi */
border:1px solid #000; /* Border özellikleri */
}
/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc; /* Menü butonlarının üstüne geldikten sonra arka plan rengi */
background-image:url(Sol Menü Buton 2);/* Menü butonlarının üstüne geldikten sonraki resimi */
border:1px solid #000;} /* Border özellikleri */
/* Text Linklerin Özellikleri */
td.nav a {
color:#000000; /* Menüdeki linklerin rengi */
font-size:14px; /* Menüdeki linklerin boyutu */
font-family:arial,verdana; /* Menüdeki linklerin font türü. */
text-decoration:none; /* Menüdeki linklerin dekor özelliği*/
text-align:left; /* Menüdeki nereye dayalı olduğu */
}
/* Text Linklerin Hover Özellikleri */
td.nav a:hover{
color:#000000; /* Menüdeki linklerin üstüne gelicenki rengi */
font-size:14px; /* Menüdeki linklerin üstüne gelinceki boyutu */
font-family:arial,verdana; /* Menüdeki linklerin üstüne gelinceki font türü*/
text-decoration:none; /* Menüdeki linklerin üstüne gelinceki dekor özelliği */
text-align:left; /* Menüdeki linklerin üstüne gelinceki nereye dayalı olduğu.*/
}
İçerik Kısmı Özellikleri
/* İçerik Kısmı Arka Planı */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image:url();
border:0px solid #000000; }
/* İçerik Ana Menü */
td.edit_content_top {
height:27px; /* İçerik alanı menü uzunluğu */
background-color:#2f4b7a; /* İçerik alanı menü arka planı */
background-image:url(İçerik Menüsü Resimi); /* İçerik alanı menü arka plan resmi */
border:1px solid #000; /* Border özellikleri */
}
[/FONT] [FONT=Arial][FONT=Tahoma]/* İçerik Ana Menü Yazı */
td.headline2 {
color:#FFFFFF; /* Menü yazı rengi */
font-size:12px; /* Menü yazısı boyutu. */
font-family:arial,verdana; /* Menü yazısı font türü */
text-align:left; /* Menü yazısının nereye dayalı olduğu. */
}
/* Metin alanı */
td.edit_content {
width:610px; /* Metin alanı uzunluğu */
background-color:#FFFFFF; /* Metin alanı arka plan rengi */
background-image: url(); /* Metin alanı arka plan resmi */
border:1px solid #000; /* Border özellikleri */
}
/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3; /* Metin alanı sol kenar rengi */
background-image:url(); /* Metin alanı sol kenar resmi */
}
/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3; /* Metin alanı sağ kenar rengi */
background-image:url(); /* Metin alanı sağ kenar resmi */ }
/* Alt Bar */
td.edit_content_bottom {
height:29px; /* Alt bar yükseliği */
background-color:#000000; /* Alt bar arkaplan rengi */
background-image: url(Alt Bar Resimi); /* Alt bar arka plan resmi */
border:1px solid #000000; }
Sayaç Alanı Özellikleri[/FONT] [/FONT]
[FONT=Tahoma]
/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ; /* Sayaç alanı arka plan rengi */
background-image: url(); /* Sayaç alanı arka plan resmi */
border:0px solid #000000; /* Border özellikleri */
}
/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana; /* Sayaç font türü */
font-size:14px; /* Sayaç font boyutu */
color:#000; /* Sayaç font rengi */
background-color:#c9c9c9; /* Sayaç arka plan rengi */
border:1px solid #000000; /* Border özellikleri */
}
Sağ Taraf Özellikleri
/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;} /* Sağ tarafın en dış kısmı * /
/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px; /* Sağ kutunun menü yazsının sağa uazaklığı */
color:#FFFFFF; /* Sağ kutunun menü rengi */
font-size:14px; /* Sağ kutunun menü font boyutu */
font-family:arial,verdana ; /* Sağ kutunun font türü */
text-align:center; /* Sağ kutunun ont ortalaması */
height:27px; /* Sağ kutu menü yüksekliği */
background-color:#000000; /* Sağ kutu menü arka plan rengi */
background-image: url(Sağ Navbar Resimi); /* Saü kutu menü arka plan resmi */
border:1px solid #000000; /* Sağ kutu border özellikler */
}
/* Sağ Kutu / Orta alan */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080; / Sağ kutular yazı rengi */
font-size:14px; /* Sağ kutular font boyutu */
font-family.arial,verdana; /* Sağ kutular font türü */
text-align:left; /* Sağ kutular yazı ortalaması */
background-color:#F2F2F2; /* Sağ kutular arka plan rengi */
background-image: url(); /* Sağ kutular ark plan boyutu */
border:1px solid #000000; /* Sağ kutular border özellikleri */
}
/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; /* Sağ kutuların footer özelliği [COLOR=#FF0000](gözükmüyor) */[/COLOR]
/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ; /* Sağ kutular arka plan rengi */
background-image: url(); /* Sağ kutular arka plan resmi */
border:0px solid #000000; /* Sağ kutular border özellikleri */
}
Gördüğünüz gibi nerdeyse tüm anlamları, nasıl yapıldıklaı yanlarında yazıyor...Birde resim görelim.
Resim: http://img.webme.com/pic/h/hyperend/icee.png______________  |
|
