TRGG CSS Tasarim Yapimi

CSS ile Şık Siteler Yaratma

Arkadaşlar bu makale Kaan Yılmaz arkadaşımızın isteğiyle hazırlanmıştır, umarım faydalı olur.Ayrıca bu makaleyi yazmamda etkili olan bir konuda, bedava-sitem.com resmi forumlarında CSS tasarım adı altında tablo yaparak insanların kandırılıyor olmasıdır :[ Şimdi başlayalım..

Site İskeletinin Hazırlanması

Öncelikle sitemize giriş yapıyoruz ve Tasarım Ayarlarına giriyoruz, daha sonra sitemizin temasını "CSS Deisgn" olarak ayarlıyoruz.Ayarladıktan sonra "Kaydet" butonuna basıyoruz.Daha sonra tasarımın üzerindeki kısma aşağıdaki kodları ekliyoruz.
<div id="sayfa">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">
Daha sonra aşağıdaki kodları tasarımın altındaki kodlar bölümüne ekliyoruz
</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</div>

Bu işlemleri yaptıktan sonra burada genel olarak işimiz bitti, artık işlerimizi CSS kodları aracılığıyla yapıcaz.Peki biz şimdi bu kodlarla ne yaptık? "Sayfa" adında bir div oluşturduk, ve bu div içinde header (başlık), menu(menü), content(içerik), sidebar(yan çubuk), footer(alt bölüm) adlarında divler oluşturduk, Peki Div Nedir?Arkadaşlar div'ler bizim HTML içinde isim verip, daha sonra CSS üzerinde onlara özellik verebileceğimiz kod parçalarıdır.Şimdi div'inde ne olduğunu öğrendiğimize göre CSS ile sitemizi tasarlamaya başlayabiliriz.Menüden "Tasarım Ayarları" seçeneğini seçip, "CSS Kodu" bölümüne aşağıdaki kodları girelim;
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

Arkadaşlar, bu kod HackerFriend'den alıntıdır.Bu kod ile ne yaptık? TR.GG'nin default olarak bizim kontrolümüz dışında siteye eklediği menü linklerini ve site başlığı yazısını "display: none;" yaptık, yani görünmez kıldık, buradaki "display" görünürlük anlamındadır.Burdan birkez daha kod sahibimize teşekkür ediyorum ve anlatmaya devam ediyorum,CSS kodlarımıza aşağıdaki kodları ekliyoruz;
body{
background: black;
}

Biz yukarıda ne yaptık?Kodu css kodlarınıza ekleyip sayfayı yenilediğinizde görüceksiniz gerçi ama ben yinede anlatayım; "body" demek sayfa demektir.Buraya ekleyeceğiniz özellikler aksi belirtilmediği sürece tüm sayfayı etkiler."background: black;" satırı ise arkaplan rengimizi belirler, biz burda black yazdık, black ingilizce siyah anlamına gelir.Yani kodu css kodlarınıza yapıştırdığınızda sitenizin arkaplanı siyah olacaktır.Daha sonra kodda aşağıdaki gibi bir değişiklik yapalım;
body{
background: black;
font-family: verdana;
}

Peki burda ne yaptık? Eklediğimiz "font-family" elemanı ile yazı tipimizi belirledik, ben "verdana" olarak belirledim siz zevkinize göre değiştirebilirsiniz.Bunuda yaptıktan sonra css kodlarımıza aşağıdaki kodu ekliyoruz;
#sayfa{
width:800px;
}

Bu kodla ne yaptık? Bu kodla, "sayfa" adı ile tasarım üzerindeki yazı kısmına eklediğimiz div'imize "800" pixel genişlik değeri verdik, "width" CSS'de genişlik demektir, "px" ise pixel'in kısaltılmasıdır.Pixel nedir diye çok fazla derine girmeyeceğim fazla kafa karıştırmaya gerek yok.Sayfamıza 800px genişlik değeri verdikten sonra "width:800px;" satırının altına aşağıdaki kodu girelim;
background:#333333;

