Människor som arbetar i webbdesign industrin liknar utvecklingen av webbplatsens front-end med en trebenad pall. Dessa tre ben - de tre lagren av webbutveckling - omfattar webbplatsens struktur, stil och beteende.
Varför ska du skilja mellan lagren?
När du skapar en webbsida bör dess struktur överföras till din HTML, visuella stilar till CSSoch beteenden till skript. Några av fördelarna med att separera lagren är:
- Delade resurser: När du skriver en extern CSS- eller JavaScript-fil kan alla sidor på webbplatsen använda den filen. Om du behöver göra en ändring av den filen, kanske till uppdatera några typografiska stilar på webbplatsen kommer varje sida som använder det formatmallen att få ändringen. Det finns inget behov av att redigera varje sida på webbplatsen individuellt, vilket kan vara ett ansträngande åtagande för en stor webbplats.
- Snabbare nedladdningar: Efter att skriptet eller stilarket har laddats ner av din kund för första gången cachas det av webbläsaren. Eftersom dessa delade resurser nu finns i webbläsarcache, andra sidor som begärs i webbläsaren laddas snabbare, vilket förbättrar den totala sidhastigheten och prestandan.
- Flermannslag: Om du har mer än en person som arbetar på en webbplats samtidigt, använd versionskontrollsystem som gör att filer kan checkas in och ut för att säkerställa att alla arbetar med senaste versionerna. Denna process är mycket svårare att göra om stilar och beteenden är sammanflätade med strukturdokument.
- SEO: En webbplats som visar en tydlig åtskillnad mellan stil och struktur kommer sannolikt att fungera bättre för sökmotorer eftersom de kan genomsöka innehållet mer effektivt och förstå sidan utan att fastna i visuell stil och beteende information.
- Tillgänglighet: Externa stilark och skriptfiler är mer tillgängliga för människor och webbläsare. Programvara som skärmläsare kan bearbeta innehåll från strukturskiktet lättare utan att hantera stilar som de ändå inte kan använda.
- Bakåtkompatibilitet: En webbplats som är utformad med separata utvecklingslager är mer sannolikt bakåtkompatibel eftersom webbläsare och enheter som inte kan använda vissa CSS-stilar eller som har inaktiverat JavaScript kan fortfarande visa HTML. Du kan sedan förbättra din webbplats gradvis med funktioner för webbläsarna som stöder dem.
HTML: Structure Layer
Strukturen eller innehållsskiktet på en webbsida är underliggande HTML koden för den sidan. Precis som husets ram skapar en stark grund som resten av huset bygger på, skapar en solid grund av HTML en plattform där en webbplats kan skapas.
Strukturlagret är där du lagrar allt innehåll som dina kunder vill läsa eller titta på. HTML-strukturen kan bestå av text och bilder, och den innehåller hyperlänkar som besökare kommer att använda för att navigera runt på webbplatsen. Denna information är kodad i enlighet med standarder HTML5 och kan innehålla text, bilder och multimedia (video, ljud, etc.).
Varje aspekt av webbplatsens innehåll bör representeras i strukturlagret. Denna separering tillåter kunder som har inaktiverat JavaScript eller som inte kan se CSS-åtkomst till hela webbplatsen, om inte alla dess funktioner.
CSS: Styles Layer
Detta lager dikterar hur ett strukturerat HTML-dokument kommer att se ut för webbplatsens besökare och definieras av CSS (Cascading Style Sheets). Dessa filer innehåller stilistiska instruktioner för hur dokumentet ska visas i en webbläsare. Stilskiktet innehåller vanligtvis mediefrågor som ändrar en webbplats visning baserat på skärmstorlek och enhet.
Alla visuella stilar för en webbplats ska finnas i ett externt formatmall. Du kan använda flera formatmallar, men varje CSS-fil kräver en HTTP-begäran för att hämta den, som påverkar webbplatsens prestanda.
JavaScript: The Behavior Layer
Beteendeskiktet gör en webbplats interaktiv, vilket gör att sidan kan svara på användarens handlingar eller förändras baserat på en uppsättning villkor. JavaScript är det vanligaste språket för beteendeskiktet, men CGI och PHP används ofta också.
När utvecklare hänvisar till beteendeskiktet menar de flesta det lager som aktiveras direkt i webbläsaren. Använd detta lager för att interagera direkt med dokumentobjektmodellen. Skriva giltig HTML i innehållsskiktet är viktigt för DOM-interaktioner i beteendeskiktet. När du bygger in beteendeskiktet bör du använda externa skriptfiler, precis som med CSS, för att optimera hastighet och prestanda.