CSS Sayfa Düzeni

Bu makale serisinde sayfa düzenine ve sayfadaki öğelerin birbirine göre nasıl konumlandırılacağına bakacağız. Gerekli ön koşulları bildiğimizi var sayıyoruz, bu nedenle CSS düzeninin derinliklerine dalacağız. Neler ile ilgileneceğiz? Farklı ekran ayarları, konumlandırma, flexbox ve CSS ızgarası gibi modern düzen araçları ve hala bilmek isteyebileceğiniz bazı eski teknikler.

Önkoşullar

Bu seriye başlatmadan önce şunları biliyor olmalısınız:

  1. HTML‘de temel aşinalığa sahip olmak.
  2. CSS temellerini bilmek.

Not: Kendi dosyalarınızı oluşturma yeteneğine sahip olmadığınız bir bilgisayar/tablet/başka bir cihaz üzerinde çalışıyorsanız, kod örneklerini (çoğu) aşağıdaki gibi çevrimiçi bir kodlama programında deneyebilirsiniz: JSBin veya Glitch.

Rehber

Bu makaleler, CSS’de bulunan temel düzen araçları ve teknikleri hakkında yol gösterici olacak. Derslerin sonunda, bir web sayfası düzen yöntemleri hakkındaki anlayışınızı kontrol etmenize yardımcı olacak bir değerlendirme de bulabilirsiniz.

CSS düzenine giriş: Bu makalede, CSS düzen özellikleri (farklı display değerleri gibi) özetlenecek ve bu modül boyunca ele alacağımız bazı kavramlar tanıtılacaktır.

Normal akış: Web sayfalarındaki öğeler kendilerini normal bir akışa göre ortaya koyarlar – bunu değiştirmek için bir şey yapmadığımız durumlarda tabii. Bu makalede, normal akışın temelleri ve nasıl değiştireceğini öğrenmek için bir temel oluşturacağız.

Flexbox: Flexbox, öğeleri satırlarda veya sütunlarda düzenlemek için kullanılan tek boyutlu bir düzen yöntemidir. Öğeler ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Bu makalede tüm temeller açıklanmaktadır.

Izgaralar (Grid): CSS Izgara Düzeni iki boyutlu bir düzen sistemidir. İçeriği satırlara ve sütunlara koymanıza olanak tanır ve karmaşık düzenler oluşturmayı kolaylaştıran birçok özelliğe sahiptir. Bu makale, sayfa düzenine başlamak için bilmeniz gereken her şeyi verecektir.

Float: Başlangıçta metin blokları içinde kayan resimler için oluşturulan float özelliği, web sayfalarında birden çok sütun düzeni oluşturmak için en sık kullanılan araçlardan biri haline geldi. Flexbox ve Grid’in ortaya çıkmasıyla, bu makalede açıklandığı gibi, şimdi orijinal amacına geri döndü.

Konumlandırma: Konumlandırma, öğeleri normal belge düzeni akışından çıkarmanıza ve farklı davranmalarını sağlamanıza olanak tanır, örneğin, üst üste oturtabiliriz veya tarayıcı görünüm penceresinin içinde her zaman aynı yerde tutabiliriz. Bu makalede, farklı position değerleri ve bunların nasıl kullanılacağı açıklanmaktadır.

Çok sütunlu düzen: Çok sütunlu düzen belirtimi, bir gazetede görebileceğiniz gibi içeriği sütunlara yerleştirme yöntemi sunar. Bu makalede, bu özelliğin nasıl kullanılacağı açıklanmaktadır.

Duyarlı tasarım: Web özellikli cihazlarda farklı ekran boyutlarının ortaya çıkmasıyla, duyarlı web tasarımı (RWD, Responsive Web Design) kavramı da gelişti. Duyarlı tasarım web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklere vb. ayarlar. Bu makalede, duyarlı tasarımda ustalaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.

Medya sorguları için başlangıç kılavuzu – CSS Media Query: Tarayıcı ve aygıt ortamı için belirttiğiniz bir kural oluduğunda CSS’yi uygulamaya yarar – örneğin, görünüm penceresi 480 pikselden daha genişse uygulansın. Medya sorguları, görünüm penceresinin boyutuna bağlı olarak farklı düzenler oluşturmanıza izin verdiğinden duyarlı web tasarımının önemli bir parçasıdır. Ayrıca, sitenizin üzerinde çalıştığı ortamın diğer özelliklerini algılamak için de kullanılabilirler, örneğin kullanıcının fare yerine dokunmatik ekran kullanıp kullanmadığı. Bu makalede, önce medya sorgularında kullanılan sözdizimi hakkında bilgi edineceksiniz ve sonra bunları basit bir tasarımın nasıl yanıt verebileceğini gösteren etkileşimli bir örnekte kullanacaksınız.

Eski düzen yöntemleri: Izgara sistemleri CSS düzenlerinde kullanılan çok yaygın bir özelliktir. CSS Izgara Düzeninden önce, floats veya diğer düzen özellikleri kullanılarak uygulamalar geliştirilirdi. Önce düzeninizi belirli sayıda sütun (örneğin, 4, 6 veya 12) olarak hayal edersiniz ve ardından içerik sütunlarınızı bu hayali sütunların içine sığdırırsınız. Bu makalede, daha eski bir projede çalışıyorsanız bunların nasıl kullanıldığını anlamanız için bu eski yöntemlerin nasıl çalıştığını inceleyeceğiz.

Eski tarayıcıları destekleme: Bu makale serilerinde oluşturacağınız tasarımlarınız için sayfa düzeni yöntemleri olarak Flexbox ve Grid kullanmanızı öneririz. Ancak, ziyaretçilerinizin eski tarayıcılar kullanıyor olması veya bu yöntemleri desteklemeyen tarayıcılar kullanması kaçınılmazdır. Web’de durum her zaman böyle olacaktır – yeni özellikler geliştirildikçe, farklı tarayıcılar farklı özelliklere öncelik verecektir. Bu makalede, eski teknoloji kullanıcılarını dışlamadan modern web tekniklerinin nasıl kullanılacağı açıklanacak.

Değerlendirme: Temel düzen anlayışı: Bir web sayfası düzenleyarak farklı düzen yöntemleri hakkındaki bilginizi test etmek için bir değerlendirme.

Ayrıca:

Pratik konumlandırma örnekleri: Bu makalede, konumlandırma ile ne gibi şeyler yapabileceğinizi göstermek için bazı gerçek örneklerin nasıl oluşturulacağına bakacağız.

“CSS Sayfa Düzeni” hakkında bir yorum.

Bir yorum yapın

E-posta hesabınız yayımlanmayacak.

To top