'de çalışan insanlar web tasarımı endüstri, ön uç web sitesi geliştirmeyi üç ayaklı bir tabureye benzetiyor. Bu üç ayak - web geliştirmenin üç katmanı - bir sitenin yapısını, stilini ve davranışlarını içerir.
Neden Katmanları Ayırmalısınız?
Bir web sayfası oluştururken, yapısı HTML'nize indirgenmelidir, CSS'ye görsel stiller, ve komut dosyalarına davranışlar. Katmanları ayırmanın faydalarından bazıları şunlardır:
- Paylaşılan kaynaklar:Harici bir CSS veya JavaScript dosyası yazdığınızda, sitedeki herhangi bir sayfa o dosyayı kullanabilir. Bu dosyada bir değişiklik yapmanız gerekirse, belki bazı tipografik stilleri güncelle web sitesinde, bu stil sayfasını kullanan her sayfa değişikliği alacaktır. Büyük bir web sitesi için zahmetli bir girişim olabilecek web sitesinin her sayfasını ayrı ayrı düzenlemeye gerek yoktur.
- Daha hızlı indirmeler:Komut dosyası veya stil sayfası müşteriniz tarafından ilk kez indirildikten sonra web tarayıcısı tarafından önbelleğe alınır. Çünkü bu paylaşılan kaynaklar artık tarayıcı ön belleği, tarayıcıda istenen diğer sayfalar daha hızlı yüklenir, bu da genel sayfa hızını ve performansını artırır.
- Çok kişilik ekipler:Bir web sitesinde aynı anda birden fazla kişi çalışıyorsa, herkesin web sitesinde çalıştığından emin olmak için dosyaların teslim alınmasına ve alınmasına izin veren sürüm kontrol sistemlerini kullanın. en son sürümler. Stiller ve davranışlar yapı belgeleriyle iç içeyse, bu işlemi yapmak çok daha zordur.
- SEO:Stil ve yapının net bir şekilde ayrıldığını gösteren bir sitenin arama motorları için daha iyi performans göstermesi muhtemeldir çünkü bu içeriği daha etkili bir şekilde tarayabilir ve görsel stil ve davranışta çıkmaza girmeden sayfayı anlayabilir bilgi.
- Ulaşılabilirlik:Harici stil sayfaları ve komut dosyaları, insanlar ve tarayıcılar için daha erişilebilir. gibi yazılımlar ekran okuyucular zaten kullanamayacakları stiller ile uğraşmadan yapı katmanındaki içeriği daha kolay işleyebilir.
- Geriye dönük uyumluluk:Ayrı geliştirme katmanlarıyla tasarlanmış bir sitenin geriye dönük uyumlu olma olasılığı daha yüksektir çünkü Belirli CSS stillerini kullanamayan veya JavaScript devre dışı bırakılmış tarayıcılar ve cihazlar, HTML. Ardından, onları destekleyen tarayıcıların özellikleriyle web sitenizi aşamalı olarak geliştirebilirsiniz.
HTML: Yapı Katmanı
Bir web sayfasının yapısı veya içerik katmanı, temel HTML o sayfanın kodu. Bir evin çerçevesi, evin geri kalanının üzerine inşa edildiği güçlü bir temel oluşturduğu gibi, sağlam bir HTML temeli, bir web sitesinin oluşturulabileceği bir platform oluşturur.
Yapı katmanı, müşterilerinizin okumak veya bakmak istediği tüm içeriği depoladığınız yerdir. HTML yapısı, metin ve resimlerden oluşabilir ve aşağıdakileri içerir: köprüler ziyaretçilerin web sitesinde gezinmek için kullanacakları Bu bilgiler standartlara uygun olarak kodlanmıştır. HTML5 ve metin, resim ve multimedya (video, ses vb.) içerebilir.
Bir sitenin içeriğinin her yönü yapı katmanında temsil edilmelidir. Bu ayrım, JavaScript'i kapatmış veya CSS'yi görüntüleyemeyen müşterilerin tüm işlevleri olmasa da web sitesinin tamamına erişmesine olanak tanır.
CSS: Stiller Katmanı
Bu katman, yapılandırılmış bir HTML belgesinin bir sitenin ziyaretçilerine nasıl görüneceğini belirler ve şu şekilde tanımlanır: CSS (Basamaklı Stil Şablonu). Bu dosyalar, belgenin bir web tarayıcısında nasıl görüntülenmesi gerektiğine ilişkin biçimsel talimatlar içerir. Stil katmanı genellikle şunları içerir: medya sorguları bir sitenin görünümünü değiştiren ekran boyutu ve cihaz.
Bir web sitesi için tüm görsel stiller, harici bir stil sayfasında bulunmalıdır. Birden çok stil sayfası kullanabilirsiniz, ancak her CSS dosyasının getirilmesi için bir HTTP isteği gerekir. site performansını etkileyen.
JavaScript: Davranış Katmanı
Davranış katmanı, bir web sitesini etkileşimli hale getirerek sayfanın kullanıcı eylemlerine yanıt vermesine veya bir dizi koşula göre değişmesine olanak tanır. JavaScript, davranış katmanı için en yaygın kullanılan dildir, ancak CGI ve PHP de çok sık kullanılmaktadır.
Geliştiriciler davranış katmanına atıfta bulunduklarında, çoğu doğrudan web tarayıcısında etkinleştirilen katman anlamına gelir. Belge Nesne Modeli ile doğrudan etkileşim kurmak için bu katmanı kullanın. Geçerli HTML yazma davranış katmanındaki DOM etkileşimleri için önemlidir. Davranış katmanını oluşturduğunuzda, hızı ve performansı optimize etmek için tıpkı CSS'de olduğu gibi harici komut dosyaları kullanmalısınız.