Numele straturilor este antet subsol. Utilizarea etichetei de subsol pentru a crea un subsol pe o pagină

Bună ziua, dragi cititori ai site-ului blogului. Continuăm subiectul aspectului bloc, care a fost început și continuat în cele trei articole precedente. În principiu, am reușit deja să creăm atât un aspect de site cu două, cât și trei coloane și chiar am reușit să luăm în considerare nuanțele creării unui aspect fluid.

În plus, în primele articole despre aspectul site-ului (), s-au discutat câteva concepte de bază de webmastering, fără a înțelege care ar fi destul de greu de înțeles nuanțele.

Astăzi vom încerca să rezolvăm o mică problemă care poate apărea cu aspectul pe care l-am creat mai devreme. Cel mai adesea, această situație apare la vizualizarea lui pe monitoare mari (cu rezoluție mare) și la afișarea unei pagini cu o cantitate mică de informații.

În acest caz, se poate dovedi că subsolul nu va fi apăsat în partea de jos a ecranului, ci va fi situat aproape la mijlocul înălțimii sale, care în cele mai multe cazuri va arăta urât și nu va fi plăcut din punct de vedere estetic.

Totuși, în opinia mea, este necesar să apăsați subsolul în partea de jos a aspectului site-ului, iar acest lucru va fi valabil mai ales în cazul în care înălțimea paginii este mai mică decât înălțimea ecranului utilizatorului. Aceasta poate fi reprezentată schematic astfel:

Aceste. Comportamentul corect de subsol pentru cazul unei cantități mici de informații pe pagină și al unui ecran mare de utilizator va fi următorul:

Pentru a implementa acest lucru, trebuie să efectuăm o serie de manipulări cu codul aspectului nostru. Mai mult, vom face modificări nu doar la fișierul de stil CSS Style.css, ci și la Index.html, care conține codul Html și formează blocurile Div. Dar mai întâi lucrurile.

Ca exemplu, vom folosi aspectul site-ului web cu trei coloane pe care l-am creat mai devreme. În acest caz, Index.html va arăta astfel:

Antet Antet Conținutul paginii Conținutul paginii Conținutul paginii Conținutul paginii Subsol

Și următoarele proprietăți CSS au fost scrise în fișierul Style.css:

