CSS Sayfa Düzeni (Layout)

Web sitesi genellikle sahip oldukları başlıkları, menüleri, bir kaç bölümden oluşan içeriği ve alt bilgisi gibi parçalara ayrılır. Hepsi bir düzen içerisinde kullanıcısına sunulur. Web dünyasına göz attığımızda bu şablonu sunacak, tonlarca farklı sayfa düzeni tasarımı bulunmaktadır.

Üç sütunlu düzen, web siteleri için kullanılan en yaygın sayfa düzenlerindendir. Genellikle bir üst bilgi (başlık) ve alt bilgi bulunur. Web sitesinin diğer sayfalarına ulaşmanızı sağlayabilecek bir menü çubuğu mevcuttur. Orta kısım daha çok içeriği sunmak içindir. Tabi ki içerik birden fazla parçaya ayrılabilir. Bu durumda orta kısım ek sütunlar ile bölünebilir. Şu an bu yazıyı okuduğunuz sitemize bir de böyle bir göz atın, sahip olduğu bölümleri inceleyin. Neler görüyorsunuz? Öyleyse, sayfa üzerindeki tüm parçaları koymak için temel HTML‘mizle başlayalım.

Öncelikle Gövde (body) etiketleri arasında olan her bölümün temel taslağını hazırlayalım. Sayfa düzenini sağlayan tüm bölümleri <div> öğesi ile hazırlıyoruz. Her bölüme bir ilgili sınıf ismi vermek, ilerleyen aşamalarda web sayfası üzerindeki kontrolünüzü arttıracaktır. Her bölümün sırası ve kapsamı sayfanın akışına göre hazırlanmalıdır.

HTML


<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="sayfa">
     <div class="baslik"></div>
     <div class="menu"></div>
     <div class="icerik">
        <div class="sol sutun"></div>
        <div class="orta sutun"></div>
        <div class="sag sutun"></div>
     </div>
     <div class="alt"></div>  
  </div>  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

1. Adım : <body>

Sırada CSS ile biçimlendirme aşamasında. İlk olarak <body> bölümünü ele alalım;

CSS


body{
    margin: 0px;
    padding: 0px;
    background-color: #BBBBBB;
}

body{

margin: 0px;

padding: 0px;

background-color: #BBBBBB;

}

HTML öğelerinden <body> sahip olduğu standart iç (padding) ve dış (margin) boşlukları “0px” olarak verelim. CSS background-color özelliği ile bir arka plan uygulayabilirsiniz.

2. Adım : Sayfa

“.sayfa” isimli bölüm bir görsele sahip olmaktan daha çok içinde yer alan tüm öğeleri bir arada gruplamak ve ortada tutmak için mantıksal bir kapsayıcı olarak bulunmaktadır.

CSS


.sayfa{
       width: 960px;
       margin: 0 auto;
       background-color: white;  /* İsteğe bağlı */
     /*height: 1000px; * Etkiyi görmek için test edebilirsiniz.*/
}

.sayfa{

width: 960px;

margin: 0 auto;

background-color: white; /* İsteğe bağlı */

/*height: 1000px; * Etkiyi görmek için test edebilirsiniz.*/

}

Bu sebeple sadece bir genişliğe sahip olacaktır. margin bildirimi ortalamak için kullanılmaktadır. Arka plan (background) kullanımı isteğe bağlıdır.

3.Adım : Başlık

Başlık genellikle web sitesinin üst kısmında bulunur. Sıklıkla bir logo veya web sitesi adı içerir.

Örneğimize tekrar geri dönelim ve HTML sayfasına “baslik” sınıfına <h1> etiketi ile küçük bir başlık ekleyelim;

HTML


<div class="baslik">
    <h1>Başlık</h1>  /* Eklenen Başlık */
</div>

<h1>Başlık</h1> /* Eklenen Başlık */

</div>

CSS

“.baslik” sınıfı için CSS kodlarımıza aşağıdaki bildirimleri ekleyelim;


.baslik{
        background-color: #89196B; 
        color: white;
        padding: 20px;
}

