Tasarım çizmek ve kodlamak okunduğu kadar kolay değildir ama zorda değildir, daha doğrusu bu yapıcağınız projeye bağlı. Tasarım çizmek bu devirde yardımcı programlarla yapılıyor, mesela dreamweaver. Bu program hiç kodlama bilmeyenlere önerilebilir bir program. Çizimi ise çok professiyonel olmasını istiyorsanız, photoshop programını kullanabilirsiniz. Bu iki program aslına zor programlardır. Css ve html bilgisi, göz zevki olmadan yapılması, kullanılması zor programlardır. 1-2 günde öğrenemezsiniz. Ben elimden geldiğince kısa bir şekilde anlatıcağım.Temamızın ön izlemesi yukarıdadır...
Öncelikle bir metin belgesi oluşturun. ( Dreamweaver olmayanlar için, olanlarda kod bölümünden yapabilir. )
Metin belgesinin adını: " index.html " yapıyoruz ve tıklayıp içine girip yazmaya başlıyoruz... İlk olarak çalışmalarımızı görebilmemiz için style etiketlerini kullanıcağız...
<style type="text/css">Buraya açıcağımız etiketlerin özellikleri gelicek.
</style>
</style>
daha sonra html bölümünde etiketlerimizi açalım...
<html>
<body>
<div id="logo">logomuzu getireceğiz</div>
<div id="menu">menuyu getireceğiz</div>
<div id="icerik">icerik getireceğiz</div>
<div id="alt">alt kısmını getireceğiz</div>
</body>
</html>
<html>
<body>
<div id="logo"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibkvNQ_v-lymRsPiTwsuM2YlCP8HQia34erEXjzVGydJY0QcglQ422iNFKgF1G5u86rfzAhZb_WqSmV3fLGPOaGT_CScgoDGIVElD67MmThAl_2U7nNZFDwYORuGWYfRoVieFr9g9bc4Zh/s400/logov1.png" width="300" height="100" /></a></div>
<div id="menu">
<ul>
<li><a href="http://www.negresmedya.blogspot.com.tr">ANASAYFA</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">İLETİŞİM</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">YORUMLAR</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">NEGRESMEDYA</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">EKSTRALAR</a></li>
</ul>
<div id="icerik"><div id=content"> Bu etiketi açıyorum ki tr.gg' de paylaştığınız içerikler bunun içinde gözüksün diye, özellikleri style etiketinden yapıcağız...</div>
</div>
<div id="alt">Tüm hakları saklıdır! İzinsiz kopyalama yapılamaz veya çalınamaz</div>
</body>
</html>
</div>
<div id="alt">Tüm hakları saklıdır! İzinsiz kopyalama yapılamaz veya çalınamaz</div>
</body>
</html>
Html kodlarımızı oluşturduk, şimdi css kodumuzu düzenleyelim
<style type="text/css">
body {
background-color: #f9f9f9;
background-image: url(ARKAPLAN RESMİ);
background-repeat: fixed;
margin: 0px;
padding: 0px;
}
#logo {
width: 900px;
height: 100px;
margin: auto;
padding: auto;
}
#menu {
width: 900px;
height: 40px;
margin: auto;
padding: auto;
background-color: #571852;
}
#menu ul {
margin: 0;
padding: 0;
List-style-type: none;
}
#menu ul li a {
text-decoration: none;
color: #fff;
font-size: 12px;
font-family: Arial;
display: block;
text-align: center;
width: 180px;
height: 40px;
float: left;
line-height: 40px;
transition: 0.3s;
}
#menu ul li a:hover {
background: #4a1546;
}
#icerik {
width: 880px;
height: auto;
margin: auto;
padding: auto;
background-color: #eee;
padding: 10px;
}
#alt {
width: 900px;
height: 30px;
line-height: 30px;
margin: auto;
text-align: center;
padding: auto;
background-color: #571852;
color: #fff;
font-family: Arial;
font-size: 12px;
}
</style>
Css kodumuzuda tamamladık, basit bir tasarım kodu oluşturduk, bunu daha başarılı hale getirip sitenize uygulayabilirsiniz. Bir sorunuz olduğunda iletişimden bize ulaşabilirsiniz.
0 yorum:
Yorum Gönder