Lus HTML-sjablonen
Herhaalde producten, berichten, projecten en catalogusitems hebben een voorspelbare structuur nodig die leesbaar blijft naarmate de lijst groeit. Loop-HTML-sjablonen bieden herbruikbare markup-secties die zich aanpassen aan desktop- en mobiele lay-outs.
Meer HTML-sjablonen uit de Architectuur en bouwen categorie
-
Gratis software voor het bouwen van websitesDownloaden
-
Pas elke sjabloon aanDownloaden
andere Architectuur en bouwen HTML-sjablonen
Loop-HTML-sjablonen voor herhaalde inhoud
Een loop-HTML-sjabloon definieert één herhaalde eenheid en vult deze met dynamische inhoud uit berichten, producten of projectrecords. U kiest een kant-en-klaar itemblok, past het aan de gepubliceerde items aan en de loop tekent die markup voor elk record. Niets wordt handmatig gedupliceerd, zodat één enkel blok bepaalt hoe het hele raster wordt gelezen.
Waar het sjabloon eindigt en de inhoud begint
De gebruikelijke verwarring bij loops is dat het sjabloon wordt aangezien voor het item. Een sjabloon bevat lege posities: vaak een afbeeldingsgebied, een koptekst en een regel met metagegevens. Wijzigt u een productnaam, dan verandert één record; wijzigt u de markup, dan verschuift het hele raster in één keer.
Door die splitsing heeft de loop drie bewegende delen:
- De item-markup, die de hiërarchie en de leesvolgorde vastlegt;
- De dynamische velden, die waarden in die markup laden;
- Het buitenste raster, dat bepaalt hoeveel items er naast elkaar staan.
Die drie delen bepalen of een kant-en-klaar sjabloon bruikbaar is. Een itemblok met twee velden is niet geschikt voor vermeldingen die er vijf bevatten.
Veldensets verschillen van loop tot loop
Niet elke loop bevat een afbeelding, een titel en een beschrijving. De veldenset volgt het inhoudstype en bepaalt wat een lezer als eerste opvalt.
Drie bekende voorbeelden laten zien hoever die sets uiteenlopen:
- Een berichten-loop koppelt datum, auteur en samenvatting aan de koptekst, zodat de samenvatting deze nooit overheerst;
- Een evenementen-loop begint met datum en locatie, zodat het tijdsblok zwaarder weegt dan de afbeelding;
- Een bedrijvengids-loop bevat categorie, adres en contactgegevens, met de actieknop daarnaast.
Alle drie herhalen ze hetzelfde skelet, maar het gewicht daarbinnen verschuift. Het afstemmen van een sjabloon op dat gewicht vormt het grootste deel van het selectiewerk. Het aanpassen van een berichtenlay-out voor evenementrecords vereist het herschikken van velden.
De volgorde intact houden op verschillende schermformaten
Herhaalde blokken lezen prettig op een breed beeldscherm, maar worden moeilijker leesbaar zodra de kolommen samenvouwen. Wat dan telt, is of een record nog steeds een eenheid vormt: de afbeelding boven de bijbehorende titel, de prijs naast de bijbehorende naam, de actie gekoppeld aan de bijbehorende invoer.
Voorbeeldinhoud verbergt dit, omdat demo-items meestal even hoog zijn. Problemen ontstaan wanneer de ene projecttitel drie regels beslaat en de volgende bijna geen beschrijving heeft. Het is de moeite waard om uw langste en kortste vermeldingen in een gekozen sjabloon te laden voordat u op grote schaal publiceert.
In Nicepage plaatst het Raster-element herhaalde items in responsieve cellen; de gids voor responsief webdesign behandelt de instellingen hiervan.
Een loop-HTML-sjabloon bewijst zijn waarde wanneer structuur, leesbaarheid en gegevensvolgorde behouden blijven over elk aantal records en elke schermbreedte.

















