.baslik{

background-color: #89196B;

color: white;

padding: 20px;

}

Başlık bloğu için uygulanan padding değeri içerisinde bulunan <h1> öğesi ile iç mesafesini tayin etmektedir. Bunun yanı sıra bir arka plan (background-color) ve yazı rengi (color) belirlenmiştir.

İlk testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

Şimdiye kadar işler harika görünüyor..

4. Adım : Menü

Sırada üst menü yerleşiminde; Yatay bir menü oluşturmak üzere “.menu” bloğu içinde sırasız bir liste yerleştirelim. Yapısında bulunacak olan her bir <li> öğesi başka bir sayfamızın linkini tutacak olan <a> etiketlerini barındıracak. HTML dosyasını aşağıdaki gibi düzenleyin.

HTML


<div class="menu">
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
    </ul>     
</div>

<ul>

</ul>

</div>

CSS

HTML belgesinde menü oluşturmak için pek çok farklı öğeyi bir arada kullandık. Yatay bir menü için CSS bildirimlerini yazmadan önce bilmemiz gerekenler var. Menümüz için <div>, <ul>, <li>, <a> öğelerinden faydalanıyoruz.

Öğrenelim;

<div> , <ul>, <li> blok tipi elementlerdir. Kapsayıcısına göre tüm satıra konumlanırlar.
<a> Satır içi (inline) elementtir. Sahip olduğu içeriği kadar satır içinde kalırlar.
float CSS özelliği uygulanan öğeyi sayfa akışından çıkarır. Kullanımından sonra akışı tekrar normal hale getirilmelidir.
<ul>,<li> öğelerinin HTML standartlarından kaynaklanan margin ve padding değerleri vardır.


