Mozaik HTML Sablonok

Reszponzív mozaik HTML sablonok

A mozaik HTML sablonok olyan fájlok formájában érkeznek, amelyeket egy szerkesztőben nyithatsz meg: egy oldal, egy stíluslap és képek, amelyek már különböző szélességű szakaszokban helyezkednek el. A demó képernyőképe a csempék egyik elrendezését mutatja. Minden, amit ezután teszel, a mögöttük lévő kódban történik, ezért érdemes a forráskódot megnyitni az előnézet előtt.

A munka nagy része a tartalom szintjén marad. A fotók lecserélődnek, a feliratok átíródnak, és a kártya megkettőződik, amint a galéria túlnő a demón.

Jelölés az egyenetlen képblokkok mögött

A csempekompozíciók nagyon különböző módon épülnek fel, és a különbség abban a pillanatban látszik, amikor egy újabb elemet adsz hozzá. Az oszlop- és sorterheltség által összetartott rács a kártya másolása után is működik. A fix eltolással rögzített elrendezés minden alkalommal manuális javítást igényel.

Az ilyen szakaszok általában a mozaikoldalak súlyának nagy részét hordozzák:

• egy széles képcsempe egy rövid címmel
• egy kártya, amely egy galériában vagy egy kategóriahírcsatornában ismétlődik
• egy szöveges csempe egy szolgáltatáshoz, egy jegyzethez vagy egy árajánlathoz
• egy cselekvésre ösztönző csempe, amely lezárja a vizuális klasztert

Egyetlen sablon sem tartalmazza az összeset alapértelmezés szerint, ezért érdemes megnyitni a demót, megszámolni, mi valóban újrafelhasználható, és a többit figyelmen kívül hagyni.

Forrássorrend keskeny képernyőkön

Egy telefon egyetlen oszlopban jeleníti meg a kompozíciót, és ez az oszlop követi a fájl sorrendjét. Egy laptop jobb felső sarkában lévő csempe a negyedik helyen állhat egy telefonon, miközben továbbra is a fő projektet tartalmazza.

Ennek van egy gyors módja. Kapcsolja ki a stílusokat a böngészőben, és olvassa az oldalt sima szövegként. Amit kap, az közel áll ahhoz a sorrendhez, amelyet a látogató a hüvelykujjával görget. Ha valami fontos van ott eltemetve, helyezze át a szakaszt a HTML-en belül. Egy további médialekérdezés csak elrejtené.

Mintakód szerkesztése a csempék megszakítása nélkül

A demó tartalmát alkatrészként kezelje. Másolj ki egy olyan csempét, amely már úgy viselkedik, ahogy neked kell, illeszd be oda, ahol a galéria folytatódik, majd változtasd meg a képet és a benne lévő szöveget. Az osztálynevek a szerző által választott formában maradnak, és a projekt felénél ezzel a konvencióval vitatkozni többe kerül, mint követni azt.

Ezután szűkítsd a böngészőablakot, amíg a mozaik egyetlen oszlopba nem omlik össze, és nézd meg, melyik projekttel találkozik először a látogató. Ha az az, amelyet egy ügyfélnek mutatnál, a sablon készen áll a tartalomhoz.