Transparent HTML-mallar

Funktionella genomskinliga HTML-mallar för skiktade webbsidor

En genomskinlig HTML-mall ger dig färdig kod för sidor uppbyggda i två skikt: en bakgrundssektion med bilden och en grupp rubriker, texter och knappar som ligger ovanpå. Hur väl de två är sammankopplade i källkoden avgör vad som händer när bilden byts ut eller en sektion flyttas till en annan sida.

Bakgrundsmedier under förgrundsinnehåll

En skiktad inledande sektion består vanligen av en mediebehållare med en innehållsomslutning inuti, där rubriken och uppmaningen till handling är placerade. Det är inget märkligt med det, men det är just den delen som är värd att granska före köp. Titta igenom den medföljande källkoden efter mönster som ditt projekt upprepar:

1. en inledande sektion med bildbakgrund där innehållsgruppen är skriven direkt inuti;
2. en genomskinlig header med egna menyalternativ;
3. en överlagrad uppmaning till handling som håller ihop rubrik och knapp;
4. en portföljsektion där varje bildtext hör till sin bild.

Täck över bakgrunden i tanken och läs det som är kvar. När rubriken, raden under den och knappen fortfarande är begripliga i sig själva bär koden innebörden och genomskinligheten fungerar enbart som ett ytskikt.

Källkodsordning som tål redigering

Visuell överlappning ska aldrig vara det enda som visar vilken text som hör till vilken bild. I bra kod är den relationen tydligt definierad, så att en sektion kan kopieras eller omordnas och ändå förbli intakt. Några enkla kontroller visar hur skikten är uppbyggda:

1. en överlagrad sektion kopierad till en annan sida tillsammans med sin bild;
2. startsektionen flyttad under sektionen efter den;
3. en rubrik som skrivits så lång att den svämmar över det överlagrade området;
4. samma sektion på mobilskärmsbredd, där innehållet hamnar under mediet.

De två sista punkterna avslöjar bristfällig källkod. En rubrik som sträcker sig utanför överlägget hamnar på fotografiets mest röriga del, och en smal skärm separerar innehållsgruppen från mediet såvida inte båda ligger i samma sektion. Nicepage exporterar de färdiga filerna för din egen server eller för en utvecklare, och källkoden förblir öppen för redigering.

Byt bilder utan att bygga om blocken

Det verkliga provet för en skiktad mall är ett mediebyte. Lägg in ditt eget fotografi i startsektionen och kontrollera att inget annat har flyttats, så att samma innehållsgrupp förblir i samma ordning över en ny bakgrund.

Om rubriken måste justeras manuellt tillbaka på plats var det demobilden som höll ihop kompositionen. En bra genomskinlig HTML-mall låter dig byta bakgrundsmedier, skriva om text i förgrunden och ändra ordning på sektioner med den skiktade strukturen helt bevarad.