Css ile Site Yapmak

**ceyhanatl** · 19.03.2010 14:54

Merhaba arkadaşlar üstadlar. Bu aralar tekrardan css olayına girdim. Şimdi 0 dan bir web stesinin nasıl kodlandığını adım adım incelicez. Anlatım tamamen bana ait olacak. Konuyu bitirene kadar kimse yorum yazpmaz ise sevinirim. Sorularınızı ÖM olarak gönderin. Konuyu sevdiyseniz repleyin

Başlıyoruz.

Öncelikle yapacağımız temanın ben anahatlarını çıkardım üstte bir logo genişliği 100% olacak. Sonra hemen altında bir menümüz olacak. Aşağı tarafta 900px dolaylarında bir ortabölümümüz olacak bu orta bölümde solda alt menü bağlantılar vss eklencek. Sağ tarafta ise içeriklerimizin olacağı bir bölüm ve en alttada altık dediğimiz geliştirebileceğimiz başka bir bölüm var...

Şimdi temamızı photoshop ile basit bir şekilde tasarladım. B tasarımları gün geçtikçe geliştirebileceğiz.

Büyük hali için aşağıya tıklayın

Burada bize gereken images klasörü stil.css ve index.html dosyamız...

index.html dosyamızın default kodları:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-9" />
<title>Css Site Yapıyoruz</title>
<link href= "stil.css" rel="stylesheet" type="text/css" />
</head>
<bOdy>

</bOdy>
</html>

Kırmızı ile gösterdiğim yer css dosyamızın yolunu göstermek için kukllandığımız bir kod. Şimdi Arayüzümüzün anahatlarını belirlemek için photoshop ile keselim...

http://site.mynet.com/kirliadam21/ buradan tasarımı takip edebilirsiniz.

logomuz:
http://site.mynet.com/kirliadam21/images/ustlogo.jpg

index.html

stil.css

Öncelikle logomuzu yerleştirdik:

margin ve paddng logonun üst kısma tam oalrak sıfırlanması için kullandık. kutu-modeli-margin-ozellikleri css-kutu-modeli-padding-ozellikleri

css dosyamızda # id anlamındadır. #ustlogo şeklinde bir id tanımladık ve index dosyamızda bunu <div id="ustlogo"></div> şeklinde çağırdık.

Menü özelliklerini kodlamadığımız için resimde görüldüğü gibi al alta ve şeilsiz duruyor biraz şekil verelim.

İndex dosyamızda menüyü iki katman üzerinde yapacm. Yan yana menüler hakkında ve listeleme hakkında buraya bakın

diğer bölümde menümüze şekil verecez... izlemeye devam edin...

tasarımın son hali:
http://site.mynet.com/kirliadam21/

menü 100%arkaplan resmi:

http://site.mynet.com/kirliadam21/images/menubgbg.jpg

menü normal arkaplan

http://site.mynet.com/kirliadam21/images/menubg.jpg

şimdi menü 100%genişlik için menübgbg.jpg dosyasını kullandım ve css de:

#menualani{
width:100%;
height: 47px;
background: #000000 url(images/menubgbg.jpg) repeat-x;

}

yukarıdaki gibi kodlandı... orada height kısmı menü resminin uzunluğunda olmasına dikkat. ve arkaplan dediğim gibi menubgbg.jpg

ve daha sonra normal menü alanım için kodlama

#menu{
width: 930px;
height: 47px;
margin:auto;
padding: 0 0 0 27px;
color: #03a0a6;
background: url(images/menubg.jpg) no-repeat;
}

yukarıdaki gibi genişlik 930px yükseklik.. margin:auto menünün ortalanması iin ve padding kısmını ise üst taraftaki logoya uyum için kullandım.

ve menü yapım hakkında yukarıda bir link vermiştim. burada menüler <ul><li><a></a></li></ul> bu kod bloguna göredir. önce ul kodlaması sonra li sonra a sonrada a:hover a:hover fare üzerine geldiğiğinde oalcak olaydır. ul kısmında menü listesinin yerleşimini belirleriz. li kısmında inline ile menüyü yatay döşeriz. a da ise yazı özelliklerini belirleriz.

#menu ul{
float:left;
list-style:none;
margin:0;
padding:15px 0 0;
width:930px;
}
#menu ul li{
display:inline;
}
#menu ul li a{
border-right:1px solid #333;
font-family:"verdana", arial, MS San Serif;
color:#99930D;
float:left;
font-size:12px;
font-weight:bold;
margin-right:5px;
padding:2px 0;
text-align:center;
text-decoration:none;
width:110px;
}
#menu li a:hover, #menu li .aktif{
color: #FFB900;
}

burada + olarak .aktif kullandım bu bir sınıftır. (class) classlar heryerde kullanılabilir. id sadece belirlediğimiz yerde kullanırken class lar her element ile istediğimiz yerde kullanırız.

bu ders ile ilgili bazı linkler:
Arkaplan özellikleri background

kenarlik border ozellikleri
cssde-metin text-ozellikleri

Başlık: Css ile Site Yapmak

Başlık Araçları

Başlıkta Ara

Css ile Site Yapmak

Benzer Başlıklar

site yapmak

Site yapmak

nvu ıle site yapmak

FTP ile site yapmak

Bravenet.com'da Site Yapmak...

Kurs konusunda yardım

laptop alacağım dell iyi midir?

ingilizce kurs tavsiyesi

avea jet modem hk.

galaxy s2 servis hakkında

Sniper elite v2 yükleme sorunu

Bilgisayarında sorunu olanlar buraya,...

Ekran kartı sorunu

Sadece Taratmak İstiyorum..

avea jet modem hk