Peki şimdi ne yaptık? Bu kodla tıpkı "body" elemanımızda yaptığımız gibi arkaplan rengi verdik, ama bu sefer tüm sayfaya değil sadece "sayfa" olarak isimlendirdiğimiz ve 800px genişlik verdiğimiz div'ize verdik.
Şimdi HTML kodlarımıza dönelim ve, Tasarımın üstündeki yazı kısmının en üstüne;
<center>
Tasarımın altındaki yazı kısmının en altına;
</center>
Kodlarını ekleyelim,Peki biz bu kodlarla ne yaptık?Kodları ekleyip sayfayı yenilediğinizde anlamış olacaksınız ki; biz bu kodlarla sayfa içeriğimizi ortaladık.Ortaladık ortalamasına ama; sayfa olarak adlandırdığımız div'imizle beraber, yazılarımız da ortalandı,Bu durumdan kurtulmak için CSS içinde #sayfa div'imize aşağıdaki kod satırını ekleyelim;
text-align: left;

Biz bu kodla ne yaptık?Bu kodla "sayfa" olarak tanımladığımız div'imizdeki yazıları sol tarafa dayadık, burdaki sol "left"den gelir, "right" yazarsak sağa, "center" yazarsak ortalı olacaktır.
Arkadaşlar sitemizin pozisyonunu vs. ayarladık, şimdi geldi şemamızı oluşturmaya, CSS kodlarımızın içine giriyoruz ve aşağıdaki kodları ekliyoruz;
#header{
width: 800px;
height: 150px;
background: orange;
}

Peki bu kod ne işe yaradı?Bu kodla "header" olarak tanımladığımız başlık div'imize "width= 800px;" yani 800 pixel genişlik verdik, "height: 150px;" yani 150 pixel yükseklik verdik, height yükseklik demektir, "sayfa" div'imizde yükseklik tanımlamamızın sebebi ise; sayfa boyutunun eklenen içeriğe göre değişecek olmasıdır."background: orange;" ile ise bu div'imizn arkaplan rengini turuncu olarak ayarladık, "orange" ingilizce bir kelimedir ve karşılığı turuncudur.Kodları ekleyip sayfayı yenilediğinizde eklediğimiz özelliklerin birebir olarak çıktığını görebilirsiniz.Hemen CSS kodlarımıza giriyoruz ve aşağıdaki kodları ekliyoruz;
#menu{
width: 800px;
height: 30px;
background: gray;
}

Bu kodla ne yaptık? Bu kodla; "menu" olarak tanımladığımız div'e 800 pixel genişlik, 30 pixel yükseklik verdik ve arkaplan rengini "gray" yani gri yaptık,Sayfamızı yeniliyoruz ve yaptığımız değişikliklere bir göz atıyoruz.Daha sonra hemen CSS kodlarımıza aşağıdaki kodları ekliyoruz;
#content{
width: 600px;
background: orange;
}

Bu kodla; "content" olarak tanımladığımız içerik bölümümüze, 600pixel genişlik ve arkplan rengi olarak turuncu verdik, burda genişliği 600px yapmamızın sebebi ise; daha sonradan yan çubuk eklediğimizde onu 200px tanımlayarak 600+200 = 800 yani sitenin genişliğine tam oturmasını sağlamaktır.Bu koduda ekledikten sonra sayfamızı yenileyelim ve eklediğimiz kodlarla ne yaptığımıza bir göz atalım, daha sonra CSS kodlarımıza girelim ve aşağıdaki kodlarımızı ekleyelim;
#sidebar{
width: 200px;
background: lightblue;
}

Arkadaşlar bu kodla; "sidebar" olarak tanımladığımız yan çubuğumuza "200px" genişlik verdik, arkplan rengi olarak "lightblue" yani açık mavi verdik,yükseklik vermememizin sebebi ise; yüksekliğin içeriğe göre değişecek olmasıdır.Gördüğünüz gibi yan buçuğumuz şuanda "content" yani içerik bölümümüzün altında duruyor.Bunu düzeltmek için CSS içindeki #content kodlarımıza aşağıdaki kodu ekleyelim;
float:right;

Biz bu kodla content olarak tanımladığımız içerik bölümümüzü sağ tarafa dayadık,float ile istediğiniz bir cismin konumunu ayarlayabilirsiniz. "left" sol , "right" sağ'dır.Hemen sayfamızı yeniliyoruz ve bakıyoruz ki, şuanda yan çubuk olması gereken yerde.Hemen CSS kodlarımıza dönüyoruz ve aşağıdaki kodlarımızı ekliyoruz.
#footer{
width: 800px;
height: 30px;
background: red;
}

