Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.
Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.
Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.
Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.
Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.
Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.
Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir
1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <title>YAZILIM BİLİŞİM</title> </head> <body> ……….. </body> </html> |
2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div class="sayfa"> <div class="ust"> ………. </div> <div class="slider">……….</div> <div class="orta">………</div> </div> <div class="alt">………</div> </body> |
3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.
|
1 2 3 4 5 6 7 |
<div class="ust"> <div class="siteadi"></div> <div class="slogan"></div> <div class="ust-menu"></div> </div> |
4.Adım: Bu adımda site adını, sloganı ve menü (ul li a) için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir. Üst kısım için gerekli kodlar şu şekilde oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ust"> <div class="siteadi"> <a href="index.html"> <h1>YAZILIM BİLİŞİM</h1> </a> </div> <div class="slogan"><p>Bir Tasarım Hikayesi</p></div> <div class="ust-menu"> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Biz Kimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div> |
Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.
5.Adım: Şu aşamada CSS tasarımı yapacağız. tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.
Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..
Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.
Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.
Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body{ margin:0; padding:0; background: url(resim/bg.png) repeat-x #e0e0df; } a{ text-decoration: none; } .sayfa{ width: 980px; margin:auto; } |
6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz. Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* .siteadi içindeki a onun içindeki h1 etiketi */ .siteadi a h1{ text-align: center;/*yazıyı ortala*/ margin:35px 0 0 0; padding:0; font-size:4em; font-family: sans-serif; color:#868686; text-shadow: #4c4b4b -1px -1px,#fff 1px 1px; } |
7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.slogan p{ padding:0; margin:0; text-align: right; padding-right: 240px; color:#3376a6; font-size: 1.2em; font-family: sans-serif; font-style: italic; } |
8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.
Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.
Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.
Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.
Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.ust-menu{ margin-top:26px; } .ust-menu ul{ list-style: none; margin:0; padding:0; } .ust-menu ul li{ float: left; border-left:#a8c5de solid 1px; border-right:#92afc8 solid 1px; } .ust-menu ul li:first-child{ border-left:none; } .ust-menu ul li:last-child{ border-right:none; } .ust-menu ul li a{ display: block; height: 50px; line-height: 50px; padding:0 40px; font-size: 1.2em; font-family: sans-serif; color:#fff; } .ust-menu ul li a:hover{ background: #336fa4; } |
Görüntü şekildeki gibi oluşacaktır.
9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.
***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.
|
1 2 3 4 5 6 |
<div class="temizle"></div> <div class="slider"> <img src="resim/slider.png"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.slider{ height: 338px; text-align: center; } /*tasarımın en altına koyarsanız daha iyi olur*/ .temizle{ clear: both; } |
10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="orta"> <div class="orta-sol"> <div class="urun"> <img class="urun-resim" src="resim/resim.png"> <h2 class="urun-baslik">ÜRÜN BAŞLIĞI</h2> <div class="urun-ozet">Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div class="temizle"></div> </div> <div class="urun"> <img class="urun-resim" src="resim/resim.png"> <h2 class="urun-baslik">ÜRÜN BAŞLIĞI</h2> <div class="urun-ozet">Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div class="temizle"></div> </div> </div> <div class="orta-sag"> .........</div> </div> <div class="temizle"></div> |
11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)
Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.orta-sol{ width: 680px; float:left; } .urun{ padding:10px ; background: #d8f2be; margin:10px 10px 0 0; } .urun-resim{ float:left; margin:0 10px 10px 0; } .urun-baslik{ margin:0px; font-family: sans-serif; font-size: 1.6em; color:#4a6f55; } .urun-ozet{ margin-top:10px; font-family: sans-serif; font-size: 1em; line-height: 1.6em; color:#5e7b67; } .urun-ozet a{ color:#207eae; } .orta-sag{ float:left; width: 300px; } |
Ekran görüntüsü aşağıdaki gibi olacaktır.
resim
12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="orta-sag"> <div class="panel"> <div class="panel-baslik"> <h2>POPÜLER ÜRÜNLER</h2> </div> <div class="panel-bolum"> <div class="populer"> <a href="#"> <img src="resim/resim.png"> <h3>ABCD KİMYASAL TEMİZLİK MADDESİ</h3> </a> <div class="temizle"></div> </div> <div class="populer"> <a href="#"> <img src="resim/resim.png"> <h3>ABCD KİMYASAL TEMİZLİK MADDESİ</h3> </a> <div class="temizle"></div> </div> </div> </div> <div class="panel"> <div class="panel-baslik"> <h2>GALERİ</h2> </div> <div class="panel-bolum"> <div class="resim" > <img src="resim/resim.png"> </div> </div> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.panel{ background: #fcb8b8; margin:10px 0 10px 10px; } .panel-baslik{ background: #fc5151; } .panel-baslik h2{ margin:0px; height: 50px; line-height: 50px; text-align: center; font-family: sans-serif; color:#fff; font-weight: 400; } .panel-bolum .populer{ border-bottom:#fc5151 solid 1px; padding-bottom:10px; margin:0 10px 0 10px; } .panel-bolum .populer img{ padding:0 10px 10px 0; float:left; width: 90px; } .panel-bolum .populer h3{ color:#fff; font-family: sans-serif; line-height: 30px; font-weight: 400; font-size: 1em; } |
13.Adım: alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="temizle"></div> <div class="alt"> <div class="ortala"> <div class="alt-sol"> <div class="bolum-1"> <h2>Popüler Ürünler</h2> <ul class="alt-menu"> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> </ul> </div> <div class="bolum-2"> <h2>Sosyal</h2> <ul class="sosyal-menu"> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> </ul> </div> </div> <div class="alt-sag">x</div> </div> <div class="temizle"></div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.alt{ border-top:#e64d53 solid 10px; background: #e0e0df; padding:10px 0 50px 0; } .ortala{ width: 980px; margin:auto; } .alt-sol{ width: 480px; float:left; } .alt-sag{ width: 480px; float:right; } .bolum-1,.bolum-2{ float: left; width: 230px; } .alt-sol h2,.alt-sol ul a{ font-family: sans-serif; color:#e64d53; } .alt-sol ul{ list-style: none; padding:0; margin:0; } .alt-sol ul li{ padding:5px 0 5px 0; } .alt-sol ul a{ text-decoration: none; } .alt-sol .alt-menu li{ padding-left:20px; background: url(resim/nokta.png) no-repeat 0 7px; } .alt-sol .sosyal-menu img{ width: 80px; } |
14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="alt-sag"> <div class="gorus-form"> <form> <div class="form-satir"> <label for="mail">MAIL</label> <input type="text" name="mail" id="mail"> </div> <div class="form-satir"> <label for="gorus">GÖRÜŞ</label> <textarea id="gorus" name="gorus"></textarea> </div> <div class="form-satir"> <input type="submit" value="KAYDET"> </div> </form> </div> <div class="temizle"></div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.alt-sag{ position: relative; background: #e64d53; margin-top:-10px; } .alt-sag::after{ position: absolute; content: ""; border-top:30px solid #efa6a9; border-right:30px solid #efa6a9; border-bottom:30px solid #e0e0df; border-left:30px solid #e0e0df; bottom:0px; } .gorus-form label{ text-align: right; float:left; width: 100px; padding: 5px 10px 0 0; font-size: 1.2em; color:#fff; font-family: sans-serif; } .gorus-form input[type="text"],.gorus-form textarea{ width: 300px; padding:10px; background: #efa6a9; border:none; } .gorus-form textarea{ height: 150px; } .gorus-form input[type="submit"]{ background: #93dc61; float: right; padding:10px; border:none; margin-bottom:50px; } .form-satir{ padding:20px; } |
15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.
CSS ile WEB SAYFASI TASARIMINI INDIRIN : HTML SAYFA TASARIMI
[…] CSS ile Web Sayfası Oluşturma […]