Tasarım Şablonumuzu Yapalım

Her seferinde yeni bir projeye başlarken öncelikle şablonumuzu (template) oluştururuz.Kimimiz ücretsiz şablonları kullanırız, kimilerimizde sıfırdan bir şablon tasarlarlar.Bu yazımda da bir tasarım şablonu yapmayı ve bir kaç püf noktayı sizlere göstericem.Bir “index.html” birde sitil dosyamız olan “style.css” dosyasını oluşturalım.Öncelikle “index.html” dosyamızın en üstüne “DOCTYPE” kodlarımızı yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>atib3rk #</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
</body>
</html>

DOCTYPE kodlarımızı yazdıktan sonra içeriğimizi oluşturmaya başlı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

<!--Gövde-->
<div id="govde">
 
<!--Header-->
<div id="header">
<!--Başlık-->
<div id="baslik">atib3rk #</div>
<!--Başlık Biter-->
 
<!--Menü-->
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!--Menü Biter-->
 
</div>
<!--Header Biter-->
 
<!--İçerik Yapısı-->
<div id="content"></div>
<div id="sidebar"></div>
<!--İçerik Yapısı Son-->
 
</div>
<!--Gövde Biter-->
 
<!--Footer-->
<div id="footer">
<!--Copyright-->
<div class="copyright">
atib3rk # h4ck3r's d4iLy
<!--Copyright Biter-->
</div>
<!--Footer Biter-->
</div>

Evet arkadaşlar ben böyle bir yapı oluşturdum şimdi ise sitil dosyamızı kodlıyarak şablonumuzu şekillendirelim.

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

*, html, body {
margin: 0;
padding: 0;
border: none;
}
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
text-align: center;
background: #EEE;
color: #000;
}
#govde{
margin:0 auto;
width:800px;
}
#header{
width:100%;
height:100px;
}
#baslik{
font-size:45px;
font-weight:bold;
padding-top:20px;
color:#333;
float:left;
}
#content{
float:left;
width:530px;
height:400px;
background:#FFF;
border:5px solid #333;
}
#sidebar{
float:right;
width:240px;
height:400px;
background:#FFF;
border:5px solid #333;
}
#footer{
margin:10px auto;
width:790px;
height:20px;
background:#FFF;
border:5px solid #333;
}

Gördüğünüz gibi arkadaşlar oluşan şeklimizi gövdeyi oluşturan elementlerle beraber resimde olduğu gibi gösterdim.Henüz menümüzü şekillendirmedik fakat ondan önce dikkat ettiyseniz footer da bir sorun var.Yukarı kaymış content ve sidebar elementlerinin altına girmiş şekilde.Pek bunu nasıl çözebiliriz ? Bu bir float kullanım hatası.Hatamız tarayıcımıza herhangibir float başlangıcını belirttiğimiz gibi bu floatın bitişinide belirtmeliyiz.Bu sorunu halletmek için bir kaç yöntem var fakat ben size kendiminde kullandığı ve en kolay yöntem olan “overflow“u göstericem.#govde elementimizi overflow:hidden; kodunu ekliyoruz.Bu şekilde govde elementinin dışında kalan yerleri içine almıyacaktır.

Evet arkadaşlar görüldüğü gibi bu sorunumuzuda atlattık.Şimdi olaya biraz estetiklik ekliyelim daha önceki yazılarımda gösterdiğim yöntem olan Firefoxda oval köşeler yapmak için kullandığımız bir kaç kod ekliyerek hem menümüzü hemde tüm yapıyı biraz değiştirelim.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

*, html, body {
margin: 0;
padding: 0;
border: none;
}
body {
 
font-family: Tahoma, Arial, Verdana, sans-serif;
text-align: center;
background: #EEE;
color: #000;
}
#govde{
margin:0 auto;
width:800px;
overflow: hidden;
}
#header{
width:100%;
height:100px;
}
#menu{
margin-top:50px;
float:right;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
display:inline;
float:left;
margin-left:5px;
padding:0;
}
#menu a {
display:block;
float:left;
margin-top:10px;
padding:5px 5px 4px 5px;
text-decoration:none;
font:bold 12px Verdana;
color:#000;
background:#fff;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
border:2px solid #ff0048;
}
#menu a:hover {
background-position:right bottom;
border-color:#FF9300;
}
#baslik{
font-size:45px;
font-weight:bold;
padding-top:20px;
color:#333;
float:left;
}
#content{
float:left;
width:530px;
height:400px;
background:#FFF;
border:5px solid #333;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
}
#sidebar{
float:right;
width:240px;
height:400px;
background:#FFF;
border:5px solid #333;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
}
.copyright{
float:left;
font-size:11px;
font-weight:bold;
color:#FF0048;
padding-top:2px;
padding-left:5px;
padding-bottom:2px;
}
#footer{
margin:10px auto;
width:790px;
height:20px;
background:#FFF;
border:5px solid #333;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:15px;
}

