Erori comune în aspectul site-ului

Mă bucur să vă urez bun venit din nou, dragi prieteni! În acest articol vom vorbi despre de multe ori fac greșeli în structura site-ului. precum și pe una din comună aspectul ca întreg.

Valabilitatea machiaj? De ce?

S-ar părea, pentru a fi sigur, probleme minore ... de lucru? Și perfect. Dar stai!

Nu închide tag-uri, încălcarea semantică, fișiere atașate, toate acestea afectează în primul rând pe calitatea site-ul dvs.! Nu este necesar să abuzeze de ea, doar suficient pentru a face treaba în mod corespunzător inițial.

Mai jos, puteți vedea sfaturi de bază pentru una dintre structura comună a site-ului creat, principala eroarea admisibilă, pe care este evidențiată în acest articol.

P.S. Ca un instrument util pentru verificarea validității dvs. de pagini web, am sugera o validator.w3.org comună de resurse.

1. Fii atent cu tag-uri imbricate

Cine poate fi asigurat împotriva ridicol, sau nu-mi pasă, atunci când erori de codare? Întotdeauna pentru a căuta vizual scrisul.

Deci, atunci când scrieți structura pagină web, conceput o structură, dar sa dovedit ceva teribil, începe verificarea toate etichetele, atașamentele, deschiderea și închiderea fiecărei etichete și bloc. La fel ca în acest exemplu, am învățat site-ul antet pentru unitatea de bază.

Există și alte erori de cuibărit, nu ca la nivel mondial, dar este foarte neplăcut:

2. Nu uita despre atributele tag-ul

Din moment ce am vorbit despre unul din comun layout-ul, apoi să rămânem la acest principiu. De multe ori, de exemplu, atunci când inserarea de imagini pe un site printr-o etichetă . uita să menționezi un astfel de atribut important al alt = ».»

Crede-mă, acest lucru este un important „detaliu“!

Acest atribut este folosit pentru descrierea fotografiei, în cazul în care acesta nu a fost încărcat pentru un motiv oarecare. Acest lucru este important nu numai pentru motoarele de căutare, dar, mai ales atunci când imaginea este dat un link, și redirecționa utilizatorul către o resursă sau în alt mod.

Prin urmare, nu uita despre asta, prieteni.

Cap este tag-uri h6-H1:

Liste (navigare) etichete

Codul care corespunde acestor condiții, numită semantică, adică Fiecare element de pe o pagină web care corespunde sensul corect. Ceea ce sunt toate? Prin aceasta vreau să spun că mulți pur și simplu nu respectă aceste reguli semantice simple.

Un exemplu direct al încălcării semantica va fi la fel de fel de navigare:

În acest exemplu, puteți aplica stiluri CSS puteți obține rezultatul dorit pe ecranul de navigare, dar toate logica documentului „în jos de scurgere“.

Principalul lucru este să încercați să urmeze semantica și prietenii!

4. Numele și elementele ID-uri de clasă

Prin specificarea unei anumite clase (clasa) sau un element de identificare (ID) pe pagina, să fie ghidată în sensul său.

Adresați-vă în numele de caracteristici semantice pentru a vă ajuta să navigați prin stilul și structura de cod:

Nu lista de nume prea lungi de atribute ale valorilor de date, la fel ca în exemplul de mai jos:

Încearcă să nu ceară valori lungi și clare.

Când lucrați pe un site aspect, la dispoziția dumneavoastră este întotdeauna un singur fișier cu un stil pe care le operează. Dar stiluri, astfel încât este util să se împartă în grupuri. De exemplu:

CSS fișiere pentru structura de bază a site-ului și interfața grafică de utilizator;
fișier de stil pentru a reseta toate stilurile implicite specificatiilor browser-ului, înainte de aspectul site-ului;
fișier stil pentru pop-up (modal) elemente de pe site-ul, etc.

În funcție de situație, astfel încât să nu se conecteze mai multe fișiere cu foi de stil în tag-ul pagina dvs., le puteți conecta pur și simplu la stilul de fișier de bază al proiectului, sau pentru orice alt fișier, prin utilizarea de import fișier CSS, prin urmare, pur și simplu se extinde cu un minim de cod «.css?»:

La început, am întrebat o dată această întrebare: în ce situații mai potrivite pentru a utiliza tag-ul HTML pentru a afișa imaginea, și în care proprietatea CSS background-image - imaginea de fundal?

utilizați eticheta în cazul în care au nevoie de:

proprietate background-image ar trebui să fie utilizat în cazul în care:

Această prezentare grafică pe site;
imaginea nu este o parte a conținutului;
Ai nevoie să repetați imaginea de mai multe ori;
Trebuie să utilizați un sprite pentru viteza de descărcare a paginii.

7. Proprietăți Gruparea CSS

de multe ori mă întâlnesc în fișier stil cantități mari de cod care pot fi ușor tăiate și puse într-o formă mai compactă și ușor de citit. Luați în considerare, de exemplu:

cod foarte lung, care poate fi redus la trei ori, folosind proprietățile grupurilor:

În acest mod simplu ne-am condus în codul nostru de natură mai știință de carte, iar oamenii care vor fi posibil să se lucreze cu el, în viitor, va spune numai tu „vă mulțumesc!“.

cod poate fi citit 8. Scrie

Desigur, fiecare are propriul său stil de programare, scrierea de cod. Dar este întotdeauna o plăcere să lucreze atunci când codul este scris în mod clar, cu atașamente, indentate ușor. În timp ce lucra pe site-ul dvs., cantitatea de cod va creste de mai multe ori! Chiar dacă sunteți singura persoană care lucrează și va lucra la proiectul lor în viitor, aveți în fața ochilor tăi este doar o mizerie. Vă recomand să rămânem la „codarea pură.“
De exemplu, multe CSS-cod este scris în acest stil:

Acum, imaginați-vă cât de multe au un cod similar pentru a scrie într-un stil la stil întregul site. Apoi, va rupe nu numai capul, dar ochii lui, imaginind în ea, sau încercarea de a găsi unele fragmente de corecție.

Vă recomandăm să utilizați această înregistrare sau altele asemenea:

Sunt de acord, acest cod este mult mai ușor de citit.

În cazul în care este dificil și foarte neobișnuit să se readapteze la nou - un stil de „curat“ de codificare, încercați să vă forțați. Acesta va fi doar un plus.