Mozaik HTML Sablonok

Reszponzív mozaik HTML-sablonok

Egy mozaik HTML-sablon szerkesztőben megnyitható fájlokból áll: egy oldalból, egy stíluslapból, valamint képekből, amelyek már különböző szélességű szakaszokba vannak rendezve. A bemutató képernyőképe ezen csempék egyik lehetséges elrendezését szemlélteti. Minden további lépés a mögöttük rejlő kódban történik, így a forrásfájlokat még az előnézet megtekintése előtt érdemes megnyitni.

A munka nagy része a tartalom szintjén zajlik. A képeket kicseréli, a feliratokat átírja, a kártyákat pedig duplikálja, amint a galéria túlnövi a bemutató kereteit.

Jelölőkód az egyenetlen képtömbök mögött

A csempés kompozíciókat nagyon eltérő módokon építik fel, és a különbség azonnal láthatóvá válik, amint hozzáad még egy elemet. Az oszlop- és sorátnyúlásokkal összefogott rács akkor is működőképes marad, ha lemásol egy kártyát. A rögzített eltolásokkal kitámasztott elrendezés viszont minden egyes alkalommal kézi javítást igényel.

A mozaikoldalakon általában az alábbiakhoz hasonló szakaszok hordozzák a legnagyobb súlyt:

• egy széles képcsempe egy fölé helyezett rövid címmel
• egy galériában vagy kategória-hírfolyamban ismétlődő kártya
• egy szöveges csempe szolgáltatás, megjegyzés vagy idézet bemutatására
• egy cselekvésre ösztönző csempe, amely lezárja a vizuális egységet

Egyetlen sablon sem tartalmazza alapértelmezés szerint az összeset, ezért érdemes megnyitni a bemutatót, számba venni a valóban újrahasznosítható elemeket, a többit pedig figyelmen kívül hagyni.

Forráskód-sorrend keskeny kijelzőkön

Egy mobiltelefon egyetlen oszlopban jeleníti meg a kompozíciót, és ez az oszlop szigorúan a forrásfájl sorrendjét követi. Egy laptopon a jobb felső sarokban elhelyezkedő csempe a telefonon a negyedik helyre csúszhat vissza, még akkor is, ha a legfontosabb projektet tartalmazza.

Ennek ellenőrzésére van egy gyors módszer. Kapcsolja ki a stílusokat a böngészőben, és olvassa el az oldalt egyszerű szövegként. Amit így lát, az szinte pontosan megegyezik azzal a sorrenddel, amelyet a látogató a hüvelykujjával végiggörget. Ha valami lényeges elem túl mélyre került, helyezze át a szakaszt a HTML-kódban. Egy újabb media query hozzáadása csupán elfedné a problémát.

Mintakód szerkesztése a csempék elcsúszása nélkül

Tekintse a mintatartalmat cserealkatrészeknek. Másoljon le egy olyan csempét, amely már úgy viselkedik, ahogyan szeretné, illessze be oda, ahol a galéria folytatódik, majd cserélje ki a benne lévő képet és szöveget. Hagyja meg az osztályneveket úgy, ahogyan a szerző létrehozta őket; a projekt felénél szembemenni ezzel a konvencióval jóval többe kerül, mint alkalmazkodni hozzá.

Ezután szűkítse le a böngészőablakot addig, amíg a mozaik egyetlen oszloppá nem rendeződik, és nézze meg, melyik projekttel találkozik először a látogató. Ha ez az a projekt, amelyet elsőként mutatna meg egy ügyfélnek, a sablon készen áll a tartalom fogadására.