Mozaik HTML Şablonları

Duyarlı Mozaik HTML Şablonları

Bir mozaik HTML şablonu, bir düzenleyicide açabileceğiniz dosyalar halinde gelir: bir sayfa, bir stil sayfası ve farklı genişliklerdeki bölümlere önceden yerleştirilmiş görseller. Demo ekran görüntüsü bu karoların bir düzenini gösterir. Bundan sonra yapacağınız her şey bunların arkasındaki kodda gerçekleşir; bu nedenle önizlemeden önce kaynak kodları açmaya değer.

Bu çalışmanın büyük kısmı içerik düzeyinde kalır. Fotoğraflar değiştirilir, başlık yazıları yeniden yazılır ve galeri demonun ötesine geçtiğinde bir kart çoğaltılır.

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

Karo kompozisyonları çok farklı şekillerde inşa edilir ve aradaki fark bir öğe daha eklediğiniz anda kendini gösterir. Sütun ve satır yayılımlarıyla bir arada tutulan bir ızgara, bir kart kopyalandığında sorunsuz çalışmayı sürdürür. Sabit uzaklıklarla tutturulmuş bir düzen ise her defasında manuel düzeltme gerektirir.

Bunun gibi bölümler mozaik bir sayfada genellikle ağırlığın çoğunu taşır:

• üzerine kısa bir başlık yerleştirilmiş geniş bir görsel karosu
• bir galeri veya kategori akışı boyunca tekrarlanan bir kart
• bir hizmet, not veya alıntı için metin karosu
• görsel kümeyi kapatan bir harekete geçirici mesaj karosu

Hiçbir şablon bunların tümünü varsayılan olarak sunmaz; bu yüzden demoyu açmak, gerçekten yeniden kullanılabilir olanları saymak ve gerisini yok saymak işinizi kolaylaştırır.

Dar Ekranlarda Kaynak Sıralaması

Bir telefon kompozisyonu tek bir sütunda görüntüler ve bu sütun doğrudan dosyanızın sırasını izler. Dizüstü bilgisayarda sağ üst köşede yer alan bir karo, manşet projesini taşımasına rağmen telefonda dördüncü sıraya gerileyebilir.

Bunu görmenin hızlı bir yolu vardır. Tarayıcıda stilleri kapatın ve sayfayı düz metin olarak okuyun. Elde ettiğiniz sonuç, bir ziyaretçinin başparmağıyla kaydırdığı sıraya oldukça yakındır. Önemli bir şey orada aşağılara gömülmüşse ilgili bölümü HTML içinde taşıyın. Yeni bir medya sorgusu eklemek sorunu yalnızca gizler.

Karoları Bozmadan Örnek Kodu Düzenleme

Demo içeriğe yedek parça muamelesi yapın. Zaten ihtiyacınız olan şekilde davranan bir karoyu kopyalayın, galerinin devam ettiği yere yapıştırın, ardından içindeki görseli ve metni değiştirin. Sınıf adlarını yazarın belirlediği şekilde bırakın; projenin ortasında bu kuralı değiştirmeye çalışmak kurala uymaktan daha fazla maliyet yaratır.

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