Evet arkadaşlar şablonumuzun son hali bu şekilde :) Sizlere sıfırdan XHTML & CSS ile bir şablon(template) oluşturmayı anlattım.Umarım yardımcı olmuşumdur.

Site Şablon Demo

Sİte Şablon İndir

Kategoriler: Web Tasarım - Programlama
Etiketler: , , , , ,
Toplam Okunma Sayısı 515 | Bugün Okunma Sayısı 2
Konu Yayınlanma Tarihi: 26 Ekim 2008, 14:27
Yazıya Yapılan Yorumlar İçin RSS

17 Yorum Yapılmış

  1. 1

    xSS-ErrOr
    Pazar 26 Eki 2008 2:47 pm

    Atiberk bu şablonu makale scriptimde kullanabilirmiyim?

  2. 2

    ATiB3RK
    Pazar 26 Eki 2008 4:01 pm

    Tabi Oğuzhan işine yaradığına sevindim =)

  3. 3

    Explocion
    Pazar 26 Eki 2008 4:05 pm

    Thanks br0.Bizde Yapacagına Evinde Yap :x En iyisi :)

  4. 4

    xSS-ErrOr
    Pazar 26 Eki 2008 4:05 pm

    ATiB3RK gösterdiğim herkes tasarımı çok beğendi tamamını kendim kodladığım scriptede giydirme yaptım bayağı güzel durdu script.

    İzin verdiğin için teşekkürler.

    http://www.filezof.com‘da demo olarak görebilirsiniz.

  5. 5

    Storm-X
    Pazar 26 Eki 2008 5:12 pm

    Gerçekten güzel bir tasarım olmus Atiberk.Seni tebrik ediyorum.. :)

  6. 6

    müJdaT
    Pazar 26 Eki 2008 6:03 pm

    Aradığım şey buydu işte :) Çok teşekkür ederim bu değerli anlatım için…

  7. 7

    pc_CoPaTh
    Pazar 26 Eki 2008 11:15 pm

    yardimci olmasina oldunda reis daha bu islere giremedim bilosn :D tesekkrlerr

  8. 8

    sinan
    Pazar 26 Eki 2008 10:07 am

    filozof.com güzel duruyor.biraz daha süslensen bu şablon daha iyi olur.;)

  9. 9

    Pr0xyBurn3r
    Pazar 26 Eki 2008 4:19 pm

    Berkan güzel tasarlamışsın..
    Aynı şekilde Oğuzda güzel scripte giydirmiş.

    Yanlız bu tasarımın tek - si ie de ovalliğin kaybolması:)

  10. 10

    xSS-ErrOr
    Pazar 26 Eki 2008 8:02 am

    Ozan ie dede güzel duruyor ya :)

  11. 11

    Ozan Can
    Pazar 26 Eki 2008 5:01 pm

    Tamam Oğuz Kötü duruyor demedim:D Oval Olmuyor Dedim:)

  12. 12

    Web’den Seçtiklerim #3 | Müjdat Korkmaz
    Pazar 26 Eki 2008 11:47 am

    [...] Tasarım Şablonumuzu Yapalım [Bağlantı] [...]

  13. 13

    » Blog Arşivi » Web’den Seçtiklerim #3
    Pazar 26 Eki 2008 8:12 pm

    [...] Tasarım Şablonumuzu Yapalım [Bağlantı] [...]

  14. 14

    Web Öğrencisi
    Pazar 26 Eki 2008 6:37 pm

    Olay budur.. (: SAğolasın!

  15. 15

    Web Öğrencisi
    Pazar 26 Eki 2008 6:37 pm

    Hocam bak bu ikinci yorum.. bu site bi daha onay isterse hacklerim hee :P :D

  16. 16

    PichStyLe
    Pazar 26 Eki 2008 11:32 pm

    atiberk cok saqol süper bir şablon atiberk senden bir istegim olacak tabi sen istersen

    http://www.atiberk.org/atib3rk.png
    bu font paylaşirmisin atiberk

  17. 17

    Cehonted
    Pazar 26 Eki 2008 11:47 pm

    sağol dostum güzel.

Yorum Yazın

« nVidia GeForce VS Ati Radeon Son Günlerde… »