Corp, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer (culoare de fundal:#FFC0FF; clar:ambele; )

Ei bine, aspectul în sine arăta cam așa:

După cum puteți vedea, subsolul nu este apăsat în jos și, prin urmare, nu îndeplinește cerințele noastre (este întotdeauna situat sub coloana cea mai de jos), așa că va trebui să facem ajustări la cod. Același lucru se poate face pentru un aspect cu două coloane și, de asemenea, pentru un aspect din cauciuc. Metoda este universală.

Deci, trebuie să mutăm containerul Div cu subsolul în partea de jos a ecranului. Pentru a face acest lucru, va trebui mai întâi să setați înălțimea întregii pagini la sută la sută (va ocupa întregul ecran). Acest lucru va fi necesar pentru a schimba apoi dimensiunea blocului principal cu aspectul la 100%.

Întregul conținut al paginii site-ului este plasat în etichetele Body de deschidere și de închidere și, prin urmare, trebuie să adăugăm o altă proprietate CSS pentru eticheta Body în Style.css, setând înălțimea la 100%:

Corp, html ( margin:0px; padding:0px; înălțime: 100%; )

Pe aspect Acest lucru nu va avea încă niciun efect, dar acum blogul principal poate fi extins la toată înălțimea ecranului. Aceste. a fost un fel de etapă pregătitoare.

Proprietățile CSS de bază, dacă doriți, puteți să vă uitați la. Acum să setăm containerul Div care conține întregul nostru aspect la o înălțime minimă de 100%:

De asemenea, vreau să-l evidențiez (div cu id="maket"). Pentru a face acest lucru, îi voi da un cadru folosind proprietatea Border() corespunzătoare:

Proprietatea chenar: negru solid 3px vă permite să setați un chenar solid (solid) cu o grosime de 3 pixeli în negru pentru acest container. Acest lucru vă va permite să vedeți clar că containerul cu aspectul s-a întins pe toată înălțimea ecranului, chiar și cu o cantitate mică de informații pe pagină:

Acum va trebui să scoatem blocul de subsol din containerul general și să îl așezăm dedesubt, imediat după cel general. Ce va da asta? Și faptul că, în cele din urmă, subsolul din layout se va demni să coboare și nu va fi, ca înainte, apăsat pe cea mai lungă coloană a sa. În acest caz, Index.html va arăta astfel:

Titlu Antet Coloana din stânga Meniu Meniu Meniu Meniu Coloana din dreapta Meniu Meniu Meniu Meniu Conținutul paginii Conținutul paginii Conținut Subsol

Vă rugăm să rețineți că blocul cu subsolul nu se mai află în interiorul containerului general (maket) și, prin urmare, lățimea acestuia nu mai este reglementată de proprietățile CSS specificate pentru maket în fișierul Style.css. Lățimea subsolului se va întinde pe întregul ecran, dar va fi în continuare situat în partea de jos a ecranului, imediat sub blocul principal:

Dar din nou apare o problemă, deoarece pentru a vedea subsolul, acum trebuie să defilați ecranul în browser (vezi bara de defilare din imaginea de mai sus).

Acest lucru se întâmplă deoarece containerul principal (maket) ocupă întreaga înălțime a ecranului (acest lucru este determinat de proprietatea min-height: 100%), iar subsolul este situat imediat în spatele lui și pentru a-l vizualiza va trebui să derulați, care nu este foarte convenabil și funcțional.

Puteți rezolva această problemă setând o umplutură negativă pentru containerul Div cu subsolul, astfel încât acesta să se miște în sus cu o distanță egală cu înălțimea sa. În acest caz, containerul de subsol se va suprapune pe cel principal și se va potrivi în înălțimea ecranului browserului (adică nu va trebui să derulați pentru a-l vizualiza).

Dar pentru a seta un offset negativ din partea de sus, trebuie să cunoașteți chiar această înălțime a subsolului, dar nu o știm încă.

Prin urmare, mai întâi vom seta înălțimea containerului care conține subsolul setând proprietatea corespunzătoare în Style.css:

#footer(culoarea fundalului:#FFC0FF; clar:ambele; înălțimea: 50px; )

Și apoi îi setăm o marjă negativă în partea de sus la o înălțime egală cu înălțimea sa:

Acest lucru va permite subsolului să se ridice exact la propria înălțime și astfel să se potrivească în ecranul browserului (acum putem elimina chenarul proprietății CSS: negru solid 3px din regula maket, astfel încât grosimea marginii să nu împiedice întregul nostru aspect, inclusiv subsolul, de la încadrarea în înălțimea ecranului):

După cum puteți vedea, acum bara de defilare nu apare în browser și întregul nostru aspect al site-ului pe trei coloane, bazat pe blocuri, se potrivește pe un singur ecran (în cazul în care există puține informații pe pagină) și are un subsol situat în partea de jos. . Ceea ce era exact ceea ce trebuia să facem.

Dar apare o problemă care va apărea doar atunci când există mai multe informații pe pagina de aspect și poate apărea următoarea situație:

Se pare că poate apărea o situație când informațiile dintr-una dintre coloanele de aspect se suprapun subsolului, ceea ce nu va arăta frumos. Acest lucru se întâmplă din cauza căptușelii negative notorii pe care i-am stabilit-o și care ne-a ajutat să ridicăm subsolul față de containerul principal.

Aceste. Se pare că în partea de jos a ecranului există două blocuri care se suprapun unul pe celălalt în zona subsolului.

Soluția la această problemă este să adăugați un nou container Div gol (așa-numitul spacer) la containerul principal al layout-ului nostru (maket), în locul în care a fost localizat anterior blocul cu subsolul.

Setând acest nou container la o înălțime egală cu înălțimea subsolului, putem evita ca informațiile din containerul principal să se ciocnească de blocul cu subsolul. Să atribuim un ID () acestui container numit Rasporka și, ca rezultat, Index.html al aspectului nostru cu trei coloane va arăta astfel:

Antet Antet Coloana din stânga Meniu Meniu Meniu Meniu Coloana din dreapta Meniu Meniu Meniu Meniu Conținutul paginii Conținutul paginii Conținutul paginii Pagini Pagini Pagini Pagini Subsol

Și în Style.css vom scrie pentru aceasta ( , care setează înălțimea acestui container de distanță egală cu înălțimea subsolului:

#rasporka ( înălțime: 50px; )

Ca urmare, subsolul va fi apăsat de jos nu către informațiile conținute în containerul principal (de exemplu, textul din coloana cea mai înaltă), ci către o zonă egală cu înălțimea subsolului cu un container de distanță care nu conține informații. .

În acest fel, evităm coliziunile și distorsiunile în aspectul nostru pe trei coloane. Totul va fi clar și frumos (delicat și nobil):

După cum am menționat mai sus, lățimea subsolului trebuie acum setată separat, deoarece... acest container nu mai face parte din cel principal. Pentru a face acest lucru, trebuie să adăugați proprietăți suplimentare pentru subsolul fișierului CSS, permițându-vă să setați lățimea și să o aliniați orizontal în mijlocul ecranului.

Este logic să setați lățimea egală cu lățimea întregului aspect folosind proprietatea Lățime, iar alinierea orizontală se poate face în același mod ca și pentru întregul aspect pe un aspect bloc.

Astfel, va trebui să adăugăm proprietăți suplimentare pentru ID Footer:

#footer( culoarea fundalului:#FFC0FF; clar:ambele; înălțimea: 20px; margin-sus:-20px; lățime: 800px; margin-left: automat; margin-right: automat; )

Folosind proprietatea width:800px, lățimea este setată la 800 pixeli, iar folosind două proprietăți margin-left: auto și margin-right: auto, setarea de indentare din stânga și dreapta subsolului este setată automat, ca urmare a care aceste liniuțe vor fi egale și eroul nostru va fi aliniat la mijloc:

Ei bine, se pare că nu mai e nimic de îmbunătățit, dar nu a fost cazul. Ca întotdeauna, browserul nostru preferat, Internet Explorer 6, nu înțelege ceva din proprietățile CSS pe care le folosim. În acest browser (și, poate, în unele altele vechi), în ciuda tuturor eforturilor noastre, subsolul nu va fi apăsat în partea de jos, ci va rămâne în continuare pe coloana cea mai înaltă a aspectului site-ului.

Toate acestea se întâmplă pentru că ( nu înțelege proprietatea min-height: 100%, pe care am folosit-o pentru a seta înălțimea minimă a blocului principal egală cu înălțimea ecranului.

Prin urmare, pentru a rezolva această problemă va trebui să folosim un așa-numit hack care ne permite să explicăm (pe degetele noastre) browserelor mai vechi ce să facem. Înainte lista CSS proprietăți pentru maket, va trebui să inserați următoarea combinație:

* html #maket ( înălțime: 100%; )

Această regulă se va aplica numai pentru browser de internet Explorer 6, restul nu îl va lua în calcul și îl va implementa.

Deci, aspectul final al Style.css cu subsolul apăsat în partea de jos a ecranului va fi după cum urmează:

Corp, html ( margin: 0px; padding: 0px; înălțime: 100%; ) * html #maket ( înălțime: 100%; ) #maket ( lățime: 800px; margine: 0 auto; min-height: 100%; ) # antet( culoarea fundalului:#C0C000; ) #stânga( culoarea fundalului:#00C0C0; lățime:200px; float:left; ) #right( lățime:200px; culoarea fundal:#FFFF00; float:right; ) #conținut (culoare de fundal:#8080FF; margine-stânga:202px; margine-dreapta:202px; ) #footer( culoarea fundalului:#FFC0FF; clear:both; înălțime: 50px; margin-top:-50px; lățime:800px; margin-left: auto margin-right: auto ) #rasporka ( înălțime: 50px; )

Ei bine, forma finală a Index.html a fost dată chiar mai sus. Asta e tot, această serie de articole dedicate aspectului bloc al amenajărilor site-urilor fixe și fluide cu 2 și 3 coloane poate fi considerată completă.

De asemenea, puteți viziona videoclipul „Lucrul cu eticheta Html div”:

Mult succes pentru tine! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Aspect bloc - Creăm layout-uri cu două, trei coloane și fluide pentru site
Aspect DiV - Creați blocuri pentru un aspect cu două coloane în HTML, determinați dimensiunile acestora și setați poziționarea în CSS

Îmi amintesc că în momentul în care am început să trec de la aspectul tabelelor la aspectul div, una dintre dificultățile pe care le-am întâlnit a fost următoarea - cum să apăs subsolul site-ului până în partea de jos a ferestrei browserului, astfel încât pagina să pară întinsă. înălțimea completă, indiferent de volumul textului, iar dacă înălțimea paginii este mai mare decât înălțimea ferestrei browserului (când apare un defilare), subsolul ar rămâne la locul său.

Dacă cu ajutorul tabelelor această problemă este rezolvată doar prin specificarea înălțimii pentru tabel și/sau celula imbricată în acesta, atunci când folosind CSS aspectul blocului folosește o abordare complet diferită.

În procesul de practică, am identificat 5 moduri de a împinge subsolul în partea de jos a ferestrei browser folosind CSS.

Codul HTML al tuturor metodelor prezentate are următoarea structură (singura diferență este codul CSS):

Codul CSS de mai jos include numai acele proprietăți care sunt minim necesare pentru implementarea metodei corespunzătoare. Pentru fiecare dintre ele puteți vedea un exemplu viu.

Subsolul este apăsat în jos, poziționându-l absolut și extinzând înălțimea blocurilor părinte (html , body și .wrapper) la 100%. În acest caz, conținutul block.content trebuie să specifice o marjă de jos care este egală sau mai mare decât înălțimea subsolului, altfel subsolul va acoperi o parte din conținut.

* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( poziția: relativă; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( poziția : absolut; latime: 100%;

Subsolul este apăsat trăgând blocul de conținut și „părinții” acestuia la înălțimea completă a ferestrei browserului și ridicând subsolul printr-o marjă negativă (margin-sus) pentru a scăpa de defilarea verticală care apare. ÎN în acest caz, Este necesar să se indice înălțimea subsolului și trebuie să fie egală cu cantitatea de indentare.

* ( margine: 0; umplutură: 0; ) html, corp, .wrapper ( înălțime: 100%; ) .conținut ( dimensiunea casetei: border-box; min-height: 100%; padding-bottom: 90px; ) . subsol (înălțime: 80px; margine-sus: -80px; )

Datorită proprietății box-sizing: border-box, împiedicăm cutia cu clasa .conținut să depășească 100% înălțime. Adică, în acest caz, înălțimea minimă: 100% + padding-bottom: 90px este egal cu 100% din înălțimea ferestrei browserului.

Este bine pentru că, spre deosebire de alte metode (cu excepția celei de-a 5-a), înălțimea subsolului nu contează.

* ( margine: 0; padding: 0; ) html, body ( înălțime: 100%; ) .wrapper ( afișare: tabel; înălțime: 100%; ) .conținut ( afișare: masă-rând; înălțime: 100%; )

Aici emulăm comportamentul unui tabel transformând blocul .wrapper într-un tabel și blocul .content într-un rând de tabel (afișare: tabel și, respectiv, afișare: proprietăți table-row). Datorită acestui fapt și faptului că blocul .content și toate containerele sale părinte sunt setate la 100% înălțime, conținutul este întins la înălțimea sa maximă, minus înălțimea subsolului, care este determinată automat - emularea tabelului împiedică extinderea subsolului. dincolo de înălțimea ferestrei browserului.

Ca urmare, subsolul este apăsat în partea de jos.

Această metodă este diferită de oricare dintre cele anterioare, iar particularitatea ei este utilizarea funcției CSS calc() și a unității de măsură vh, care sunt acceptate doar de browserele moderne. Aici trebuie să știți înălțimea exactă a subsolului.

* ( marja: 0; umplutură: 0; ) .conținut ( înălțime minimă: calc(100vh - 80px); )

100vh este înălțimea ferestrei browserului, iar 80px este înălțimea subsolului. Și folosind funcția calc() scădem a doua valoare din prima, apăsând astfel subsolul în partea de jos.

Puteți afla ce browsere acceptă calc() și vh pe caniuse.com folosind următoarele link-uri: suport pentru funcția calc(), suport pentru unitatea vh.

Acest cel mai bun mod dintre toate cele prezentate, cu toate acestea funcționează doar în browsere moderne. Ca și în a treia metodă, înălțimea subsolului nu contează.

* ( margine: 0; umplutură: 0; ) html, corp ( înălțime: 100%; ) .wrapper ( afișare: flex; direcție flex: coloană; înălțime minimă: 100%; ) .conținut ( flex: 1 0 auto ; .footer ( flex: 0 0 auto; )

Puteți afla despre compatibilitatea browserului pentru proprietatea flex.

Acesta este un fel de coșmar! De ce subsolul site-ului tău „apare” din nou și schimbă designul? Este chiar imposibil să apăsați corect subsolul din partea de jos a paginii cu ceva? Conținut sau cărămizi măcar! Cărămida nu se potrivește în monitor?

Văd, apoi stai și nu faci nimic până nu citești articolul nostru până la sfârșit.

Mulți proprietari de site-uri web se confruntă cu această problemă atunci când subsolul paginii plutește pur și simplu în partea de sus. Și atunci nu este clar ce să faci. Cel mai adesea, design-urile de site-uri web puse împreună în grabă, în mod independent (încercuiește „mâinile nebune”) sau de către webmasteri începători, suferă de acest dezavantaj.

În același timp, nu se întâmplă nimic groaznic în primele etape ale vieții site-ului. Și această idilă continuă atâta timp cât conținutul își pune „greutatea” pe subsol, împiedicându-l să se ridice. Dar merită să plasați volume mai mici de material pe pagină, iar subsolul recent „calm” se ridică instantaneu în partea de sus, aducând întregul design al site-ului într-un aspect nepotrivit.

Pentru a elimina acest „defect” al șablonului proiectat, nu este necesar să cheltuiți bani pe serviciile unui webmaster. Cel mai adesea, subsolul site-ului poate fi instalat singur. Să luăm în considerare totul opțiuni posibile Pentru a rezolva această problemă:

Prima modalitate de a ancora un subsol în partea de jos a paginii se bazează pe CSS. Să începem cu exemplul de cod și apoi să aruncăm o privire mai atentă asupra implementării acestuia:

html ( înălțime: 100%; ) antet, navigare, secțiune, articol, deoparte, subsol ( afișare: bloc; ) corp ( înălțime: 100%; ) #wrapper ( lățime: 1000px; margine: 0 auto; înălțime minimă: 100 %; înălțime: auto !important; înălțime: 100%; ; ) #footer ( lățime: 1000px; margine: -100px auto 0; înălțime: 100px; poziție: relativă; culoare de fundal: rgb(51,51,204); )

Pentru a atașa subsolul în partea de jos a paginii, am mutat eticheta în afara containerului (layer wrapper ). Întindem întreaga pagină și conținutul „corpului” până la marginile ecranului. Pentru a face acest lucru, în codul CSS setăm înălțimea etichetelor la 100%:

html ( înălțime: 100%; ) corp ( înălțime: 100%; )

De asemenea, am stabilit înălțimea minimă a stratului de container la 100%. În cazul în care lățimea conținutului este mai mare decât înălțimea containerului, setați proprietatea la auto . Datorită acestui fapt, wrapper-ul se va ajusta automat la lățimea conținutului plasat pe pagină:

#wrapper ( înălțime minimă: 100%; înălțime: automat !important; înălțime: 100%; )

Linia de cod „înălțime: 100%” este destinată versiunilor mai vechi de IE care nu acceptă proprietatea min-height.

Pentru a separa spațiul pentru un subsol în designul paginii, setăm indentarea pentru etichetă la 100 de pixeli:

#conținut ( umplutură: 100px; )

În această etapă, avem o pagină web care este pe întreg ecranul lat și are 100 de pixeli suplimentari, care sunt „neutralizați” printr-o valoare a marjei negative pentru subsol (marja: -100px) atunci când poziția sa este setată la relativă (poziție: relativ). Deci, folosind o valoare negativă de umplutură, „tragem” subsolul în zona containerului, care are înălțimea setată la 100%.

În acest exemplu, marcarea documentului web este specificată folosind relativ nou Etichete HTML 5, care poate fi interpretat greșit de browserele mai vechi. Din această cauză, este posibil ca întregul design al paginii să nu fie afișat corect. Pentru a evita acest lucru, trebuie să înlocuiți noile etichete din arsenalul versiunii 5 a limbajului hipertext cu unele obișnuite:

subsolul conținutului antetului

Metoda discutată mai sus despre cum să faceți subsolul din partea de jos a paginii „de nezdruncinat” nu este potrivită pentru toată lumea. Dacă în viitor veți modifica și îmbunătăți designul site-ului dvs. folosind ferestre pop-up, atunci este mai bine să nu mai utilizați implementarea anterioară.

Cel mai adesea, în implementarea ferestrelor pop-up, proprietatea este utilizată CSS z-index. Folosind valorile sale, setați ordinea în care straturile sunt stivuite unul peste altul.

Cu cât valoarea indicelui z a unui element este mai mare, cu atât va apărea mai mare în stiva generală de „stratificare”.

Dar pentru că am folosit o valoare de umplere negativă pentru subsol în exemplul anterior, partea de jos a ferestrei pop-up se va suprapune pe zona de subsol de sus. Chiar dacă va avea o valoare mai mare a indicelui z. Deoarece părintele (învelișul) ferestrei pop-up mai are o valoare mai mică pentru această proprietate.

Iată o opțiune mai avansată:

CSS - exemplu de cod:

html, body ( înălțime: 100%; ) .header ( înălțime: 120px; culoare de fundal: rgb(0,255,102); ) .main ( înălțime min: 100%; poziție: relativă; culoare de fundal: rgb(100,255,255); ) .footer (înălțime:150px; poziție: absolut; stânga: 0; jos: 0; lățime: 100%; culoare de fundal: rgb(0,0,153); )

După cum puteți vedea din cod, am plasat subsolul ca parte a elementului principal. Am stabilit poziționarea relativă pentru container și poziționarea absolută pentru subsol. Am fixat subsolul chiar în partea de jos a containerului, setându-i poziția în stânga și sus la 0.

Implementările anterioare pot asigura că subsolul este întotdeauna în partea de jos a paginii. Dar numai dacă subsolul are o lățime fixă. Dar ce se întâmplă dacă cantitatea de conținut postată în el nu poate fi prezisă?

Acest lucru va necesita o opțiune mai avansată pentru un subsol nefix. Setează subsolul la rând-tabel pentru proprietatea de afișare. Acest lucru îl va face să apară ca un rând de tabel.

Dacă pantofii sunt componenta finală a oricărei ținute, atunci subsolul unui site de comerț electronic este elementul final al designului său de vânzare. Concentrându-se pe elementul de jos, subsolul, site-urile web moderne sunt gata să-și arate personalitatea în toate modurile posibile. Într-un mediu competitiv de comerț electronic, există suficient idei originale, creativitate și tendințe de design. Înainte de a diversifica subsolul unui site de comerț electronic, merită luate în considerare puncte importante. Ce să plasezi primul și care este cel mai bun mod de a o face? Rezumatul nostru de modele inspiratoare de subsol are câteva opțiuni interesante.

Citește și: 13 tendințe de marketing e-commerce din 2019

Statistici interesante de la Chartbeat. Un studiu al comportamentului a 25 de milioane de utilizatori a arătat cât de adânc navighează pe pagini. Se pare că atenția utilizatorului este atrasă de spațiul de sub linia de pliere. Devenind mai practic informatii utile, vizitatorii zăbovesc cel mai mult în zona de 1200 px din partea de sus a paginii (cu un ecran vertical mediu de 700 px în browser) sau în spatele celui de-al doilea ecran.

Vizualizare timp (sec.) / Distanța de la partea de sus a paginii (pixeli)

Există un decalaj mare în ceea ce privește durata de vizualizare a primului și celui de-al doilea ecran. TOP-ul este de 4 secunde, durata atinge un maxim (16 secunde) la 1200 pixeli de sus și, odată cu derularea în continuare, scade încet.

Ponderea vizitatorilor (%) / Distanța față de partea de sus a paginii (pixeli)

O parte semnificativă a vizitatorilor (mai mult de 25%) nici măcar nu așteaptă să se încarce conținutul și să înceapă derularea paginii. Acest lucru înseamnă că doar 75% vor vedea primul foarte sus. Zona cea mai vizualizată a paginii este de 550 px (chiar deasupra liniei de pliere).

Studiul înlătură mitul potrivit căruia utilizatorii nu derulează în partea de jos a paginii și nu urmăresc tot conținutul. Subsolul este, de asemenea, important pentru un site de comerț electronic modern și chiar are propriile sale avantaje.

Aceste 10 sfaturi vă vor spune cum să proiectați frumos subsolul pentru un site web - conform regulilor de compunere în design web și rezolvarea sarcinilor prioritare. Aplicați cele mai potrivite tactici pentru a îmbunătăți gradul de utilizare, UX (experiența utilizatorului) și chiar pentru a crește vânzările.

În mod tradițional, problemele organizatorice și legale necesare sunt acoperite în subsolul site-ului. Notificările sunt concepute cu text mai puțin proeminent, ceea ce eliberează alte zone ale paginilor pentru elemente mai semnificative. Iată un exemplu de listă de luat în considerare:

• Notificări privind drepturile de autor
• Declinări legale
• Informații de facturare
• Notificare privind cookie-urile

Site-ul web care vinde produsul trebuie să îndeplinească cerințele legale și să ofere informații despre procedură și perioadele de returnare. Locația sa în subsol este convenabilă atât pentru resursa de vânzare, cât și pentru vizitatori.

Magazin online al mărcii Yves Rocher: subsol pe ecran complet cu un design plăcut de straturi alternante. Informează despre companie, infrastructura site-ului de vânzare - de la urmărirea comenzilor până la politica de date cu caracter personal. Există, de asemenea, sfaturi despre utilizarea produsului, bonusuri, promoții

Dealerii de suplimente nutritive sunt supuși unor cerințe legale sporite. responsabilitate. Există destul de multe lucruri pe care ar trebui/nu ar trebui să le spună pe site-ul lor de vânzări. Linkurile către informații juridice sunt evidențiate cu caractere aldine pentru o mai bună vizibilitate.

Un subsol cu ​​o imagine frumoasă de fundal se potrivește foarte organic în designul general al site-ului. Nu există o limită clară, mai degrabă conținutul în sine servește ca separator

Un site web de vânzare cu un design retro frumos pentru antet și subsol. 100 de ani garanție împotriva defectelor de material și finisaj. Condițiile de retur sunt însoțite de povesti interesante... nu totul este atât de trist cu informațiile necesare de comerț electronic, se pare

Când limitați numărul de link-uri de subsol, nu vă zgâriți cu spațiul negativ - acest lucru va avea un efect uimitor asupra percepției vizuale și va îmbunătăți lizibilitatea. Regula generală: Prin menținerea ierarhiei vizuale, elementele centrale sunt observate mai rapid (pot fi folosite în avantajul dumneavoastră!).

Cu un stil minimalist și un meniu derulant fix, magazinul online își poate permite un subsol spațios

DESPRE cantitati mari spațiul micronegativ (între elementele mici) poate fi spus astfel: atâta timp cât toate informațiile necesare sunt prezente, acestea sunt lizibile și percepute rapid - totul este în regulă

Subsolul spațios al unui site de cafea este o completare excelentă a unei compoziții de design curate, în care există mult spațiu macro-negativ („aer” între secțiuni/secțiuni)

Citește și: Peste 30 de exemple și idei pentru proiectarea butoanelor de acțiune țintă

Designul elegant al subsolului spune multe despre resursa în sine. Este important de reținut: cumpărătorul zăbovește aici puțin mai mult decât în ​​alte părți ale paginii. O oportunitate convenabilă pentru încă un apel final la acțiune. Adesea, acesta este un abonament/buletin informativ, dar puteți conecta și un apel CTA la înregistrarea contului.

Greetabl are o parte de jos a paginilor sale, care include un apel pentru abonare. Cu un minim de elemente, apelul devine vizibil și, în armonie cu fundalul turcoaz, se transformă într-un decor al site-ului

Design frumos cu îndemnuri în partea de jos a paginilor. Structura constructorului de site-uri web de vânzare este universală. A fost tradus în 35 de limbi pentru milioanele săi de clienți.

Accesarea coșului de cumpărături din partea de jos a site-ului este o modalitate excelentă de a îmbunătăți gradul de utilizare și calitățile de vânzare ale site-ului.

Site-ul de vânzare al companiei de catering este plăcut la vedere și convenabil pentru cumpărător

Partea de jos a site-ului este ideală pentru informații care nu sunt vizualizate des: despre companie, termeni de utilizare și politica de confidențialitate. În acest caz, funcția subsolului este de a salva pe toată lumea. Simțindu-se pierdut în mediul eCommerce, cineva devine interesat de infrastructură magazin electronic, derulând instinctiv mai departe...

Spațiul negativ este esențial pentru lizibilitatea conținutului. În general, „subsolul” nu este în scop de navigare, spre deosebire de un meniu sau harta site-ului. Doar în cazuri rare, site-urile de comerț electronic plasează categorii individuale de produse în subsol (

În HTML5, au fost introduse mai multe etichete noi pentru structura codului: , , , , , care în unele cazuri înlocuiesc obișnuitele . Deși se pare că nu există mare diferență între etichete, există un decalaj uriaș între ele. Etichetele nu sunt destinate persoanelor care nu au de ce să se uite cod sursă pagini, ci la mașini care interpretează codul. Mașinile sau roboții nu înțeleg, pentru ei aceasta este o etichetă de marcare tipică - înlocuiți-o cu și sensul nu se va schimba. Un alt lucru este că robotul, după ce a detectat această etichetă, o percepe tocmai ca antetul unui site sau al unei secțiuni.

Ce oferă asta până la urmă? Motoarele de căutareÎncep să indexeze mai bine site-ul pentru că separă clar conținutul paginii de elementele auxiliare. Browserele de vorbire concepute pentru nevăzători omit antetul și merg direct la conținut. Site-urile pot partaja automat conținut și alte informații între ele. Toate aceste caracteristici se numesc semantică și vă permit să prezentați datele într-o formă convenabilă pentru roboți.

Să facem mai întâi antetul site-ului folosind o etichetă (exemplul 6.2).

Exemplul 6.2. Utilizare

O încercare de a adăuga un fundal etichetei în stiluri nu a dus la nimic, fundalul nu dorește să fie afișat în unele browsere. Toate etichetele noi ar trebui mai întâi făcute la nivel de bloc prin proprietatea de afișare, apoi vor începe să fie afișate corect (exemplul 6.3).

Exemplul 6.3. Antetul site-ului

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

antet (afișare: bloc; fundal: #00B0D8 url(images/header-gradient.png) repeat-x; )

Acest exemplu va funcționa în toate browserele, cu excepția IE7 și IE8. Internet Explorer nu adaugă stil elementelor pe care nu le înțelege. Această neînțelegere poate fi corectată prin crearea unui element fals folosind JavaScript. Pentru a face acest lucru, vom include acest lucru în cod.

document.createElement("header");

Dacă există o etichetă pe pagină, acest script este destul de potrivit pentru job. Dar nu dorim să repetăm ​​linia de zece ori pentru zece etichete diferite, așa că automatizăm acest proces printr-o buclă. Etichetele în sine sunt indicate într-o listă, separate prin virgule (exemplul 6.4).

Exemplul 6.4. Script pentru IE

var e = ("articol,deoparte,figcaption,figura,footer,header,hgroup,nav,section,time").split(",");< e.length; i++) { document.createElement(e[i]); }

pentru (var i = 0; i

Scriptul în sine este inclus în comentarii condiționate, astfel încât să fie executat numai pentru versiunea IE 8.0 și versiunile anterioare. IE9 include deja suport pentru noile etichete HTML5.

Nu trebuie să încorporați exemplul de mai sus pe site-ul dvs., puteți utiliza un script disponibil public, scris de Remy Sharp și distribuit sub licența MIT. Pentru a face acest lucru, trebuie doar să furnizați un link către acesta, așa cum se arată în exemplul 6.5.

Exemplul 6.5. Script pentru IE

Toate scripturile specificate trebuie să fie localizate în cod înainte de CSS.

în stilurile pentru etichete noi, setați afișare: bloc.

Acum să ne uităm la câteva etichete HTML5 mai detaliat pentru a înțelege scopul lor.

Exemplul 6.6. Folosind o etichetă

HTML5 IE Cr Op Sa Fx

articol Urme de animale fără precedent Povestea cum au apărut misterioase urme roz cu șase degete lângă sala de mese și de ce s-a întâmplat acest lucru.

Definește un bloc care nu are legătură cu conținutul principal pentru plasarea categoriilor, link-urilor către arhivă, etichete și alte informații (exemplul 6.7). Un astfel de bloc, dacă este situat pe lateral, este de obicei numit „bară laterală” sau „bară laterală”.

Exemplul 6.6. Folosind o etichetă

Exemplul 6.7. Utilizare

deoparte document.createElement("deoparte");

document.createElement(„articol”);

deoparte ( fundal: #f0f0f0; /* Culoare fundal */ padding: 10px; /* Margini */ lățime: 200px; /* Sidebar width */ float: right; /* Wrap left */ ) articol ( margine-dreapta: 240px ; /* Indentare dreapta */ afișează: bloc /* Element bloc */ )

Limbă bună

Al cărui băţ este mai mare

Exemplul 6.6. Folosind o etichetă

figura document.createElement("cifra");

Catedrala Sf. Sofia

Biserica poloneză

Conține o descriere pentru etichetă. Eticheta trebuie să fie primul sau ultimul element din grup.

Exemplul 6.6. Folosind o etichetă

Definește „subsolul” unui site sau secțiune, acesta conține de obicei numele autorului, data documentului, contact și informații juridice (exemplul 6.9).

Exemplul 6.9. Utilizare

Mă bucur să vă urez bun venit pe site-ul meu.

Copyright Kristina Vetrova

Definește „antetul” unui site sau al unei secțiuni.

Exemplul 6.6. Folosind o etichetă

Folosit pentru a grupa titlurile de pagini web sau de secțiuni (Exemplul 6.10).

Exemplul 6.10. Utilizare

hgroup Kristina Vetrova Site personal

Exemplul 6.6. Folosind o etichetă

Setează navigarea pe site (exemplu 6.11). Dacă există mai multe blocuri de linkuri pe o pagină, atunci linkurile prioritare sunt de obicei plasate în ele. De asemenea, este acceptabilă utilizarea mai multor etichete într-un document. Nu puneți înăuntru.

Exemplul 6.11. Utilizare

nav Cheburashka și crocodilul Gena Cheburashka | Gene |

Exemplul 6.6. Folosind o etichetă

Shapoklyak | Lariska Bine ai venit!

Definește o secțiune a unui document, care poate include titluri, antet, subsol și corp (Exemplul 6.12). Este permisă cuibărirea unei etichete în alta.

sectiune Filmare Polipropilena

Povestea este despre cum au făcut un film în care eroii se relaxau pe plajă, apoi a venit antagonistul, i-a bătut pe protagoniști, i-a aruncat în piscină și ce s-a întâmplat.

Limbă bună

Povestea este despre modul în care a avut loc un studio pentru studiul limbii esperanto, în timp ce deasupra lui, pe verandă, era un studio de farse unde se spuneau glume și ce a rezultat din asta.

• Marchează textul dintr-o etichetă ca dată, oră sau ambele date și oră. Poate fi specificat direct în interiorul containerului sau specificat prin atributul datetime (exemplul 6.13).
• Data și ora sunt specificate în formatul internațional ISO 8601. Exemple de formatare sunt date în tabel. 6.1.
• Fiecare unitate are propria sa formă și limitări specificate.
• Anul este specificat în patru cifre (1860).
• Minutele sunt două cifre de la 00 la 59.
• Secundele sunt două cifre de la 00 la 59.
• Fus orar - ore și minute indicate printr-un semn plus sau minus.

Data și ora sunt separate printr-o literă latină mare T. Fusul orar, dacă este necesar, se scrie după oră cu semnul plus sau minus. De exemplu, pentru Moscova, fusul orar va fi +03:00.

Exemplul 6.13. Utilizare

Exemplul 6.6. Folosind o etichetă

timp

1957-10-04 A fost lansat primul satelit artificial al Pământului.

1960-08-19 primul zbor de câini în spațiu.

1961-04-12 primul zbor spațial cu echipaj.

1963-06-16 primul zbor al unei femei astronaută.

1969-07-21 om care aterizează pe lună.