Websidelayout er oprettelsen af en hypertekstdokumentstruktur baseret på HTML -markering, normalt ved hjælp af typografiark og klientside-scripts , så designelementer ligner layoutet [1] .
Layout af websider adskiller sig fra udskrivning ved, at det er nødvendigt at tage højde for forskellen i visningen af elementer i forskellige browsere og forskellen i størrelsen af enheders arbejdsrum [2] .
Pladslayoutarbejde kan inkluderes i montagefasen .
Tim Berners-Lee , mens han arbejdede på European Institute of Particle Physics, kom med et sprog, der ikke fokuserede på designmidler, men på logikken i tekstmarkering. I nogen tid blev sider designet i det såkaldte "akademiske design", for eksempel lib.ru [3] .
Med fremkomsten af Netscape- browseren har situationen ændret sig. Browserudviklere introducerede ikke-standard HTML-tags designet til at forbedre udseendet af dokumentet [3] . Browseren var så almindelig, at ikke-standard tags ikke var et problem: det nytter ikke at bekymre sig om, at andre browsere ikke understøtter disse tags, når kun 10 % af besøgende bruger andre browsere [3] . Websteder udvikles ikke længere i den "akademiske" stil [3] . De begyndte at tænke over designet, hvilket betyder, at et mere komplekst layout var påkrævet [3] .
Siden midten af 1990'erne har MS Internet Explorer fanget en voksende del af forbrugerne [3] . Browserudviklernes tilgange var forskellige, og sæt af understøttede teknologier var også forskellige [3] . Alt dette øgede kun ulejligheden for webstedsudviklere, hvilket øgede webstedets udviklingstid [3] .
Under kampen om markedet blev de aldrende og dårligt understøttende Netscape 4 og Internet Explorer 4 (IE 4) standarder erstattet af den femte version af browsere [4] . IE 5 skulle ikke blot rette fejlene i sin forgænger, men at forbedre understøttelsen af CSS-standarder [4] . Microsoft var dømt til dette skridt, om ikke andet fordi det sluttede sig til W3C -gruppen [4] . Under udviklingsprocessen blev forskellen i visningen af websteder så betydelig (og nogle websteder virkede slet ikke), at udviklerne var nødt til at oprette en særlig "kompatibilitetstilstand" [4] . I denne tilstand fungerede browseren "på gammeldags måde" [4] . For at bruge standardstøttetilstanden var det nødvendigt at tilføje elementet <!DOCTYPE> [4] til html-koden . Ideen til kompatibilitetstilstand blev senere overført til andre browsere (f.eks . Mozilla , Safari , Opera osv.) [4] . Med udviklingen af teknologi var der for mange varianter af doctype, kun i den femte version af html, foreslog W3C at bruge en kort optegnelse, der forenede standarden [4] .
Efter et stykke tid blev arbejdet med blokke for ubelejligt, da browsere faktisk ikke understøttede CSS, var man nødt til at indsætte stilarter direkte i blokke, hvilket komplicerede udviklingen [3] . På dette tidspunkt begyndte tabeller med en usynlig kant at blive brugt til udvikling, hvor mange stilarter ikke var påkrævet, de var som standard [3] .
I 1998 dukkede specifikationen Cascading Style Sheets Level 2 (CSS2) op, og derefter CSS2.1, som gjorde det muligt at flytte blokdesignkoden til separate filer og bruge den på alle sider af webstedet og endda cache denne fil , som betyder hurtigere sideindlæsning [3] . Udviklingen af denne teknologi og support fra browsere har ført til brugen af bloklayout i stedet for tabeller [3] .
Rektangelet modtog enestående værdi på grund af evnen til at opdele i et hvilket som helst antal rektangler af enhver proportion [5] .
Som regel modtager layoutdesigneren et godkendt sidedesignlayout fra designeren [2] . Dernæst analyserer layoutdesigneren det resulterende layout [2] . Opdeler det i vandrette linjer (striber) - "gulve". Yderligere analyseres hver "gulv" separat og opdeles i rektangulære blokke - søjler.
Dernæst processen med layout af disse individuelle rækker, og i dem - kolonner [2] .
Efter layout kontrolleres siden for cross-platform . Generelt kan du besvare følgende spørgsmål [2] :
Der foretages kritiske rettelser i dokumentet, og kontrollen gentages helt fra begyndelsen [2] .
Layout oprettes til skabelonerTil webstedet bruges der som regel ikke layoutdokumenter. Efter layout skæres dokumentet i gentagne stykker og bruges på hele webstedet. For eksempel den øverste stribe med logoet og den nederste stribe med vigtig information. Sådanne stykker layout kaldes skabeloner (fra engelsk skabelon ) [2] .
En vigtig begrænsning er skrifttyper [2] . Headsetsæt til alle operativsystemer er forskellige. Valget af skrifttype er ikke begrænset af noget, men hvis browseren ikke finder det angivne sæt, bruger den standardindstillingerne [2] .
Hovedproblemet i layoutet er visningen i forskellige bredder af arbejdsrummet [6] .
Layoutet adskiller sig i forskellige tilgange til dette problem [6] :
Historisk set er siden et lodret format, der ikke fylder mere end bredden af skærmen for at undgå vandret rulning [6] . Alle funktioner til styring af webstedets position (tastaturkombinationer og rullepanel og musehjul) er konfigureret direkte til lodret bevægelse [6] .
| Typiske web-layouts | ||
|---|---|---|
| enkelt kolonne | to-kolonne | tre-kolonne |
Ingen af metoderne er kanoniske og accepteret som den vigtigste [2] . Alle layouttilgange har både fordele og ulemper. Layoutdesigneren vælger som specialist, hvilke værktøjer der skal bruges, ud fra en afvejning af fordele og ulemper ved et bestemt projekt [7] .
Det modulære gitter opdeler strukturelt materialet i separate blokke for at forenkle tilføjelsen af nye elementer til siden [7] . Nogle typesættere kan afvige fra layoutregler af hensyn til et bestemt projekt, men behovet for blot at tilføje nye elementer på siden vil forværre behovet for at vende tilbage til disse regler [7] .
Et modulært gitter er et sæt hjælpelinjer, der flugter med hinanden og deler layoutet i firkanter [7] . Tillad derfor uafhængigt af resten af webstedet at ændre informationsenheden [7] .
De vigtigste layoutværktøjer er rammer , tabeller og divs. I HTML5- standarden understøttes rammer ikke længere [8] , og "semantiske" blokke er blevet tilgængelige for arbejde : sidehoved, hoved, nav, sektion, artikel, til side, sidefod. Blokke giver dog ikke visse fordele, men er kun " syntaktisk sukker ".
Tabeller er et praktisk værktøj til blokjustering. I html er tabellen opdelt i rækker, som igen er opdelt i celler, så du kan oprette et ubegrænset antal rækker med et ubegrænset antal celler i hver. Tabelceller har specielle justeringsindstillinger, som ikke længere findes i andre elementer. Det betyder, at nogle designelementer er ekstremt svære at lægge ud uden brug af borde [9] .
I erhvervslivet bruges regneark til at sammenligne data, samt for klarhed [9] .
Ulempen ved tabeltilgangen er, at siden ikke bliver gengivet, før det afsluttende tabeltag er indlæst, hvilket er kritisk, når forbindelsen er brudt, og forbindelsen er langsom. Ulemperne inkluderer også et overskud af kode, hvilket komplicerer dets forståelse.
På tidspunktet for 2011 anses tabellayout for at være forældet [9] .
Layer (opkaldt efter < lag>-tagget) er en udvikling af Netscape, der bruges i Netscape Navigator [10] browseren . Tagget tillader at vise eller skjule dets indhold, indstille positionen i forhold til browservinduet, overlejre lag oven på hinanden og inkludere indholdet af blokken fra filen [10] . HTML var ikke inkluderet i specifikationen [10] .
Blok layout - layout ved hjælp af < div> tag og et sæt style sheets (CSS), der beskriver dem [10] . Tagget opstod som et resultat af CSS Positioning (CSS-P)-konsortiets bevidste opgivelse af <layer>-tagget for at skabe et lignende tag, men med CSS-understøttelse i ånden fra de andre tags [10] . Ved hjælp af bloklayout implementeres begrebet semantisk layout .
Rammelayout er layout ved hjælp af <frame>-tagget af samme navn, som har en anden positioneringsmetode, og indeni det indeholder separate html-sider [11] .
Rammer er nemme at bruge, fordi du kun skal bekymre dig om at vise og gentegne en del af browservinduet - en ramme - resten af delene er i en anden ramme og tegner ikke igen uden at interagere med dem [11] . Det er også muligt at åbne et link i en anden ramme, hvilket er praktisk, når man bruger hovedmenuen i en separat ramme [11] . Sider opdelt i rammer har mindre kode på grund af fraværet af gentagne dele, der ikke genindlæses [11] . De er placeret det helt rigtige sted i browservinduet [11] .
Rammer er dårligt indekseret af søgemaskiner, fordi indholdssiderne ikke har links til andre sider på webstedet og omvendt, er der intet indhold på navigationssiden [11] . Overgangen fra søgesiden sker på én side, uden indlæsning af andre rammer - navigation og logo [11] . Interne sider kan ikke bogmærkes, fordi browseren ikke viser ændringer i adresselinjen, idet den altid kun viser webstedsadressen [11] . Kompatibilitet mellem browsere er inkonsekvent [11] . De samme parametre fortolkes altid af browsere på deres egen måde [11] .
I henhold til principperne for brug af HTML -markup-værktøjer skelnes der mellem logisk markup og præsentationsmæssig (fysisk) markup.
For eksempel kan kursiv tekst fås ved hjælp af både <i> -tagget og <em>-tagget .
I det første tilfælde er kursiv specificeret eksplicit, og i det andet lægges en logisk betoning på teksten, som normalt vises i kursiv.
Med andre ord fokuserer den første tilgang på udseendet, og den anden - på det logiske formål.
Fordelen ved den anden tilgang er layoutets uafhængighed af den anvendte type enheder og designet af websider.
Hvis du holder dig til logisk layout, kan du bruge det samme layout til skærm , print og mobile enheder og justere udseendet med separate stilfiler.
Alle websteder i henhold til layout layout kan opdeles i 5 grupper [12] :
Responsivt layout er et design, der tilpasser sig (tilpasser) skærmstørrelsen, herunder omarrangering af blokke fra et sted til et andet, eller deres udskiftning med blokke, der kun vises i en bestemt opløsning. Responsivt layout har erstattet ideen om at skabe specielle mobilversioner af webstedet, "levende" på separate underdomæner (for eksempel m.wikipedia.org).
Fordele:
Fejl:
Det vil sige, at hver type design har sine fordele og ulemper, og valget afhænger af den opgave, der skal løses. I dette tilfælde kan et blandet design også bruges - nogle kolonner i et tabeldesign er angivet i procenter og andre i pixels.
Browsere behandler bevidst en tabel som et enkelt objekt, hvilket medfører, at indholdet af tabellen ikke vises, før hele indholdet er downloadet til den lokale computer. [13]
Når du bruger en tabel som en ramme til at arrangere websideelementer, bliver dens oprindelige fordel til en ulempe, da det fører til en forsinkelse i gengivelsen af indhold. Man bør også tage højde for den voksende mængde af websider med den aktive brug af tabeller, især i tilfælde af deres indlejring i hinanden. Alt dette fører til det faktum, at tabellayoutet forårsager unødvendige forsinkelser i outputtet af information i browseren.
Problemet opstår med flere indlejringer af tabeller, hvilket er typisk for at opnå visse effekter på en webside. En stigning i antallet af tabeller øger chancen for layoutfejl, øger størrelsen på dokumenter og reducerer hastigheden for download af filer. Brugen af visuelle editorer, såsom Adobe Dreamweaver eller Microsoft FrontPage , til at oprette og redigere dokumenter gør det lettere at arbejde med tabeller, men på grund af overfloden af deres parametre er udviklere i dette tilfælde ikke immune over for fejl og unødvendigt arbejde forbundet med individuel redigering af hver tabel.
Derudover svarer brugen af tabeller til designformål ikke til begrebet semantisk layout, hvilket indebærer brugen af elementer (tags) i overensstemmelse med deres betydning, semantisk betydning. <table>-elementet og de ledsagende elementer (<tr>,<th>,<td> osv.) er designet til at markere tabeloplysninger (det vil sige en, hvor der er en semantisk relation mellem elementer, der tilhører samme kolonne eller en række). W3C, som udvikler af HTML-sproget, opfordrer til at bruge HTML til logisk opmærkning af information og til at beskrive design (inklusive placeringen af forskellige blokke) adskilt fra (X)HTML-markering (ved at bruge CSS, for eksempel).
Ved brug af tabeller er en velkendt teknik blevet til brugen af spacere - gennemsigtige billeder en pixel høje. Selve billedet vises ikke på websiden, men det kan skaleres i ethvert omfang. Det viser sig en usynlig pind af en vis bredde eller højde, som forhindrer bordets celler i at nærme sig mindre end en given afstand. Spacere var især relevante for Netscape -browseren , som ikke viste baggrunden for en celle, hvis der ikke var anbragt noget i den. For at slippe af med denne funktion blev der placeret et lille gennemsigtigt billede i GIF -format i cellen .
Sådanne teknikker komplicerer ikke kun udviklingen af universelle websider, men fører også til et fald i hastigheden af indlæsning af et dokument. Browseren i dette tilfælde skal downloade elementer, der ikke er synlige for brugeren, og som han faktisk ikke har brug for, men de er inkluderet i den samlede webstedstrafik.
Lag er strukturelle elementer, der kan placeres på en webside ved at lægge dem oven på hinanden med pixelpræcision . I HTML 4 og XHTML er et lag et websideelement oprettet med et <div>-tag, der er stylet. [fjorten]
Ved at gøre dette overholdes følgende principper:
Lag kan placeres i browservinduet med pixelpræcision. Lagets position er givet af to koordinater i forhold til ethvert hjørne af browservinduet, overordnet element eller dokument.
Scripts giver dig mulighed for at ændre lagparametre dynamisk. Dette gør det muligt at skabe forskellige effekter på siden, såsom rullemenuer, spil, udfoldede bannere , flydende vinduer og meget mere.
Lagegenskaber er bekvemt indstillet og konfigureret gennem typografier. CSS 's muligheder udvider rækken af designfryd. Brug af style sheets giver dig mulighed for at få kompakt og effektiv kode med enkle metoder.
Mere moderne versioner af browsere er blevet strengere i overholdelse af standarder og indeholder værktøjer til at arbejde med lag.
Laget kan flyttes, skjules og vises uden at genindlæse hele siden. Ved hjælp af instruktioner kan du oprette effekter, rullemenuer, værktøjstip, bevægelige elementer osv. Tilføjelse af sådanne elementer, selvom det øger mængden af kode, kræver ikke genindlæsning og opdatering af dokumentet og sker uden forsinkelse fra browseren. Derudover er webstedets udtryksevne og tiltrækningskraft stærkt forbedret ved brug af lignende teknikker med lag.
Lag kan stables oven på hinanden, hvilket forenkler placeringen af elementer på en webside og giver flere muligheder for layout.
Lag vises hurtigere end tabeller. Højere hastighed opnås på grund af den kompakte kode og det faktum, at indholdet af laget vises, mens det indlæses. Sandt nok kan dette føre til forkert visning af sideelementer, når de indlæses.
Standarderne for at arbejde med lag er endnu ikke helt fastlagte, og browsere implementerer visse funktioner på forskellige måder. På grund af dette er den største vanskelighed ved layout i lag at skabe en universel kode, der ville fungere ens og uden fejl i forskellige browsere (" cross-browser-kompatibilitet ") og ved forskellige skærmopløsninger . Finesserne i, hvordan browsere opfører sig, når de bruger forskellige stilelementer, har betydning.
Se også : Bordløst webdesign
Layoutdesignere er engageret i layoutet af websider . I det generelle tilfælde omfatter layoutdesignerens opgaver:
Layoutdesigneren bruger følgende software:
Og nogle gange tyr til at hjælpe:
Brugen af WYSIWYG- editorer og layoutprogrammer bliver ofte fordømt [15] [16] på grund af den dårlige kvalitet af den resulterende kode. De er dog ofte mere bekvemme for brugerne at bruge end manuel kodning, og de kræver heller ikke dybt kendskab til HTML, og er derfor meget brugt.
Gyldigheden af et HTML-layout er dets overensstemmelse med standarderne for The World Wide Web Consortium ( W3C ). Fraværet af fejl i dokumentets layout er en af hovedindikatorerne for kvaliteten af layoutet. Automatisk kontrol af layoutet for fejl kan udføres både ved brug af W3C's onlinetjeneste og forskellige "validator"-programmer. Forskellige versioner af HTML-specifikationen kræver forskellig syntaks, så en valideringstest skal altid tage hensyn til dens Document Type .
Cross -browser-kompatibilitet af webstedet er visningen af sideparametre tæt på det originale design og funktionelle form, når du bruger forskellige browsere og deres forskellige versioner og ændringer.
Webudviklere gør alt for at forene hypertekstmarkering for at udvikle en enkelt visningsstandard på tværs af browsere , men implementeringen af dette er en kompleks arbejdsgang på grund af en række konfrontationer blandt udviklere.
| Web og hjemmesider | |
|---|---|
| globalt | |
| Lokalt | |
| Typer af websteder og tjenester |
|
| Oprettelse og vedligeholdelse | |
| Typer af layout, sider, websteder | |
| Teknisk | |
| Markedsføring | |
| Samfund og kultur | |