freecssuygulama
Bu sayfa en son 24.11.2009 tarihinde güncellenmiştir !
< Web Dersleri'ne Geri Don <Öncelikle tasarımımızı seçiyoruz
Free-Css.com
veya buradan
FreeCssTemplates.org
Sonra tasarımımızı indirip masa üstüne çıkartıyoruz ve sırasıyla şu adımları izliyoruz
1-)Tasarımımızın içindeki images dosyasını bulup içindeki upload ediyoruz.Sonra upload ettiğimiz resimlerin linklerini bir word dosyası açıp içine kayıt ediyoruz.
Upload etmek için isterseniz sitenizin kendi hostunu kullanın isterseniz burayı İmagesHack.us
Not: Uploadı kendi sitenize yaptıysanız,Resimlerin'e geçip oradan upload ettiğiniz resimlerin url lerini ,resmin üzerine sağ tıklayıp özellikler diyerek alıyorsunuz,eğer İmageshack tan yaptıysanız( Direct link to image ) bu yazının karşısındaki url yi alıyorsunuz.
2-) İndirdiğiniz tasarımdan style dosyasını bulup,sağ tıkladıktan sonra birlikte aç tan bir word belgesi ile açıyoruz.Karşımıza şuna benzer kodlar çıkacak
#right_corner {float:right;height:84px;width:344px;
background:url(right_corner.png) no-repeat;}
#header_nav {width:100%;height:43px;margin:0 auto;
background:url(menu.jpg) repeat-x;
3-) Bu kodlarda kalınlaştırdığım yerdeki gibi resim uzantılı yerleri bulup,resim adlarına göre,önceden upload ettiğiniz resimleri kalın yerleri silip yapıştıracağız.
Örnek: http://img240.imageshack.us/img240/6672/18471011.png
Bu benim upload ettiğim resimlerden right_corner.png nin url si.Bu linki yukarıda kalınlaştırdığım yerlere resim ismine göre yapıştıracağız.
Kodumuz sonra böyle olacak:
#right_corner {float:right;height:84px;width:344px;
background:url(http://img240.imageshack.us/img240/6672/18471011.png) no-repeat;}
#header_nav {width:100%;height:43px;margin:0 auto;
background:url(menu.jpg) repeat-x;
4-) Tüm resimleri örnekteki gibi yerlerine yerleştirdikten sonra,style dosyasının içindeki bu kodun başına aşşağıdaki kodu da ekleyip css kodu kısmına yapıştırıyoruz ve kayıt ediyoruz.
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
Buradan sonra css yani style ile işimiz kalmadı.
-------------------------------------------
Sıra geldi tasarım üzeri ve altı olarak yarımaya
Eğer tasarımı bu siteden indirdiysek bu yolla ayırıyoruz ( Free-Css.com )
İndirdiğimiz dosyanın içindeki index dosyasını sağ tıklayıp birlikte aç dedikten sonra,yine bir word dosyası ile , dosyamızı açıyoruz ve karşımıza birsürü kod çıkıyor.
Kodların en başından buraya kadar olan yeri
<div class="left-box">
Tasarım üzeri bölümüne yapıştırıyoruz
----------------------------------------
<div class="left-box">
Buradan en alta kadar olan yeride Tasarım üzeri bölümüne yapıştırıyoruz
NOT : ''left-box'' Yazan yerde başka yazılarda olabilir sizin bakacağınız yer <div class dır.
Tasarımı bu siteden indirdiyseniz ( FreeCssTempaltes.org )
Tasarım Üstüne
....
....
....
....
... <div id="page">
Tasarım altına
</div>
.....
.....
.....
Yapıştırılacak buradan sonrası size kalmış,Menü linklerinizi ayarlayıp,sitenize ekleyin.
