Mozaika HTML Šablony

Responzivní mozaikové HTML šablony

Mozaiková HTML šablona je dodávána jako soubory, které můžete otevřít v editoru: stránka, stylový list a obrázky, které se již nacházejí v sekcích různých šířek. Snímek obrazovky z ukázky ukazuje jedno uspořádání těchto dlaždic. Vše, co děláte poté, se děje v kódu za nimi, takže stojí za to otevřít zdrojový kód před náhledem.

Většina této práce zůstává na úrovni obsahu. Fotografie se nahrazují, popisky se přepisují a karta se duplikuje, jakmile galerie překročí ukázku.

Značky za nerovnými obrazovými bloky

Kompozice dlaždic se vytvářejí velmi odlišnými způsoby a rozdíl se projeví v okamžiku, kdy přidáte další položku. Mřížka držená pohromadě rozpětím sloupců a řádků funguje i při kopírování karty. Rozvržení připnuté s pevnými odsazeními vyžaduje pokaždé ruční opravu.

Sekce, jako jsou tyto, obvykle nesou na mozaikové stránce největší váhu:

• široká obrázková dlaždice s krátkým názvem umístěným nad ní
• karta, která se opakuje v galerii nebo kanálu kategorií
• textová dlaždice pro službu, poznámku nebo citát
• dlaždice s výzvou k akci, která uzavírá vizuální cluster

Žádná šablona je ve výchozím nastavení nedodává všechny, takže je užitečné otevřít demo, spočítat, co je skutečně opakovaně použitelné, a zbytek ignorovat.

Pořadí zdroje na úzkých obrazovkách

Telefon zobrazuje kompozici v jednom sloupci a tento sloupec sleduje pořadí vašeho souboru. Dlaždice v pravém horním rohu notebooku se může na telefonu umístit na čtvrtém místě a přitom stále nést projekt titulku.

Existuje rychlý způsob, jak to vidět. Vypněte styly v prohlížeči a čtěte stránku jako prostý text. Získáte tak sekvenci blízkou sekvenci, kterou návštěvník posouvá palcem. Pokud je tam něco důležitého skryto, přesuňte sekci do HTML. Jeden další mediální dotaz by ji jen skryl.

Úprava ukázkového kódu bez poškození dlaždic

S demo obsahem zacházejte jako s náhradními díly. Zkopírujte dlaždici, která se již chová tak, jak potřebujete, vložte ji tam, kde galerie pokračuje, a poté změňte obrázek a text uvnitř. Názvy tříd zůstanou tak, jak je autor zvolil, a hádání se s touto konvencí v polovině projektu stojí více než její dodržování.

Poté zúžte okno prohlížeče, dokud se mozaika nesbalí do jednoho sloupce, a podívejte se, na který projekt návštěvník narazí jako první. Pokud je to ten, který byste ukázali klientovi, šablona je připravena pro váš obsah.