CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma)
admin
Artık Css ile eğleneceğiniz, sinirleneceğiniz, olmuyor diye isyan edeceğiniz kısımlara başladık ama pratiğiniz arttıkça geriye dönüp baktığınızda, “ben bunda mı takıldım” diyeceğiniz dersler bundan sonra başlıyor. Html ve Css ile artık bir web sayfası iskeletini hazırlama zamanımız geldi. Bir web sayfası tasarımı yapmaya başlarken kafanızda nasıl bir site olmasını planlayın, her ne kadar da css ile kodlama yaparken “aaaa böyle daha güzel oldu” deyip, ilk kafanızdaki tasarımdan uzaklaşsanız da daha güzel işler çıkaracaksınız. Görünüş olarak birçok oynama yapabilirsiniz ancak bazı şeyleri kesinleştirmeniz lazım. Logo alanı, menü alanı, yazı alanı, gibi sitenizin belirli iskelet yapısını oluşturmanız gerekmektedir. Resimde Görünen sayfa iskeletini oluşturacağız ve bunun için birkaç html etiketi açıp onları Css ile düzenleyeceğiz lafı fazla uzatmadan sayfa iskeletini oluşturalım.
Sayfamızı ilk olarak sayfa boyutunu ayarlayarak işe başlamalıyız günümüzdeki bilgisayar monitörlerinin 1280p de olduğunu varsayarak sayfamızı 1024p genişliğinde olmasını düşündük ancak Html ve Css de kendinizi geliştirdikten sonra bu boyutlandırmayı pixel tipinde değil %biçiminde yapmanızı öneririm. Html5 ve Css3 derslerine de geçtiğimizde çeşitli boyutlardaki Bilgisayar monitörü, Cep Telefonu Ekranı, Tabletlere, hatta Tv Ekranlarına uyumlu şekilde Web tasarımları yapmaya başlayacağız.
Yukarıda belirttiğimiz gibi 1024px genişliğinde bir çalışma alanı oluşturmak için
#tumalan{
margin:0px auto;
width:1024px;
text-align:center;
}
#tumalan ile
margin:0px auto; Komutumuz ile tumalan divimizi kapsayan boşlukları sıfırlayıp ortaladık alanımızı.
width:1024px; Komutumuz ile çalışma alanımızın 1024 px genişliğinde olmasını istedik. Boyut olarak bir birim bildirmedik çünkü aşağıya doğru uzayacaktır alanımız.
text-align:center; Komutumuz ile bu alan içinde yazılan bütün yazıların ortalanmasını istedik.
Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz
Tüm alanımızı oluşturduk artık diğer tüm alanlarımızı bu alan içinde yerleştireceğiz bu alanın içine;
üst reklam ve logo alanı için
Menü alanı için
Orta Alanda bulunan İçerik Alanı ve Yan Menü alanı için
Alt Alanda bulunan kutucuk alanı için
Alanımız kafanızı karıştırmasın bunu div alanlarımızdaki kayma sorununu düzeltmek için kullandık. Div Kayma Sorunu Başlıklı Konumuzdan Detaylı Bilgiye Bakabilirsiniz.
Html ile alanlarımız açtık şimdi sıra alanlarımızı şekillendirmeye geldi. İlk olarak üst alandaki logo ve reklam alanlarımız için aşağıdaki css komutlarını tanımlayacağız.
#ustalan{
background:#ED2C2C;
margin-bottom:5px;
padding:10px;
}
.logo {
background:#D2D0D1;
padding:10px;
font-size:25px;
font-weight:bold;
width:200px;
height:90px;
float:left;
border-radius: 25px;
}
.reklam {
background:#D2D0D1;
padding:10px;
font-size:25px;
font-weight:bold;
width:728px;
height:90px;
float:right;
}
#ustalan{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:#ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.
margin-bottom:5px; komutumuzla altına yerleştireceğimiz menü alanı ile 5px boyutunda bir boşluk olmasını istedik.
padding:10px; Komutumuz ile İçine yerleştireceğimiz logo ve reklam alanlarının 10px genişliğinde bir boşlukla başlamasını istedik.
}
.logo { Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
padding:10px; İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik bunu fazla takılmayın genelde resim kullanıldığı için bunu kullanmayabilirsiniz.
font-size:25px; font-weight:bold; Komutları ile yazı boyunu ve Yazının kalın yazı olmasını istedik.
width:200px; Komutumuz ile genişliğinin 200px genişliğinde olmasını istedik.
height:90px; Komutumuz ile yüksekliğinin 90px yüksekliğinde olmasını istedik.
float:left; Komutumuz ile logo alanı için oluşturduğumuz alanı sol tarafa yasladık.
border-radius: 25px; Komutu ile oluşturduğumuz alanın kenarlarını ovalleştirdik.
}
.reklam { Alanımız Css alanımıza tanımlayarak şu komutları verdik:
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
padding:10px; İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik bunu fazla takılmayın genelde resim kullanıldığı için bunu kullanmayabilirsiniz.
font-size:25px; font-weight:bold; Komutları ile yazı boyunu ve Yazının kalın yazı olmasını istedik.
width:728px; Komutumuz ile genişliğinin 728px genişliğinde olmasını istedik.
height:90px; Komutumuz ile yüksekliğinin 90px yüksekliğinde olmasını istedik.
float:right; Komutumuz ile Reklam alanı için oluşturduğumuz alanı Sağ tarafa yasladık.
}
Üst Alanımızı bu şekilde oluşturmuş olduk. Menü alanını detaylı yapmasak da alanımızı oluşturmak için css komutlarımızı şu şekilde hazırladık.
#menu{
background:#D2D0D1;
margin:5px 0px 5px 0px;
padding:10px;
height:30px;
}
#menu{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
margin:5px 0px 5px 0px; Komutumuz ile Üstten 5px Sağdan 0px Aşağıdan 5px Soldan 0px Boşluklar oluşturmasını ve istedik bu sayede üstten üst alana altından da orta alanla birbirine yapışmasını engelledik.
padding:10px; komutumuz ile İçine yerleştireceğimiz yazının 10px aralığında bir boşlukla başlamasını istedik.
height:30px; Komutumuz ile yüksekliğinin 30px yüksekliğinde olmasını istedik.
}
Menü Alanımızı da oluşturduk ancak fazla detaya girmedik şimdi sıra orta alanda bulunan içerik ve yan menü alanımızı düzenlemeye geldi bunun için
#ortaalan{
background: #ED2C2C;
padding:10px;
margin:0px 0px 5px 0px;
}
.icerik{
background:#D2D0D1;
position: relative;
float:left;
width:750px;
min-height:300px;
padding:10px;
border-radius: 40px;
}
.yanmenu{
background:#D2D0D1;
position:relative;
float:right;
width:200px;
height:auto;
padding:10px;
}
.yanmenualani {
background:red;
margin-top:5px;
margin-bottom:5px;
width:auto;
height:95px;
}
#ortaalan{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background: #ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.
padding:10px; komutumuz ile İçine yerleştireceğimiz İçerik Alanı ve Yan Menü alanlarının 10px genişliğinde bir boşlukla başlamasını istedik.
margin:0px 0px 5px 0px; Komutumuz ile Üstten 0px Sağdan 0px Aşağıdan 5px Soldan 0px Boşluk alt menü ile yapışmasını engelledik bunun bir diğer yazım şeklide margin-bottom:5px; diyede yazabiliriz.
}
.icerik{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
position: relative; Komutumuz ile içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik daha kapsamlı anlatımını bir sonraki derste anlatacağız.
float:left; Komutumuz ile İçerik alanı için oluşturduğumuz alanı sol tarafa yasladık.
width:750px; Komutumuz ile genişliğinin 750px genişliğinde olmasını istedik.
min-height:300px; Komutumuz ile Minimum 300px yüksekliğinde bir yükseklik belirledik buna minimum vermemizin nedeni yüksekliği değişebilen bir alan olacağı için buna yükseklik değeri bildiremeyiz .Yükseklik değeri belirtirsek içine yazı yazdığımızı düşünürsek yazılarımız 300px yüksekliğinden sonra bu alandan taşıp aşağıya doğru indiğini görürsünüz. Bunu engellemek için yüksekliğini otomatik yapıp içerik olmadığında da 300px. lik bir boşluk olmasını istedik.
padding:10px; Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.
border-radius: 40px; Komutu ile oluşturduğumuz alanın kenarlarını ovalleştirdik.
}
.yanmenu{ Alanımız Css alanımıza tanımlayarak şu komutları verdik:
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
position:relative; Komutumuz ile içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik daha kapsamlı anlatımını bir sonraki derste anlatacağız.
float:right; Komutumuz ile Yan Menü alanı için oluşturduğumuz alanı Sağ tarafa yasladık.
width:200px; Komutumuz ile genişliğinin 200px genişliğinde olmasını istedik.
height:auto; Komutumuz ile Yüksekliğini otomatik olmasını istedik içine alan ekledikçe aşağıya doğru uzayacaktır.
padding:10px; Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.
}
.yanmenualani { Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:red; Komutumuz ile Arka plan rengimizin kırmızı olmasını istedik.
margin-top:5px; Komutumuz ile yukarıdan 5px boşlukla başlamasını istedik.
margin-bottom:5px; Komutumuz ile altından 5px boşlukla başlamasını istedik.
width:auto; Komutumuz ile genişliğini otomatik olmasını istedik .yanmenu alanı genişledikçe burasıda genişleyecektir.
height:95px; Komutumuz ile Yüksekliğinin 90px yüksekliğinde olmasını istedik.
}
İçerik alanı ve yan menü alanlarımızla beraber orta alanımızı da oluşturduk şimdi sıra alt kısımı oluşturmaya geldi.
#alt{
background: #ED2C2C;
padding:10px;
}
.alan{
background:#D2D0D1;
width:23%;
height:auto;
padding:5px;
margin:5px ;
position:relative;
float:left;
}
#alt{ Alanımız Css alanımıza tanımlayarak şu komutları verdik:
background: #ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.
padding:10px; Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.
}
.alan{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.
background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.
width:23%; Komutumuz ile boyutunu px değerinde değilde % biçiminde olmasını istedik yani 1024 px genişliğini 4 de bölsek yüzdesi %25 olur ancak aralarındaki boşlukları da eklediğimizde %23 gibi bir boyut belirlemek yeterli olmaktadır.
height:auto; Komutumuz ile Yüksekliğini otomatik olmasını istedik içine alan veya yazı ekledikçe aşağıya doğru uzayacaktır.
padding:5px; Komutumuz ile İçindeki alanların 5px lik bir boşlukla başlamasını istedik.
margin:5px ; Komutumuz ile İçine yazdığımız yazının 5px lik bir boşlukla başlamasını istedik.
position:relative; Komutumuz ile içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik, daha kapsamlı anlatımını ilerleyen derslerde anlatacağız.
float:left; Komutumuz ile oluşturduğumuz alanların sola doğru yaslayarak yan yana olmasını istedik.
}
Umarım Dersimiz Yararlı olmuştur. Kafanıza Takılan Kısımları Yorum Bölümünde Yazabilirsiniz.
