TeknoAnaliz | Teknoloji & Kişisel blog
Tasarım çizmek ve kodlamak
TeknoAnaliz - Tasarım çizmek veya kodlamak
Tasarım çizmek ve kodlamak
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...
Ö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...
<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>
basit anlatım için html kodlarımızı uzatmadık, şimdi html kısmını düzenleyelim...
Html kodlarımızı oluşturduk, şimdi css kodumuzu düzenleyelim
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. Anlatım tamamen bana aittir, alıntı yapmadan paylaşmak yasaktır!
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...
Ö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>
Buraya açıcağımız etiketlerin özellikleri gelicek.
</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="Logonuzun urlsi" width="300" height="100" /></a></div>
<body>
<div id="logo"><a href="#"><img src="Logonuzun urlsi" width="300" height="100" /></a></div>
<div id="menu">
<ul>
<li><a href="http://www.teknoanaliz.tr.gg">ANASAYFA</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">İLETİŞİM</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">YORUMLAR</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">TEKNOANALİZ</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">EKSTRALAR</a></li>
</ul>
</div>
<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>
<ul>
<li><a href="http://www.teknoanaliz.tr.gg">ANASAYFA</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">İLETİŞİM</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">YORUMLAR</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">TEKNOANALİZ</a></li>
<li><a href="http://www.teknoanaliz.tr.gg">EKSTRALAR</a></li>
</ul>
</div>
<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>
Html kodlarımızı oluşturduk, şimdi css kodumuzu düzenleyelim
<style type="text/css">
body {
background-image: url(ARKAPLAN RESMİ);
background-repeat: fixed;
}
#logo {
width: 900px;
height: 100px;
margin: auto;
padding: auto;
}
#menu {
widht: 900px;
height: 40px;
margin: auto;
padding: auto;
background-color: #ccc;
}
#menu ul {
margin: 0;
padding: 0;
List-style-type: none;
}
#menu ul li a {
text-decoration: none;
color: #000;
font-size: 12px;
font-family: Arial;
display: block;
text-align: center;
width: 180px;
height: 40px;
float: left;
line-height: 40px;
}
#icerik {
width: 900px;
height: auto;
margin: auto;
padding: auto;
background-color: #fff;
}
#alt {
width: 900px;
height: 50px;
margin: auto;
padding: auto;
background-color: #ccc;
color: #000;
}
</style>
body {
background-image: url(ARKAPLAN RESMİ);
background-repeat: fixed;
}
#logo {
width: 900px;
height: 100px;
margin: auto;
padding: auto;
}
#menu {
widht: 900px;
height: 40px;
margin: auto;
padding: auto;
background-color: #ccc;
}
#menu ul {
margin: 0;
padding: 0;
List-style-type: none;
}
#menu ul li a {
text-decoration: none;
color: #000;
font-size: 12px;
font-family: Arial;
display: block;
text-align: center;
width: 180px;
height: 40px;
float: left;
line-height: 40px;
}
#icerik {
width: 900px;
height: auto;
margin: auto;
padding: auto;
background-color: #fff;
}
#alt {
width: 900px;
height: 50px;
margin: auto;
padding: auto;
background-color: #ccc;
color: #000;
}
</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. Anlatım tamamen bana aittir, alıntı yapmadan paylaşmak yasaktır!