Tableless Layouts Yeni Tasarım Sınırlarını Açtı
Düzen için tabloları kullanmamanın birçok nedeni vardır. İnsanların bunları kullanmaya devam etmek için kullandıkları en sık nedenlerden biri, CSS ile yerleşim yapmanın zor olmasıdır. CSS betikleme bir öğrenme eğrisi gerektirse de, CSS düzenini nasıl yapacağınızı anladığınızda, ne kadar kolay olabildiğine şaşırabilirsiniz. Ve bir kez öğrendiğinizde, insanların CSS kullanmamaları için verdikleri en yaygın ikinci nedenden bahsedeceksiniz - “Tablo yazmak daha hızlıdır.” Daha hızlıdır çünkü tabloları biliyorsunuzdur, fakat CSS'yi öğrendikten sonra, aynı zamanda Bununla.
CSS Konumlandırmasının Tarayıcı Desteği
CSS konumlandırma tüm modern tarayıcılarda iyi desteklenir. Netscape 4 veya Internet Explorer 4 için bir site oluşturmuyorsanız, okuyucularınızın CSS konumlandırılmış Web sayfalarınızı görüntülerken herhangi bir sorun yaşamaması gerekir.
Sayfa Oluşturmayı Yeniden Düşünmek
Tabloları kullanarak bir site oluşturduğunuzda, tablo biçiminde düşünmeniz gerekir. Diğer bir deyişle, hücreler, satırlar ve sütunlar açısından düşünürsünüz. Web sayfalarınız bu yaklaşımı yansıtacaktır. Bir CSS konumlandırma tasarımına geçtiğinizde, sayfalarınızı içerik açısından düşünmeye başlayacaksınız çünkü içerik, diğer içeriğin üzerine yerleştirilmiş olsa bile, düzende istediğiniz herhangi bir yere yerleştirilebilir.
Farklı web sitelerinin farklı yapıları vardır. Etkili bir sayfa oluşturmak için, içeriği atamadan önce verilen herhangi bir sayfanın yapısını değerlendirin. Bir örnek sayfa beş farklı bölüm içerebilir:
- Üstbilgi Afiş reklamına, site ismine, gezinti linklerine, makale başlığına ve birkaç başka şeye ev sahipliği yapar.
- Sağ sütun . Bu, arama kutusunun, reklamların, video kutularının ve alışveriş alanlarının bulunduğu sayfanın sağ tarafıdır.
- İçerik Bir makalenin metni, blog yazısı veya alışveriş sepeti - sayfanın et ve patatesleri.
- Satır içi reklamlar . Reklam içeriğindeki satır içi.
- Altbilgi . Alt gezinme, yazar bilgileri, telif hakkı bilgileri, alt banner reklamlar ve ilgili bağlantılar.
Bu beş öğeyi bir tabloya yerleştirmek yerine, içeriğin farklı bölümlerini tanımlamak için HTML5 bölüm öğelerini kullanın ve ardından içerik öğelerini sayfaya yerleştirmek için CSS konumlandırmasını kullanın.
İçerik Bölümlerini Tanımlama
Sitenizin farklı içerik alanlarını tanımladıktan sonra, bunları HTML'nize yazmanız gerekir. Genel olarak bölümlerinizi herhangi bir sırada yerleştirebilirsiniz, ancak sayfanızın en önemli kısımlarını yerleştirmek iyi bir fikirdir. Bu yaklaşım, arama motoru optimizasyonu ile de yardımcı olacaktır.
Konumlandırmayı göstermek için, üç sütunlu, ancak üstbilgi veya altbilgi olmayan bir sayfa düşünün. İstediğiniz herhangi bir düzen oluşturmak için konumlandırmayı kullanabilirsiniz.
Üç sütunlu bir düzen için üç bölüm tanımlayın: sol sütun, sağ sütun ve içerik.
Bu bölümler, içerik için ARTICLE öğesi ve iki sütun için iki SECTION öğesi kullanılarak başlatılacaktır. Her şeyin onu tanımlayan bir özelliği de olacaktır. Id niteliğini kullandığınızda, her kimlik için benzersiz bir ad atmanız gerekir.
İçeriği Konumlandırma
CSS kullanarak, ID'd öğelerinizin konumunu tanımlayın. Konum bilgilerinizi aşağıdaki gibi bir stil çağrısında saklayın:
#content {
}
Bu öğelerdeki içerik, mevcut konumun veya sayfanın genişliğinin yüzde 100'ü kadar olabileceği kadar yer kaplar. Bir bölümün konumunu sabit bir genişliğe zorlamadan etkilemek için dolguyu veya kenar boşluğu özelliklerini değiştirin.
Bu düzen için, iki sütunu sabit genişliklere ayarlayın ve ardından mutlak konumlarını ayarlayın, böylece HTML'de bulundukları yere göre etkilenmezler.
#sol sütun {
pozisyon: mutlak;
sol: 0;
genişlik: 150px;
kenar boşluğu: 10px;
kenar boşluğu: 20px;
renk: # 000000;
dolgu malzemesi: 3px;
}
#Sağ sütun {
pozisyon: mutlak;
sol:% 80;
üst: 20px;
genişlik: 140px;
dolgu-sol: 10px;
z-endeksi: 3;
renk: # 000000;
dolgu malzemesi: 3px;
}
Daha sonra içerik alanı için, sağ ve soldaki kenar boşluklarını ayarlayın, böylece içerik iki dış sütunla çakışmaz.
#content {
üst: 0px;
kenar boşluğu: 0px% 25 0 165 piksel;
dolgu malzemesi: 3px;
renk: # 000000;
}
Sayfanızı bir HTML tablosu yerine CSS kullanarak tanımlamak, biraz daha teknik beceri gerektirir, ancak geri ödeme daha esnek ve duyarlı tasarımlardan ve sayfanızda yapısal ayarlamalar yapmanın daha kolay olmasından kaynaklanır.