Ceyhun AKSAN : Tamamlanmamış Yazılar

Önceki hazırlık/giriş yazısında belirttiğim konular üzerine yazının devamı olarak şimdi CSS ile nasıl tasarım yapılır bunu inceleyeceğiz.

Öncelikle bir tasarımcı olarak yaratıcılığınızı kullanmanın önemini bilmenizi istiyorum. Diğer web sitelerini incelemelisiniz, gözlemlemeli ve yeni teknikleri takip etmelisiniz. Sonrasında ise kendinize has stilinizle tasarım aşamasına gelebilirsiniz.

Diyelim ki sağ, sol ve orta kısım (left, right, main)`dan oluşan bir web sayfası hazırlayacaksınız.

En ilkel hali ile tasarım şablonumuz bu olsun.

Menünün olduğu bir alan, aktif içeriğin yayınlanacağı bir alan ve isteğe göre değişen bir başka alan.

Şimdi layerlar ile (div/katman) sayfanın iskelet yapısını oluşturmaya başlayacağız.
Şablonu incelediğimizde üç alan olduğunu başta da belirttiğimiz üzere farkediyoruz. Bu da demek oluyor ki üç katmanlı iskelet yapısını oluşturmaya başlayacağız.

Bu katmanlara yandaki yapıda da görebileceğiniz üzere kolay anlaşılması için üst kısımlarında yer alan ve yazıda da belirttiğim id adlarını vereceğim. Bu şekilde hangi katmanın ne işe yaradığını, nasıl düzenlendiğini kolay bir şekilde anlayabilirsiniz.

#anaLayer {
position:absolute;
left:0px;
top:48px;
z-index:1;
width: 76%;
}

ile içeriğin ve menünün yer alacağı bölümü hazırlıyoruz. Ana katmanımızın içerisinde ise;

#left {
position:absolute;
left:24px;
top:48px;
width:160px;
z-index:2
}

ile menü bölümümüzü oluşturuyoruz. Sonrasında ise bu alan içerisine menümüzü yerleştireceğiz.

Şimdi ise sağ alanı oluşturalım.

#right {
position: absolute;
left: 78%;
top: 48px;
z-index: 3;
}