Průhledný HTML Šablony

Funkční průhledné HTML šablony pro vrstvené webové stránky

Průhledná HTML šablona vám poskytne připravený kód pro stránky tvořené ve dvou vrstvách: sekci pozadí nesoucí obrázek a nad ní umístěnou skupinu nadpisů, textů a tlačítek. To, jak pevně jsou obě části provázány ve zdrojovém kódu, rozhoduje o tom, co se stane při změně obrázku nebo přesunutí sekce na jinou stránku.

Média v pozadí pod obsahem v popředí

Vrstvená úvodní sekce obvykle představuje kontejner médií s obalovým prvkem obsahu uvnitř, ve kterém se nachází nadpis a výzva k akci. Není na tom nic neobvyklého, ale právě tuto část se vyplatí před nákupem prostudovat. Projděte dodaný zdrojový kód a vyhledejte vzory, které se ve vašem projektu opakují:

1. úvodní sekce s obrázkovým pozadím a přímo v ní zapsanou skupinou obsahu;
2. průhledný header nesoucí vlastní položky menu;
3. překryvná výzva k akci, která drží nadpis a tlačítko pohromadě;
4. sekce portfolia, kde každý popisek pevně náleží k danému obrázku.

Odmyslete si pozadí a přečtěte si, co zůstalo. Pokud nadpis, řádek pod ním i tlačítko dávají samy o sobě smysl, pak kód nese význam a průhlednost je pouhou vrchní vrstvou.

Pořadí ve zdrojovém kódu, které odolá úpravám

Vizuální překrytí by nikdy nemělo být jediným vodítkem k tomu, který text patří ke kterému obrázku. V kvalitním kódu je tento vztah jasně zaznamenán, takže sekci lze zkopírovat nebo přeuspořádat a zůstane neporušená. Několik kontrol ukáže, jak byly vrstvy sestaveny:

1. překryvná sekce zkopírovaná na jinou stránku i s obrázkem;
2. úvodní sekce přesunutá pod sekci, která za ní následuje;
3. nadpis přepsaný do délky, která přesahuje oblast překrytí;
4. stejná sekce na šířce telefonu, kde se obsah posouvá pod multimediální prvek.

Poslední dva body odhalí slabý zdrojový kód. Nadpis přesahující překryv skončí na nejrušnější části fotografie a úzká obrazovka oddělí skupinu obsahu od média, pokud nejsou obě části v téže sekci. Nicepage exportuje hotové soubory pro váš vlastní server nebo pro vývojáře a zdrojový kód zůstává otevřený dalším úpravám.

Výměna obrázků bez nutnosti přestavovat bloky

Skutečnou zkouškou vrstvené šablony je výměna médií. Vložte do úvodní sekce vlastní fotografii a zkontrolujte, zda se nic neposunulo, takže stejná skupina obsahu zůstane ve stejném uspořádání nad novým pozadím.

Pokud je nutné nadpis ručně posouvat zpět na místo, držel kompozici pohromadě pouze ukázkový obrázek. Dobrá průhledná HTML šablona vám umožní měnit média na pozadí, přepisovat text v popředí a měnit pořadí sekcí, aniž by byla narušena vrstvená struktura.