Dersin Adı: Resimsiz Css Tasarım Kodlama.
Yapımcı: WwW.ZoLuCaN.tr.gg
Tarih: 15 Ağustos 2010
Merhabalar,
Şimdi size resimsiz olarak css tasarım yapmayı öğreteceğim.
1) İlk başta isteğe bağlı olarak Bedava-Sitem reklamlarını ortalayacağız. Bunun için aşağıdaki kodu " Css Kodu " bölümüne yapıştırıyoruz. (İsteğe Bağlı)
Kod: table {margin-left: auto;margin-right: auto;} :
Kaydedip sitemize bakıyoruz ve Bedava-Sitem reklamlarının ortalandığını görüyoruz.
2) Şimdi dersimize menü gizleme kodumuzla devam ediyoruz. Bu kod Css tasarımımızda menülerin gizlenmesini sağlayacaktır. Kodu " Css Kodu " bölümüne yapıştırıyoruz.
Kod: 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;}
Kaydedip sitemize bakıyoruz. Menülerimiz Gizlenmiştir.
3) Şimdi Sitemizin body (gövde) sini hazırlayalım. Bu katmana yazacağıımız her kod siteyi etkileyecektir. Bu katmanda Yazı tipinin biçimi, büyüklüğü, sitenin arkaplan rengi ve dahası bu katmanda yer alır.
Kod: body{
font-family: Verdana;
font-size: 12px;
background: #0CF;
}
Yukarıdaki kodda anlatmak istediğimiz," Font-family: Verdana " yazı tipinin verdana olmasıdır. "Font Size" punto büyüklüğünün 12px olmasını istedik ve background yani arkaplan renginin de #0CF olmasını istediğimizdir. Eğer arkaplana resim eklemek istiyorsak aşağıdaki kodu kullanacaksınız.
Kod: body{
font-family: Verdana;
font-size: 12px;
background: url(ARKAPLAN URL);
}
4) Şimdi de bir katman oluşturup sitemizin Genişliğini ve ortalanmasını ayarlayalım.
Css de katmanlar # ile başlar. Katman özellikleri ise { ile başlar } ile biter. Her katmanın özellikleri arasına ; (Noktalı Virgül) konur. Bunları aşağıdaki kodla daha iyi anlayabilirsiniz.
Aşağıda belirttiğimiz margin-left: auto ve margin-left: auto kodları ile sitemizi her tarayıcı için ortalıyoruz.
Width: 950px kodunda ise belirtmek istediğimiz tasarımın genişliğinin 950px olmasıdır.
Her özelliğin sonuna ; koyduğumuzu fark etmişsnizdir.
Kod: #tasarim{
margin-left: auto;
margin-right: auto;
width: 950px;
}
TASARIM ÜSTÜ;
TASARIM ALTI;
5) Şimdi Sitemizin üst kısmını oluşturalım. Kodu " Css Kodu " bölümüne yapıştırıoruz. Ama dikkat edelim diğer yazdığımız kodları silmiyoruz bir satır aşağıya geçip kodu yapıştırıyoruz.
Kod: #ust{
height: 150px;
border: 5px dashed #09F;
}
Burada neden Width (genişlik) belirtmedik. Çünkü onu tasarim katmanında belirttirk biz aksini belirtmedikçe tüm tasarımın genişliği 950 px olur. Height yi kafanıza göre değiştirebilir ya da böyle bırakabilirsiniz.
5px ile kalınlığı belirttik dasded ile tablonun stilini belirttik daha fazla stil için burayı tıklayın. #09F ile de tablonun rengini belirttik. Kendi renginizi seçmek istiyorsanız aşağıdaki linke bakın;
http://www.w3schools.com/CSS/css_colornames.asp
TASARIM ÜSTÜ
Kod: <div id="tasarim">
<div id="ust">BURASI ÜST KISIM</div>
TASARIM ALTI
Kodları gerekli alanlara yapıştırınız.
6) Şimdi de Menümüzü oluşturalım.
Kod: #menu{
height: 20px;
border: 5px dashed #09f;
margin-top: 10px;
}
Burada " ust " katmanıyla farklı olarak katman adı ve yükseklik değeri değişmiş. margin-top eklememizin sebebi Üst kısmla menü arası boşluk oluşmasını sağlamaktır.
TASARIM ÜSTÜ
Kod: <div id="tasarim">
<div id="ust">BURASI ÜST KISIM</div>
<div id="menu">BURASI MENÜMÜZ</div>
TASARIM ALTI
7) Sıra geldi içerik katmanına.
Kod: #icerik{
height: 100%;
border: 5px dashed #09f;
margin-top: 10px;
}
Yüksekliği 100% yapmamızın sebebi içerik bölümü yazımız uzadıkça aynı anda uzayacaktır. Eğer ki yüksekliği Mesela 100px olarak verseydik içerik kısmı aynı kalırdı ve yazı uzamaya devam ederdi. Yani ortalık Eli Altı olurdu. : )
TASARIM ÜSTÜ
Kod: <div id="tasarim">
<div id="ust">BURASI ÜST KISIM</div>
<div id="menu">BURASI MENÜMÜZ</div>
<div id="icerik">
TASARIM ALTI
İçerik kısmının kapamasını tasarım altına yaptık. Çünkü yazdığımız yazılar vs. burada yer alacak. : )
8) Sonunda tasarımımız bitiyor. Şimdi Alt kısmımızı yapalım.
Kod: #alt{
height: 15px;
border: 5px dashed #09f;
margin-top: 10px;
}
TASARIM ÜSTÜ
Kod: <div id="tasarim">
<div id="ust">BURASI ÜST KISIM</div>
<div id="menu">BURASI MENÜMÜZ</div>
<div id="icerik">
TASARIM ALTI
Kod: </div>
<div id="alt">BURASI ALT KISIM</div>
</div>
Alt katmanın div ini neden tasarım altına yaptık. Çünkü İçeriğin altında yer alıyor.
Dersimiz Bitti :) İnşallah biraz birşeyler anlatabilmişimdir. :)
Tasarımın Son halini görmek için;
http://tr-cssworld.tr.gg/ZoLuCaN-Ders.htm |
Yani bu da paylaşım azmini azaltıor. "Zaten kimse bakmıyor." düşüncesiyle ben de dahil olmak üzere tüm yardımsever arkadaşlar paylaşımdan soğuyor gibime geliyor ?
