Mennesker, der arbejder i webdesign industrien sammenligner front-end webstedsudvikling med en trebenet skammel. Disse tre ben - de tre lag af webudvikling - omfatter strukturen, stilen og adfærden på et websted.
Hvorfor skal du adskille lagene?
Når du opretter en webside, skal dens struktur henvises til din HTML, visuelle stilarter til CSSog adfærd til scripts. Nogle af fordelene ved at adskille lagene er:
- Delte ressourcer: Når du skriver en ekstern CSS- eller JavaScript-fil, kan enhver side på webstedet bruge den fil. Hvis du har brug for at foretage en ændring af den fil, måske til opdater nogle typografiske stilarter på webstedet får hver side, der bruger dette typografiark, ændringen. Der er ikke behov for at redigere hver side på hjemmesiden individuelt, hvilket kan være en anstrengende opgave for et stort websted.
- Hurtigere downloads: Når scriptet eller stilarket er blevet downloadet af din kunde for første gang, cachelagres det af webbrowseren. Fordi disse delte ressourcer nu er indeholdt i browser cache, andre sider, der anmodes om i browseren, indlæses hurtigere, hvilket forbedrer den samlede sidehastighed og ydeevne.
- Multi-person hold: Hvis du har mere end en person, der arbejder på et websted på én gang, skal du bruge versionskontrolsystemer, der gør det muligt at tjekke filer ud og ind for at sikre, at alle arbejder med nyeste versioner. Denne proces er meget sværere at gøre, hvis stilarter og adfærd er sammenflettet med strukturdokumenter.
- SEO: Et websted, der viser en klar adskillelse af stil og struktur, vil sandsynligvis klare sig bedre for søgemaskiner, fordi de kan gennemgå dette indhold mere effektivt og forstå siden uden at gå i stå i visuel stil og adfærd Information.
- Tilgængelighed: Eksterne typografiark og scriptfiler er mere tilgængelige for mennesker og browsere. Software som f.eks skærmlæsere kan lettere behandle indhold fra strukturlaget uden at behandle stilarter, som de alligevel ikke kan bruge.
- Bagudkompatibilitet: Et websted, der er designet med separate udviklingslag, er mere tilbøjelige til at være bagudkompatibelt, fordi browsere og enheder, der ikke kan bruge bestemte CSS-stilarter, eller som har JavaScript deaktiveret, kan stadig se HTML. Du kan derefter forbedre dit websted gradvist med funktioner til de browsere, der understøtter dem.
HTML: Strukturlaget
Strukturen eller indholdslaget på en webside er det underliggende HTML koden på den side. Ligesom husets ramme skaber et stærkt fundament, hvorpå resten af huset er bygget, skaber et solidt fundament af HTML en platform, hvorpå et websted kan oprettes.
Strukturlaget er hvor du gemmer alt det indhold, som dine kunder ønsker at læse eller se på. HTML-struktur kan bestå af tekst og billeder, og den inkluderer hyperlinks som besøgende vil bruge til at navigere rundt på hjemmesiden. Disse oplysninger er kodet i overensstemmelse med standarder HTML5 og kan omfatte tekst, billeder og multimedie (video, lyd osv.).
Hvert aspekt af et websteds indhold skal være repræsenteret i strukturlaget. Denne adskillelse tillader kunder, der har JavaScript slået fra, eller som ikke kan se CSS-adgang til hele hjemmesiden, hvis ikke al dens funktionalitet.
CSS: Styles Layer
Dette lag dikterer, hvordan et struktureret HTML-dokument vil se ud for et websteds besøgende og defineres af CSS (Cascading Style Sheets). Disse filer indeholder stilistiske instruktioner til, hvordan dokumentet skal vises i en webbrowser. Stillaget inkluderer normalt medieforespørgsler der ændrer et websteds display baseret på skærmstørrelse og enhed.
Alle visuelle typografier for et websted skal findes i et eksternt typografiark. Du kan bruge flere typografiark, men hver CSS-fil kræver en HTTP-anmodning for at hente den, påvirker webstedsydelse.
JavaScript: Adfærdslaget
Adfærdslaget gør et websted interaktivt, hvilket gør det muligt for siden at reagere på brugerhandlinger eller ændre på baggrund af et sæt betingelser. JavaScript er det mest anvendte sprog for adfærdslaget, men CGI og PHP bruges også meget ofte.
Når udviklere henviser til adfærdslaget, betyder de fleste af dem det lag, der aktiveres direkte i webbrowseren. Brug dette lag til at interagere direkte med dokumentobjektmodellen. Skrivning af gyldig HTML i indholdslaget er vigtigt for DOM-interaktioner i adfærdslaget. Når du opbygger adfærdslaget, skal du bruge eksterne scriptfiler, ligesom med CSS, for at optimere hastighed og ydeevne.