Mozaik HTML Şablonları

Duyarlı Mozaik HTML Şablonları

Mozaik HTML şablonu, bir düzenleyicide açabileceğiniz dosyalar olarak gelir: bir sayfa, bir stil sayfası ve farklı genişlikteki bölümlerin içine yerleştirilmiş resimler. Demo ekran görüntüsü, bu döşemelerin bir düzenlemesini göstermektedir. Bundan sonra yaptığınız her şey, arkalarındaki kodda gerçekleşir, bu nedenle önizlemeden önce kaynak kodunu açmakta fayda var.

Bu işin çoğu içerik düzeyinde kalır. Fotoğraflar değiştirilir, alt yazılar yeniden yazılır ve galeri demoyu aştığında bir kart çoğaltılır.

Düzensiz Görüntü Bloklarının Arkasındaki İşaretleme

Döşeme kompozisyonları çok farklı şekillerde oluşturulur ve fark, bir öğe daha eklediğiniz anda ortaya çıkar. Sütun ve satır aralıklarıyla bir arada tutulan bir ızgara, bir kart kopyalandığında çalışmaya devam eder. Sabit ofsetlerle sabitlenmiş bir düzen, her seferinde manuel onarım gerektirir.

Mozaik sayfalarda genellikle en çok ağırlığı taşıyan bölümler şunlardır:

• Üzerine kısa bir başlık yerleştirilmiş geniş bir resim kutusu
• Bir galeri veya kategori akışında tekrarlanan bir kart
• Bir hizmet, not veya alıntı için metin kutusu
• Görsel kümeyi kapatan bir eylem çağrısı kutusu

Hiçbir şablon bunların hepsini varsayılan olarak içermez, bu nedenle demoyu açmak, gerçekten yeniden kullanılabilir olanları saymak ve geri kalanını göz ardı etmek faydalı olacaktır.

Dar Ekranlarda Kaynak Sırası

Bir telefon, kompozisyonu tek bir sütunda görüntüler ve bu sütun dosyanızın sırasını takip eder. Bir dizüstü bilgisayarın sağ üst köşesindeki bir kutucuk, başlık projesini taşırken bir telefonda dördüncü sırada yer alabilir.

Bunu görmenin hızlı bir yolu var. Tarayıcıda stilleri kapatın ve sayfayı düz metin olarak okuyun. Elde ettiğiniz şey, bir ziyaretçinin başparmağıyla kaydırdığı sıraya yakındır. Önemli bir şey orada gizlenmişse, bölümü HTML içine taşıyın. Bir medya sorgusu daha eklemek onu sadece gizleyecektir.

Örnek Kodu Karoları Bozmadan Düzenleme

Demo içeriğini yedek parçalar olarak ele alın. İhtiyacınız olan şekilde davranan bir karoyu kopyalayın, galerinin devam ettiği yere yapıştırın, ardından içindeki resmi ve metni değiştirin. Sınıf adları yazarın seçtiği gibi kalır ve projenin ortasında bu kurala itiraz etmek, ona uymaktan daha pahalıya mal olur.

Ardından, mozaik tek bir sütuna çökene kadar tarayıcı penceresini daraltın ve ziyaretçinin ilk olarak hangi projeyle karşılaştığını görün. Eğer bir müşteriye göstereceğiniz proje ise, şablon içeriğiniz için hazırdır.