. Atributele sunt folosite pentru a seta stiluri pentru fiecare bloc. Așa iese pagina de mai sus.
Dispunerea blocului are și dezavantajele sale. Compatibilitatea între browsere este cel mai mare inamic al aspectului bazat pe blocuri. Într-un browser poate fi perfect, dar în altul poate fi un pătrat mare negru. Aspectul bloc, spre deosebire de aspectul tabelar, este mult mai complicat și necesită cunoștințe mai mari de CSS. Codul HTML pentru layout-ul bloc este mult mai mic și ușor de citit toate stilurile, cu ajutorul cărora acest tip de layout este format corect, sunt în fișiere CSS. Datorită acestui lucru, codul de aspect al blocurilor este mai ușor de citit. Blocuri remediu universal, cu ajutorul lor puteți crea pagini de orice complexitate. Browserele afișează blocurile ca elemente separate, ceea ce le face să apară mai rapid.
Semantica, tradusă din franceză (cuvântul provine din greaca veche) înseamnă „desemnare”. Acest tip de aspect, ca unul separat, va fi disponibil doar în HTML 5, pe care mulți oameni îl folosesc și astăzi. Pentru semantica unui document HTML, este important ca elementele să însemne exact pentru ce au fost create. Codul html folosit în aspectul semantic este mult mai mic decât codul folosit în aspectul bloc și tabel. Aspectul semantic afectează și optimizarea site-ului web. Motoarele de căutare se străduiesc să găsească informații cât mai apropiate de ceea ce caută utilizatorul, iar aspectul semantic îi ajută în acest sens. Aspectul semantic implică reducerea utilizării etichetelor
.
De exemplu, voi spune că în html 5 pentru a înlocui acest cod:
Acesta a venit:
În concluzie, vreau să spun că nu contează ce tip de aspect utilizați, principalul lucru este să o faceți în mod competent și să respectați toate standardele. În articolele viitoare vom analiza fiecare dintre opțiuni mai detaliat, firește cu mici exemple!
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 când fereastra browserului este scalată, coloanele își vor păstra aspectul inițial, precum și poziție relativă. Î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.Aspectul 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
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 abia sunt la început potecă spinoasă„constructori de site” ș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, în special în stadiu inițial, apoi odată cu creșterea experienței, 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 în zorii creării 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
| capac |
| conţinut |
bara laterală |
| subsolul |
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 la construirea, reguli minime CSS (+)
- Este dificil de înțeles codul HTML cu o structură de site 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 blocului HTML, de regulă, sunt dispuse 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, în măsura în care aceasta 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ă le este setată aceeași proprietate și dacă două sau mai multe blocuri cu proprietatea specificată apar într-un rând î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).
Necesar exemple concrete, simt 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;
antet
conţinut
bara laterală
foter
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 datorită 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.
Î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. Aceste. 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 are și ele același efect în cel mai bun mod posibil pentru site-ul ca întreg. 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?
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
, | , | Şi | . 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 drepturile de autor și informații de referință, centrul paginii (centru, mijloc, continut si altele) plaseaza continutul principal, continutul.
Avantaje:
— Conținutul celulelor tabelului poate fi ușor aliniat orizontal și vertical;
— Tabelele arată la fel în aproape toate browserele și pe orice ecran.
Principalele dezavantaje ale aspectului tabelului:
— cantitate mare de cod;
— Nerespectarea standardelor;
— Indexare slabă a site-ului.
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:
— Respectarea standardelor;
— Site-ul este bine indexat;
— Cod scurt și simplu, paginile se încarcă mai repede;
— Paginile sunt afișate identic pe aproape toate dispozitivele.
Defecte:
— Este posibil ca site-ul să nu se afișeze corect pe ecrane foarte mici.
Ce sa aleg?
Din păcate, crearea unui site web folosind un aspect de tabel este depășită. Etichetă în html nu a fost concepută ca metodă de proiectare și ar trebui folosită doar pentru a crea tabele Din cauza lipsei de modalități de poziționare a conținutului, tabelele au devenit modalitatea de a determina poziția conținutului. După apariția CSS, am primit multe opțiuni noi pentru definirea poziției elementelor paginii și așa a luat naștere aspectul bloc. Mulți oameni nu au putut să renunțe la mese și să le folosească atât pe ele, cât și pe blocuri. Acest tip de aspect se numește mixt.
Ce să alegi depinde de tine, dar aș recomanda tipul de aspect bloc folosind blocuri, poți face un site web frumos și convenabil care să fie afișat în mod egal pe orice dispozitiv și ecran; De asemenea, trebuie remarcat faptul că codul de aspect tabelar este mai puțin lizibil; Acest lucru este foarte important dacă nu lucrați singur.
Dar totuși, alegerea vă aparține, deoarece cu diferite modele de pagină și conținuturi, poate fi mai convenabil și mai corect să utilizați unul sau altul tip de aspect.
Mai multe articole din această secțiune
|
