Exemplu de aspect de bloc. Aspect bloc: ce este și de ce este necesar? Exemplu de aspect de bloc
Aspectul site-ului se realizează folosind două metode principale: tabelar și bloc div machete. Dispunerea blocului este mai funcțională și oferă mai multe caracteristici datorită utilizării CSS.
Cum funcționează blocul?
Pentru a efectua acest tip de aspect, sunt utilizate două fișiere ( index.html și style.css) care conține cod HTMLși stilul site-ului în consecință.
În primul fișier sunt scrise direct div-containere, care sunt un fel de fundație pentru aspect, iar al doilea descrie caracteristicile stilului și poziția noastră div-containere.
Pentru a observa rezultatul manipulărilor efectuate în timp real, trebuie să introduceți în bara de adrese a browserului dvs.: http://URL/test.
Bazele aspectului
Aspectul cu două coloane pe care vom încerca să îl creăm poate fi schematizat astfel:
Toate elementele aspectului nostru trebuie să fie plasate într-unul comun pentru a putea seta parametrii pentru întregul aspect în ansamblu. Conținutul containerului partajat va fi div-s care formează blocuri separate. Prin utilizarea CSS putem personaliza următorii parametri: dimensiune, poziție pe pagină, stiluri și culoare.
Blocați aspectul site-ului web
Fiecare element de aspect trebuie plasat într-un „container” separat folosind o etichetă div. În dosar CSS trebuie să adăugați proprietăți ale elementelor, definind parametrii aspectului și plasării elementelor (lățime, înălțime, font, dimensiune și așa mai departe).
Pentru a nu fi confuz, trebuie să introduceți numele acestui bloc în fiecare container, acesta va arăta cam așa:
„http://www.w3.org/TR/html4/loose.dtd”>Aspect bloc - luați 2 Un capacColoana din stângaConținutul paginii
După finalizarea manipulărilor, trebuie să deschideți fișierul Style.cssși descrieți stilurile pentru aceste containere. În primul rând, este necesar să descriem stilurile pentru etichetele principale Corp și HTML, reducând la zero marginea paginii pentru a asigura compatibilitatea între browsere:
body, html (
margine: 0px;
umplutură: 0px;
}
body, html (
margine: 0px;
umplutură: 0px;
}
#maket (
lățime: 800px;
margine:0 auto;
}
#antet(
culoare de fundal:#C0C000;
}
#stânga(
culoare de fundal:#00C0C0;
lățime: 200px;
plutește la stânga;
}
#conţinut(
culoare de fundal:#8080FF;
margine-stânga: 202px;
}
#subsol(
culoare de fundal:#FFC0FF;
}
Pentru a obține o clasă de master mai detaliată despre cum să proiectați un site web bazat pe div, puteți viziona următoarele videoclipuri:
https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI
Aspect cu blocuri DIV are o serie de avantaje în comparație cu aspectul tabelar. Aspect cu blocuri DIV asigura o incarcare mai rapida a paginii site-ului, continutul blocurilor DIV este afisat pe masura ce se incarca (spre deosebire de un tabel, in care continutul nu va fi afisat pana nu este incarcat tot continutul acestuia), codul paginii este lizibil. Dar aspectul blocului nu este ideal, există și dezavantaje. În acest fel, nu puteți obține o reprezentare a datelor așa cum o face un tabel. Adică, tabelele trebuie folosite pentru a afișa date tabelare. Aspectul tabelar poate fi folosit și pentru a seta structura paginii, dar nu ar trebui să folosiți totul în exces. Să vedem cum poți controla poziția unui bloc DIV pe pagina unui site web.
Mai întâi, să ne uităm la proprietatea stil float, care controlează poziționarea blocului flotant. Proprietatea float poate lua valori
- stânga - elementul de pagină este forțat să fie aliniat la stânga;
- dreapta - elementul de pagină este forțat să fie aliniat la dreapta;
- none - elementul de pagină nu se mișcă, va fi afișat unde ar trebui să fie (valoare implicită).
- stânga - elementul pagină este plasat sub orice bloc anterior mutat la stânga;
- dreapta - elementul de pagină este plasat sub orice bloc anterior mutat la dreapta;
- ambele - elementul de pagină este plasat sub orice bloc mutat anterior;
- nici unul - nu există restricții privind poziția blocului în raport cu blocurile mutate.
text
text
text
Browserul va afișa acest cod HTML după cum urmează:
2
text
text
Toate cele trei blocuri sunt situate unul sub celălalt și au o lățime egală cu lățimea ferestrei browser (sau lățimea elementului de pagină HTML, cu acest cod). Acum să schimbăm lățimea fiecărui bloc DIV.
text
text
text
Acest cod va fi afișat în browser după cum urmează:
2
text
text
Fiecare bloc va avea propria lățime, dar vor fi amplasate și unul sub celălalt. În continuare, vom specifica proprietatea stilului float pentru fiecare bloc cu valoarea rămasă:
text
text
text
Obținem următoarea reprezentare
2
text
text
Lățimea blocurilor a rămas aceeași ca în exemplul precedent, dar și-au schimbat poziția: s-au aliniat într-un rând orizontal. Dacă adăugați un alt bloc, acesta va fi afișat nu sub blocurile înregistrate anterior, ci într-un mod diferit. În general, nu există nicio modalitate de a determina cum va fi afișat conținutul acestuia.
text
text
text
conţinut
conţinut
conţinut
Dar în cazul nostru va fi afișat după cum urmează
2
text
text
4
conţinut
conţinut
conţinut
Pentru ca un nou bloc să fie situat sub blocurile anterioare, trebuie să setați proprietatea lui clear cu valoarea corespunzătoare, în cazul nostru, puteți seta valoarea fie la ambele, fie la stânga:
text
text
text
conţinut
conţinut
conţinut
Codul rezultat va fi afișat după cum urmează (și în diferite browsere, cum ar fi IE, Opera și Firefox, exemplul va fi afișat cu diferențe)
2
text
text
4
conţinut
conţinut
conţinut
Folosind proprietățile de mai sus, acestea creează structuri de pagină de complexitate variabilă, inclusiv cele formate din trei coloane, cu dimensiuni flexibile sau fixe.
Aspect cu blocuri DIV De asemenea, prevede centrarea unui bloc div într-un anumit element al codului HTML. Pentru a centra un bloc în browserele Opera și Firefox, trebuie să utilizați proprietățile margin-left și margin-top cu valoarea auto , de exemplu
Conținutul blocului DIV
Dar un astfel de cod nu funcționează în browserul IE6 pentru acest browser, trebuie să plasați blocul DIV centrat într-un bloc DIV suplimentar, care va avea o proprietate de stil de aliniere a textului cu centrul de valori . De exemplu
Conținut bloc DIV
Adică, în browserul IE6, puteți controla poziția blocului DIV cu proprietatea text-align folosind valorile stânga, centru, dreapta. În browserele Opera și Firefox, nu puteți controla poziția unui DIV folosind proprietatea text-align, ci doar proprietatea margine.
În general, pentru a centra un bloc DIV, vom obține cod care va fi afișat identic în diferite browsere
Conținut bloc DIV
Aspectul cu blocuri DIV nu este completă fără controlul poziției elementelor HTML folosind proprietatea de stil de poziție, care definește schema de poziționare a blocului. Proprietatea poziție poate lua valori
- static - specifică un bloc obișnuit care nu este poziționat individual, ci este poziționat într-un flux normal. Proprietățile de sus , stânga , jos și dreapta sunt ignorate. Este valoarea implicită;
- relativă - stabilește poziționarea relativă a blocului. Este după cum urmează. În primul rând, poziția blocului este calculată ca în fluxul normal (adică poziționarea relativă nu este luată în considerare). Blocul este apoi decalat față de poziția sa normală în funcție de valorile proprietăților de sus, stânga, jos și dreapta. Conținutul ulterior este transmis în flux ca și cum blocul poziționat relativ nu ar fi fost deplasat;
- absolute - specifică poziționarea absolută a blocului. Blocurile poziționate absolut sunt eliminate din fluxul general și nu afectează conținutul ulterior care este scos. Poziția unui bloc poziționat absolut este specificată de proprietățile sus , stânga , jos și dreapta relativ la elementul părinte (blocul);
- fix - stabilește o poziționare fixă a blocului. Cu poziționarea fixă, poziția blocului este calculată ca și în cazul poziționării absolute, dar în viitor blocul este fix în raport cu fereastra browserului și nu derulează împreună cu restul conținutului paginii. Această proprietate este acceptată de browserele Opera și Firefox.
- top - setează decalarea marginii superioare a blocului poziționat în jos față de marginea superioară a elementului părinte;
- stânga - setează offset-ul marginii stângi a blocului poziționat la dreapta față de marginea stângă a elementului părinte;
- jos - setează decalarea în sus a marginii de jos a blocului poziționat în raport cu marginea de jos a elementului părinte;
- dreapta - specifică decalajul marginii din dreapta a blocului poziționat la stânga față de marginea din dreapta a elementului părinte.
Cu poziționare absolută, relativă și fixă, blocurile se pot suprapune unele pe altele, caz în care poate apărea întrebarea, care dintre ele va fi „mai înalt”? Adică ce element va fi afișat și care va fi suprapus de blocul situat „sus”. Proprietatea z-index va ajuta la rezolvarea acestei probleme. Acesta definește poziția de nivel pe care o va ocupa blocul. Valoarea sa poate fi orice număr întreg pozitiv sau negativ. În acest caz, elementele cu o valoare mare a indicelui z se vor suprapune blocurilor cu o valoare mai mică a acestei proprietăți.
Pentru a ilustra proprietățile descrise mai sus, luați în considerare un exemplu. Să creăm mai multe blocuri fără proprietăți de poziționare.
text
text
conţinut
Pentru a ne familiariza cu poziționarea relativă, să adăugăm proprietăți de poziționare relativă unui bloc
text
text
conţinut
Pentru a vă familiariza cu poziționarea absolută, vedeți cum se afișează următorul cod în browser:
text
text
conţinut
În ultimul exemplu, astfel încât poziția unui bloc poziționat absolut să poată fi setată de proprietățile de sus și din stânga în raport cu locul în care ar fi situat în timpul poziționării normale, a fost adăugat un bloc poziționat relativ cu id="dopoln_block" la cod.
Pentru a încheia subiectul „Aspect cu blocuri DIV”, voi oferi un șablon care vă permite să obțineți o schemă de aspect foarte comună: în partea de sus a paginii este un antet, apoi trei coloane cu conținutul principal al paginii și la partea de jos a paginii un bloc care conține de obicei informații despre drepturile de autor. Mai mult, blocul de jos va fi în partea de jos a paginii chiar dacă există puțin conținut pe pagină. De asemenea, două dintre cele trei coloane (stânga și dreapta) cu conținutul principal vor avea dimensiuni fixe, iar cea din mijloc va fi „cauciuc”, adică se va schimba lățimea în funcție de rezoluția ecranului monitorului. Un exemplu poate fi văzut pe pagină.
Aspectarea cu blocuri DIV vă permite să dispuneți site-uri de complexitate diferită folosind proprietățile de mai sus ale foilor de stil în cascadă. Sper că acest articol vă va ajuta să înțelegeți aspectul și să creați multe site-uri web bune și frumoase. Noroc!
Aranjament în pagină este procesul de dezvoltare a structurii unui document HTML, al cărui rezultat este o pagină web. Structura unei pagini web este determinată de etichetele HTML corespunzătoare. Etichetele - blocuri de containere dreptunghiulare pentru conținut - nu apar în fereastra browserului. Ei spun browserului despre tipul de conținut, iar browserul, pe baza acestor informații, își afișează conținutul - fișiere text sau media.
Cum se creează o structură de pagină folosind blocuri (aspect bloc)
1. Cum să împărțiți aspectul paginii în secțiuni
Pentru a crea un aspect de pagină, trebuie să selectați secțiunile (secțiunile) principale ale documentului. Puteți citi mai multe despre elementele secționale în articol.
O pagină web standard conține următoarele secțiuni:
![](https://i1.wp.com/html5book.ru/wp-content/uploads/2016/11/structure-main.png)
Nu vom folosi elementul
Elemente