Css / Xhtml ile Websitesi Tasarlama ve Kodlama

ceyhanATL
19-03-2010, 15:59   |  #1  
OP Yeni Üye
Teşekkür Sayısı: 0
41 mesaj
Kayıt Tarihi:Kayıt: Şub 2008

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