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:
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:
<html>
<body>
<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:
<!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>
<body>
<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>
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:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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: 900px) {
.content, .sidebar{
width: 100%;
margin-top:10px;
}
ÇIKTI:
Mustafa Tanriverdi 23/10/2019
yönetici 23/10/2019
.sag{float:right}
Bu divlerin içine istediğin kadar div,liste tablo. menü oluşturabilirsin alt alta ekler.Umut açıkgöz 14/12/2019
yönetici 14/12/2019
samet karaca 13/08/2020
yönetici 14/08/2020
Muhammed Poyraz 18/09/2020
yönetici 19/09/2020
Muhammet 31/10/2020
yönetici 03/11/2020
Ömer Güler 21/01/2021
yönetici 25/01/2021
batuhan özdemir 06/02/2021
yönetici 08/02/2021
Buğra Selvi 05/04/2021
yönetici 06/04/2021
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESİM EKLEME
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME