Fakülte / Yüksekokul: GÜZEL SANATLAR FAKÜLTESİ

Program: GRAFİK TASARIM

Ders Kodu: GRA304
Ders Adı: Web Tasarımı II
Sınıfı: 3
Öğretim Elemanı: Öğr. Gör. Serpil Can
İçerik No: 1
Konu: CSS Kutu Modeli – Basit Site İskeleti Oluşturma
Not: Web Tasarımı II dersimizin içeriğindeki uygulama çalışmalarını video olarak
www.serpilcan.com.tr adresinden izleyebilirsiniz. Sorularınızı sheritraa@gmail.com
adresinden ve whatsapp uygulaması üzerinden iletebilirsiniz.
Web siteleri oluşturulurken içeriğin yerleştirileceği bir yapıya, iskelete ihtiyaç duyarlar.
Gridlere benzeyen bu yerleşim sistemi iki temel yöntemle yapılır.
1- Tablo ile tasarım
2- Div / Kutu ile tasarım
Günümüzde tablo ile tasarım artık kullanılmamaktadır. 2. Yöntem olan Div ile site tasarımı ise
teknolojik gelişmelere bağlı olarak alt yöntemlere ayrılmıştır.
Div / Kutu modelini esas alan bir web sitesi en temel haliyle aşağıdaki bölümlerden oluşur. Bu
bölümlere genelde İngilizce isimlendirme yapılır. Böylece bir standardizasyon
hedeflenmektedir.
Standart isimlendirme; örneğin internetten temin edilen hazır bir web sitesinin yapısını
anlayabilmeyi kolaylaştırır. Günümüzde HTML 5 ile bu isimlendirme artık html etiketleri
haline de getirilmiştir.

Header: Sayfanın üst bölümüdür. Logo, slogan, başlık görseli yada slider, dil seçenekleri v.b.
öğeler bu bölümde yer alabilir.
Menu: Site içinde gezinmeyi sağlayan ana menüler genellikle yatay olarak tasarlanırlar.
Anasayfa, Hakkımızda, Kurumsal, Ürünler, Hizmetler, İletişim v.b. linklerden oluşan menünün
bulunduğu bölümdür.
Content: İçerik bölümü, web sayfamızın içeriğinin bulunduğu bölümdür. Kimi zaman birden
fazla sütundan/bölmeden oluşabilir. Böyle durumlarda Left ve Content gibi aynı satırda iki
bölüm tanımlanır.
Footer: Dipnot kısmıdır. Sitenin pek çok linki, sosyal medya linkleri, künyesi v.b. bilgiler bu
bölümde yer alır.
Container: Kapsayıcı tüm yukarıda adı geçen bölümleri içine alarak istenilen biçimde sayfaya
yerleştiren bölümdür. Örneğin tüm içeriğin sayfaya ortalı olması, kenarlarda boş alanlar
olması Container ile düzenlenir.
Yapacağımız çalışmada alt alta 4 tane div i yukarıdaki isimlendirmelerle isimlendirerek
yerleştireceğiz. Container divini/kutusunu en son ekleyeceğiz.

Common yada Layout sekmesinden “insert div tag” butonu ile yada menüden “Insert –
Layout Objects– Div Tag” ile ilk kutumuzu ekledik. ID benzersiz isim / kimlik anlamına gelir.
Bir sayfada teoride aynı id isimli 2 div bulunmaz. ID olarak header ismini verdik.
2. divden itibaren Insert Div Tag penceresinde Insert isimli bölüm de önemli hale gelir.
Insert bölümünde 5 seçenek olmasına rağmen “After tag” bizim için büyük ölçüde yeterli
olacaktır. After tag belirledikten sonra kimden sonraya yerleşeceğimizi sağdaki pencereden
seçiyoruz( <div id=”header”>). header kutusundan sonra menu kutusu gelsin demiş olduk.
Tüm kutuları ekledikten sonra görüntü aşağıdaki gibi olacaktır;
Şimdi header dan başlayarak CSS ileri oluşturalım.

Tüm kutularda, margin üst boşluk, sabit yükseklik ve arkaplan rengi standart olarak
uygulanacaktır. İçeriği metin olan kutularda ise padding verilerek kutunun kenarından daha
içeriden içeriğin başlaması sağlanacaktır.
Header’dan sonraki kutularda bir alt satırdan başlanabilmesi, kutunun yan yana gelmemesi
için clear:both kullanılacaktır.
Not: Container ile sabit sınırlara sıkıştırılmış kutularda clear:both kullanılmadan da kutular alt
alta görüntülenebilir.
Tüm kutular biçimlendirildiğinde css kod aşağıdaki gibi olacaktır.
Son olarak kapsayıcı / container divini ekleyelim.

Container kutusunu önce “after tag” diyerek footer’ın altına ekledik. Ama Container tüm
içeriği kapsayacağı için aşağıdaki hale getirmeliyiz;

Container’ın CSS kodu da;

Tasarımın bitmiş hali;