Merhabalar,
Hayal gücününüz doruklarına ulaşmanız açısından sizlere ufak bir kaç ipucu vereceğim.
Öncelikle bunu WebPage Maker programından öğrendim desem yeridir vetasarım yaparken işlerimi çok kolaylaştırdığını da söyleyebilirim.Şimdi sizlere photoshopta hazırladığınız bir şablon örneğinin kolaycadreamweaverla sitenize nasıl koyabileceğinizi anlatacağım.
öncelikle Dreamweaver’da boş bir sayfa oluşturalım;
boş sayfamızın </head> tagından önce kullanacağımız css ‘imizi <style> html koduyla yazalım;
HTML-Kodu:<!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>Untitled Document</title>
<style>
/* CSS Kodlarımızı buraya yazacağız */
</style>
</head>
<body>
</body>
</html>CSS kodlarımızı yazmak için gerekli olan html tagımızı oluşturduk.CSS’de body değeri ile sayfanın genel görüntüsünde font ayarı yapalımve en başından bir header ile ve bunları html’e ekleyerek tasarımımızabaşlayalım;
HTML-Kodu:<!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>Untitled Document</title>
<style>
/* CSS Kodlarımızı buraya yazacağız */
body { font-family:verdana; font-size:11px; }
#tasarim { width:1024px; margin:0 auto; }
#header { width:100%; height:120px; position:relative; }
</style>
</head>
<body>
<div id="tasarim">
<div id="header"></div>
</div>
</body>
</html>Şimdi burada body ile sayfamızın ana fontunun verdana, ana fontbüyüklüğününde 11px olacağını belirttik. #tasarim id si ile desayfamızım boyutlarını gösterdik. Mantıken sayfamızın en başında headeroluşturacağımız için css’de bir #header id ‘si oluşturduk.
#tasarim id’mizin içinde kullandığımız kodlarabakalım. Flat ekranları da göz önünde bulundurarak günümüzde kullanılanekranların çözünürlüklerini dikkate almamız lazım, ki her bilgisayardansitemize girildiğinde en azından sağ-sol scroll’unu yapmayalım,kullanıcıyı sıkacaktır.
Flat ekranların en düşük çözünürlüğü olan 1024×768 i kullandıkburada. width:1024px; diyerek sayfamınızın genişliğinin en fazla 1024pxolabileceğini belirttik. En düşük çözünürlükte sayfamızın kaymamasınısağladık.
margin:0 auto; kullanmamızın sebebi de, sayfamızıkullanıcılara ortalı göstermek. Dilerseniz bunu kullanmayabilirsiniz.Tamamen sizin yaratıcılığınıza kalmış bir olay.
#header id’mizdeki kullandığımız kodları inceleyelim;
width:100%; height:120px; kodlarımız sayfamızınenini ve boyunu belirliyor. width ingilizcede genişlik. Bir önceki cssid’mizde tasarımımızın uzunluğunun maximum 1024px olacağınıbelirtmiştik. Biraz html bilgisi olan bir kişi HTML yazım kurallarındanheader’da da kullandığımız width oranını anlayacaktır. Oradabelirttiğimiz 1024px’in içine 100% enine sığdırmasıdır. sayfamızıkomple kaplamayacaktır. Genişliği ben 120px verdim. Siz bannerboyutunuza göre bu değeri arttırabilir, azaltabilirsiniz. Tamamen sizinhayal gücünüze kalmış bir olay.
position:relative; kullanarakta header’imizin izahiolacağını (yani bağıl) söyledik tarayıcımıza. İşte burada CSS’nintasarıma yaptığı kolaylığı görmüş olacağız. Buradan sonrasınıdikkatlice takip ederseniz kolay yoldan nasıl tasarım yapacağınızıanlayacaksınız.
Gelelim dananın kuyruğunun koptuğu kısma… (:
CSS’imize logomuzu koyacağımız bir class oluşturalım;
HTML-Kodu:
<!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>Untitled Document</title>
<style>
/* CSS Kodlarımızı buraya yazacağız */
body { font-family:verdana; font-size:11px; }
#tasarim { width:1024px; margin:0 auto; }
#header { width:100%; height:120px; position:relative; }
.headerLogo { position:absolute; }
</style>
</head>
<body>
<div id="tasarim">
<div id="header">
<div class="headerLogo"><img src="logo.jpg" alt="Logomuz" /></div>
</div>
</div>
</body>
</html>position:absolute; ile Logomuzun sınırsız olacağınıbelirttik. Anlam kargaşası olmasın ingilizce karşılığıdır bu. Eğer kiDreamweaver kullanıyorsanız, şimdi Dreamweaverınızda logunuzu tutupistediğiniz bir noktaya mouse ile çekebilirsiniz.
gördüğünüz gibi dreamweaverimiz css’mizde .headerLogo class’ımıza bir kaç kod ekledi.
HTML-Kodu:
<!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>Untitled Document</title>
<style>
/* CSS Kodlarımızı buraya yazacağız */
body { font-family:verdana; font-size:11px; }
#tasarim { width:1024px; margin:0 auto; }
#header { width:100%; height:120px; position:relative; }
.headerLogo {
position:absolute;
left: 366px;
top: 21px;
}
</style>
</head>
<body>
<div id="tasarim">
<div id="header">
<div class="headerLogo"><img src="logo.jpg" alt="Logomuz" /></div>
</div>
</div>
</body>
</html>.headerLogo ‘umza position:absolute; vermiştik. Ortaya doğru çektiğimizde left: 366px; top: 21px;kodlarını kendiliğinden ekledi. Bunların anlamı da .headerLogoclass’ımızın tarayıcımıza soldan 366px yukardan 21px; ilerde olacağınısöylemesidir.
Bu şekilde bir çok tasarımı kolayca yapabilirsiniz.position:absolute; vermeden öncesinde bir id oluşturup onuposition:releavite; yapmayı unutmayınız. Yoksa her tarayıcı da farklıgörüntüler oluşabilir.
İlk ipucumu da bu şekilde yayınlamış oldum. Umarım yeni başlayanlara bir şekilde yardımcı olmuşumdur.
