Perşembe , Ağustos 17 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma)

CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma)

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 <div id=”tumalan”> adında çalışma alanımızı kapsayacak bir div açıp bunun içine bundan sonraki alanlarımızı yerleştireceğiz.

#tumalan ile <div id=”tumalan”> div alanımızı Css alanımıza tanıttık.

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 <div id=”ustalan”> adında bir alan oluşturduk. İçerisine logo için <div class=”logo”> Reklam Alanımız İçinde <div class=”reklam”> diye çalışma alanlarını oluşturduk.

Menü  alanı için <div id=”menu”> adında bir alan oluşturduk. Menü içeriğini bu dersimizde yapmayacağız ileri ki derslerde menü yapımı ile ilgili derslerimiz olacaktır.

Orta Alanda bulunan İçerik Alanı ve Yan Menü alanı için <div id=”ortaalan”> adında bir alan oluşturduk. İçerik alanımız İçin <div class=”icerik”> Adında bir alan oluşturduk. Yan menü alanımız içinde <div class=”yanmenu”> adında menü alanlarımızı oluşturduk ve bunların içine 4 tane kutucuk yerleştirdik bunlar için <div class=”yanmenualani”> alanları oluşturduk.

Alt Alanda bulunan kutucuk alanı için <div id=”alt”> adında bir alan oluşturduk. İçindeki kutucuklar içinde <div class=”alan”> adında 4 tane alan tanımladık.

<div class=”temizle”></div> 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{ 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{ 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 <div id=”ortaalan”> adında açtığımız alanın içine üsteki logo ve reklam alanını yerleştirdiğimiz gibi alanlarımızı yerleştireceğiz.

 

#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{  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.

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın