Öncelikle web sitesini kurmak için gerekli hazırlıkları yapmalısınız. İstediğiniz dizin yapısını oluşturun. Bu örnekte şöyle görünebilir:
vergiden sorumlu kişi
---resimler
---css
Bu tipik bir dizin yapısıdır. Ana düzeye HTML sayfalarını yerleştirirsiniz. CSS dosyaları css- dizinine yerleştirilirken, tüm resimler resimler- dizinine kaydedilir. Dolayısıyla resimler- dizinine, tasarımdan kestiğiniz tüm resimleri ekleyin.
Temel yapıyı oluşturmak
css- dizini içinde yeni bir CSS dosyası oluşturun. Bu dosyayı ardından HTML dosyanıza ekleyin. (Benim örneğimde HTML dosyasının adı index.html olacak). Bu dosya bundan sonra takip edecek olan derslerin odak noktası olacak.
İlk olarak index.html dosyasına zaten bildiğiniz HTML temel yapısını ekleyin.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vergi Danışmanınız</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Ayrıca hemen stil dosyasını da eklemeyi unutmayın. Şimdi başlayabiliriz.
Dış element div konteynırını oluşturmaktadır.
<div class="ana-konteynır"> </div>
Bu konteynırı CSS sözdizimiyle hemen biçimlendirebilirsiniz.
.ana-konteynır {
genişlik: 100%;
soldan: sallantı;
}
Ana konteynır yüzde 100 genişliğe sahip olacak şekilde tasarlanır ve sola sallanır. %100 olarak belirlenen genişliğin avantajı: Örneğin bir arka plan resmi ekleyebilirsiniz. Bu arka plan tüm ekran genişliğini kaplayacaktır.
Ana-konteynır içinde iki ek div elementi oluşturacağım.
<div class="ana-konteynır"> <div class="konteynır"> <div class="sayfa"> </div> </div> </div>
Bu elemanlar da biçimlendirilecektir. Asıl içerik alanı 1000 piksel genişliğinde olacaktır. Ayrıca margin: 0px otomatik; belirten, elemanın yatayda merkezlenmesini sağlar.
.konteynır {
genişlik: 1000px;
kenar: 0px otomatik;
}
Devam ederek sayfa elemanının biçimlendirilmesine geçelim.
.sayfa {
genişlik: 1000px;
soldan: sallantı;
dolgu: 40px 0px 0px 0px;
}
Bu eleman sayfanın asıl içerik alanıdır. Buraya tüm diğer elemanlar yerleştirilecektir. Bu eleman da 1000 piksel sabit genişliğe sahiptir. Dolgu belirten kısım iç boşlukları tanımlar. Üst iç boşluğu 40 piksel olarak, diğer kenarlar ise 0 piksel olarak belirlenir.
Şimdi, (çok) genel düzeyde bir düzen yapımız oldu.
Şimdi bu düzeni içerikle doldurmanın zamanı geldi. Sayfa ilk olarak üç satıra ayrılacaktır.
• Başlık
• İçerik
• Alt kısım
Bunun için üç ek div alanı tanımlanır.
<div class="üst"> </div> <div class="içerik"> </div> <div class="alt"> </div>
Bu üç alan da elbette CSS ile biçimlendirilir.
.üst {
arka-plan-renk: #f6f7f7;
genişlik: 980px;
soldan: sallantı;
dolgu: 0px 10px 10px 10px;
}
.içerik {
genişlik: 980px;
soldan: sallantı;
üst-dolgu: 8px;
}
.alt {
metin-hizalama: orta;
genişlik: 1000px;
yükseklik: 110px;
soldan: sallantı;
}
Şimdi, her bir alan daha fazla stil ile şekillendirilebilir.
İlk olarak, sayfanın başlık bölümüne odaklanalım. Bu bölüm yine birkaç elemandan oluşur:
• Logo/Başlık
• Üst menü
• Büyük resim
Bu üç elemanı üst içinde tanımlayın.
<div class="üst"> <div class="başlık"> <div class="üst-menu"> Üst menü </div> <div class="başlık-resmi"> </div> </div>
Bu, sayfanın başlık bölümünün temel yapısıdır. Bu da elbette CSS ile biçimlendirilecektir.
.başlık {
genişlik: 980px;
soldan: sallantı;
}
.başlık {
genişlik: 980px;
yükseklik: 87px;
soldan: sallantı;
}
.üst-menu {
arka-plan-resmi: url(../resimler/menue.jpg);
arka-plan-tekrar: yatay tekrar;
genişlik: 978px;
yükseklik: 37px;
soldan: sallantı;
}
.başlık-resmi {
arka-plan-resmi: url(../resimler/başlık.jpg);
arka-plan-tekrarsız tekrar:;
arka-plan-konum: soldan üst;
genişlik: 980px;
yükseklik: 213px;
soldan: sallantı;
}
Sözdizimi iki "özellik" içerir. İlk olarak topmenu sınıfının içeriğine bakın. Burada arka plan resmiyle ilgili iki bilgi dikkat çeker.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Kullanılan bir Piksel Grafik menue.jpg. Bu, üst menüde tanıdığınız renk geçişini temsil eder. background-repeat: repeat-x; ifadesi, resmin yatay olarak element tamamen doldurulana kadar tekrarlanmasını sağlar.
İçeriği Bölmek
Sonuç olarak içeriklerin gösterileceği sayfa bölümüne geçin. Bu, div Elemanı content içinde gerçekleşir. Bu bölüm farklı bileşenlere ayrılmıştır. İlk önce küçük bir teaser resmi ve bir karşılama mesajı var.
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Web sitemize hoş geldiniz</h1> <p>Burada bir karşılama metni yer alacak</p> </div> </div>
Bu bölge ayrıca ikiye bölünmüştür. Solda resim, sağda karşılama mesajı görüntülenir. Burada önemli olan content-image sınıfıdır.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Bu sınıf resmi ve karşılama mesajını kapsar. content-image içinde yine iki başka bölüm bulunmaktadır.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Hoş geldiniz</div>
Bu iki parçadan sadece bir büyük resim veya başka bir şey göstermek isterseniz, bu iki bölümü bir div elemanında birleştirirsiniz. İki Bileşenli Varyant için CSS Sözdizimi ise şöyle olur:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Sonuç şu şekilde tarayıcıda görünmelidir:
Diğer üç öğeyle devam edelim:
• bir sol metin kutusu,
• bir sağ metin kutusu,
• sağ menü.
Bu durumda HTML Sözdizimi şu şekildedir:
<div class="teaser"> <div class="left"> Sol taraftaki metin için Konteyner </div> <div class="right"> Sağ taraftaki metin için Konteyner </div> </div> </div> <div class="content-right"> Sağ menü </div> </div>
Ve elbette CSS-Sözdizimi de şöyle:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Bu Kılavuzun sonunda web sitemizin temel yapısı yer almaktadır.
Şimdi bu temel yapı tabii ki uygun içeriklerle doldurulmalıdır. Bu işlem bir sonraki Kılavuzda gerçekleşecektir.
