Layout begynner sin reise fra tiden dakoden ble skrevet i HTML, og markeringen ble gjort ved hjelp av tabeller. Over tid flyttet dette bort, og markeringen ble flyttet til CSS. Det er flere typer layout nå. Flex-box, Bootstrap verktøykasse og de aller siste Grids, som gir stor kraft til skaperne, kan betraktes som moderne. Et av overgangsalternativene i utviklingen av nettet er blokkoppsett. Tidligere brukt for å lage markering for hele siden, anses den nå som foreldet, men likevel er den fortsatt mye brukt i spesielle tilfeller.
Hva er blokkoppsett?
Hun erstattet det foreldede og ufullkomnetabellformet. Siden er sammensatt av såkalte lag, eller blokker, og den avsluttende <div> -koden fungerer som byggesteiner for dette. Dette er en blokkmerke som spenner over hele bredden på det overordnede elementet og høyden for å passe innholdet. Senere ble denne settingen kalt "fantastisk". Grunnlaget for sideorientering er de såkalte klassene.
For øyeblikket er denne typen layout betydeliger utfaset, og selve <div> -koden skal bare brukes som beregnet. Det har dukket opp mange semantisk korrekte koder som gjør det lettere å navigere gjennom koden. For eksempel er det en spesiell <nav> -kode for navigasjonsmenyen.
For klarhetens skyld kan en blokkoppsett representeres som følger:
<div class = "wrapper">
<div class = "element1"> innhold </div>
<div class = "element2"> innhold </div>
<div class = "element3"> innhold </div>
</div>
Div med klasseinnpakning erforeldrebeholder eller med andre ord en innpakning. Elementer med elementklassen er byggesteinene i den komplekse strukturen vår. Vær oppmerksom på at en annen margin fra margen sammenlignet med det overordnede elementet brukes i koden for klarhet, for å gjøre det lettere å definere strukturen og hierarkiet til elementene.
Bruke tabeller
Tabelloppsett av nettsteder har lenge værthodepine for alle programmerere. Etter å ha byttet til blokkmodellen for nettsteder, ble bruk av tabeller generelt, selv for det tiltenkte formålet, ikke oppmuntret på en stund.
Denne tilnærmingen er absoluttupassende og til og med skadelig. Det tvinger enkle ting til å gjøres på mer komplekse og upraktiske måter. Nå brukes tabellen bare til å vise relevante data. Med andre ord, i henhold til dets direkte formål.
Rolleseparasjon
Hvis tidligere all konstruksjon ble gjort i HTML,den blokkerte utformingen førte med seg en fullstendig rollefordeling. Akkurat nå fungerer HTML bare for markering, logisk formatering og sideomforming. Stilene tas helt ut og er inkludert i en egen fil som er inkludert i dokumentet. CSS brukes til å posisjonere elementene og skape en attraktiv og responsiv design. For å referere til blokken brukes klasser som får navnet på elementet. For eksempel, for topptekstblokken, tildeler vi topptekstklassen. Det gjør det også lettere å navigere i koden. I dag gjøres dette delvis av spesialiserte koder som dukket opp i HTML5.
Bruke <div> blokker
For blokkoppsett brukes taggen aktivt<div>. Det ligner på en murstein i en bygning. Mens du lager grunnlaget, nettstrukturen, er det likevel ikke det eneste. Som dører, vinduer, ventilasjon, balkonger og lignende, brukes andre HTML-elementer for layout. Dette er lenker, skjemaer, bilder, lister og tabeller.
Ved hjelp av <div> -koden laget kodenmer kompakt og intuitiv. Overgangen til blokkoppsettet tillot å kvitte seg med html fra unødvendig, nemlig fra stiler. Gi muligheten til å fjerne det overbelastede og vanskelig å navigere tabelloppsettet.
Bruker aktivt CSS-blokkoppsett.Ved hjelp av tilgjengelige verktøy kan du lage en hvilken som helst sidekonstruksjon med pikselpresisjon. Dette oppsettet kalles pixel perfect. Det innebærer perfekt samsvar mellom nettstedet og oppsettet. På bildet over kan du se at med blokkoppsett er ikke alt så enkelt. Først var det rett og slett umulig å gjøre uten bord. De ble brukt til å lage den grunnleggende sidebyggingen, og blokker ble brukt på individuelle elementer. Dette var helt til de lærte å sette høyden til blokkene.
verdighet
Blokkoppsettet til nettstedet har følgende fordeler:
- Det er ingen gjennomsiktige rammer i piksler, slik tilfellet var med bordoppsett.
- Blokker er enkle å plassere i forhold til hverandre.
- Du kan endre størrelse på blokker for å skape responsive design.
- Evnen til å overlappe forstyrrer ikke sidelayouten, men lar deg legge til interessante effekter.
Videreutvikling
For øyeblikket er blokkoppsettet til divforeldet og finner bare begrenset bruk, bare som et spesielt tilfelle for visse situasjoner. Den ble erstattet av posisjonering og innpakning i oppsettet. De hadde mange mangler, men generelt tillot de mer enn blokkoppsett.
Deretter dukket en konstruksjon opp ved hjelp avinline-block-elementer. Dette lette i stor grad arbeidet til programmerere. Denne metoden har fordelene med begge typer blokker og gir en mer responsiv og responsiv design. Det er verdt å merke seg at alle disse metodene, på en eller annen måte, besto av et div-element, som ga navnet "fantastisk layout".
For tiden for å bygge sidenbruker flex-box og bootstrap. De reduserer koden betydelig og gjør det raskere og enklere å lage responsive design av høy kvalitet. Lar deg flytte blokker uten å bryte hele siden.
Ny teknologi er i forkant av fremgangen -Rutenett. Det lar deg raskt og enkelt lage design av enhver kompleksitet. Og blokker, innpakning, posisjonering, slik det skjedde med tabeller til rett tid, brukes bare til det tiltenkte formålet.
