CSS Sayfa Düzeni ( Layout )

Layout kelimesi türkçe olarak düzen tasarım ve yerleşim planı anlamına gelir. web page layout ise web sayfası düzeni anlamına gelir.

Web sayfası düzeni, iyi oluşturulmuş, iyi yapılandırılmış, semantik(Anlambilimi) açıdan zengin web siteleri oluşturmanın önemli bir parçasıdır.

HTML ve CSS ile temel web sitesi düzeni oluşturacağız. Hemen hemen her web sitesi bir Başlık, Kenar Çubuğu, İçerik Alanı ve altbilgi içeren bu temel düzenden oluşur.

HTML'nin DIV etiketini kullanacağız çünkü bu DIV tabanlı bir tasarım olacak ve sadece HTML ve CSS kullanıyoruz. DIV tabanlı tasarımlar çok verimli ve tablo bazlı tasarımlara kıyasla çok daha temiz kodlara neden oluyor.

Web Sitesi Düzeni


Bir web sitesi genellikle başlıklara, menülere, içeriğe ve altbilgiye ayrılır:


css layout(sayfa düzeni)

Aralarından seçim yapabileceğiniz binlerce farklı düzen tasarımı var. Ancak, yukarıdaki iki sütunlu yapı en yaygın olanlardan biridir ve bu derste daha yakından inceleyeceğiz.

HEAD bölümü


HTML:


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS Sayfa Düzeni</title>

<link type="text/css" rel="stylesheet" href="css/style.css">

</head>

</html>

Bu bölümde, bu sayfaya “CSS Sayfa Düzeni” başlıklı bir başlık verdik ve style.css dizininde bir stylesheet dosyası ekledik.

Body Bölümü


HTML:



 
<div class="wrap">
 
    <div class="header">
    </div><!-- Başlık -->
 
    <div class="content">
    </div><!--  İçerik -->
     
    <div class="sidebar">
    </div><!-- kenar menü -->
     
    <div class="clear"></div>
     
    <div class="footer">
    </div><!-- Alt bilgi -->
 
</div><!-- wrap bütün sütunları, satırları sar -->
 
</body>

</html>

Gördüğünüz gibi, DIV etiketlerini kullanıyoruz ve her birine sınıf atadık. Bu sınıfları daha sonra her bir sınıfın adlarını stil sayfası dosyasında kullanacağız.

Ayrıca, her bir kapanan DIV'den sonra her bir atanan sınıf ve bölüme yorum ekledik. Yorum satırları adından da anlaşıldığı gibi HTML etiketleri açıklamak için kullanılır ve sonra'dan kod üzerinde bir düzenleme yapacağımız zaman bize yardımcı olurlar.

CSS Style Verme


Her bölümü şekillendirmeden önce, her bölümün genişliği ve yüksekliği gibi ölçümleri bilmeniz gerekir. Bu ölçümler açıkça tasarımdan tasarıma farklılık gösterecektir.

CSS:

body { margin:0; 

	   padding:0; 
     }

varsayılan kenar boşluğunu ve gövdenin dolgusunu sıfırlama yaparız.Tarayıcı farklılıklarını gideririz.

CSS:

.wrap { width:980px;

        margin:0 auto;
      }

Sınıf ismi olarak ".wrap" verdiğimiz div diğer div'leri kapsar veya sarar.

Website sayfasına 980 piksel genişlik verdik ve üsten ve alttan marjını sıfır verdik. sağ ve sol kenar boşluğu olarak auto verdik Her iki taraftaki bu marjı auto vererek, web sitemizi yatay olarak ortalanmış hale getiriyoruz.

CSS:

.header { height:150px;

         margin-bottom:10px;

         background-color:#16a085
        }

Başlık bölümüne yükseklik olarak height:150px verdik. Alt kenar boşluğu olarak 10px verdik. Arka plan rengi “#16a085” Yeşil rengin bir tonunu verdik.

CSS:

.content {

    width:690px;

    height:590px;

    background-color:#16a085;

    float:right;
}
.sidebar {

    width:275px;

    height:590px;

    background-color:#16a085;

    float:left;
}

DIV'lerin yüzmesini sağlamak için float değeri verdik. Bu şekilde div'leri yanyana tutabiliriz. DIV'in birini sağa diğer divide sola yasladık. iki tarafa yaslı div toplamı 690+275=965 olduğu için otomatik olarak aralarında 15px boşluk oluştu.

CSS:


.clear { clear:both}

Css'de clear özelliği float özelliğini iptal etmek için kullanılır bu sayede sitemizin kodları normal akışını girer.

CSS:


.footer {
    height:70px;

    margin-top:15px;

    background-color:#0d7963;
}

Footer (Altbilgi) alanını yükseklik olarak 70px verdik content alanına width:980px verdiğimiz için bildiğiniz gibi div'ler gidebildiği yere kadar giderler yani div, content alanı kadar yer kaplar onun için width değeri vermek gereksizdir. Üstten 15px boşluk verdik, Arka alan rengi olarak yeşilin tonunu verdik.

Tam HTML ve CSS kodu


HTML CSS ile temel web sitesi düzeni oluşturma konusu için Yazılan kodları toparlarsak son hali şu şekilde olur.

HTML:





CSS Sayfa Düzeni



 

CSS:


body { margin:0; padding:0; }
 
.wrap {
    width:980px;

    margin:0 auto;
}
.header { 
    height:150px;

    margin-bottom:10px;

    background-color:#16a085;
}
.content {
    width:690px;

    height:590px;

    background-color:#16a085;

    float:right;
}
.sidebar {
    width:275px;

    height:590px;

    background-color:#16a085;

    float:left;
}
.footer {
    height:70px;

    margin-top:10px;

    background-color:#16a085;
}

.clear {
    clear:both;
}

Web sayfa düzeninin responsive özellikli olması için width değerlerine yüzde değer verirsek monitör çözünürlüğüne göre kendini ayarlar.

Mobil telefonlara göre şekil almasını istersek:

HTML:


Yukarıda ki meta etiketini head bölümüne ekleyin; Yoksa cep telefon çözünürlüğüne göre kendini otomatik ayarlamaz. Büyük ekranlara göre oluşturduğunuz sitenin küçültüşmüş halini görürsünüz.

CSS:

@media screen and (max-width: 600px) {
 .content, .sidebar{

    width: 100%;

    margin-top:10px;

    }

ÇIKTI:

css layout(sayfa düzeni)
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6780

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.