Kategorie

Opakující se produkty, příspěvky, projekty a položky v katalogu potřebují předvídatelnou strukturu, která zůstává čitelná i s růstem seznamu. Šablony smyček HTML poskytují opakovaně použitelné sekce značek, které se přizpůsobí rozvržení pro stolní počítače i mobilní zařízení.

Seřadit:

Více HTML Šablony z kategorie Architektura a stavitelství

Other Architektura a stavitelství HTML Šablony

Šablony HTML smyček pro opakovaný obsah

Šablona HTML smyček definuje jednu opakující se jednotku a naplní ji dynamickým obsahem z příspěvků, produktů nebo záznamů projektů. Vyberete si hotový blok položky, přizpůsobíte ho publikovaným záznamům a smyčka nakreslí toto označení pro každý záznam. Nic se ručně neduplikuje, takže jeden blok určuje, jak se bude číst celá mřížka.

Kde končí šablona a začíná obsah

Obvyklým zmatkem u smyček je záměna šablony za položku. Šablona obsahuje prázdné sloty: často oblast obrázku, nadpis a řádek metadat. Upravte název produktu a změní se jeden záznam; upravte označení a celá mřížka se najednou posune.

Toto rozdělení ponechává smyčku se třemi pohyblivými částmi:

Označení položky, které určuje hierarchii a pořadí čtení;
Dynamická pole, která do daného označení vkládají hodnoty;
Vnější mřížka, která rozhoduje o tom, kolik položek bude umístěno vedle sebe.

Tyto tři části rozhodují o tom, zda je hotová šablona použitelná. Blok položky se dvěma poli nebude obsahovat položky, které jich obsahují pět.

Sady polí se liší v jednotlivých smyčkách

Ne každá smyčka obsahuje obrázek, název a popis. Sada polí se řídí typem obsahu a určuje, čeho si čtenář všimne jako první.

Tři známé případy ukazují, jak moc se tyto sady od sebe liší:

Smyčka příspěvku spojuje datum, autora a výňatek s nadpisem, takže výňatek ho nikdy nepřeváží;
Smyčka událostí začíná datem a místem, takže časový blok má větší váhu než obrázek;
Smyčka adresáře obsahuje kategorii, adresu a kontaktní údaje s tlačítkem akce vedle nich.

Všechny tři opakují jednu kostru, ale váha uvnitř se mění a přizpůsobení šablony této váze představuje většinu výběrové práce. Přizpůsobení rozvržení příspěvku pro záznamy událostí znamená přeskupení polí.

Zachování pořadí napříč velikostmi obrazovky

Opakující se bloky se dobře čití na širokém monitoru, ale po složení sloupců se hůře čtou. Důležité je tedy, zda záznam stále drží pohromadě: obrázek nad vlastním názvem, cena vedle vlastního jména, akce připojená k vlastní položce.

Ukázkový obsah to zakrývá, protože demo položky mají obvykle stejnou výšku. Problém nastává, když jeden název projektu má tři řádky a další téměř žádný popis. Před publikováním ve velkém měřítku se vyplatí načíst nejdelší a nejkratší položku do vybrané šablony.

V Nicepage umisťuje element Grid opakované položky do responzivních buněk; jeho ovládací prvky jsou uvedeny v průvodci responzivním webovým designem.

Šablona HTML smyčky si zaslouží své místo, když struktura, čitelnost a pořadí dat obstojí napříč libovolným počtem záznamů a libovolnou šířkou obrazovky.