Webmaster

Tasarımımızı ayağa kaldırdık sayılır. Şimdi birkaç püf nokta ve bazı temel bilgilerden bahsetmenin zamanı geldi. Şimdi içeriğin sayfada nasıl görüneceğini test etmek için "icerik" alanına birkaç paragraflık bir şeyler kopyalayıp yapıştırın ya da yazın. "anaMenu" içine temsili bir şeyler yazın. "ustAlan" içine de bir H1 başlığı ve onun altına slogan olacak bir şeyler yazın. "altAlan" a da bir şeyler yazmayı unutmayın. Amacımız tasarımı test etmek. Şimdi kaydedip tarayıcıdan kontrol edin.



Tasarımı test etmek için bir şeyler yazıyoruz


Şimdi dikkatinizi çekecek bazı noktalar olmalı. Bunlardan biri "icerik" içerisindeki yazıların kenarlara çok yakın olduğu, ayrıca başlığında standart biçimde pek hoş görünmediği olabilir. "ustAlan" içerisindeki başlığın bir kısmının dışarı taşması ve sloganın başlığa çok uzak olması da diğer sorunlar olarak göze çarpabilir. Şimdi bu sorunları nasıl çözeceğimize deyinelim.

Öncelikle "ustAlan" içerisindeki başlığı biraz biçimlendirip göze hoş görünür bir hal almasını sağlayalım. CSS Styles panelinden "New..." menüsü ile yeni bir stil tanımlamaya başlıyoruz. "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçip, "Selector" olarak "#sayfa #ustAlan h1" yazıyoruz.



ustAlan için başlık tanımlaması yapıyoruz


Başlık için stil özellikleri şu şekilde;

Type
Font: Georgia, Times, serif
Size: 30 pixels
Weight: Bold
Color: #FFFFFF
Box
Padding: 0 pixels
Top: 10 pixels
Right: 0 pixels
Bottom: 20 pixels
Left: 0 pixels
Margin:
Top: 15 pixels
Right: 0 pixels
Bottom: 0 pixels
Left: 25 pixels
Positioning
Type: Absolute
Şimdide sloganı biçimlendirelim. "#sayfa #ustAlan p" için stil özellikleri

Type
Font: Georgia, Times, serif
Size: 11 pixels
Weight: Bold
Color: #FFBD91
Box
Padding: 0 pixels
Margin:
Top: 50 pixels
Right: 0 pixels
Bottom: 0 pixels
Left: 115 pixels
Positioning
Type: Absolute
Üst kısmın biçimlendirmesi bitti gibi. Şimdide "icerik" ile ilgilenmeye başlayalım. Yeni bir stil yaratıyoruz. "Selector" olarak "#sayfa #icerik h1" yazıyoruz. İçeriğin başlığı için stil özellikleri şu şekilde;

Type
Font: Arial, Helvetica, sans-serif
Size: 24 pixels
Weight: Bold
Color: #2981AF
Box
Padding:
Top: 10 pixels
Right: 0 pixels
Bottom: 10 pixels
Left: 0 pixels
Margin: 5 pixels
Border
Bottom: Solid, 1 pixels, #2981AF
Şimdide paragrafları biçimlendirelim. "#sayfa #icerik p" için stil özellikleri;

Box
Padding: 5 pixels
Margin: 0 pixels
Böylece içeriğin kenarlara çok yakın olmasını engellemiş olduk. Tabi bu sadece "icerik" içindeki paragraflar için geçerli. Aynı şekilde her eleman için "padding" ve "margin" ayarlamaları yaparak düzgün görünümlü içerikler elde edebilirsiniz.

Son olarak "altAlan" a göze daha hoş görünmesi için geçişli (gradient) bir arka fon resmi ekliyoruz. Stil özelliklerinde şu değişikliği yapmalısınız.

Background
Background-image: images/altAlan_bg.gif
Repeat: repeat-x
Sonucu görmek için tüm belgeleri kaydedip tarayıcıdan kontrol edebilirsiniz.



Tasarımın son halinin tarayıcıdaki görünümü


Böylelikle CSS biçimlendirmenin gücünü kullanarak nasıl bir site ara yüz tasarımı yapabileceğimizi ve bunu geliştirebileceğimizi görmüş olduk. Bu örneğimizde iki sütunlu tasarımlar üzerinde durduk. Bu yaklaşımdan yola çıkarak 3 sütunlu tasarımların nasıl yapıldığını kendiniz de bulabilirsiniz fakat ipucu olarak şunu belirtmekte fayda var. Bu tür 2 den fazla sütunlu tasarımlarda bileşenleri kendi aralarında ikili gruplara ayırarak sağ ve sol "Float" özelliklerini kullanabilirsiniz.



Kaynak : dw.gen.tr