Compararea aspectului tabelului și blocului. Ce este mai bine: aspectul blocului sau al mesei? Aspect de masă sau bloc, care este mai bun?
În ultimii doi ani, tot ce am auzit de la client (clienți) este că el dorește să-și alcătuiască aspectul de design existent al site-ului folosind blocuri. Acestea. are nevoie de un aspect de bloc construit pe DIV-uri și CSS. Dar este chiar atât de bun acest cod? Mă gândesc la asta de multă vreme. A trebuit să creez diferite site-uri, dintre care multe au fost așezate folosind tabele, blocuri sau a treia varianta blocuri și mese.
În opinia mea, avantajele aspectului bloc față de aspectul tabelar sunt evidente:
- dimensiune mică a codului HTML în comparație cu tabelele
- principalii parametri și caracteristici ale blocurilor sunt stocate într-un fișier CSS separat, care este perfect memorat în cache de browsere și nu necesită încărcare constantă.
- abilitatea de a plasa conținutul principal în partea de sus a paginii (în codul în sine), dar să îl afișați pe ecran în orice moment, chiar și în partea de jos. pur și simplu setarea parametrilor corespunzători blocului.
Dar, împreună cu aceste avantaje aparent, apar o serie de probleme și dezavantaje care sunt asociate cu procesul de aspect al blocurilor în sine și cu afișarea acestuia în diferite browsere (în special problemele apar cu Internet Explorer 6).
Principalele dezavantaje, la care ar trebui să acordați atenție și:
- Scrierea unui cod care funcționează corect în toate browserele și, ulterior, afișarea corectă a paginii, necesită mult mai mult timp decât atunci când utilizați aspectul tabelului
- Uneori, codul scris se dovedește a fi mult mai mare decât se aștepta inițial, acest lucru se întâmplă ca urmare a diferitelor ajustări, ajustări, hack-uri sau stiluri suplimentare scrise pentru browsere individuale
- Adesea trebuie să recurgeți la utilizarea JavaScript sau biblioteci precum jQuery, care, de asemenea, nu are cel mai bun efect asupra site-ului în ansamblu. Este posibil ca pagina să nu se afișeze corect dacă browserul utilizatorului nu acceptă execuția JS sau această funcție este dezactivată.
- Din nou, în ceea ce privește un browser atât de problematic precum IE6. În aspectul blocului, parametrul de poziționare float (stânga sau dreapta) este adesea folosit, blocurile încep deseori să sară și să se strecoare unul sub celălalt atunci când dimensiunea paginii (fereastra browserului) se schimbă. De asemenea, s-a observat că atunci când totul funcționează bine în IE Tester (6), în IE6 însuși au existat defecte complete.
- Este adesea necesar să folosiți imagini suplimentare pentru a picta sau pentru a regla fundalul. De exemplu, când blocul de navigare nu poate fi întins pe întreaga înălțime a paginii până la subsol, se folosește o metodă pentru a desena coloane false - Coloane false
- De asemenea, adesea costul unei astfel de lucrări este mai mare decât costul amenajării mesei.
Rezultatul final și timpul petrecut cu acesta pot să nu fie deseori justificate. Din acest motiv, cred că merită să vă gândiți cu atenție la modul în care veți dispune, folosind ce metoda?
Salutări dragi cititori, în acest număr vom vorbi despre tipuri de layout. Probabil că ați auzit cu toții despre bloc și aspect tabelar, astăzi aș dori să vorbesc despre aceste două abordări diferite ale aspectului site-ului web. În articolul anterior, am descris cum să protejăm poșta electronică, puțin mai devreme ne-am uitat la un exemplu specific de magazin care folosește componenta modernă virtuemart pentru CMS-ul gratuit joomla.
Acest articol va fi util dezvoltatorilor web începători care tocmai pornesc pe calea spinoasă a „constructorilor de site-uri” și doresc creați singuri site-uri web. Dezvoltatorii web cu experiență vor putea, de asemenea, să învețe ceva pentru ei înșiși, se compară articolul avantajele și dezavantajele amenajării tabelelor și blocurilor.
Poate ar trebui să începem cu ce este aspectul site-ului? Designerul de layout primește un aspect al viitorului site web de la designer, de regulă, machetele sunt furnizate în format Photoshop; Un aspect este în esență un desen, doar mai detaliat, în el elementele individuale (meniuri, anteturi site-uri web...) sunt separate în straturi, acest lucru se întâmplă în mod natural atunci când designerul desenează aspectul, în plus, este foarte convenabil, puteți ușor copiați desenul din stratul dorit, vedeți parametrii fontului etc. Deci, esența aspectului este de a transforma aspectul într-un document HTML și de a compila un set de reguli CSS.
Trebuie remarcat faptul că aspectul este un proces creativ, nu același lucru, desigur, cu desenarea unui aspect în Photoshop, dar, cu toate acestea, există o cotă de creativitate în acest sens, mai ales în stadiul inițial, apoi, cu experiență din ce în ce mai mare; procesul de layout poate fi mecanizat. Calitatea aspectului este evaluată prin cât de mult diferă aspectul site-ului de aspect.
Tipuri de layout
După cum se spune în titlu aspectul poate fi bloc sau tabelar. În layout-ul bloc, elementele site-ului sunt structurate folosind blocuri (div), în layout-ul tabelar sunt realizate cu tabele (table).Dispunerea tabelului
Dispunerea tabelului folosit la începutul construirii site-ului web, a fost popular printre dezvoltatorii web începători. Trebuie remarcat faptul că mulți webmasteri chiar și acum se descurcă cu aspectul tabelului destul de eficient, așa cum se spune - munca maestrului se teme. Personal, prefer aspectul bloc în locul aspectului tabelar, dar aici nu vorbim despre gusturi. Ideea se bazează pe prezentarea site-ului sub forma unui tabel. După cum știți, marea majoritate a site-urilor au o structură standard care poate fi detaliată pentru o anumită sarcină. Să aruncăm o privire la un site web tipic ca exemplu.
care conține un antet, o zonă de conținut, o bară laterală din dreapta și un subsol, aceasta este structura simplă a blogului meu. Implementăm această structură cu un tabel
| un capac | |
| conţinut | bara laterală |
| subsol | |
tabelul trebuie setat la o lățime fixă specifică dacă aspectul are o lățime fixă sau 100% dacă aspectul este fluid, caz în care tabelul se va întinde pe lățimea ecranului în funcție de rezoluția monitorului.
Avantajele și dezavantajele aspectului tabelului:
- Ușor de înțeles, nu necesită cunoștințe mai profunde de HTML și CSS (+)
- Intuitiv de construit, reguli minime CSS (+)
- Este dificil de înțeles codul HTML cu o structură a site-ului mai complexă (- )
- Până la încărcarea întregului tabel, acesta nu va fi afișat pe ecran (-)
- Designul complex cu elemente suprapuse nu poate fi implementat (-)
- O mulțime de coduri inutile (-)
Să aruncăm o privire mai atentă la punctul 4. Faptul este că tabelele HTML sunt concepute în așa fel încât browserul nu poate ști în avans cum să deseneze tabelul cu conținutul său până când nu este încărcat ultima imagine din tabel, tabelul nu va fi afișat; ecran browser , care poate determina utilizatorii să părăsească site-ul fără a aștepta afișarea paginii, deoarece vizitatorul nu vede nimic pe ecran de ceva timp. Se pare că site-ul încetinește, dar de fapt browserul așteaptă până când toate elementele tabelului sunt încărcate.
aspectul blocului
Dispunerea blocurilor se bazează pe faptul că elementele bloc HTML sunt de obicei aranjate vertical, de sus în jos, unul după altul, în ordinea în care apar în codul HTML. În plus, blocurilor li se poate da proprietatea de flotabilitate ( float:stânga | dreapta | niciunul | moşteni). Dacă specificați proprietatea float:left unui bloc, atunci aceasta va fi aliniată la stânga și toate celelalte blocuri o vor ignora, ca și cum acest bloc nu ar exista, cu excepția textului, alte blocuri care sunt setate la aceeași proprietate va pluti în jurul ei spre dreapta, pe cât posibil permite lățimea ecranului sau a elementului în care se află. Trebuie remarcat că orice element poate fi blocat prin setarea proprietății display:block la acesta, inițial doar elementele div sunt considerate elemente bloc în mod implicit, pentru elementele non-bloc ( span, p ) proprietatea float este ignorată și astfel de elemente sunt dispuse ca de obicei secvenţial de sus în jos. Pentru a vă asigura că proprietatea float nu este ignorată, trebuie să setați proprietatea display:block pe elemente.float:right va alinia blocul la dreapta și toate celelalte blocuri îl vor ignora sau vor curge în jurul lui dacă li se oferă aceeași proprietate și dacă există două sau mai multe blocuri într-un rând cu proprietatea specificată în cod, atunci blocul care vine primul va fi plasat primul la dreapta în cod, restul curge în jurul lui în stânga.
Proprietatea float:none anulează efectul de flotabilitate pentru bloc, dar asta nu înseamnă că blocul va fi poziționat ca de obicei de sus în jos, dacă un bloc cu efect de flotabilitate este situat deasupra, atunci blocul inferior va ignora cel de sus. unul și va sta sub el, astfel încât să nu fie necesar să fie specificat pentru această proprietate bloc clear:both . Wow, greu nu? Pare doar la prima vedere, dar de fapt totul este logic și simplu, trebuie doar să exersați.
float:inherit - setează proprietatea de flotabilitate, la fel cu cea a blocului părinte (blocul în care este imbricat acest bloc copil).
Avem nevoie de exemple specifice, cred că nu este convingător, se pare. Să creăm un exemplu simplu, mai întâi o bază, un bloc roșu cu o lățime de 400 px. inaltime 350 px. și aliniați-l în mijlocul ecranului.
Acum trebuie să adăugați încă câteva blocuri la acest bloc, verde și gri cu o înălțime și lățime de 100 px, blocul gri are o înălțime de 120 px.
Se poate observa că blocurile sunt amplasate în fluxul general de jos în sus, în ordinea în care apar în cod, mai întâi verde, apoi gri și în final albastru. Să setăm blocul verde să plutească: stânga, astfel încât blocurile gri și albastre să-l ignore.
După cum puteți vedea, blocul gri a ignorat blocul verde și a stat sub el, blocul verde, ca de unul singur, blocul albastru aliniat în spatele celui gri. Să stabilim un flux în jurul tuturor blocurilor.
Se poate observa că blocurile sunt aliniate unul după altul în ordinea în care apar în cod. Să încercăm să plasăm două blocuri unul în spatele celuilalt, iar al treilea mai jos, ca de obicei. Pentru a face acest lucru, trebuie să eliminați proprietatea float:left din al treilea bloc, dar acest lucru nu este suficient, deoarece se va accesa sub primele două blocuri, așa cum am văzut mai devreme. Pentru a preveni acest lucru, trebuie să setați proprietatea clear:both la al treilea bloc;
Aceasta este structura pe care am obținut-o la setarea lățimii blocurilor, am ținut cont de faptul că cadrul este de 1 pixel. crește dimensiunea blocului, astfel încât dimensiunea antetului este setată la 398 de pixeli. nu 400 pixeli.
Avantajele și dezavantajele aspectului blocului:
- Greutate mai mică a paginii din cauza codului mai mic (+)
- Implementarea unui design complex cu blocuri suprapuse (+)
- Greu de stăpânit, aspectul tabelului este mai ușor (-)
- Mai des trebuie să rezolvăm probleme între browsere. blocurile se pot suprapune la modificarea rezoluției ecranului, scalarea (-)
Personal, am început cu aspectul tabelului, acum folosesc layout-ul bloc, l-am stăpânit demult, a fost ușor, deși are o serie de dezavantaje, sunt mai obișnuit și mai ușor de folosit.
Atât, dragi cititori, reveniți des.
A cărui traducere este prezentată mai jos special pentru cititorii Habr.
Oricât de uimitor este CSS, nu este suficient să implementezi principiile fundamentale ale aspectului paginii. Cu toate acestea, încep deja să apară opțiuni suplimentare pentru crearea de pagini mai dinamice.
După ani de promisiune, CSS3 și-a dat în sfârșit stilul. A adăugat un set complet nou de instrumente la arsenalul nostru, oferindu-ne colțuri rotunjite, degrade, transparență, transformări de elemente, animație și multe altele. Ce altceva ne poate încânta ochii?
Următoarea problemă cu CSS este marcarea. Până acum, am făcut-o folosind casete plutitoare, poziții relative și trucuri de umplutură negativă, toate acestea fiind dificil de implementat într-un mod care arată ca un aspect standard cu două sau trei coloane.
W3C și producătorii de browsere sunt conștienți de aceste probleme și lucrează la o serie de soluții. Liderul dintre ele este (nu este surprinzător) Internet Explorer. Se pare că IE10 va fi prevestitorul unei noi ere a marcajului CSS, care vă va permite să creați site-uri web grozave, dinamice și captivante, folosind capabilități niciodată posibile până acum.
În acest articol, autorul examinează diverse metode de marcare pe care aș dori să le folosesc în anumite etape de dezvoltare, de la deja implementate la pur teoretice. Este posibil să nu le putem folosi pe toate în viitor (cel puțin nu în forma lor actuală), dar merită să aruncăm o privire asupra acestor metode pentru a înțelege viitorul marcajului CSS.
Coloane
Distribuirea conținutului pe mai multe coloane este un element de bază al tipăririi, iar modulul CSS Multi-Columns oferă aceeași capacitate pentru web. Există două moduri de a crea coloane, fiecare folosind proprietăți diferite (ale elementului părinte). În primul caz, se specifică direct numărul de coloane între care trebuie distribuit textul. De exemplu, acest cod va crea trei coloane de lățime egală, umplând lățimea totală a elementului părinte:Div (număr de coloane: 3; )
În a doua metodă, lățimea coloanelor este fixă, acestea se vor repeta până umple lățimea elementului părinte. În acest exemplu, lățimea coloanei este setată la 140 px, ceea ce înseamnă că cinci coloane ar trebui să apară într-un bloc de 800 px:
Div (lățimea coloanei: 140px; )
În mod implicit, distanța dintre coloane este 1em, dar aceasta poate fi modificată folosind proprietatea coloană-decalaj. De asemenea, puteți plasa linii de despărțire între coloane folosind coloană-regulă, similar în sintaxă cu proprietatea border. Codul de mai jos va crea o linie punctată lată de 2 px și va seta, de asemenea, distanța dintre coloane la 28 px (separatorul va fi în mijloc):
Div (coloană-decalaj: 28px; coloană-regula: 2px punctată #ccc; )
Dacă doriți să vedeți rezultatul, aruncați o privire la exemplul de implementare a coloanelor CSS. Pentru a vedea trei coloane, trebuie să utilizați Firefox, Chrome, Safari, Opera 11.1 sau IE10 Platform Preview (IE10PP). Sau uită-te la captura de ecran de mai jos.
Puteți face diferite lucruri cu difuzoarele. Există un exemplu practic de utilizare a acestora în Wikipedia, în secțiunea de note, unde este folosit număr de coloane. În Firefox, funcționalitatea cu mai multe coloane este implementată cu prefixul -moz-, în Chrome și Safari cu prefixul -webkit-, în Opera 11.1 și IE10PP fără prefixe.
Masa
Nou pentru IE10PP este sistemul de aranjare a mesei. Înainte de a-l folosi, trebuie să decideți asupra rândurilor și coloanelor. Pentru coloane, puteți utiliza valori de lungime cuvânt cheie autoși o nouă unitate de măsură fr(scurt pentru fracțiune, suma relativă). Uită-te la acest exemplu:Div (afișare: grilă; grilă-coloane: 1fr 3fr 1fr; grid-rânduri: 100px automat 12em; )
Acest cod va crea un tabel de trei coloane, al cărui centru va fi de trei ori mai lat decât stânga și dreapta și, de asemenea, de trei rânduri, unde partea de sus va avea 100 de pixeli în înălțime, partea de jos 12em, iar cea din mijloc se va extinde. în înălțime automat, în funcție de lungimea conținutului.
Acum că avem un tabel, putem plasa conținut în el. Folosind elemente HTML5, puteți crea un marcaj de pagină foarte simplu:
Antet ( grid-coloană: 1; grid-coloană-span: 3; grid-row: 1; ) nav ( grid-coloană: 1; grid-row: 2; ) articol ( grid-coloană: 2; grilă-rând: 2; ) deoparte ( grilă-coloană: 3; grilă-rând: 2; ) subsol (grilă-coloană: 1; grilă-coloană-span: 3; grilă-rând: 3; )
Privind îndeaproape codul, veți observa că conținutul paginii este distribuit pe rânduri și coloane folosind, respectiv, proprietăți grilă-rândȘi grilă-coloană. Element articol plasat în a doua coloană a celui de-al doilea rând - centrul tabelului 3x3. Proprietatea este de asemenea folosită coloană-span pentru elemente antetȘi subsol, care le întinde pe toate cele trei coloane (proprietatea funcționează în mod similar rând-span, care nu a fost folosit aici).
Puteți vedea o demonstrație a markupului în exemplul de utilizare a CSS Grid, dar aveți nevoie de platforma IE10. Dacă nu este acolo, atunci uită-te la captura de ecran.
Proprietățile menționate mai sus sunt pe deplin implementate în IE10PP, așa că puteți experimenta cu ele chiar acum. Cu toate acestea, multe proprietăți încă nu sunt implementate.
Probă
O altă abordare a vizualizării tabelului este modulul Model Layout. Utilizează o sintaxă ușor diferită, în care mai întâi trebuie să atribuiți o poziție blocurilor folosind un caracter de literă și o proprietate poziţie:Antet (poziția: a; ) nav (poziția: b; ) articol (poziția: c; )
Odată ce atribuim o poziție, putem crea un marcaj folosind o secvență de caractere. Fiecare secvență este echivalentă cu o linie, iar fiecare caracter din secvență este o coloană. De exemplu, pentru a crea un tabel cu un rând și trei coloane, puteți utiliza:
Div (afișare: „abc”; )
În acest caz, trei elemente distanțate uniform vor fi afișate pe un rând orizontal. Dar puteți repeta caracterele pentru a extinde coloanele și puteți folosi aceleași caractere în aceeași poziție pe linii diferite pentru a extinde rândurile. În exemplul de mai jos, elementul nav se suprapune pe două linii și antetȘi articol se suprapun două coloane (codul formatat pentru claritate):
Div (afișare: „baa” „bcc”; )
Template Layout nu este încă folosit de browsere, dar există deja un script polyfill bun în jQuery care vă va permite să experimentați este cel folosit în exemplul de la link. Rezultatul arată la fel ca exemplul de marcare a tabelului, dar codul este complet diferit.
Pagina demonstrativă folosește JavaScript, așa că ar trebui să funcționeze pe toate browserele moderne. Markupul tabelului poate accepta, de asemenea, sintaxa șablonului, ca în exemplul de mai jos:
Antet ( grid-cell: a; ) articol ( grid-cell: b; ) div ( display: grid; grid-template: "a" "b"; )
Acest cod este identic din punct de vedere funcțional cu proprietățile Aspectului șablonului, dar, de asemenea, nu a fost încă implementat (și poate nu va fi niciodată).
Blocuri plutitoare poziționabile
Proprietatea actuală pluti permite textului să curgă în jurul unui element la stânga sau la dreapta, dar o proprietate extinsă în IE10PP vă permite să îmbunătățiți un element plutitor plasându-l oriunde, iar conținutul adiacent va curge în continuare în jurul acelui bloc. Acest lucru a necesitat doar o nouă valoare pentru proprietate pluti:Div (float: poziționat; stânga: 200px; poziție: absolut; sus: 100px; lățime: 250px; )
Acest cod va crea un element cu lățime de 250 px, poziționat la 200 px la stânga și la 100 px din partea de sus a obiectului părinte. În mod implicit, orice alt conținut din interiorul părintelui se va înfășura în jurul elementului poziționat pe toate părțile, dar acesta poate fi schimbat cu valori diferite ale proprietăților tip wrap, de exemplu, când textul se înfășoară în jurul unui element numai în partea de sus și de jos:
Div (tip înfășurat: sus-jos; )
Puteți combina proprietățile de poziționare și aspectul tabelului plasând un element într-un tabel și permițând conținutului să se înfășoare în jurul acestuia:
Div (float: poziționat; grilă-coloană: 2; grilă-rând: 2; )
Dacă aveți IE10PP, atunci puteți. Dacă nu, atunci rezultatul este afișat în captura de ecran de mai jos, nu poate fi implementat cu capabilitățile actuale CSS.
Excluderile
Proprietate pluti permite raționalizarea numai a elementelor dreptunghiulare, dar documentația prevede împachetarea în formă. Ideea a venit după utilizarea modulului CSS Exclusions. Are două proprietăți cheie. Primul, formă de înfășurare, vă permite să creați elipse, dreptunghiuri sau poligoane care vor defini forma blocului care curge în jurul conținutului, de exemplu:Div (forma de înfășurare: cerc(50%, 50%, 100px); )
Acest cod va crea un cerc cu o rază de 100px care va fi centrat pe elementul părinte. Puteți utiliza funcția poligon() pentru a crea orice formă prin specificarea perechilor de coordonate separate printr-un spațiu, de exemplu pentru un triunghi:
Div (forma de înfășurare: poligon(0,100px 100px,100px 50px,0); )
Când există deja o formă dată, conținutul interior poate fi făcut să curgă în jurul acelei forme folosind a doua proprietate modul-înfășurare-formă, ca aici:
Div ( wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; )
Puteți vedea Excluderile CSS în acțiune descărcând un prototip pentru Mac sau Windows din laboratorul Adobe. Există o documentație completă și câteva fișiere demonstrative foarte interesante, de exemplu acesta:
Regiuni
Următoarea ofertă a Adobe este CSS Regions, care definește modul în care conținutul este distribuit în mai multe elemente diferite. Acest lucru se face prin definirea mai întâi a unui element care va oferi conținut altora, folosind un identificator unic de șir în proprietate curgere, apoi selectează ce zone vor fi umplute cu acest conținut utilizând funcția din() proprietăți conţinut:Conținut ( flux: foo; ) .target1, .target2 ( conținut: din(foo); )
Aici conținutul va fi preluat din element .conţinut, iar apoi va fi distribuit mai întâi peste element .ţintă1 iar dacă blocul nu este suficient pentru a afișa conținutul, atunci acesta va continua să fie afișat în .ţintă2. Conținutul nu va fi duplicat în blocuri, va începe în primul și va continua în al doilea (dacă este necesar). Pentru a înțelege mai bine, aruncați o privire la imaginea de mai jos.
Apropo, nu există cerințe pentru zonele țintă cu privire la locația lor în marcaj. Ele pot fi plasate pe părțile opuse ale paginii dacă este necesar.
Specificațiile pentru zonele CSS nu au fost încă implementate în browsere, dar prin analogie cu Exclusions, puteți folosi un prototip din laboratorul Adobe și încercați singur funcționalitatea.
Concluzie
Nu este încă clar care dintre noile module de layout (de la FlexBox și Columns) va fi implementat complet în browsere. În ceea ce privește blocurile plutitoare și excluderile, aș dori să le traversez din cauza asemănării funcționalității (poate că acest lucru se va întâmpla). Marcarea tabelului este strâns legată de marcarea șablonului și poate fi de așteptat să apară în IE10. Regiunile CSS au fost deja implementate într-unul dintre fork-urile WebKit și probabil că vor apărea în browserele WebKit (Safari, Chrome și altele) foarte curând.Astfel, putem prezice că, cu unele modificări de sintaxă, tot ceea ce este descris mai sus va fi folosit în CSS3 în viitor. Este foarte bine dacă se întâmplă acest lucru, deoarece, în acest caz, noile metode vă vor permite să creați site-uri foarte bine concepute cu costuri minime în doar câțiva ani.
- flexbox
- html5
În secțiunea CSS, am vorbit despre principiile de bază ale CSS și despre cazurile tipice de utilizare a acestuia. Au fost revizuite elementele de bază ale CSS, tipurile posibile de selectoare și structura HTML din punct de vedere CSS. Am enumerat cele mai comune proprietăți CSS și am arătat cum pot fi setate pentru elementele paginii. Am acordat suficientă atenție proprietăților CSS responsabile pentru indentări și margini, redarea textului, imaginilor, legăturilor și listelor. În cele din urmă, am stabilit proprietățile specifice stilului mesei.
Toate acestea sunt bune, dar problema folosirii stilurilor CSS pentru a forma structura și aspectul paginii rămâne încă deschisă. Anterior, când puțini oameni știau despre CSS și tocmai se dezvolta ca o tehnologie eficientă, tabelele erau folosite aproape universal în aceste scopuri. De regulă, au ocupat tot spațiul de pe pagină și, folosind celule de tabel, au fost specificate regiuni pentru plasarea secțiunilor individuale. Prezența unor proprietăți precum colspan și rowspan , care vă permit, respectiv, să lipiți mai multe coloane pe o linie și mai multe linii într-o coloană, a oferit și mai multă flexibilitate markupului definit în acest fel. Foarte des, tabelele imbricate au fost folosite ca conținutul unei celule, care, la rândul lor, ar putea avea propriile tabele imbricate. O astfel de structura a paginii, in cazul volumelor mari, a devenit grea, greu de intretinut si deloc flexibila. De exemplu, pentru a muta o secțiune de pe o parte a paginii pe cealaltă, în unele cazuri a trebuit să stau ore în șir și să rescriu manual marcajul.
Acum, cu utilizarea CSS, totul a devenit mult mai ușor. Este suficient să separați conținutul secțiunii necesare într-un strat separat folosind o etichetă div și să setați pur și simplu reguli de poziționare pentru aceasta pe pagină folosind proprietățile CSS. Dacă mai târziu trebuie să mutați această secțiune în partea opusă a paginii, puteți modifica pur și simplu proprietățile CSS fără a atinge codul paginii în sine. Totul este foarte simplu și convenabil. Cu toate acestea, pentru ca această simplitate să fie evidentă, trebuie să cunoașteți puțin mai profund aceste posibilități.
În acest articol voi vorbi despre ce tipuri de layout de pagină există, cum să le folosești și cum să le creezi. Dar să începem de la început.
Opțiuni de aspect de pagină.
De regulă, toate paginile pot fi împărțite în trei categorii:
Pagini cu lățime fixă. Astfel de pagini au o limită a lățimii elementelor lor și, indiferent de dimensiunea ferestrei browserului, lățimea regiunii utilizate este fixă și nu se modifică în timpul lucrului cu pagina. Astfel de pagini sunt folosite în locuri în care sunt stabilite cerințe stricte pentru afișarea elementelor paginii și răspândirea necontrolată a unor elemente este pur și simplu inacceptabilă. În astfel de cazuri, este obișnuit să setați o lățime fixă pentru eticheta body și să centrați pagina de-a lungul lățimii ferestrei browserului. Cea mai comună valoare a lățimii pentru paginile cu lățime fixă este de 960 px - această dimensiune permite paginii să arate bine la rezoluțiile ecranului începând de la 1024x768.
Pagini cu lățime plutitoare. – Pentru acest tip de pagină nu este specificată lățimea elementelor sale, iar acestea își schimbă liber dimensiunile, răspândindu-se pe întreg ecranul sau secțiunea părinte și ocupând tot spațiul liber. Această abordare este cea mai potrivită de utilizat dacă scopul principal al paginii este de a afișa text. În alte cazuri, utilizarea unor astfel de abordări te poate transforma în Don Quijote, luptându-te fără rost cu o moară de vânt, care în cazul tău va fi browserul.
„Pagini elastice”. Aceste pagini combină ambele abordări. Elementele unor astfel de pagini au o lățime fixă, dar se pot întinde sau micșora în funcție de lățimea ferestrei browserului în intervale predefinite. În astfel de scopuri, puteți utiliza proprietățile înălțime minimă, lățime minimă, înălțime maximăși max-width pe care le-am menționat în prima parte.
Pentru a obține cele mai bune rezultate, este adesea logic să combinați toate cele trei abordări ale aspectului paginii: de exemplu, faceți toate secțiunile auxiliare și de navigare - în care răspândirea necontrolată a elementelor este inacceptabilă - fixate în lățime și faceți panoul central „ elastic” sau chiar îi permiteți să ocupe tot spațiul rămas după secțiuni fixe din fereastra browserului.
Metode de aranjare a paginii
CSS vă permite să implementați în mod eficient markup folosind diferite tehnici și tehnici. Cele mai comune metode includ straturi plutitoare(în sursele în limba engleză, această tehnică poate fi numită float layout) și poziționare absolută(poziționare absolută). Mai mult decât atât, subiectiv, marcarea marii majorități a site-urilor folosește straturi plutitoare. În continuare, voi încerca să iau în considerare fiecare dintre aceste tehnici mai detaliat.
Straturi plutitoare
Straturi plutitoare sunt implementate prin manipularea proprietății float a elementelor paginii. Folosind această proprietate, un strat, paragrafe și alte elemente pot fi poziționate în partea stângă sau dreaptă a paginii sau a containerului exterior. Pentru a face acest lucru, trebuie să setați proprietatea float cu valoarea corespunzătoare: float: left, right, none; . Restul conținutului paginii va „înconjura” acest element, apăsat într-o parte. Un punct foarte important de remarcat este că conținutul va înconjura un element flotant numai atunci când este definit sub această etichetă în codul paginii și lățimea acestuia nu este mai mare decât lățimea rămasă a paginii sau a containerului exterior. Prin urmare, în acest caz este foarte important să se determine succesiunea descrierii elementelor paginii din fișierul HTML.
Uneori există situații în care este necesar să vă asigurați că un anumit conținut nu înconjoară un element flotant, ci este desenat sub acest element. Un exemplu de astfel de situație ar fi panoul de subsol, care, indiferent de ce, ar trebui să fie întotdeauna în partea de jos a paginii. Aici proprietatea clară poate veni în ajutor și ia următoarele valori: clar: stânga; dreapta; ambii; nici unul. Această proprietate obligă conținutul să fie desenat sub elementul flotant. Mai mult, folosind valorile acestei proprietăți, puteți specifica ce elemente flotante se aplică: aliniat la stânga, aliniat la dreapta, ambele sau niciunul. Deci, dacă aveți un element cu float:left , pentru a afișa restul conținutului de mai jos și pentru a nu permite acestuia să înconjoare elementul dat, ar trebui să utilizați și clear:left .
Cu toate acestea, funcționalitatea descrisă nu este cu siguranță suficientă pentru a implementa eficient marcarea paginii. Acum este momentul să înțelegeți tehnicile de reglare fină a marcajului. În cazul straturilor plutitoare, poziția orizontală a unui element de pagină este de obicei setată folosind marginea proprietății CSS, care, după cum știm deja, este folosită pentru a seta distanța de la marginea unui element la alt element. La prima vedere, acest lucru poate părea oarecum ciudat și nepractic. Cu toate acestea, acest lucru este doar la prima vedere. O caracteristică unică a acestei proprietăți este că o puteți seta la valori negative, deplasând astfel elementul la stânga poziției sale inițiale. Ei bine, în consecință, o valoare pozitivă mută elementul la dreapta (de fapt, desigur, elementul rămâne la locul său, doar adăugarea proprietății marginii elementului îl deplasează vizual cu valoarea specificată).
Astfel, puteți seta o lățime și o înălțime fixe pentru elemente folosind lățimea și, respectiv, înălțimea, specificați valorile de float și margine necesare și vă bucurați de rezultat. Acțiunile ulterioare sunt limitate doar de imaginația și ingeniozitatea ta. De exemplu, vreau să arăt cum ar putea fi marcată o pagină. Mai jos este un exemplu de pagină împărțită în secțiuni și codul pentru fișierul CSS și pagina HTML.
| Vezi imaginea | |
| Index.html | Main.css |
| | /*ștergeți valorile predefinite ale browserului*/ Captuseala: 0; Dimensiunea fontului: 100%; Greutatea fontului: normal; fundal: #C2C2C2; /*definind margin-left: auto; și margine-dreapta: auto; plasăm conținutul corpului în centrul ecranului*/ margine-stânga: auto; margine-dreapta: auto; fundal: #FFF; text-align: centru; fundal: #F2F2F2; chenar: 1px solid #FD8000; chenar-stânga: 5px solid #FD8000; fundal: #F2F2F2; chenar: 1px solid #FD8000; marja: 1px; margine-stânga: 205px; #bottom-lsidebar margine-dreapta: 2px; fundal: #FD8000; |
Poziționare absolută
Poziționare absolută, așa cum am spus deja, nu este folosit la fel de des ca straturile plutitoare, dar merită și atenție. Uneori se întâmplă că recepția straturilor plutitoare se dovedește a fi inacceptabilă dintr-un motiv oarecare și, prin urmare, tot ceea ce ne rămâne într-o astfel de situație este poziționarea absolută. Cu toate acestea, cel mai adesea poziționarea absolută este utilizată pentru poziționarea locală - specificând plasarea unui element în raport cu poziția altuia. Într-un fel sau altul, cu siguranță trebuie să știți despre această tehnică.
Această tehnică se bazează pe utilizarea proprietății de poziție, care poate lua următoarele valori: poziție: absolută, relativă, fixă, statică. Valoarea absolută specifică poziția elementului în coordonatele ecranului sau elementul părinte, așa cum va fi arătat mai jos. relativ – definește poziția relativ la locația implicită. Specificarea unui offset folosind această valoare lasă o „gaură” în pagină, deci, de regulă, nu merită să-l folosiți în acest fel, pe cât posibil - puțin mai târziu. fix – Indică poziția pe ecran, indiferent de scroll, adică indiferent cât de mult ai derula bara de defilare, elementul va rămâne în continuare în poziția sa. Valoarea statică este poziționarea normală dacă nu este specificat un tip de poziționare pentru un element, această valoare este aplicată implicit.
Odată ce proprietatea de poziție pentru un element a fost setată, este logic să specificați proprietățile care definesc coordonatele elementului: sus, jos, stânga și dreapta. Deci, prin specificarea poziției: absolută pentru orice element, puteți seta poziția acestuia folosind proprietățile de mai sus în raport cu una sau alta margine a ferestrei browserului. Cu toate acestea, dacă vorbim despre orice element care, să zicem, este situat în interiorul unui strat, atunci poziționarea absolută a unui astfel de element se realizează relativ la limitele acestui strat.
Pentru a clarifica acest lucru, să ne uităm la un exemplu simplu. Să presupunem că avem un titlu și în interiorul titlului există o imagine. Atunci poziția sa relativ la acest titlu poate fi setată astfel:
h1 ( poziție: relativ; )
poziție: absolută;
Adică, folosind pentru titlu poziția: relativă; , se pare că spunem să efectuăm poziționare „față de mine”, dar poziția de proprietate: absolută;
efectuează poziționarea față de limitele elementului părinte. Ca și în cazul tehnicii anterioare, voi oferi un exemplu pentru a clarifica ce ar trebui folosit și cum.
| Vezi imaginea | |
| Index.html | Main.css |
| | html, corp, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, cod, adresa, variabilă, formular, set de câmpuri, citat bloc ( umplutură: 0; Dimensiunea fontului: 100%; Greutatea fontului: normal; fundal: #c2c2c2 ; margine-stânga: auto; margine-dreapta: auto; fundal: #FFF ; /*panouri comune ale site-urilor*/ fundal: #F2F2F2; chenar: 1px solid #FD8000; chenar-sus: 20px solid #FD8000; margine-sus: -20px; greutatea fontului: bold; text-transform: capitalize; poziție: relativă; poziție: absolută; stânga: 205px; poziție: absolută; poziție: absolută; poziție: absolută; |
Deci, ce urmează?
Probabil că asta este tot ce există în marcaj. Alte nuanțe ale utilizării CSS pentru această sarcină vor fi specifice proiectului, browserului și cerințelor dvs. Desigur, nici acum nu am vorbit despre multe lucruri. Nu v-am avertizat despre specificul markupului paginii pentru IE 6.0 (oh, da, ar trebui să scriu o carte separată despre asta). Sunt o mulțime de lucruri acolo, chiar și din ceea ce am vorbit, care nu vor funcționa sau nu vor funcționa așa cum ți-ai dori. Și pentru ca acesta să funcționeze, trebuie să utilizați vrăji magice precum * html sau zoom: 1; Nu a spus nimic despre cum să rezolvi problemele care apar în timpul marcajului, când panourile se târăsc în mod inexplicabil unde și de ce (și crede-mă, asta se va întâmpla și de mai multe ori, și nu numai ție). Nu am vorbit despre proprietatea z-index, aceasta este foarte importantă, mai ales în cazul poziționării absolute, când conținutul unui element se suprapune cu conținutul altuia. Nu v-am spus despre minunata proprietate de overflow, care ajută la gestionarea conținutului panoului care nu se încadrează în interior și vrea doar să sară din stratul său. Și multe, multe, multe alte lucruri despre care am tăcut. Nu pentru că aș fi prost, doar puțin leneș
Aici ne vom uita la greșelile obișnuite în markup HTML5 din punct de vedere semantic și cum să le evităm.
În timp ce observam site-urile din Galeria de site-uri HTML5 și răspundeam la întrebările utilizatorilor, am văzut o mulțime de site-uri cu marcaj HTML5. În acest articol, vă voi arăta câteva greșeli și practici proaste de marcare pe care le-am văzut frecvent și vă voi explica cum să le evitați.
Nu folosiți o etichetă ca înveliș pentru coafare
Una dintre cele mai frecvente probleme pe care le-am observat este înlocuirea banală„s pe elementele structurale HTML5, în special „s. Acestea. când ceea ce în XHTML sau HTML4 arată astfel:
Pagina mea super duper
Rescrie-l astfel:
Este pur și simplu greșit: nu un ambalaj. Acest element se referă la blocul semantic al conținutului dvs. care este utilizat pentru a construi „conturul documentului” și trebuie să conțină un titlu. Dacă aveți nevoie de un element de ambalare, încercați să vă descurcați (Kroc Kamen are ceva de oferit). Dacă acest lucru nu rezolvă problema necesității de ambalaje suplimentare, folosiți vechiul bun
„s. Odată cu apariția HTML5
„Nu ești mort și ei sunt perfecți în acest caz.
Luând în considerare toate cele de mai sus, ar fi bine să marcați exemplul de mai sus folosind HTML5 astfel:
Pagina mea super duper
Dacă nu sunteți sigur ce element să utilizați, atunci vă sfătuiesc să utilizați diagrama noastră de selecție a elementelor ( aproximativ traducător: vezi chiar în partea de jos a intrării).
Utilizați numai atunci când este necesar
Nu are rost să scrii cod dacă nu trebuie, nu? Din păcate, observ adesea cum și unde nu sunt necesare. Puteți citi despre elemente mai detaliat, dar voi sublinia pe scurt punctele cheie:- Elementul reprezintă un grup de ajutoare introductive sau de navigare și de obicei conține un titlu de secțiune
- Un element grupează un set de elemente
-
, reprezentând titlul de secțiune în cazul în care este format din mai multe niveluri (subtitluri, rubrici alternative etc.)
Excesul de elemente
Sunt sigur că știți bine că un element poate fi folosit de mai multe ori într-un document. Prin urmare, acest lucru se întâmplă adesea:Cea mai bună postare pe blog a mea
Dacă al tău conține un singur element antet, atunci nu este necesar. În acest caz, elementul garantează deja că antetul va fi inclus în schița documentului și, deoarece nu conține mai multe elemente (prin definiție), poate fi eliminat în siguranță. Pur și simplu, acesta este suficient:
Cea mai bună postare pe blog a mea
Folosire greșită
Și din nou despre titluri: văd adesea o utilizare incorectă a elementului. Nu trebuie utilizat cu dacă:- Există un singur antet
- bun în sine (adică fără).
Cea mai bună postare pe blog a mea
În acest caz, eliminați hgroup.
Cea mai bună postare pe blog a mea
Al doilea caz este un alt exemplu de utilizare inutilă a unui element.
Compania mea
Înființată în 1893
Dacă sunteți singurul copil, de ce este necesar acest lucru Dacă nu aveți elemente suplimentare în „e (adică, soră în legătură cu), eliminați-l.
Compania mea
Înființată în 1893
Nu încadrați toate linkurile
HTML5 a introdus 30 de elemente noi pentru a ne oferi capacitatea de a crea markup structurat și semnificativ. Dar nu ar trebui să folosiți exagerat elementele semantice noi. Din păcate, exact asta se întâmplă. Specificația îl descrie astfel:Elementul nav reprezintă o secțiune a unei pagini care o leagă la alte pagini sau părți ale celei curente (o secțiune cu legături de navigare).Specificații HTML WHATWGNotă: Nu toate grupurile de legături trebuie plasate în elementul de navigare. Ar trebui folosit pentru navigație principală. Adesea, în subsoluri există o mică listă de link-uri către diverse pagini ale site-ului (Acasă, Ajutor, termeni de utilizare, etc). În acest caz, un subsol ar trebui să fie suficient Deși nimic nu vă împiedică să utilizați nav, nu este necesar.
Expresia cheie este „navigația principală”. Se poate argumenta mult timp despre ce se înțelege prin principal, dar pentru mine este:
- Navigare primară
- Cautare site
- Navigație secundară (discutabil)
- Navigare în pagină (în cadrul unui articol lung, de exemplu)
- Comutatoare de pagini
- Legături sociale (deși pot exista excepții în cazurile în care legăturile sociale reprezintă navigarea principală. De exemplu, site-uri precum about.me sau flavors.me)
- Postează etichete
- Postari categorii
- Navigatie tertiara
- Subsolurile volumului
- „Nu utilizați dacă credeți că și x > ar funcționa” - Hixie pe IRC
- Poate că ar trebui să adăugăm „Mergi la” pentru comoditate?
Erori frecvente în utilizarea elementului
Ah, . Înțelegerea utilizării corecte a acestui element, ca și fratele său, nu este ușoară. Să aruncăm o privire la câteva greșeli comune cu privire la acest element.Nu toate imaginile
Anterior, am sfătuit să nu scriem mai mult cod decât era necesar. Situația este similară aici. Am văzut site-uri în care fiecare poză a fost înrămată. Nu utilizați mai mult markup doar pentru a utiliza mai mult markup. Pur și simplu creați mai multă muncă pentru dvs., dar nu vă îmbunătățiți descrierea conținutului.Specificația îl descrie ca „conținut autonom, eventual cu un antet și, de obicei, un element de flux autonom”. Aici este, toată frumusețea - elementul poate fi mutat cu ușurință din conținutul principal, de exemplu, în bara laterală.
Diagrama de selecție a articolelor de mai sus vă va ajuta să faceți față.
Dacă imaginea are doar valoare de prezentare și nu este referită nicăieri în document, cu siguranță nu este. În caz contrar, pune-ți întrebarea: „Este această imagine în contextul actual necesară pentru înțelegere?” Dacă nu, se pare că nu (poate). Dacă da, întrebați-vă: „Pot muta acest lucru într-o aplicație?” Dacă răspunsul la ambele întrebări este da, atunci s-ar putea să funcționeze.
Logo-ul tău nu este
Același lucru este valabil și pentru logo. Văd des această aplicație:Numele companiei mele
Nimic de adăugat aici. Acest lucru pur și simplu nu este adevărat. Se poate certa mult timp dacă logo-ul ar trebui să fie inclus, dar nu vorbim despre asta acum. Adevărata greșeală este utilizarea excesivă a elementului. ar trebui să fie folosit numai atunci când vă referiți la el într-un document. Este puțin probabil să vă conectați la logo-ul dvs. oriunde. E de ajuns: Numele companiei mele
poate să nu fie doar o imagine
O altă neînțelegere comună a elementului este presupunerea că acesta poate fi folosit doar pentru imagini. Dar asta nu este adevărat. Poate conține video, audio, grafică (în SVG, de exemplu), un citat, un tabel, un bloc de cod, o poezie sau orice combinație a celor de mai sus. Nu te limita doar la poze. Sarcina noastră în calitate de adepți a standardelor web este să descriem conținutul marcajului nostru.
Nu cu mult timp în urmă am scris despre element mai detaliat. Vă recomand să îl citiți dacă doriți să îl înțelegeți mai bine sau să vă reîmprospătați amintirile.
Nu utilizați atributul de tip inutil
Aceasta este poate cea mai frecventă problemă întâlnită cu galeria HTML5. Deși aceasta nu este o eroare, cred că cel mai bine este să o eviți.În HTML5 nu este nevoie să specificați un atribut de tip pe elemente
În schimb, puteți scrie pur și simplu:
Printre altele, puteți reduce și cantitatea de cod cheltuită pentru specificarea codificării. Capitolul lui Mark Pilgrim despre semantică din Dive into HTML5 descrie toate astfel de practici.
Utilizarea incorectă a atributelor formularului
Poate că știți deja că HTML5 introduce o mulțime de atribute noi de formular. Ne vom uita la ele în viitorul apropiat, dar acum vă voi spune pe scurt ce să nu faceți.Atribute booleene
Există, de asemenea, atribute logice pentru elementele multimedia și altele. Regulile pe care le descriu se aplică și acestora.Unele dintre noile atribute de formă sunt booleene, adică prezența lor în marcaj determină comportamentul elementelor. Inclusiv aceasta:
- autofocus
- completare automată
- necesar
Le văd rar, dar în cazul necesar am văzut asta:
În cele din urmă, acest lucru nu amenință cu nimic rău. Analizorul HTML client va întâlni atributul necesar în marcaj și va aplica regulile corespunzătoare. Dar dacă o facem altfel și scriem required="false"?
Analizatorul va vedea în continuare atributul necesar și va aplica comportamentul corespunzător, chiar dacă îi spuneți să nu o facă. Evident, asta nu este ceea ce ți-ai dorit.
O valoare booleană poate fi aplicată în trei moduri: (a doua și a treia sunt tipice pentru XHTML)
- necesar
- necesar=""
- necesar="necesar="
În legătură cu exemplul nostru de mai sus, am putea scrie acest lucru (în HTML):
Etichete: Adăugați etichete
Mai întâi, să definim ce este marcajul? După cum sugerează termenul însuși, marcare- aceasta este plasarea etichetelor, în cazul nostru în codul HTML al documentului, adică pagini web. Markerii sunt aici Etichete, care vă permit să definiți limitele marcajului sau să creați un element de document HTML. Încă nu este clar? Apoi citiți mai departe și totul va cădea la loc.
Elementele de bază ale marcajului HTML sau ce este o etichetă
O etichetă este o construcție care începe cu un semn mai mic decât () . Majoritatea etichetelor constau dintr-o etichetă de deschidere și o etichetă de închidere. Diferența dintre ele este că în eticheta de deschidere puteți (dacă este necesar) să specificați un număr de proprietăți suplimentare folosind așa-numitele atribute, iar la începutul numelui eticheta de inchidere este specificat caracterul selsh (/), de exemplu:
Textul paragrafului aliniat la dreapta.
.În acest caz, eticheta p block creează un paragraf, iar atributul align aliniază conținutul paragrafului la dreapta.
Trebuie remarcat faptul că în HTML, etichetele vin în două tipuri: bloc și inline. Blocați etichetele creați un element bloc, adesea cu indentare și dedesubt următoarele elemente sunt deja " o nouă linie». Etichete de linie sunt destinate să marcheze o bucată de cod și nu creează o întrerupere de linie.
După cum se spune: există excepții de la orice regulă - același lucru este valabil și pentru etichete. Există etichete care nu au o etichetă de închidere și sunt destinate să creeze etichete și elemente ale unui document HTML, de exemplu:
În acest caz, eticheta șir img inserează un element în pagina web sub forma unei imagini, a cărei adresă este scrisă în atributul src. Valoarea atributului alt este textul alternativ care este afișat dacă imaginea nu este disponibilă, iar atributul chenar specifică grosimea chenarului din jurul imaginii.
Pentru a vă face mai ușor să vă amintiți tot ce s-a afirmat mai sus, vă voi oferi o foaie mică și vizuală pe care o puteți folosi pentru a învăța HTML:
Un ghid rapid pentru etichetele HTML
Și așa, am întâlnit deja două etichete, așa că le voi omite. Mai jos voi oferi o serie de etichete de marcare a documentelor HTML și unele dintre atributele acestora. Pentru început, acest lucru va fi mai mult decât suficient, dar dacă sunteți interesat de o listă completă a etichetelor HTML și a atributelor acestora, vă recomand să aruncați o privire pe site-ul web htmlbook.ru și, de asemenea, să îl adăugați la marcajele dvs. ca fiind cel mai complet și carte de referință convenabilă despre HTML și CSS. Să continuăm?
Cum se face un link? Pentru a face acest lucru, trebuie să utilizați eticheta șir A, care marchează textul pe care îl conține ca legătură- un element activ al unei pagini web, la clic, utilizatorul poate merge la o altă pagină web, a cărei adresă este specificată în atributul href.
Cum să faci textul aldine? Pentru a face acest lucru, trebuie să utilizați eticheta de linie B, care setează textul pe care îl conține la un stil de font aldine.
Cum se face textul italic? Pentru a face acest lucru, trebuie să utilizați eticheta I inline, care setează textul pe care îl conține la un stil de font italic.
Cum se subliniază textul? Pentru a face acest lucru, trebuie să utilizați eticheta șir U, care adaugă o subliniere textului pe care îl conține.
Cum să ștergeți textul? Pentru a face acest lucru, trebuie să utilizați eticheta S line, care afișează textul ca barat.
Cum să evidențiezi codul în text? Pentru a face acest lucru, trebuie să utilizați eticheta șir CODE, care este de obicei redată într-un font monospațiat de browser, de ex. curier nou.
Cum se formatează codul în text? Pentru a face acest lucru, trebuie să utilizați eticheta bloc PRE, care definește un bloc de cod de program, de obicei redat într-un font monospațiu de către browser. Spre deosebire de eticheta de linie CODE, eticheta PRE păstrează spațiile și întreruperile de linie.
Cum să măriți textul? Pentru a face acest lucru, trebuie să utilizați eticheta inline BIG, care mărește dimensiunea fontului cu una în comparație cu textul normal.
Cum să micșorezi textul? Pentru a face acest lucru, trebuie să utilizați eticheta de linie MICĂ, care reduce dimensiunea fontului cu una în comparație cu textul normal.
Cum să setați fontul, culoarea și dimensiunea fontului în text? Pentru a face acest lucru, trebuie să utilizați eticheta șir FONT. Atributul face aici specifică fontul (numele) fontului, culoarea este culoarea fontului, iar dimensiunea este dimensiunea acestuia în unități convenționale (de la -7 la 7).
Cum se face un titlu? Pentru a face acest lucru, trebuie să utilizați etichete bloc H, care setează titluri de diferite niveluri, de la 1 (cel mai mare) pana la 6 (cel mai mic), care vă permite să setați structura informațiilor publicate pe o pagină web. Titlurile diferă unele de altele în ceea ce privește dimensiunea fontului și indentarea și sunt, de asemenea, evidențiate cu caractere aldine.
Cum se creează un font de indice? Pentru a face acest lucru, trebuie să utilizați eticheta șir SUB, care redă fontul ca indice, de exemplu. textul va fi poziționat sub linia de bază a caracterelor rămase în linie și la o dimensiune redusă.
Cum se face un font superscript? Pentru a face acest lucru, trebuie să utilizați eticheta șir SUP, care afișează fontul ca superscript, de exemplu. textul va fi poziționat deasupra liniei de bază a caracterelor rămase în linie și la o dimensiune redusă.
Cum se inserează un citat în text? Pentru a face acest lucru, trebuie să utilizați eticheta Q inline, care este folosită pentru a evidenția ghilimele din text, care sunt afișate automat de browser între ghilimele.
Cum se formatează un citat în text? Pentru a face acest lucru, trebuie să utilizați eticheta de bloc BLOCKQUOTE, care este concepută pentru a evidenția ghilimele lungi într-un document HTML. De obicei, un astfel de text este afișat cu 40 de pixeli de umplutură în stânga și dreapta, precum și cu umplutură în partea de sus și de jos.
Cum se face o întrerupere de linie în text? Pentru a face acest lucru, trebuie să utilizați eticheta BR block, care setează o linie nouă în locația în care se află eticheta. Spre deosebire de eticheta p paragraf, utilizarea etichetei br nu adaugă un spațiu liber înaintea rândului.
Cum se face un strat în HTML? Pentru a face acest lucru, trebuie să utilizați o etichetă DIV bloc, care creează un strat fără umplutură.
Cum se face un separator în text? Pentru a face acest lucru, trebuie să utilizați eticheta de bloc HR, care desenează o linie de despărțire orizontală. Atributul de culoare setează culoarea liniei, dimensiunea - dimensiunea și noshade - dezactivează efectul 3D.
Cum să faci o listă? Există două tipuri principale de liste în HTML: numerotate (OL) și marcate (UL). În acest caz, este dat codul HTML pentru lista cu marcatori specificată de eticheta de bloc UL. În mod implicit, cercul este folosit ca marcator (cerc solid), care apare la începutul primului rând al articolului din listă specificat de eticheta LI.
Desigur, în articolul meu am furnizat doar etichetele HTML de bază de care ați putea avea nevoie atunci când marcați o pagină web. În majoritatea cazurilor, pentru marcajul HTML, acest lucru este mai mult decât suficient. Singurul lucru pe care l-am omis, dar care este cu siguranță important atunci când marcam pagini web, este lucrul cu tabele. Ele trebuie studiate separat, pentru că... sunt prea multe nuanțe, iar articolul s-a dovedit a fi destul de lung. Asta e tot ce am. Vă mulțumim pentru atenție. Noroc!
HTML (HyperText Markup Language) nu este un limbaj de programare, este un limbaj de formatare, adică dând aspectul unei pagini web atunci când este vizualizată într-un browser. Folosit pentru a marca un document Etichete. Etichetele sunt incluse în paranteze unghiulare și, cu rare excepții, sunt împerecheate, de ex. există o etichetă de deschidere și de închidere. De exemplu, pentru a marca începutul unui nou paragraf într-un document, este plasată o etichetă
(din paragraf). Apoi, la sfârșitul paragrafului trebuie să existe o etichetă de închidere .
La plasarea etichetelor se respectă următoarea regulă: etichetele se închid în ordinea inversă aspectului lor. De exemplu, dacă un cuvânt din text trebuie evidențiat cu caractere aldine (tag din îndrăzneţ) și în același timp cu caractere cursive (tag din cursiv), atunci acest lucru se poate face în unul dintre următoarele moduri: cuvânt , sau cuvânt .
Mai jos este textul unui document html și rezultatul afișării acestuia în browser:
O zi buna, draga vizitatoare ! h1>
Sper că ai ajuns exact unde ți-ai dorit.
Aici vei gasi poezie , cântece Și scenarii pentru organizarea oricăror sărbători.
E obișnuit cu note „A” -
Rusă cinci și cântând.
Întotdeauna îmi place jurnalul lui
Strica starea de spirit.
|
Orez. 74. Afișarea paginii html exemplu într-o fereastră de browser. |
În exemplul dat, sunt utilizate următoarele etichete:
… - indică faptul că textul cuprins între aceste etichete ar trebui perceput ca html.
… - corpul documentului html. Parametru bgcolor(culoarea fundalului) specifică culoarea fundalului, text – culoarea textului. Culorile sunt specificate în sistemul numeric hexazecimal folosind modelul RGB. De exemplu, #ffffff mijloace R =#ff , G =#ff , B =#ff , acestea. maxim fiecare dintre cele trei culori. Știm că amestecarea celor trei culori primare în sistemul RGB în părți egale cu intensitate maximă produce alb pur.
… - titlul de prim nivel, specifică formatarea specifică acestui stil: dimensiunea fontului, indentări înainte și după antet, aliniere etc.
... - paragraf de text.
- etichetă img neîmperecheată (de la imagine), care controlează inserarea ilustrațiilor grafice într-un document hipertext. În acest caz, un fișier grafic cu numele poza 1.gif, situat în același director cu acest document html. Dacă acordați atenție adresei URL a documentului afișat în figură din linia „adresă”, puteți determina că acest document a fost salvat sub numele „ index.html„în dosar” Documentele mele” pe disc C. Parametru alinia controlează alinierea ilustrației în raport cu textul paginii html. În acest caz, valoarea parametrului = „stânga”, setează alinierea la stânga și permite textului să se înfășoare.
… - eticheta de inserare hyperlink. Când activați acest link, în fereastra browserului va fi încărcat un alt document, care în acest caz ar trebui să fie salvat și în același folder și ar trebui să fie numit vers.html.
… - evidentierea cu culoare. În acest caz, culoarea va fi roșie (R =#ff , G =#00, B =#00).
… - secretia de grasime.
- etichetă nepereche – întrerupere de linie forțată în paragraful curent.
Există etichete pentru formatarea tabelelor și organizarea listelor. Este destul de simplu să stăpânești limbajul de marcare hipertext și este destul de simplu, dacă se dorește, să creezi și să publici propriul tău site web pe Internet.
ultimele articole
Avantajele aspectului tabelului:
1. Comoditatea și ușurința de a lucra cu celulele tabelului utilizate ca elemente ale structurii publicației electronice. Folosind un tabel, puteți crea cu ușurință structuri simple. Dacă este necesar să specificam o structură mai complexă, vom petrece puțin mai mult timp. Dar atunci când scalați fereastra browserului, coloanele își vor păstra aspectul inițial, precum și pozițiile lor relative. În plus, indiferent de conținutul celulelor învecinate, acestea vor rămâne aceleași ca înălțime.
2. Folosirea unui aspect de tabel este foarte potrivită pentru crearea unui așa-numit aspect „fluid”, în care lățimea depinde de lățimea ferestrei browserului.
3. În celulele tabelului, ne putem alinia orizontal și vertical în același timp.
4.Cel mai puțin dependent de browser-ul ales de utilizator.
Dezavantajele aspectului tabelului:
1.Pentru a afișa pagina, trebuie să așteptați până când browserul încarcă întregul tabel.
2.Cod mai greoi și mai puțin înțeles la crearea tabelelor, deoarece structură ierarhică complexă a etichetelor imbricate.
3. Nu există o separare între design și conținut.
4. Indexare slabă. Fragmentarea informațiilor face dificilă indexarea corectă a paginii pentru motoarele de căutare.
5.Lipsa unei bare de defilare (cu aspectul cadru puteți derula părți).
6.Layout-ul nu respectă standardele html și css (tabelele ar trebui să fie doar pentru date tabelare).
Avantajele aspectului blocului:
1.Codul paginilor HTML a fost mult redus prin utilizarea elementelor div.
2. Există posibilitatea de imbricare non-standard a blocurilor unul în celălalt - puteți plasa elemente cum doriți.
3.Blocurile sunt afișate pe măsură ce sunt încărcate, ceea ce accelerează lucrul cu publicațiile electronice.
4.O mai bună indexare de către motoarele de căutare.
5. Este posibil să aranjați mai multe straturi unul peste altul, ceea ce ajută la îmbunătățirea indexării.
6. Abilitatea de a utiliza bare de defilare pentru blocuri individuale.
7.Din punct de vedere al modei, acest aspect este acum cel mai popularJ
Dezavantajele aspectului blocului:
1. Dacă rezoluția ecranului monitorului utilizatorului este scăzută, blocurile își pot schimba pozițiile relative.
2.În diferite browsere (versiuni vechi), aspectul poate arăta diferit.
3. Acest aspect este cel mai dificil.
Aspect fix bazat pe blocuri folosind CSS.
Există patru metode diferite de poziționare.
Poziționare statică
Elementele HTML sunt poziționate static în mod implicit. Un element poziționat static este întotdeauna poziționat conform fluxului standard de elemente de pe pagină.
Elementele poziționate static nu sunt afectate de proprietățile de sus, jos, stânga și dreapta.
Poziționare fixă
Un element cu poziție fixă este poziționat în raport cu fereastra browserului.
Nu se va mișca chiar dacă fereastra este derulată:
Exemplu:
Notă: IE7 și IE8 acceptă valoarea fixă numai dacă este specificat tipul de document!DOCTYPE.
Elementele fixe sunt îndepărtate din fluxul normal. Documentul și alte elemente se comportă ca și cum elementul fix nu ar exista.
Elementele fixe se pot suprapune cu alte elemente.
Poziționare absolută
:
Exemplu:
poziție: absolut;
Aspect receptiv bazat pe blocuri cu CSS.
Proprietățile de poziționare CSS vă permit să poziționați un element. De asemenea, pot poziționa un element în spatele altuia și pot specifica ce ar trebui să se întâmple atunci când conținutul elementului este prea mare.
Elementele pot fi poziționate folosind proprietățile de sus, jos, stânga și dreapta. Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă proprietatea poziției este setată.
Poziționare relativă
Exemplu:
poziție:relativă;
Exemplu:
poziție:relativă;
Elementele poziționate relativ sunt adesea folosite ca containere pentru elementele poziționate absolut.
Aplicați poziționarea absolută pe pagină. regula z-index.
Poziționare absolută
Un element poziționat absolut este poziționat în raport cu primul element părinte care este poziționat altfel decât static. Dacă nu se găsește un astfel de element, elementul părinte este luat ca :
Exemplu
poziție: absolut;
Elementele poziționate absolut sunt îndepărtate din fluxul de elemente standard. Documentul și alte elemente se comportă ca și cum elementul poziționat absolut nu ar exista.
Elementele poziționate absolut se pot suprapune cu alte elemente.
proprietatea z-index specifică ordinea verticală a elementului.
poziție: absolut;
Un element cu o ordine verticală mai mare este întotdeauna afișat înaintea unui element cu o ordine verticală mai mică.
Notă: indicele z funcționează numai pentru elementele poziționate (poziție:absolut, poziție:relativă sau poziție:fixă).
Proprietatea z-index este acceptată de toate browserele majore.
Notă: valoarea „moștenire” nu este acceptată în IE7 și versiuni anterioare. IE8 necesită o declarație!DOCTYPE. IE9 acceptă „moștenire”.
Valorile proprietății:
Auto: Setează ordinea verticală să fie aceeași cu elementul părinte. Folosit implicit
Număr: Setează valoarea de ordine verticală a elementului. Valorile negative sunt acceptabile
Moștenire: Specifică faptul că ordinea verticală ar trebui să fie moștenită de la elementul părinte
Aplicarea poziționării relative. Crearea de efecte de volum și umbră.
Poziționare relativă
Un element poziționat relativ este poziționat în raport cu poziția sa normală.
Exemplu
poziție:relativă;
Exempluh2.pos_top
poziție:relativă;
CSS3 Container Shadow
În CSS3, proprietatea box-shadow este folosită pentru a adăuga o umbră la containere:
Exemplu
Adăugarea unei umbre container la un element div:
casetă-umbră: 10px 10px 5px #888888;
Webkit-box-shadow: 10px 10px 5px #888888; /* Safari */)
CSS3 Border-Imagine
Prin proprietatea CSS3 border-image, puteți folosi o imagine pentru a crea o chenar:
Proprietatea border-image vă permite să specificați un chenar de imagine.
Exemplu
Folosind o imagine pentru a crea o chenar în jurul unui element div:
border-image:url(border.png) 30 30 round;
Moz-border-image:url(border.png) 30 30 round; /* Firefox */
Webkit-border-image:url(border.png) 30 30 round; /* Safari și Chrome */
O-border-image:url(border.png) 30 30 round; /* Opera */)
Proprietăți noi:
border-image: proprietate scurtă pentru setarea tuturor proprietăților grupului border-image-* 3
border-radius: proprietate scurtă pentru setarea tuturor celor patru proprietăți ale border-*-radius 3
box-shadow: atașează unul sau mai multe efecte de umbră la un container
Layout este crearea unei pagini html în așa fel încât toate elementele să fie afișate așa cum este prevăzut de design. Cu un aspect corect și de înaltă calitate, site-ul va arăta la fel în diferite browsere, conținutul va fi disponibil pentru toate ecranele. Există trei tipuri de aspect: tabelar, bloc și mixt. După ce ai citit acest articol până la sfârșit, vei putea alege singur pe care îl poți folosi pentru a obține cel mai bun rezultat în cazul tău. Să evidențiem toate avantajele și dezavantajele fiecărui tip.
Tabular a fost format chiar înainte de apariția CSS. Pagina este un tabel mare format folosind etichete
| , |
| . Crearea unui site web folosind această metodă este de cele mai multe ori însoțită de împărțirea părții superioare (header), care conține antetul și logo-ul, a părții inferioare (footer), care are scopul de a afișa informații despre copyright și referință, centrul paginii (centrul , mijloc, conținut etc.) plasează conținutul principal, conținutul.
Avantaje: Principalele dezavantaje ale aspectului tabelului: Dispunerea blocului se bazează pe modelul casetei CSS. În acest caz, pagina este formată din blocuri împachetate în etichete în codul html . Schema generală a unui bloc este următoarea: conținut, a cărui lățime și înălțime pot fi setate de proprietățile „lățime” și „înălțime”, umplutura internă (între conținut și cadru) de proprietatea „padding”, cadrul prin proprietatea „border” și umplutura externă prin „margină”. Este foarte ușor să creezi un site web din astfel de blocuri. Blocurile pot fi imbricate unul în celălalt, fiecăruia i se poate atribui o clasă și un id. Au fost deja inventate multe „cipuri” care compensează deficiențele blocurilor, de exemplu, puteți alinia un bloc pe verticală astfel: înălțime: 200px; display:inline-block; vertical-align:center. Ca ultimă soluție, puteți spune blocului să se comporte ca un tabel (etichetă table) folosind proprietatea display:table, un rând (etichetă tr) - display:table-row sau o celulă (etichetă td) - display:table -celula. Avantajele aspectului blocului: Defecte: Ce sa aleg? |
|---|
