Forum'da ara:
Ara


Yazar Mesaj
Mesaj15.08.2010, 09:19 (UTC)    
Mesaj konusu: Resimsiz Css Tasarım Yapma | Bs'de İlk

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Ü;
Kod:
<div id="tasarim">


TASARIM ALTI;
Kod:
</div>


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
Kod:
</div>


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
Kod:
</div>



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
Kod:
</div>
</div>


İç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
Mesaj15.08.2010, 09:22 (UTC)    
Mesaj konusu:

abi bu beim aradığım dersti çok saolasın ama anlmadığım bişe var bunların bannerını copyright vs nasıl eklicez
Mesaj15.08.2010, 09:24 (UTC)    
Mesaj konusu:

Tasarımın Bitmiş Haldeki Kodları;

Tasarım Üstü;
Kod:
<div id="tasarim">
<div id="ust">BURASI ÜST KISIM</div>
<div id="menu">BURASI MENÜMÜZ</div>
<div id="icerik">


Tasarım Altı;
Kod:
</div>
<div id="alt">BURASI ALT KISIM</div>
</div>


Css Kod;

Kod:
table {margin-left: auto;margin-right: auto;} :

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{
    font-family: Verdana;
    font-size: 12px;
    background: #0CF;
}

#tasarim{
    margin-left: auto;
    margin-right: auto;
    width: 950px;
}

#ust{
    height: 150px;
    border: 5px dashed #09F;
}

#menu{
    height: 20px;
    border: 5px dashed #09f;
    margin-top: 10px;
}

#icerik{
    height: 100%;
    border: 5px dashed #09f;
    margin-top: 10px;
}

#alt{
    height: 15px;
    border: 5px dashed #09f;
    margin-top: 10px;
}



BİR TEŞEKKÜR ZOR OLMASA GEREK Smile

Mesaj15.08.2010, 09:25 (UTC)    
Mesaj konusu:

arkasokaklar-kanald yazmış:
abi bu beim aradığım dersti çok saolasın ama anlmadığım bişe var bunların bannerını copyright vs nasıl eklicez



Bu başlıkta da belirttiğim gibi resimsiz. Ama resimli anlatıma şimdi başladım Wink
Mesaj15.08.2010, 12:36 (UTC)    
Mesaj konusu:

güzel paylaşım tebrikler
______________


Mesaj15.08.2010, 16:18 (UTC)    
Mesaj konusu:

ulascity yazmış:
güzel paylaşım tebrikler


Birşey değill. Smile Görevimiz. Very Happy
Mesaj20.08.2010, 05:54 (UTC)    
Mesaj konusu:

Up Up Up Mr. Green Mr. Green
Mesaj20.08.2010, 08:13 (UTC)    
Mesaj konusu:

Teşekkürler bedava-sitem için yararlı olur inşallah Wink
______________
Aşağıdaki yazı fontunun adı Angilo Tatto'dur. Gelen mesajlara istinaden yazdım Smile
Mesaj20.08.2010, 21:20 (UTC)    
Mesaj konusu:

ibrahmgun yazmış:
Teşekkürler bedava-sitem için yararlı olur inşallah Wink


İnşallah. Smile

Ama bilmeyenler öğrenmeye pek de istekli değil herhalde. Yani Bedava-Sitem'de ilk olmasına karşın ilgi bayağı az Sad 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 ?


Haklı mıyım ???
Mesaj24.08.2010, 18:44 (UTC)    
Mesaj konusu:

Güzel bembeyaz bir tasarımımız oldu Laughing
Mesaj24.08.2010, 20:44 (UTC)    
Mesaj konusu:

tumhepsiburada yazmış:
Güzel bembeyaz bir tasarımımız oldu Laughing




Nasıl Yani
Mesaj25.08.2010, 02:06 (UTC)    
Mesaj konusu:

css kodu yazılan yere verdiğin o kodların hepsi sığmıyor dostum Smile
o nu nasıl yapıcaz ö.m atarsan sevinirim çünkü unutucam emınım buraya bakmayı Smile
______________
Ne Kadar Tutabilirsin Gül Uğruna Dikeni ..
Mesaj25.09.2010, 10:40 (UTC)    
Mesaj konusu:

bu tasarimin linkleri yok
sadece menu diye yazi geciyor
baslik konuyu nereye yapistiriyoruz peki?
______________
Gerçek zengin, bilgisi çok olan insandır. (Hz. Ali (r.a))
Kâfir bile olsa, hiç kimsenin kalbini kırma! Kalb kırmak, Allahü teâlâyı incitmek demektir.(Ahmed Yesevî Rahmetullahi aleyh.)
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu