[erdinç]

Selamlar,
web tasarımı benim de alanım sayılmaz. Ben öğretmenim. Kendi işime yarayacak kadar konuları öğrenmeye çalışıyorum. Frontpage'de tablo ile site tasarladıktan ve Photoshop'ta slice yöntemiyle faydasız bir macera yaşadıktan sonra yakın zamanda Dreamweaver kullanmaya başladım.

Dreamweaver'da CSS ile biçimlendirme yapmak veya CSS ile sitenin yerleşim şemasını (layout) oluşturmak için kod bilmek gerekmiyor. Bunları zaten görerek yapıyorsunuz. Bu resimde gördüğün pencere sayesinde kodları kendin yazmana gerek kalmıyor.

CSS kodları HTML sayfasının içine gömülü olabilir. Bu durumda sadece o sayfa için geçerli olur. Veya harici bir CSS dosyasında yazılı olabilir. Yukarıdaki resimde harici dosya kullanıldığını görüyorsun. Bu şöyle oluyor:

Eğer zaten yoksa, CSS isimli bir klasör yaratıyorsun. İçinde styles.CSS isimli bir dosya yaratıyorsun. CSS uzantılı dosyalar HTML gibi body, head vb. kısımlar içermiyor. Sadece CSS başlıklarını içeren bomboş bir sayfa olmalı.

Yarattığın HTML dosyalarından bu styles dosyasına link veriyorsun. Link vermek için HTML dosyalarında head tagları arasına şunu yazıyorsunuz:

<link href="CSS/styles.CSS" rel="stylesheet" type="text/CSS" />

Diyelim ki HTML dosyasında herhangi bir div yarattın. CSS ile o div'i nasıl biçimlendireceksiniz? Bu iki şekilde oluyor: id veya class değerlerini kullanarak.

Yukarıdaki resme dikkatle bakarsan bazı CSS başlıklarının # işaretiyle, bazılarının da . ile başladığını göreceksin. Şu şekilde oluyor:

Önce id değerine bakalım:

HTML dosyasında body tagları arasına şöyle bir div olsun:

<div id="logo">logo resmi buraya konuyor</div>

Şimdi logo isimli div'e CSS dosyası içinde biçimlendirme yapmak için yapacağınız tek şey yine aynı ismi, yani logo kelimesini kullanmak ve önüne # işareti koymak. Örneğin şu şekilde:

#logo {
	float: left;
	margin-top: auto;
	margin-bottom: auto;
	padding-top: 23px;
	padding-bottom: 23px;
	margin-left: 0px;
	margin-right: 0px;
	padding-right: 2px;
	padding-left: 23px;
}

Bu açıkladığım id değeri sadece bir eleman için uygun oluyor. Eğer birden çok elemana aynı biçim uygulamak istiyorsan o zaman class değerini kullanmak daha uygun olur. Örneğin divler şöyle olsun:

<div class="fotograf_sola_yanasik"><img src="resim01.jpg"/></div>

Başka bir yerde yine sola hizalı başka bir fotoğraf kullanıyorsun:
<div class="fotograf_sola_yanasik"><img src="resim02.jpg"/></div>

Şimdi bu class özelliğini kullanan bütün divlere aynı anda biçimlendirme yapmak için CSS dosyasında şunu yazıyorsun (# yerine nokta kullanarak):

.fotograf_sola_yanasik{
	float: left;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-top: 5px;
}

CSS dosyandaki herhangi bir başlığa gelip kalem ikonuna tıklarsan (yukarıdaki resimde gösterilen yerde) biçimlendirme penceresi açılacaktır.

[sevenos]

çok ağır geldi bana yazılarınız ama şu vize haftasını atlatırsam anlamak için kendimi yorucam çok teşekkürler, ellerinize sağlık.