Bu kodla ne yaptık? anladığınız üzre; "footer" olarak tanımladığımız sitemizin alt kısmına, 800px'lik genişlik, 30px'lik yükseklik ve arkaplan rengi olarak "red" yani kırmızı verdik, renkler niye bu kadar saçma diye sorasanız, ben bölümler rahatça ayırt edilebilsin ve kolay anlaşılsın diye mümkün olduğunca zıt renkler seçtim, siz daha uyumlu renkler kullanabiliriz.Sitemizin şeması burda sona eriyor, şimdi extra makyaj işlemlerimizle sitemizi güzelleştirelim :]

Extra Makyaj İşlemlerimizle Bu Ölüyü Canlandıralım :]

Arkadaşlar, güzelleştirme işlemlerimize ilk olarak yazı girintilerini ayarlamakla başlayalım; aşağıdaki kodu CSS'deki #header kodlarımızdaki "backgroun: orange;" satırımızın altına ekleyelim;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;

Biz bu kodla ne yaptık?Arkadaşlar "padding" bir div'in içeriden bırakacağı boşluk demektir.Biz bu kodla header olarak tanımladığımız başlık bölümümüze bir yazı eklediğimizde "left,right,top,bottom" yani; "sol,sağ,üst,alt" kısımlarından 10'ar pixel boşluk bıraktık, bunu yapmanın daha kısa yolları var fakat, hem kafanızın karışmaması için hemde farklı tarayıcılarda yorum ayrılığı olmaması için biz böyle yaptık.Sayfayı yenilediğinizde göreceksiniz ki;header kısmımızda 20px'lik bir çıkıntı oluştu.Bunun sebebi eklediğimiz bu koddur, padding'de eklediğiniz pixel kadar, Div'in toplam boyundan düşmeniz gerekecektir.Biz sağdan ve soldan 10'ar px aldık, bunun için yatayda, yani: width: değerimizden 20px'düşeceğiz.Yine yukarıdan ve aşağıdan 10'ar px aldığımız için; yükseklik değerimizden 20'px düşeceğiz.Bu adımları doğru izlediyseniz son #header kodumuz aşağıdaki gibi olacaktır; [tabi boyutları bendeki gibi yaptıysanız]
#header{
width: 780px;
height: 130px;
background: orange;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

Bu yaptığımız işlemi sayfa div'imiz hariç tüm div'lerimizde uyguluyoruz. (header, menu, content, sidebar, footer). "Content" ve "Sidebar" bölümümüzde yükseklik tanımlamamıştık, bu yüzden orda yükseklik ile ilgili bir eksiltme yapmak gerekli olmayacaktır, bunlardan sadece genişlikten 20px alıcaz.
Bu işlemleri header, menu, content, sidebar ve footer divlerimize uyguladıktan sonra artık sitenin sonlarına yaklaşıyoruz demektir.Şimdi bize gerekli olan şey;
color: #333333;

Bu kodu CSS kodumuzda body bölümünde "font-family: verdana;" satırımızın altına ekleyelim; "color" yazı rengimizi gelirler.Renk kodları "#" ile başlar ve gerisinde gelen sayılarda rengi belirler "#333333" siyaha yakın bir renktir.Siz renginizi ister ingilizce karşılığı ile yazabilir, isterseniz renk kodlarını kullanabilirsiniz.Kodları nerden bulucam ben diyorsanız Google'da ufak bir araştırma yaparak bulabilirsiniz. Bu kodumuzuda ekledik ve sitemizdeki yazılar artık "#333333" renginde oldu.Şimdi aşağıdaki kodları CSS kodumuzun en altına ekleyelim;
/* LINK EFEKTLERI */
a{
color: #333333;
text-decoration: none;
font-weight: bold;
}

a:hover{
color: red;
text-decoration: none;
font-weight: bold;
}

Şimdi bu kodları bir inceleyelim; "/* LINK EFEKTLERI */" satırı dikkatinizi çekmiştir.CSS'de "/*" ve "*/" arasına konulan yazılar kod olarak işlemez, açıklama görevi görür, ve benden size tavsiye çalışırsan her zaman bu kodları kullanın kafanızın karışmasını engeller.
a{
color: #333333;
text-decoration: none;
font-weight: bold;
}

