bs css tasarimi
B-S HTML-CSS Tasarımı
Bedava Sitem'de siteniz için seçtiğiniz HTML-CSS tasarımılarını sitenize çok güzel şekilde uyarlayabilirsiniz. HTML-CSS hem öğrenilmesi kolay bir işaretleme dilidir hemde uygulaması kolaydır. HTML-CSS bir kodlama dili değildir. Sadece bir işaretleme dilidir.
Aşağıdaki adımları takip ederek Bedava Sitem'den açtığınız web sitesi için uygun şablonu seçebilirsiniz.
1. www.bedava-sitem.com adresine gidin ve giriş yapın.
2. Açılan sayfada üstte yatay olarak uzanan başlıklarda '' Tasarım'' sekmesine tıklayın.
3. ''Temel Tasarımlar '' sekmesini açın. Karşınıza çıkan şablon görsellerinden '' CSS-Design '' şablonunu seçin ve kayıt edin. Böylece HTML-CSS kodlarımızı şablonumuz üzerinde uygulayabilir ve gerekli düzenlemeleri yapabiliriz.
4. '' Temel Tasarım '' sekmesinin altında yer alan '' Tasarım Ayarları '' sekmesini açın.
5. '' Tasarım Ayarları '' sekmesinde bulunan '' Gelişmiş Ayarları Göster '' butonuna tıklayarak gerekli düzenlemeleri yapacağımız alanı açın.
6. Karşımıza '' Tasarımın üzerindeki metin, Tasarım altındaki yazı, İçerik bölümünün altındaki bilgi , CSS Kodu '' olmak üzere 4 tane kutu çıkacak. '' İçerik bölümünün altındaki bilgi '' alanı bizi şimdilik ilgilendirmiyor.
Yani biz sitemizi 3 parçaya ayıracağız.
a. Tasarımın üzerindeki metin
b. Tasarım altındaki yazı
c. CSS Kodu
Kodlarımızı parçalamadan önce CSS Kodu alanına aşağıdaki kodları yapıştırmamız gerekiyor. Bunun nedeni ise
Bedava Sitem'in mevcut olarak gösterdiği sayfaları yani menüleri gizlememiz lazım.
Kod-1:
li.nav_element{display: none;}
Kod-2:
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;}
Şimdi bu 3 alanı HTML-CSS kodlarında parçalayalım.
Eğer Bedava Sitem'de '' CSS-Design '' tasarım kullanacaksanız bu kritikleri bilmeniz gerekmektedir.
1. İki tane kodlama alanı vardır. HTML (parçalayacağımız kodlardır) ve CSS'dir
HTML => Sayfanın istekeletini oluşturan görünmeyen kısımdır.
CSS => Sayfayı giydirdiğimiz kısımdır.
2. HTML kodlarını alt ve üst tasarım olmak üzere ikiye böleceğiz. Birinci böldüğümüz alanı '' Tasarım üzerindeki yazı '' alanına, ikinci böldüğümüz alanı ise '' Tasarım altındaki yazı '' alanına koyacağız.
3. CSS kodunu ise '' CSS Kodu '' alanına koyacağız.
Kısaca;
HTML kodu şu şekilde olur.
Kod:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Başlığı</title>
</head>
<body>
(İçerik Alanı Başlangıcı)
<div class''icerik''>
<p> Burada içerik olacak. </p>
</div>
(İçerik Alanı Bitişi)
</body>
</html>
Tasarım üzerindeki yazı alanına mavi ile gösterilmiş kodları koyacağız.
Kod:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Başlığı</title>
</head>
<body>
(İçerik Alanı Başlangıcı)
<div class''icerik''>
Tasarımın altındaki yazı alanına yeşil renkte gösterilmiş kodları koyacağız.
Kod:
</div>
(İçerik Alanı Bitişi)
</body>
</html>
CSS Kod bölümüne ise hazılarladığınız kodları koyacağız.
Kod:
.icerik {
margin:0 auto;
margin-top:50px;
background-color:#2d2d2d;
font-size:12px;
color:#2d2d2d;
font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, "Courier New", monospace;
}
Böylece sitemizi hazır hale getirmiş olduk.
