CSS WEB

CSS Sayfa Düzeni (Layout)

Web sitesi genellikle sahip oldukları başlıkları, menüleri, bir kaç bölümden oluşan içeriği ve alt bilgisi gibi parçalara ayrılır. Hepsi bir düzen içerisinde kullanıcısına sunulur. Web dünyasına göz attığımızda bu şablonu sunacak, tonlarca farklı sayfa düzeni tasarımı bulunmaktadır.

Üç sütunlu düzen, web siteleri için kullanılan en yaygın sayfa düzenlerindendir. Genellikle bir üst bilgi (başlık) ve alt bilgi bulunur. Web sitesinin diğer sayfalarına ulaşmanızı sağlayabilecek bir menü çubuğu mevcuttur. Orta kısım daha çok içeriği sunmak içindir. Tabi ki içerik birden fazla parçaya ayrılabilir. Bu durumda orta kısım ek sütunlar ile bölünebilir. Şu an bu yazıyı okuduğunuz sitemize bir de böyle bir göz atın, sahip olduğu bölümleri inceleyin. Neler görüyorsunuz? Öyleyse, sayfa üzerindeki tüm parçaları koymak için temel HTML‘mizle başlayalım.

Öncelikle Gövde (body) etiketleri arasında olan her bölümün temel taslağını hazırlayalım. Sayfa düzenini sağlayan tüm bölümleri <div> öğesi ile hazırlıyoruz. Her bölüme bir ilgili sınıf ismi vermek, ilerleyen aşamalarda web sayfası üzerindeki kontrolünüzü arttıracaktır. Her bölümün sırası ve kapsamı sayfanın akışına göre hazırlanmalıdır.

HTML

1. Adım : <body>

Sırada CSS ile biçimlendirme aşamasında. İlk olarak <body> bölümünü ele alalım;

CSS

HTML öğelerinden <body> sahip olduğu standart iç (padding) ve dış (margin) boşlukları “0px” olarak verelim. CSS background-color özelliği ile bir arka plan uygulayabilirsiniz.

2. Adım : Sayfa

.sayfa” isimli bölüm bir görsele sahip olmaktan daha çok içinde yer alan tüm öğeleri bir arada gruplamak ve ortada tutmak için mantıksal bir kapsayıcı olarak bulunmaktadır.

CSS

Bu sebeple sadece bir genişliğe sahip olacaktır. margin bildirimi ortalamak için kullanılmaktadır. Arka plan (background) kullanımı isteğe bağlıdır.

3.Adım : Başlık

Başlık genellikle web sitesinin üst kısmında bulunur. Sıklıkla bir logo veya web sitesi adı içerir.

Örneğimize tekrar geri dönelim ve HTML sayfasına “baslik” sınıfına <h1> etiketi ile küçük bir başlık ekleyelim;

HTML

CSS

“.baslik” sınıfı için CSS kodlarımıza aşağıdaki bildirimleri ekleyelim;

Başlık bloğu için uygulanan padding değeri içerisinde bulunan <h1> öğesi ile iç mesafesini tayin etmektedir. Bunun yanı sıra bir arka plan (background-color) ve yazı rengi (color) belirlenmiştir.

İlk testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

Şimdiye kadar işler harika görünüyor..

4. Adım : Menü

Sırada üst menü yerleşiminde; Yatay bir menü oluşturmak üzere “.menu” bloğu içinde sırasız bir liste yerleştirelim. Yapısında bulunacak olan her bir <li> öğesi başka bir sayfamızın linkini tutacak olan <a> etiketlerini barındıracak. HTML dosyasını aşağıdaki gibi düzenleyin.

HTML

CSS

HTML belgesinde menü oluşturmak için pek çok farklı öğeyi bir arada kullandık. Yatay bir menü için CSS bildirimlerini yazmadan önce bilmemiz gerekenler var. Menümüz için <div>, <ul>, <li>, <a> öğelerinden faydalanıyoruz.

Öğrenelim;

  • <div> , <ul>, <li> blok tipi elementlerdir. Kapsayıcısına göre tüm satıra konumlanırlar.
  • <a> Satır içi (inline) elementtir. Sahip olduğu içeriği kadar satır içinde kalırlar.
  • float CSS özelliği uygulanan öğeyi sayfa akışından çıkarır. Kullanımından sonra akışı tekrar normal hale getirilmelidir.
  • <ul>,<li> öğelerinin HTML standartlarından kaynaklanan margin ve padding değerleri vardır.
Not : CSS bildirimlerinde yer alan açıklamaları dikkatle okuyunuz.

İkinci testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

5. Adım : İçerik

Ana içerik, sitenizin en büyük ve en önemli parçasıdır. Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerin biridir.

  • 1 sütun (genellikle mobil tarayıcılarda kullanılır)
  • 2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
  • 3 sütunlu düzen (yalnızca masa üstlerinde kullanılır)

Sol ve sağ sütunların genişlikleri ortaktır. Böylece alanın büyük kısmı ana içerik (orta) için ayrılmıştır. Yan içerik (varsa) genellikle, alternatif navigasyon olarak veya ana içerikle ilgili bilgileri belirtmek için  kullanılır. Genişlikleri istediğiniz gibi değiştirebilirsiniz, yalnızca toplamda % 100‘e kadar ekleme yapmanız gerektiğini unutmayın.

İlk olarak içerik kısımlarına (sol, orta, sag) örnek başlık (h1) ve paragraf (p) ekleyelim. HTML belgesinde “.icerik” bölümünü aşağıdaki gibi düzenleyiniz.

HTML

CSS

Tüm sütunlar float:left; bildirimi ile sola hizalanırken, bozulan sayfa akışı icerik:after seçicisi ile tekrar akışına sokulmaktadır. :after sözde elementi icerik sınıfı olan öğenin hemen sonrasını ifade etmektedir. Her bir sütun genişliği mutlaka belirtilmelidir.

Sütünlar için belirtilen genişliğin sayfa üzerinde tam olarak aynı değerde hesaplanabilmesi için box-sizing özelliğinden faydalanılmalıdır. Bu sebepten CSS kodlarınızın arasına tüm öğeler için uygulanmasını isteyeceğimiz aşağıdaki bildirimi ekleyin.

Üçüncü kez testimizi yapalım ve şimdiye kadar olan tasarım sürecimizin ne durumda olduğunu görelim.

6.Adım : Alt

Alt bilgi, sayfanızın altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir.

Öncelikli olarak HTML belgemize gidelim ve “.alt” bölüm için küçük bir paragraf yerleştirelim.

HTML

CSS

Alt bilgi için gereken CSS bildirimlerini aşağıdaki gibi uygulayın.

Şimdi web sayfa tasarımını dördüncü ve son kez test edelim,

Tüm tasarım tamamlanmış durumda. Aşağıda web sayfasının tüm kodlarını bir arada bulabilirsiniz.

HTML

CSS (stil.css)

 

 

Yorum Yap