Bu kodda ise; "a" CSS'de link demektir, yani a'ya vereceğiniz özellikler sitenizdeki linkleri etkileyektir.Gördüğünüz üzere a için; #333333 rengi verdik, "text-decoration: none;" ise yazıdaki extra bileşenleri belirlir [altı çizili, üstü çizili vb.]. Biz burda "none" yaptık, yani herhangi birşey yok normal yazı :]."font-weight" ise yazımızın kalınlığını belirler."bold" ise kalın demektir.Yani sitemizdeki linkler kalın olacak.Eğer biz buraya "normal" yazsaydık, normal olurdu :]
a:hover{
color: red;
text-decoration: none;
font-weight: bold;
}
a:hover ise linkimizin üzerine fare ile geldiğimizde hangi özellikleri göstereceğini belirtir.Renk olarak "red" yani kırmızı, verik diğer özellikleri "a" ile aynı zaten :].Şimdi sayfamıza bir tane link ekleyin ve kodumuzu test edin.Büyük ihtimal bir hata yoktur çünkü bende yok :].
Devam ediyoruz.Şimdide footer bölümüne bir telif hakkı yazısı yazalım ve bunu sağ tarafa dayıyalım.Aşadağıki kodları inceleyiniz;
text-align: right;

Bu kodu CSS'deki #footer bölümünde "padding-bottom: 10px;" satırının altına ekliyoruz.Peki bu kod ne işe yaradı? Bu kodla footer olarak tanımladığımız sitemizin alt bölümündeki yazılarımı sağ tarafa dayalı hale getirdik.Şimdi footer bölümüze, telif haklarımızı belirten bir yazı yazalım; Bunu yapmak için Tasarımın Altındaki yazı kısmına eklediğimiz;
<div id="footer">
ve
</div>
kodları arasındaki bölümü değiştirmeniz yeterlidir ne isterseniz onu yazın.
Şimdide, Yan çubuk için basit CSS menüler hazırlayalım. Bunun için CSS'de Dikey Menüler Hazırlama adlı makalemi okuyabilirsiniz.Yancubuğumuza menümüzüde yaptıysak artık geriye pekte birşey kalmadı.Üst'teki menü bölümü için ise; yukarıda gösterdiğim gibi linklerinizi biçimlendirmeniz yetelidir.Yaptığınız bir özelliliğin istediğiniz bir div'de geçerli olması için aşağıdaki sekilde yapmalısınız;
#menu a{
kodlarınız
}

Burada yaptığımız iş ise; sadece menu olarak tanımladığımız div üzerinde geçerli olmak üzere a'ya yani linklere özellik verdik, kodlarınız yazdığım bölüme siz istediğinizi yazın, renk vs..
Yazı boyutunu beğenmediyseniz;
font-size: x-small;

Kodu ile yazı boyutunuzu belirleyebilirsiniz.Bu kodu body bölümümüzdeki "color: #333333" satının altına yazarsak artık yazı boyutumuz "x-small" yani extra küçük olacaktır."xx-small","small","smaller","normal" gibi büyülük belirleyebilir veya iniglizceyle uğraşamam diyorsanız "20px","30px" gibi sayısal değerlerde verebilirsiniz.

Arkaplan Resimleri Belirleme

Sitemiz gayet güzel fakat hala yeterince görsel değil, bu sorunu gidermek için arkaplan resimleri ekleyebiliriz.Bunu yapmak için ilk önce bir arkaplan resmi bulmalıyız.Ben sitemin arkaplanı için;