/* Menu Kutusu */
   .menu {
          overflow: hidden; /* li öğelerine uygulanan float:left ile akışı bozulan div bloğu tekrar akışa çekiliyor. */
          background-color: #333;
    }
   .menu ul{
          /* ul öğesinin doğal iç ve dış boşlukları kaldırılıyor. */
          margin: 0px;  
          padding: 0px;
    }
   .menu li{
          list-style-type: none;  /* li öğesinin standart stil görünümü kaldırılıyor.
          float: left; /* tüm li öğeleri sola hizalanarak yan yana getiriliyor.
    }

/* Menü Linkleri */
   .menu a {            
          display: block; /* Satır içi olan a öğesi blok tipi gibi davranması isteniyor. */
          color: #f2f2f2;
          text-align: center; 
          padding: 14px 16px; /* a öğesi blok durumunda ancak padding uygulanabiliyor.*/
          text-decoration: none; /* a öğesinin standart stil görünümü (alt öizgisi) kaldırılıyor. */
    }

/* Mouse üzerinde iken link değişimi */
   .menu a:hover {
          background-color: #ddd;
          color: black;
   }

/* Menu Kutusu */

.menu {

overflow: hidden; /* li öğelerine uygulanan float:left ile akışı bozulan div bloğu tekrar akışa çekiliyor. */

background-color: #333;

}

.menu ul{

/* ul öğesinin doğal iç ve dış boşlukları kaldırılıyor. */

margin: 0px;

padding: 0px;

}

.menu li{

list-style-type: none; /* li öğesinin standart stil görünümü kaldırılıyor.

float: left; /* tüm li öğeleri sola hizalanarak yan yana getiriliyor.

}

/* Menü Linkleri */

.menu a {

display: block; /* Satır içi olan a öğesi blok tipi gibi davranması isteniyor. */

color: #f2f2f2;

text-align: center;

padding: 14px 16px; /* a öğesi blok durumunda ancak padding uygulanabiliyor.*/

text-decoration: none; /* a öğesinin standart stil görünümü (alt öizgisi) kaldırılıyor. */

}

/* Mouse üzerinde iken link değişimi */

.menu a:hover {

background-color: #ddd;

color: black;

}

Not : CSS bildirimlerinde yer alan açıklamaları dikkatle okuyunuz.

İkinci testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

5. Adım : İçerik

Ana içerik, sitenizin en büyük ve en önemli parçasıdır. Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerin biridir.

1 sütun (genellikle mobil tarayıcılarda kullanılır)
2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
3 sütunlu düzen (yalnızca masa üstlerinde kullanılır)

Sol ve sağ sütunların genişlikleri ortaktır. Böylece alanın büyük kısmı ana içerik (orta) için ayrılmıştır. Yan içerik (varsa) genellikle, alternatif navigasyon olarak veya ana içerikle ilgili bilgileri belirtmek için kullanılır. Genişlikleri istediğiniz gibi değiştirebilirsiniz, yalnızca toplamda % 100‘e kadar ekleme yapmanız gerektiğini unutmayın.

İlk olarak içerik kısımlarına (sol, orta, sag) örnek başlık (h1) ve paragraf (p) ekleyelim. HTML belgesinde “.icerik” bölümünü aşağıdaki gibi düzenleyiniz.

HTML


<div class="icerik">
    <div class="sol sutun">
        <h2>Sol Bölüm</h2>
        <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p>        
    </div>
    <div class="orta sutun">
        <h2>Orta İçerik</h2>
        <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.</p>
        <p>Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    </div>
    <div class="sag sutun">
        <h2>Sağ Bölüm</h2>
        <p>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.</p>
    </div>
</div>

<h2>Sol Bölüm</h2>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p>

</div>

<h2>Orta İçerik</h2>

<p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.</p>

<p>Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>

</div>

<h2>Sağ Bölüm</h2>

<p>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.</p>

</div>

CSS

Tüm sütunlar float:left; bildirimi ile sola hizalanırken, bozulan sayfa akışı icerik:after seçicisi ile tekrar akışına sokulmaktadır. :after sözde elementi icerik sınıfı olan öğenin hemen sonrasını ifade etmektedir. Her bir sütun genişliği mutlaka belirtilmelidir.


.sutun{
       float: left;
       padding: 10px;
}
.sol,.sag{
       width: 25%;
}
.orta{
       width: 50%;
}
.icerik:after {
       content: "";
       display: table;
       clear: both;
}

.sutun{

float: left;

padding: 10px;

}

.sol,.sag{

width: 25%;

}

.orta{

width: 50%;

}

.icerik:after {

content: "";

display: table;

clear: both;

}

Sütünlar için belirtilen genişliğin sayfa üzerinde tam olarak aynı değerde hesaplanabilmesi için box-sizing özelliğinden faydalanılmalıdır. Bu sebepten CSS kodlarınızın arasına tüm öğeler için uygulanmasını isteyeceğimiz aşağıdaki bildirimi ekleyin.


*{
     box-sizing: border-box;
}

box-sizing: border-box;

}

Üçüncü kez testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

6.Adım : Alt

Alt bilgi, sayfanızın altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir.

Öncelikli olarak HTML belgemize gidelim ve “.alt” bölüm için küçük bir paragraf yerleştirelim.

HTML


<div class="alt">
     <p>Bu site yazilimbilisim.net tarafından tasarlanmıştır.</p>
</div>

<p>Bu site yazilimbilisim.net tarafından tasarlanmıştır.</p>

</div>

CSS

Alt bilgi için gereken CSS bildirimlerini aşağıdaki gibi uygulayın.


.alt {
      background-color: black;
      color: white;
      padding: 10px;
      text-align: center;
}

.alt {

background-color: black;

color: white;

padding: 10px;

text-align: center;

}

Şimdi web sayfa tasarımını dördüncü ve son kez test edelim,

Tüm tasarım tamamlanmış durumda. Aşağıda web sayfasının tüm kodlarını bir arada bulabilirsiniz.

HTML


<!DOCTYPE html>
<html>
<head>
   <title>CSS Sayfa Düzeni</title>
   <link href="stil.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div class="sayfa">
     <div class="baslik">
        <h1>Başlık</h1>
     </div>
     <div class="menu">
        <ul>
           <li><a href="#">Link1</a></li>
           <li><a href="#">Link2</a></li>
           <li><a href="#">Link3</a></li>
           <li><a href="#">Link4</a></li>
         </ul>  
     
     </div>
     <div class="icerik">
        <div class="sol sutun">
            <h2>Sol Bölüm</h2>
            <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p>        
        </div>
        <div class="orta sutun">
            <h2>Orta İçerik</h2>
            <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.</p>
            <p>Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
        </div>
        <div class="sag sutun">
            <h2>Sağ Bölüm</h2>
            <p>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.</p>
        </div>
     </div>
       <div class="alt"><p>Bu site yazilimbilisim.net tarafından tasarlanmıştır.</p></div>  
  </div> 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1>Başlık</h1>

</div>

<ul>

</ul>

</div>

<h2>Sol Bölüm</h2>

</div>

<h2>Orta İçerik</h2>

</div>

<h2>Sağ Bölüm</h2>

<p>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.</p>

</div>

<div class="alt"><p>Bu site yazilimbilisim.net tarafından tasarlanmıştır.</p></div>

</div>

</body>

</html>

CSS (stil.css)


body{
     margin: 0px;
     padding: 0px;
     background-color: #BBBBBB;
}
*{
     box-sizing: border-box;
}
.sayfa{
     width: 960px;
     margin: 0 auto;
     background-color: white;
}
.baslik{
     background-color: #89196B;
     color: white;
     padding: 20px;
}
/* Menu Kutusu */
.menu {
     overflow: hidden;
     background-color: #333;
}
.menu ul{
     margin: 0px;
     padding: 0px;
}
.menu li{
     list-style-type: none;
     float: left;
}
/* Menü Linkleri */
.menu a {            
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
/* Mouse üzerinde iken link değişimi */
.menu a:hover {
     background-color: #ddd;
     color: black;
}
.sutun{
     float: left;
     padding: 10px;
}
.sol,.sag{
     width: 25%;
}
.orta{
     width: 50%;
}
.icerik:after {
     content: "";
     display: table;
     clear: both;
}
.alt {
     background-color: black;
     color: white;
     padding: 10px;
     text-align: center;
}

body{

margin: 0px;

padding: 0px;

background-color: #BBBBBB;

}

box-sizing: border-box;

}

.sayfa{

width: 960px;

margin: 0 auto;

background-color: white;

}

.baslik{

background-color: #89196B;

color: white;

padding: 20px;

}

/* Menu Kutusu */

.menu {

overflow: hidden;

background-color: #333;

}

.menu ul{

margin: 0px;

padding: 0px;

}

.menu li{

list-style-type: none;

float: left;

}

/* Menü Linkleri */

.menu a {

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* Mouse üzerinde iken link değişimi */

.menu a:hover {

background-color: #ddd;

color: black;

}

.sutun{

float: left;

padding: 10px;

}

.sol,.sag{

width: 25%;

}

.orta{

width: 50%;

}

.icerik:after {

content: "";

display: table;

clear: both;

}

.alt {

background-color: black;

color: white;

padding: 10px;

text-align: center;

}

İlgili

Yorum

ismail dedi ki:

Şubat 12, 2020, 2:27 pm

Süpersiniz. O kadar iyi anlatmışsınız ki, kafamda “0” soru işareti.
/*height: 1000px; * Etkiyi görmek için test edebilirsiniz.*/ bu ufak detayı vermeyi nasıl da akıl etmişsiniz.

Cevapla
birdilbirinsan dedi ki:

Aralık 27, 2019, 7:17 pm

Harikasınız…uzun zamandır bunu arıyordum. Eklentilerden sıkıldım. Çok teşekkür ederim paylaşımlarınız için.

Cevapla
- birdilbirinsan dedi ki:
  
  Aralık 27, 2019, 9:56 pm
  
  Bi de bu 3 lü sütunun cep telefonunda Alt alta inmesi için ne yazmam lazım..css kod varmı. Responsive için
  
  Cevapla
  - admin dedi ki:
    
    Ocak 3, 2020, 11:08 pm
    
    bootstrap kullanmanı öneririz
    
    Cevapla

1. Adım : <body>

2. Adım : Sayfa

3.Adım : Başlık

4. Adım : Menü

5. Adım : İçerik

6.Adım : Alt

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X