728x90 AdSpace

  • Latest News

    7/22/2010

    Css Site Yapıyoruz Part 1

    PSD olarak hazırladığımız yada internette bulduğumuz layout dosyalarını nasıl web ortamına sunarız? Bu konu hakkında pek makale ve bilgilendiri görseller yok. Konuyu biraz aydınlatmak adına PSD dosyasını css yardımı ile internet ortamına nasıl hazırladığımıza bir göz atın.. Bu konuda yukarda ufak ön izlemesini gördüğünüz sitenin üst tarafını kodlicaz. Hadi bakalım :)))



    Resme bakarsanız resimde üç ana bölüm var.
    Üst: Sitemizin en üsteki siyah olan alan
    Logo: ufak bir manşet haber yer alacak
    Anamenü: Logomuzun altındaki menümüz...

    şimdi bize gerekli olan 2 dosya ve 1 klasör :) images, stil.css ve index.html

    index.html dosyamızın içeriği


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-9" />
    <title>KirliAdam.Com | Css Site Yapiyoruz</title>
    <link href="stil.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    
    
    
    
    buraya site kodlarımızı yazccaiz :)
    
    </body>
    </html>
    



    Üst bölüm- Hemen Başlayalım üst taraftan başlayalım...
    stil.cs

    
    
    


    şimdi yukarda üst adında bir div tanımladık  
    background-color ile arkaplan rengini tanımladık.
    border-bottom : border kenarlıktır bottom ise alt tarafı gösterir. Yani alt tarafa 3px lik bir kalınlıkta 353535 renginde bir çizgi çek diyoruz... border-top deseydik üst tarafa çizgi çekerdik...
    height: yüksekliktir, yükseklik ile genişliği karıştıranlar var. Yüksekliği geometriden H ile aklınızda tutabilirsiniz :))

    index.html

    
    
    
    


    div olarak tanımladığımız alanları index.html dosyamıza bu şekilde ekliyoruz. divi kapatmayı da unutmuyoruz tabiki... Kaydedip kontrol ettiğimizde alanın tam olarak üst sınıra yapışmadığı göreceksiniz... Bu sınırları sıfırlamak için css dosyamızın en üst tarafına aşağıdaki kodları ekleyin...

    stil.cs

    
    
    


     Birde unutmadan sitemizde tanımlanmamış yazılar için yazı tipi ve boyut belirtmede fayda var :)

    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    }
    


    bu kod ile alanlar sıfırlanacaktır... Şimdi üst menümüz için bir liste oluşturuyoruz. Bunu ul > li > a şeklinde bir sıra ile kodlicaz. bir önemli nokta ise bu listeyi yukarda oluşturduğumuz üst divi arasına yazıyourz...
    index.html

     <div id="ust"><ul><li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a></li>
    <li><a href="#">Referanslar</a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">Iletisim</a></li>
    </ul></div><!--Üst div bitiş-->
    


    yukarıdaki gibi alanları html dosyamıza eklediğimizde görüntüsü aşağıdaki gibi olacaktır...

    Şimdi sırasıyla (ul>li>a) kodlamaya başlayalım... stil dosyamıza devam ediyoruz...
    stil.css

     #ust ul{
    float:right;
    list-style:none;
    padding:7px 40px 0 0;
    }
    


    dikaat ettiyseniz #ust ul dedim, çünkü listeyi biz #ust div'inin içine yazdık. bu şekilde kodlamamızdan sadece #ust divinin içerisndeki ul etkilenecektir...
    float:right ile menümüzü sağ tarafa taşıdık. list-style:none ile yan taraflarındaki noktaları kaldırdık.
    padding: ise girinti vermek için kullandık. 40px ise sağ taraftan biraz boşluk verdik ki biraz sol tarafa yanaşsın :)  aldığı dört değer, yukarı, sağ, alt, sol'dur... Bunu unutmamak için (TıRaBıL) kelimesini kullanabilirsiniz. Top, Right, Bottom, Left :))) Volkan arkadaşımız sayesinde öğrendim bunu :)


    stil.css

    #ust ul li{
    display:inline;
    padding-left:7px;
    }

    Burada da ise li  display:inline ile menümüzü yatay konumuna getiriyoruz ve padding left diyerek menüler arasında 7pxlik bir boşluk bırakıyoruz...


    stil.css

    
    #ust ul li a{
    color:#999;
    text-decoration:none;
    }
    #ust ul li a:hover{
    color:#E4E4E4;
    }
    
    Ve son olarak linklerimizin rengini belirliyor ve altındaki çizgileri kaldırıyoruz. a:hover ile de farenin link üzerine geldiğinde meydana gelecek olayı gösteriyoruz. Gördüğünüz gibi renk değiştirdik...

    Ve menümüz bitti Bişey anlamadım diyenler için:
    Css Yatay Menü Yapımı
    css-ile-menu-olusturmak

    logo bölümü - logo alanı arkaplanında resim olan geniş bir div... Öncelikle resmimimizi images klasörümüze taşıyoruz... Resmin orjinal boyutu için üzerine tıklayın...

    Stil.css

    #logo {
    background:url(images/logoalani.jpg) no-repeat;
    height:250px;}
    


    arkaplan resmini belirttik tekrar etmesin diye no-repeat dedik ve resim yüksekliğini belirttik...


    <div id="ust"><ul><li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a></li>
    <li><a href="#">Referanslar</a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">Iletisim</a></li>
    </ul></div><!--Üst div bitiş-->
    
    <div id="logo"></div><!--logo div bitiş-->

    logo alanımızı da ekledik :) şimdi geldi logo alanımız içerisindeki haber alanını yapmaya...
    index.html

    <div id="logo">
    <div id="mansethaber">
    <img height="125" width="204" alt="sda"  src="images/haber.png">
    <h1>Içerik yönetim sistemi</h1><p>Içerik Yönetim Dizgesi (sistemi) (Ingilizce: Content Management System, kisaca IYD) katilimci teknikler ile belge ya da benzeri içeriklerin yaratilmasina ve düzenlenmesine yardimci olan yazilim dizgeleridir... <a href="#" class="devam">[ Devam&#305;... ]</a> </p>
    </div>
    </div><!--logo div bitiş--> 
    


    Logo divi içerisne yazdık kodlarımızı, kodlarımız arasında ne var bir bakalım div#mansethaber , img , h1  , p , şimdi css dosyamızda sırasıylla kodlamaya başlayalım...


     #mansethaber{
    color:#FFFFFF;
    width:600px;
    padding:50px 0 0 50px;
    }
    #mansethaber h1{
    color:#FFFFFF;
    font-size:20px;
    padding-bottom:5px;
    }
    #mansethaber p{
    color:#FFFFFF;
    font-size:13px;
    }
    #mansethaber img{
    padding:3px;
    border:1px solid #9F0647;
    margin-right:10px;
    float:left;
    }
    .devam {
    float:right;
    color:#ccc;
    text-decoration:none;
    padding-top:5px;
    }
    .devam:hover {
    color:#000000;
    text-decoration:underline;
    }
    

    ne yaptık?:
    600px değerinde bir genişlikte alan oluşturduk,  padding ile yukarıdan ve sol taraftan girinti verdik...
    #mansethaber h1 rengi beyaz, 20px boyutunda, alt tarafta 5 pxlik bir boşluk...
    #mansethaber p rengi beyaz ve 13px boyutunda...
     #mansethaber img  3pxlik bir kenar boşluğu belirttik, ve 1px lik bir kenarlık ekledik... margin-right ile de sağ taraftan 10px lik bir boşluk bıraktık, ve sol tarafa yaslıyoruz resmimizi...
    .devam bu diğer kodlamalara göre biraz farklı gördüyseniz (nokta).devam şeklinde, bu bir sınıf tanımıdır. Class deniyor kendilerine :) bu classları html in her türlü kodu ile kullanabilirsiniz. Bunu ben devam linki için kodladım. a href="asdasd.html" class="devam" şeklinde kullanabiliyoruz...

    Bkz.(
    div: genel alanlar için kullanılır. kendisinden 1 tane olan yerler için genelde... Örneğin sitemizde bir tane logo alanımız vardır... Bunu div ile kodlarız... Fakat genel olarak kullanacağımız özellikler için class kullanırız. Örneğin birden fazla makale için class kullanırız... 
    )

    Geldik aşağıdaki menüye :) Anamenü
    index.html

     <div id="anamenu">
    <ul><li><a href="#">Anasayfa</a></li>
    <li><a href="#">Haberler</a></li>
    <li><a href="#">Referanslar</a></li>
    <li><a href="#">Hakkimizda</a></li>
    <li><a href="#">Iletisim</a></li>
    </ul>
    </div><!--Menü div bitiş-->
    <

    şimdi stil.css dosyamızda yukarda oluşturduğumuz alanı özelleştirelim :9

    #anamenu {
    background:url(images/menu.jpg) repeat-x;
    height:45px;}
    #anamenu ul{
    list-style:none;
    padding:7px 0 0 40px;
    }
    #anamenu ul li{
    display:inline;
    }
    #anamenu ul li a{
    color:#383838;
    padding-left:10px;
    font-size:13px;
    font-family:Verdana;
    text-decoration:none;
    font-weight:bold;
    }
    #anamenu ul li a:hover{
    color:#AA345C;
    } 
    

    menü bg

    Bu kodları tekrar açıklamayacağım,  tek fark menü alanın arkaplan olarka bir resim kullanılması...  menü hakkında daha önce yazdığım  Css Yatay Menü Yapımı konusuna bakın..


    Takıldığınız yada bre burayı biraz daha geniş anlat yada bu kod ne işe yarıyor yada şöyle yapabilir miyiz gibi soru ve görüşlerinizi yorum ile bizimle paylaşın...

    Kirliadam.com makalesidir... Lütfen paylaşımlarınızda kaynak belirtiniz...

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    4 yorum:

    1. Süper anlatım cidden teşekkür ederim böyle bir anlatım için.
      Birde şu temanı değişir misin hocam vallahi ben sıkıldım heryerde bu temayı görmekten :)

      YanıtlaSil
    2. :)) yeni tema üzerinde çalışlıyor şuan...

      YanıtlaSil
    3. aga videolu anlatsan

      YanıtlaSil
    4. Görsel anlatım olsa süper olur be hocam , nolur ya :)

      YanıtlaSil

    Item Reviewed: Css Site Yapıyoruz Part 1 Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top