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 ve tasarım yaparken işlerimi çok kolaylaştırdığını da söyleyebilirim. Şimdi sizlere photoshopta hazırladığınız bir şablon örneğinin kolayca dreamweaverla sitenize nasıl koyabileceğinizi anlatacağım.
öncelikle Dreamweaver'da boş bir sayfa oluşturalım; (Resim1)
boş sayfamızın </head> tagından önce kullanacağımız css 'imizi <style> html koduyla yazalım; (Resim2)
<!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ım ve en başından bir header ile ve bunları html'e ekleyerek tasarımımıza başlayalım;
<!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 font büyüklüğününde 11px olacağını belirttik. #tasarim id si ile de sayfamızım boyutlarını gösterdik. Mantıken sayfamızın en başında header oluşturacağımız için css'de bir #header id 'si oluşturduk.
#tasarim id'mizin içinde kullandığımız kodlara bakalım. Flat ekranları da göz önünde bulundurarak günümüzde kullanılan ekranların çözünürlüklerini dikkate almamız lazım, ki her bilgisayardan sitemize 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 1024x768 i kullandık burada. width:1024px; diyerek sayfamınızın genişliğinin en fazla 1024px olabileceğ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ın enini ve boyunu belirliyor. width ingilizcede genişlik. Bir önceki css id'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ından header'da da kullandığımız width oranını anlayacaktır. Orada belirttiğimiz 1024px'in içine 100% enine sığdırmasıdır. sayfamızı komple kaplamayacaktır. Genişliği ben 120px verdim. Siz banner boyutunuza göre bu değeri arttırabilir, azaltabilirsiniz. Tamamen sizin hayal gücünüze kalmış bir olay.
position:relative; kullanarakta header'imizin izahi olacağını (yani bağıl) söyledik tarayıcımıza. İşte burada CSS'nin tasarı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;
<!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 ki Dreamweaver kullanıyorsanız, şimdi Dreamweaverınızda logunuzu tutup istediğiniz bir noktaya mouse ile çekebilirsiniz. Resimleri inceleyiniz..
Logomuzu mousemizle tutup, ortaya çekelim;
gördüğünüz gibi dreamweaverimiz css'mizde .headerLogo class'ımıza bir kaç kod ekledi.
<!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 .headerLogo class'ı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 onu position: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.
Sevgi ve saygılarımla,
İyi çalışmalar..