Selamın Aleyküm Kardeşlerim...Size bugün Iceblue'de nasıl tasarım yapılacağını anlatmaya çalışıcam...Kusurlarım olursa affola.İlk önce katmanları belli olan ice blue tasarımının taslağını çıkaralım.Bu epey zahmetli bir iş olduğu için önceden yaptım ben...

<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: none;
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: none;
border:1px solid #000; }

/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3;
background-image: none; }

/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3;
background-image: none; }

/* 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: none;
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: none;
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 alan */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: none;
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: none;
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....

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: none;
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 */
}

/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ; /* Sayaç alanı arka plan rengi */
background-image: none; /* 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: none; /* 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 (gözükmüyor) */

/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ; /* Sağ kutular arka plan rengi */
background-image: none; /* 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.





Görüldüğü gibi herşey açık ve net.Şimdi sorusu veya sorunu olan alt kısma belirtsin...