Yukarıdaki resmi kullancam, siz Google'da wallpaper olarak görsel arama yaptığınız zaman arkaplan resimleri bulabilirsiniz.Bu resmi arkplana koymak için aşağıdaki kodu kullanıcaz;
background: url(http://fc04.deviantart.net/fs20/f/2007/284/c/a/Abstract_Brush_Wallpaper_by_Tamilia.jpg);
Buradaki "url" kısmı arkaplanımızın bulunduğu konumu bildirir.Siz resminize göre burdaki url'yi düzenleyebilirsiniz. Şimdi aynı kodun altına aşağıdaki kodu ekleyelim;
background-position: top; Bu kod ile de arkaplanımızın konumunu belirleyebiliriz."top" üst, "left" sol, "right" sağ, "bottom" alt olur.Biz burda "top" yaptık, yani; arkpalan resmimiz üst kısımda ortalanacaktır.Kodumuzu test edelim, süper çalışıyor.Fakat aşağı doğru kaydırdığımızda arkaplan tekrar tekrar geliyor.Bunu önlemek için aşağıdaki kodu kullanabiliriz.Bu kodu body bölümümzdeki "background" satırının altına ekleyin;
background-repeat: no-repeat;
background-attachment: fixed;

Peki biz bu kodla ne yaptık? "background-repeat" arkaplanın tekrarı demekdir.Bunu "no-repat" yaparsak tekrar etmez, "repeat" yaparsak tekrar eder,"x-repeat" yaparsak sadece yatay düzlemde tekrar eder, "y-repeat" yaparsak dikey düzlemde tekrar eder.Biz "no-repat" yaptığımız için arkaplan tekrar etmeyecek.Sayfayı aşağı kaydırdıkça arkaplanın sabit kalması ve sanki sayfanın arkaplan üzerinde kayıyormus efekti vermek için "background-attachment: fixed;" kodunu kullandık.Şimdi sayfamızı yenileyelim ve yeni görüntümüze bir göz atalım.
Arkaplan resmimizi ekledik, şimdide "header" bölümümüze bir başlık arkaplan resmi belirleyelim.Ben başlı kresmim için ; bu adresteki resmi kullanıcam siz istediğinizi kullanın.Baktımki başlık resmi boyutu benim sitemin genişliğniden biraz düşük, o yüzden ben sitemi biraz daraltıcam, bunu "width" değerleri ile oynayarak yapıcam.Yine arkaplan resmini uygularken yaptığımız taktiği header'dada yapıyoruz.İsterseniz bütüm divlere ayrı ayrı arkaplan resmi verebilirsiniz, fakat ben fazla kurcalamıcam tekniği öğrenin yeter.
En son CSS kodlarımız aşağıdaki gibi olacaktır;
h1#title{
display: none;
}

h2#title span {
display: none;}

div.header{
display: none;
}

li.nav_element{
list-style-type: none;
}

li.nav_element{
display: none;
}

body{
background: black;
font-family: verdana;
color: #333333;
font-size: small;
background: url(http://fc04.deviantart.net/fs20/f/2007/284/c/a/Abstract_Brush_Wallpaper_by_Tamilia.jpg); background-position: top;
background-repeat: no-repeat;
background-attachment: fixed;
}

#sayfa{
width:760px;
background:white;
text-align: left;
}

#header{
width: 740px;
height: 131px;
background: orange;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-image: url(resimler/header.jpg);
}

#menu{
width: 740px;
height: 10px;
background: orange;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#content{
width: 540px;
background: white;
float:right;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#sidebar{
width: 180px;
background: lightblue;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#footer{
width: 740px;
height: 10px;
background: yellow;
padding-left: 10px;
padding-right: 10px; padding-top: 10px;
padding-bottom: 10px;
text-align: right;
}

/* LINK EFEKTLERI */
a{
color: #333333;
text-decoration: none;
font-weight: bold;
}

a:hover{
color: red;
text-decoration: none;
font-weight: bold;
}

İşte bu kadar arkadaşlar yaptığınız ilk CSS tasarım hayırlı olsun, Böyle CSS mi olur demeyin.Zamanım olmadığı için fazla ayrıntılı anlatamadım ama yazının başındada söylediğim gibi, en azından tablo tasarım değil Alıntı yaparken lütfen isim belirtelim, emek hırsızlığı hiçde hoş birşey değildir. Benim bu makaleyi yazarken üstünde çalıştığım dosyayı buraya tıklayarak indirebilir ve inceleyebilirsiniz, tasarımın altındaki "Designed By Umut Coskun" yazısını kaldırmadığınız sürece kullanabilir ve üzeride değişiklik yapabilirsiniz.Umarım faydalı olmuştur, soru, sorun ve görüşleriniz için sayfadaki yorum kutusunu kullanabilirsiniz.Bir sonraki makalede görüşmek üzere :]