Evet arkadaşlar ilk dersimiz css de şablon oluşturmak yani logo kısmı header kısmı footer kısmı.
Öncelikle bir klasör oluşturun ben css diye bi klasor oluşturdum.
Şimdi Dreamweaver bir tane index.html dosya açın birde aycan.css diye bir css dosyası açın css klasörüne kayıt edin.
Önce Css dosyamızdan başlıyalım bi çerçeve oluşturalım
|
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 |
.cerceve { width: 950px; /* cercevenin genişliğini width komutu ile belirtiyoruz*/ margin: 0 auto; /* burada ise margin komutu ile çerçevemizi ortalıyoruz*/; } .logo { width: 950px; height: 150px; /* Burada logomuzun genişliğini verdik*/ background-color: #000000; /*Burada logomuza renk verdik*/; } .orta { width: 950px; overflow: hidden; /* Burada orta blogumuza otomatik uzaması için bu kodu verdik*/ background-color: #000000; } .orta_sol { width: 750px; height: 300px; background-color: #00FFFF; float: left; /*Burada orta sol blogumuzun sol tarafda olacağını belirledik*/; } .orta_sag { width: 200px; height: 200px; background-color: #FFFF33; float: right; /*Burada ise bu kısmın sağ tarafda olacağını belirledik*/; } .alt { width: 950px; height: 30px; background-color: #CC0099; } |
Evet arkadaşlar Css dosyamızı hazrıladık şimdi index.html mize geçelim.
öncelikle klasik html kodlarımızı yazıyoruz
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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=iso-8859-9" /> <title>Aycan Css dersi 1</title> <link rel="stylesheet" href="aycan.css" type="text/css" /> </head> <body> ------ </body> </html> |
Buarada kalın yazdığım komut ile yani ;
|
1 |
<link rel="stylesheet" href="aycan.css" type="text/css" /> |
bukomut ile css dosyamızı index.html ile birleştirdik Şimdi <body> </body> tagları arasına hazırladığımız classları yani css komutlarımızı çağıralım , öncelikle cerçevemizi çağırı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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<div class="cerceve"> </div> Evet çerçevemizi <div class=""></div>komutu ile çağırdık şimdi ise logomuzu ekleyelim <div class="cerceve"> <div class="logo">Logo başlığımız</div> </div> Logomuzu sitemize yerleştirdik şimdi orta kısımı yerleştirelim <div class="cerceve"> <div class="logo">Logo başlığımız</div> <div class="orta"> <div class="orta_sol"> Burası orta sol kısmımız </div> <div class="orta_sag"> Burası orta sağ kısmımız </div> </div> Şimdi Alt kısmımızı ekleyelim <div class="cerceve"> <div class="logo">Logo başlığımız</div> <div class="orta"> <div class="orta_sol"> Burası orta sol kısmımız </div> <div class="orta_sag"> Burası orta sağ kısmımız </div> </div> <div class="alt">bu kısım alt kısım iletişim bilgileri telif hakları</div> </div> |
Evet arkadaşlar elimden geldiğince hafif bir şekilde üstünden geçmeye çalıştım. Anlamadığınız yerleri sorunuz çünki sizler için bu anlatımı yapıyoruz.
yaptığımız çalışmadan bi görüntü.
AycanB
Çok teşekkürler. Yararlı kaynak.
Ders 2 varmı acaba ?
Türkçe kaynak olarak html/css tasarımların anlatımları pek yok. Sizi tebrik ediyorum ve özellikle bu konuda derslerinizin devamını gelmesini merakla bekliyorum.
faydalı bilgi tesekkürler