Webbsideslayout är skapandet av en hypertextdokumentstruktur baserad på HTML - uppmärkning, vanligtvis med hjälp av stilmallar och skript på klientsidan , så att designelementen ser ut som layouten [1] .
Layout av webbsidor skiljer sig från utskrift genom att det är nödvändigt att ta hänsyn till skillnaden i visningen av element i olika webbläsare och skillnaden i storleken på arbetsutrymmet för enheter [2] .
Platslayoutarbete kan inkluderas i monteringsfasen .
Tim Berners-Lee , när han arbetade vid European Institute of Particle Physics, kom på ett språk som inte fokuserade på designmedlen, utan på logiken i textmarkering. Under en tid utformades sidor i den så kallade "akademiska designen", till exempel lib.ru [3] .
Med tillkomsten av webbläsaren Netscape har situationen förändrats. Webbläsarutvecklare introducerade icke-standardiserade HTML-taggar utformade för att förbättra utseendet på dokumentet [3] . Webbläsaren var så vanlig att icke-standardiserade taggar inte var ett problem: det är ingen idé att oroa sig för att andra webbläsare inte stöder dessa taggar när endast 10 % av besökarna använder andra webbläsare [3] . Webbplatser utvecklas inte längre i den "akademiska" stilen [3] . De började fundera på designen, vilket gjorde att det krävdes en mer komplex layout [3] .
Sedan mitten av 1990-talet har MS Internet Explorer fångat en växande del av konsumenterna [3] . Webbläsarutvecklarnas tillvägagångssätt skilde sig åt, och uppsättningen av teknologier som stöddes skilde sig också [3] . Allt detta ökade bara besväret för webbplatsutvecklare, vilket ökade utvecklingstiden för webbplatsen [3] .
Under kampen om marknaden ersattes de åldrande och dåligt stödjande Netscape 4- och Internet Explorer 4 (IE 4)-standarderna av de femte versionerna av webbläsare [4] . IE 5 var inte bara tänkt att fixa buggarna i sin föregångare, utan för att förbättra stödet för CSS-standarder [4] . Microsoft var dömt till detta steg, om så bara för att det gick med i W3C- gruppen [4] . Under utvecklingsprocessen blev skillnaden i visningen av sajter så betydande (och vissa sajter fungerade inte alls) att utvecklarna var tvungna att skapa ett speciellt "kompatibilitetsläge" [4] . I det här läget fungerade webbläsaren "på gammaldags sätt" [4] . För att kunna använda standardstödsläget var det nödvändigt att lägga till elementet <!DOCTYPE> [4] till html-koden . Idén om kompatibilitetsläge överfördes senare till andra webbläsare (t.ex. Mozilla , Safari , Opera , etc.) [4] . Med utvecklingen av teknologin fanns det för många varianter av doctype, bara i den femte versionen av html, föreslog W3C att man skulle använda en kort journal som förenade standarden [4] .
Efter ett tag blev det för obekvämt att arbeta med block, eftersom webbläsare faktiskt inte stödde CSS var man tvungen att infoga stilar direkt i block, vilket komplicerade utvecklingen [3] . Vid den här tiden började tabeller med en osynlig kant att användas för utveckling, där många stilar inte krävdes, de var som standard [3] .
1998 dök specifikationen Cascading Style Sheets Level 2 (CSS2) upp, och sedan CSS2.1, vilket gjorde det möjligt att flytta blockdesignkoden till separata filer och använda den på alla sidor på webbplatsen och till och med cachelagra denna fil , vilket innebär snabbare sidladdning [3] . Utvecklingen av denna teknik och stöd från webbläsare har lett till användning av blocklayout istället för tabeller [3] .
Rektangeln fick exceptionellt värde på grund av förmågan att dela upp i valfritt antal rektanglar av alla proportioner [5] .
Som regel får layoutdesignern en godkänd siddesignlayout av designern [2] . Därefter analyserar layoutdesignern den resulterande layouten [2] . Delar upp det i horisontella linjer (ränder) - "golv". Vidare analyseras varje "golv" separat och delas upp i rektangulära block - kolumner.
Därefter processen för layout av dessa individuella rader, och i dem - kolumner [2] .
Efter layouten kontrolleras sidan för plattformsoberoende . I allmänhet kan du svara på följande frågor [2] :
Kritiska korrigeringar görs i dokumentet och kontrollen upprepas från början [2] .
Layout skapas för mallarFör webbplatsen används som regel inte layoutdokument. Efter layouten skärs dokumentet i repeterande bitar och används på hela webbplatsen. Till exempel den översta randen med logotypen och den nedre randen med viktig information. Sådana delar av layout kallas mallar (från engelska mall ) [2] .
En viktig begränsning är typsnitt [2] . Headset för alla operativsystem är olika. Valet av typsnitt begränsas inte av någonting, men om webbläsaren inte hittar den angivna uppsättningen använder den standardinställningarna [2] .
Huvudfrågan i layouten är displayen på olika bredder av arbetsytan [6] .
Layouten skiljer sig åt i olika synsätt på denna fråga [6] :
Historiskt sett är sajten ett vertikalt format som inte tar upp mer än skärmens bredd för att undvika horisontell rullning [6] . Alla funktioner för att hantera webbplatsens position (tangentbordskombinationer och rullningslist och mushjul) är konfigurerade direkt för vertikal rörelse [6] .
| Typiska webblayouter | ||
|---|---|---|
| enda kolumn | två kolumner | tre kolumn |
Ingen av metoderna är kanonisk och accepterad som den huvudsakliga [2] . Alla layoutmetoder har både fördelar och nackdelar. Layoutdesignern, som specialist, väljer vilka verktyg som ska användas, baserat på att väga fördelar och nackdelar för ett visst projekt [7] .
Det modulära rutnätet bryter strukturellt materialet i separata block, för att förenkla tillägget av nya element till sidan [7] . Vissa typsättare kan avvika från layoutregler för ett visst projekts skull, men behovet av att helt enkelt lägga till nya element på sidan kommer att förvärra behovet av att återgå till dessa regler [7] .
Ett modulärt rutnät är en uppsättning guider som är i linje med varandra och delar upp layouten i rutor [7] . Tillåt därför oberoende av resten av webbplatsen att ändra informationsenheten [7] .
De huvudsakliga layoutverktygen är ramar , tabeller och div. I HTML5- standarden stöds inte längre ramar [8] och "semantiska" block har blivit tillgängliga för arbete : sidhuvud, huvud, nav, avsnitt, artikel, åt sidan, sidfot. Dock ger blocken inte vissa fördelar, utan är bara " syntaktisk socker ".
Tabeller är ett praktiskt verktyg för blockjustering. I html är tabellen uppdelad i rader som i sin tur är indelade i celler, så du kan skapa ett obegränsat antal rader med ett obegränsat antal celler i varje. Tabellceller har speciella justeringsinställningar som inte längre finns i andra element. Detta gör att vissa designelement är extremt svåra att lägga ut utan användning av tabeller [9] .
I affärsvärlden används kalkylblad för att jämföra data, samt för tydlighetens skull [9] .
Nackdelen med tabellmetoden är att sidan inte kommer att renderas förrän den avslutande tabelltaggen har laddats, vilket är avgörande när anslutningen bryts och anslutningen är långsam. Nackdelarna inkluderar också ett överskott av kod, vilket komplicerar dess förståelse.
Vid tidpunkten för 2011 anses tabelllayout vara föråldrad [9] .
Layer (uppkallat efter taggen < lager>) är en utveckling av Netscape som används i webbläsaren Netscape Navigator [10] . Taggen tillåts visa eller dölja sitt innehåll, ställa in positionen i förhållande till webbläsarfönstret, lägga lager ovanpå varandra och inkludera innehållet i blocket från filen [10] . HTML ingick inte i specifikationen [10] .
Blocklayout - layout med taggen < div> och en uppsättning stilmallar (CSS) som beskriver dem [10] . Taggen kom till som ett resultat av CSS Positioning (CSS-P)-konsortiets avsiktliga övergivande av <layer>-taggen för att skapa en liknande tagg, men med CSS-stöd i de andra taggarnas anda [10] . Med hjälp av blocklayout implementeras begreppet semantisk layout .
Ramlayout är layout som använder taggen <frame> med samma namn, som har en annan positioneringsmetod och inuti den innehåller separata HTML-sidor [11] .
Ramar är lätta att använda, eftersom du bara behöver bry dig om att visa och rita om en del av webbläsarfönstret - en ram - resten av delarna finns i en annan ram och ritar inte om utan att interagera med dem [11] . Det är också möjligt att öppna en länk i en annan ram, vilket är bekvämt när man använder huvudmenyn i en separat ram [11] . Sidor indelade i ramar har mindre kod, på grund av frånvaron av upprepade delar som inte laddas om [11] . De är placerade på exakt rätt plats i webbläsarfönstret [11] .
Ramar är dåligt indexerade av sökmotorer eftersom innehållssidorna inte har några länkar till andra sidor på webbplatsen och vice versa, det finns inget innehåll på navigeringssidan [11] . Övergången från söksidan sker på en sida, utan att ladda andra ramar - navigering och logotyp [11] . Interna sidor kan inte bokmärkas eftersom webbläsaren inte visar ändringar i adressfältet, alltid visar endast webbplatsadressen [11] . Kompatibiliteten mellan webbläsare är inkonsekvent [11] . Samma parametrar tolkas alltid av webbläsare på sitt eget sätt [11] .
Enligt principerna för att använda HTML -uppmärkningsverktyg görs en skillnad mellan logisk uppmärkning och presentationsmässig (fysisk) uppmärkning.
Kursiv text kan till exempel erhållas med både <i> -taggen och <em>-taggen .
I det första fallet anges kursiv stil och i det andra läggs en logisk betoning på texten, som vanligtvis visas i kursiv stil.
Med andra ord fokuserar det första tillvägagångssättet på utseendet, och det andra - på det logiska syftet.
Fördelen med det andra tillvägagångssättet är layoutens oberoende från den typ av enheter som används och designen av webbsidor.
Om du håller dig till logisk layout kan du använda samma layout för skärm , utskrift och mobila enheter och justera utseendet med separata stilfiler.
Alla webbplatser enligt layoutlayout kan delas in i 5 grupper [12] :
Responsiv layout är en design som anpassar sig (anpassar) till skärmstorleken, inklusive omarrangering av block från en plats till en annan, eller deras ersättning med block som endast visas med en viss upplösning. Responsiv layout har ersatt idén om att skapa speciella mobilversioner av webbplatsen, "bor" på separata underdomäner (till exempel m.wikipedia.org).
Fördelar:
Brister:
Det vill säga att varje typ av design har sina för- och nackdelar, och valet beror på vilken uppgift som ska lösas. I det här fallet kan en blandad design också användas - vissa kolumner i en tabellform är inställda i procent och andra i pixlar.
Webbläsare behandlar medvetet en tabell som ett enda objekt, vilket gör att innehållet i tabellen inte visas förrän hela innehållet har laddats ner till den lokala datorn. [13]
När du använder en tabell som ett ramverk för att ordna webbsideselement förvandlas dess ursprungliga fördel till en nackdel, eftersom det leder till en försening i renderingen av innehåll. Man bör också ta hänsyn till den växande volymen av webbsidor med den aktiva användningen av tabeller, särskilt när de kapslar in i varandra. Allt detta leder till det faktum att tabelllayouten orsakar onödiga förseningar i utmatningen av information i webbläsaren.
Problemet uppstår med flera kapslingar av tabeller, vilket är typiskt för att uppnå vissa effekter på en webbsida. En ökning av antalet tabeller ökar chansen för layoutfel, ökar storleken på dokument och minskar hastigheten för nedladdning av filer. Användningen av visuella redigerare, som Adobe Dreamweaver eller Microsoft FrontPage , för att skapa och redigera dokument gör det lättare att arbeta med tabeller, men på grund av överflöd av deras parametrar, i det här fallet, är utvecklare inte immuna från fel och onödigt arbete i samband med detta med individuell redigering av varje tabell.
Dessutom motsvarar användningen av tabeller för designändamål inte begreppet semantisk layout, vilket innebär användning av element (taggar) i enlighet med deras betydelse, semantisk betydelse. Elementet <table> och tillhörande element (<tr>,<th>,<td>, etc.) är utformade för att markera tabellinformation (det vill säga en där det finns ett semantiskt samband mellan element som hör till samma kolumn eller en rad). W3C, som utvecklare av HTML-språket, uppmuntrar att använda HTML för logisk uppmärkning av information och att beskriva design (inklusive placeringen av olika block) separat från (X)HTML-markering (med CSS, till exempel).
När du använder tabeller har en välkänd teknik blivit användningen av distanser - genomskinliga bilder en pixel höga. Själva bilden visas inte på webbsidan, men den kan skalas hur som helst. Det visar sig en osynlig pinne med en viss bredd eller höjd, vilket hindrar bordets celler från att närma sig mindre än ett givet avstånd. Spacers var särskilt relevanta för Netscape -webbläsaren , som inte visade bakgrunden för en cell om inget placerades i den. För att bli av med denna funktion placerades en liten genomskinlig bild i GIF -format i cellen .
Sådana tekniker komplicerar inte bara utvecklingen av universella webbsidor, utan leder också till en minskning av hastigheten för att ladda ett dokument. Webbläsaren i det här fallet måste ladda ner element som inte är synliga för användaren och i själva verket behöver han inte, men de ingår i den övergripande webbplatstrafiken.
Lager är strukturella element som kan placeras på en webbsida genom att lägga dem ovanpå varandra med pixelprecision . I HTML 4 och XHTML är ett lager ett webbsideselement skapat med en <div>-tagg som är formaterad. [fjorton]
När du gör det följs följande principer:
Lager kan placeras i webbläsarfönstret med pixelprecision. Lagrets position ges av två koordinater i förhållande till valfritt hörn av webbläsarfönstret, överordnade element eller dokument.
Skript låter dig ändra lagerparametrar dynamiskt. Detta gör det möjligt att skapa olika effekter på sidan, såsom rullgardinsmenyer, spel, utfällbara banners , flytande fönster och mer.
Lageregenskaper är bekvämt inställda och konfigurerade genom stilar. Möjligheterna med CSS utökar utbudet av designläckerheter. Genom att använda stilmallar kan du få kompakt och effektiv kod med enkla metoder.
Modernare versioner av webbläsare har blivit striktare när det gäller att följa standarder och innehåller verktyg för att arbeta med lager.
Lagret kan flyttas, döljas och visas utan att ladda om hela sidan. Med hjälp av instruktioner kan du skapa effekter, rullgardinsmenyer, verktygstips, rörliga element, etc. Att lägga till sådana element, även om det ökar mängden kod, kräver inte omladdning och uppdatering av dokumentet och sker utan dröjsmål från webbläsaren. Dessutom förbättras webbplatsens uttrycksfullhet och attraktivitet avsevärt genom användning av liknande tekniker med lager.
Lager kan staplas ovanpå varandra, vilket förenklar placeringen av element på en webbsida och ger fler alternativ för layout.
Lager visas snabbare än tabeller. Högre hastighet uppnås tack vare den kompakta koden och det faktum att innehållet i lagret visas när det laddas. Det är sant att detta kan leda till felaktig visning av sidelement när de laddas.
Standarderna för att arbeta med lager är ännu inte helt fastställda och webbläsare implementerar vissa funktioner på olika sätt. På grund av detta är den största svårigheten med layout i lager att skapa en universell kod som fungerar lika och utan fel i olika webbläsare (" kompatibilitet mellan webbläsare ") och med olika skärmupplösningar . Finesserna i hur webbläsare beter sig när de använder olika stilelement spelar roll.
Se även : Bordslös webbdesign
Layoutdesigners är engagerade i layouten av webbsidor . I det allmänna fallet inkluderar layoutdesignerns uppgifter:
Layoutdesignern använder följande programvara:
Och ibland tar man till hjälp:
Användningen av WYSIWYG- redigerare och layoutprogram fördöms ofta [15] [16] på grund av den dåliga kvaliteten på den resulterande koden. Men de är ofta mer bekväma för användare att använda än manuell kodning, och kräver inte heller djup kunskap om HTML, och används därför i stor utsträckning.
Giltigheten av en HTML-layout är dess överensstämmelse med standarderna för The World Wide Web Consortium ( W3C ). Frånvaron av fel i dokumentets layout är en av huvudindikatorerna för layoutens kvalitet. Automatisk kontroll av layouten för fel kan utföras både med W3C:s onlinetjänst och olika "validator"-program. Olika versioner av HTML-specifikationen kräver olika syntax, så ett valideringstest måste alltid ta hänsyn till dess Document Type .
Webbläsarkompatibilitet för webbplatsen är visningen av sidparametrar nära den ursprungliga designen och funktionella formen när du använder olika webbläsare och deras olika versioner och modifieringar.
Webbutvecklare gör allt för att förena hypertextmarkering för att utveckla en enda visningsstandard över webbläsare , men att implementera detta är ett komplext arbetsflöde på grund av ett antal konfrontationer mellan utvecklare.
| Webb och hemsidor | |
|---|---|
| globalt | |
| Lokalt | |
| Typer av webbplatser och tjänster |
|
| Skapande och underhåll | |
| Typer av layouter, sidor, webbplatser | |
| Teknisk | |
| Marknadsföring | |
| Samhälle och kultur | |