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
devam edecek...