Site-urile web au, de asemenea, propriul lor schelet. Dar este inutil să întrebați medicii despre caracteristicile sale. Și nici medicii veterinari nu sunt conștienți de structura site-ului. Numai designerii de layout știu despre asta. Structura scheletului viitoarei resurse depinde de ele. Și principala modalitate de a crea oasele scheletului său este aspectul blocului.
Aspectul site-ului este un meșteșug pentru cei inițiați
Există ceva misterios în aspectul site-ului. Dar asta până când ajungi să cunoști mai bine acest meșteșug. Să începem dedicarea noastră:
Următoarea etapă a dezvoltării site-ului web după crearea aspectului său este aspectul. Sarcina designerului de layout este să transfere scheletul viitorului site în lumea virtuală folosind cod html și tabele css. Pur și simplu, transferați dimensiunile și proporțiile resursei într-o formă pe care browserul o poate înțelege.
În timpul procesului de layout folosind codul html, „scheletul” site-ului este împărțit în părți. Și folosind css ( foi de stil în cascadă) sunt specificate dimensiunea „oaselor”, culoarea și locația acestuia.
Există mai multe tipuri de layout:
I. Tabular - anterior a fost principala metodă de layout. În aspectul tabelului, o etichetă este utilizată pentru a seta structura site-ului
și etichetele sale secundare. Aspectul folosind tabele vă permite să aranjați cel mai proporțional toate elementele de design unul față de celălalt. Dar, în același timp, acest cod se dovedește a fi prea voluminos:
De asemenea, principalele dezavantaje ale codului tabular includ timpul lung de încărcare și indexarea slabă a conținutului de către motoarele de căutare.
Conținutul unei pagini bazate pe tabel nu va fi afișat până când toate datele nu au fost încărcate. Aspectul bloc vă permite să afișați fiecare element încărcat separat.
Indexarea slabă a paginilor de tabel se explică prin decalajele mari dintre blocurile de text situate în diferite celule de tabel.
În zilele noastre, aspectul tabelului este rar folosit ca metodă principală de creare a site-urilor web. Acum este folosit doar pentru structurarea datelor tabulare și aranjarea imaginilor grafice.
II. Pe bază de blocuri este în prezent principala metodă de aspect. Spre deosebire de aspectul tabelar, aspectul bloc are o serie de avantaje:
Separarea stilului elementului de codul html;
Capacitatea de a suprapune un strat peste altul - această caracteristică facilitează foarte mult poziționarea elementelor.
O mai bună indexare de către motoarele de căutare;
Viteză mare de încărcare a unei pagini formată din elemente independente reciproc;
Ușurința de a crea efecte vizuale ( meniuri derulante, liste, sfaturi cu instrumente).
Principalul dezavantaj al aspectului blocului este un anumit „ ambiguitate» înțelegerea codului său de către diferite browsere. Prin urmare, paginile html trebuie adesea să fie „terminate” folosind hack-uri speciale.
Odată cu apariția aspectului bazat pe blocuri, a luat naștere conceptul de „compatibilitate între browsere”. Datorită diferențelor de afișare a aceluiași element în browsere diferite, designerii de layout trebuie să introducă bucăți întregi de cod (hack-uri) în html-ul principal.
Hack-ul este foarte specializat și rezolvă problema afișării incorecte într-un singur browser.
Elementul principal utilizat în aspectul blocului este eticheta
. Secțiunea de cod separată de această etichetă se numește strat. Toate deciziile de stil sunt mutate dincolo de limitele codului html în foi de stil în cascadă. Ele sunt accesate prin identificatori sau clase css:
Cum funcționează aspectul blocului?
Înainte de începerea aspectului, aspectul final al site-ului PSD este tăiat în blocuri (straturi) într-un editor grafic. Imaginile de fundal decupate sunt plasate într-un folder separat, care va fi atașat separat fiecărui strat:
De exemplu, să luăm acest aspect al site-ului creat în Photoshop. Mai întâi, într-un editor de text, folosind un div, setăm structura viitoarei resurse și atribuim fiecărui strat propriul selector de id. Rezultă următoarea structură:
Apoi la structura site-ului finală în html cu linia atașați fișierul css. Apoi îi adăugăm o descriere de stil a fiecărui strat, poziționarea față de alte elemente și dimensiunile acestuia.
Puteți afla mai multe despre toate proprietățile CSS din documentația tehnică a limbii.
Așa arată exemplul nostru de aspect al unui site web bloc într-o fereastră de browser.
Această lecție este recomandată celor care abia încep să stăpânească complexitățile creării site-urilor web. Contine Noțiuni de bază O HTML și CSS. Urmând instrucțiunile din această lecție pas cu pas, în doar câteva minute vei crea un șablon pentru site-ul tău.
Vom crea un șablon de site folosind aspectul blocului, folosesc eticheta - „ DIV».
Pasul 1 - Marcarea paginii web folosind etichete HTML
În primul rând, trebuie să ne marcam pagina web folosind etichete HTML. Numai după aceasta puteți trece la proiectarea site-ului folosind foi de stil CSS în cascadă.
HTML- Acest limbaj de marcare hipertext. Cu ajutorul lui este creat structura pagini web. Etichetele HTML sunt folosite în aceste scopuri. Sunt cuprinse între paranteze"<" и ">".
Etichetele vin de obicei în perechi - de deschidere și de închidere. Acesta din urmă diferă prin faptul că are un „/” după prima paranteză. (De exemplu:
). Folosind etichete, definiți ce va apărea pe pagina dvs. web.
Foi de stil în cascadăCSS aplica mai tarziu. Sunt necesare pentru a plasa conținutul etichetelor în anumite locuri din pagină, precum și pentru a da acestui conținut aspectul dorit.
Cele mai simple etichete de pagină web sunt:
Ulterior, tocmai între etichete veți plasa alte etichete pentru a marca elementele paginii web.
O etichetă importantă pentru structurarea unei pagini este eticheta
. Folosind-o, vă puteți împărți pagina în blocuri.
În interiorul acestei etichete puteți plasa alte etichete HTML de care veți avea nevoie pentru a crea conținutul site-ului dvs. (linkuri, text, imagini etc.). Toate aceste elemente vor fi apoi stilizate folosind foi de stil în cascadă CSS.
Acum, folosind un editor grafic (Photoshop de exemplu), să desenăm blocurile paginii noastre web:
Codul HTML pentru această pagină va arăta ca mai jos. Acesta este un exemplu de utilizare a etichetei div:
După cum puteți vedea, fiecare etichetă div am dat un anumit Selector ID. Adică, am dat fiecărui bloc individual al paginii noastre propriul său nume. Acest lucru este necesar pentru ca mai târziu, la stilarea blocurilor din fișierul CSS, să putem distinge un bloc de altul.
Există două tipuri selectoare. ID- folosit pentru blocuri unice, cele care nu se repetă în altă parte a paginii. În timp ce selectorul CLASĂ- folosit pentru a desemna blocuri repetate.
De asemenea, am închis toate blocurile într-un bloc " recipient„. Acest lucru se face pentru ca ulterior să ne putem plasa întreaga pagină așa cum ne dorim.
Pasul 2 - Atașarea foii de stil CSS
După cum sa menționat deja, foaia de stil CSS determină designul elementelor unei pagini web. Puteți să-l plasați fie în documentul dvs. html, fie să atașați un fișier extern. În acest tutorial vom folosi ultima opțiune.
Dacă ați deschis deja pagina web în browser, nu veți găsi nimic acolo. Acest lucru se datorează faptului că nu ți-ai umplut blocurile cu niciun conținut și nici nu le-ai dat nicio formă sau culoare. Puteți adăuga conținut pentru blocuri între etichetele corespunzătoare. Dar vom seta forma, locația, culoarea și alte manifestări externe ale blocurilor folosind un fișier CSS.
Dar mai întâi trebuie să-l creați. Să-l numim style.css și să-l plasăm în același folder cu documentul html. După aceasta, în fișierul html, între etichete trebuie să adăugați următoarea linie:
În acest fel legăm aceste două fișiere împreună. Acum, la afișarea unei pagini web, browserul va folosi fișierul de stil corespunzător.
Pasul 3 - setați stilul
Sintaxa CSS constă dintr-un selector, o proprietate și o valoare. Un selector este o etichetă pentru care doriți să definiți aspectul oferindu-i o varietate de proprietăți. O proprietate este specificată folosind diverse atribute, care la rândul lor pot lua valori diferite.
Pentru a scrie alte selectoare decât o etichetă corp, sunt folosite semnele " #
"fie" .
„. ele vin înaintea numelui selectorului. Primul este folosit pentru a indica selectorID, al doilea, respectiv pe selectorCLASĂ. Un selector poate avea orice număr de proprietăți. Care sunt închise în bretele" {}
".
fundal (fundal) poate fi specificat printr-o imagine sau o culoare sau ambele. Pentru ca imaginea să fie afișată, trebuie să specificați calea către ea. Dacă fundalul primește o culoare, atunci se folosește sistemul hexazecimal (#ffffff pentru alb etc.).
Proprietatea color este folosită pentru a defini culoarea textului.
familie de fonturi - această proprietate definește familia de fonturi în care va fi afișat textul. De regulă, trei tipuri de fonturi sunt specificate simultan. Prin urmare, dacă browserul nu l-a putut afișa pe primul, are multe din care să aleagă (Trebuchet MS, Arial, Times New Roman).
marimea fontului- dimensiunea textului, setata in diverse sisteme de masurare, aici vom folosi pixeli.
marginea- determină amplasarea blocului. Punctul de plecare poate fi fie fereastra browserului, fie limitele altor elemente ale paginii web. Deoarece dorim să plasăm pagina noastră în mijlocul ferestrei browserului, vom scrie următoarele valori pentru această proprietate: 0px auto 0px auto. Intrarea poate părea mai simplă decât 0px automat. La setarea acestor valori, numărătoarea inversă continuă în sensul acelor de ceasornic: sus - dreapta - jos - stânga. Deoarece sus și jos și dreapta și stânga sunt identice, nu este nevoie să le duplicați.
lăţime- latimea blocului.
înălţime- înălțime.
pluti- o proprietate care ne permite să poziționăm elementele selectoare, în principal la stânga sau la dreapta.
Acum să adăugăm codul în fișierul nostru style.css (la urma urmei, l-ați creat deja, nu?):
corp ( fundal: #f3f2f3; culoare: #000000; font-family: Trebuchet MS, Arial, Times New Roman; dimensiunea fontului: 12px; }
La momentul scrierii, nu toate browserele afișau corect pagina web creată. Pentru a elimina acest dezavantaj, puteți utiliza un bloc suplimentar, care ar trebui să fie plasat imediat în spatele blocului conţinut.
Iată codul său HTML:
#clar ( clar:ambele; }
Și între etichete cap Notați ce codificare trebuie să folosească browserul dacă încercați brusc să adăugați text rusesc la blocurile dvs.:
Cod HTML final:
Elemente de bază HTML și CSS
Antetul site-ului
Bloc de navigație
Meniul
Conţinut
corp (
fundal: #f3f2f3;
culoare: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
dimensiunea fontului: 12px;
}
#container (
fundal: #FFFFFF;
marja: 30px automat;
latime: 900px;
inaltime: 1000px;
}
#antet (
fundal: #838283;
înălțime: 200px;
latime: 900px;
}
#navigație (
fundal: #a2a2a2;
latime: 900px;
înălțime: 20px;
}
#meniul (
fundal: #333333;
plutește la stânga;
lățime: 200px;
inaltime: 600px;
}
#conținut (
fundal: #d2d0d2;
plutire: dreapta;
latime: 700px;
inaltime: 600px;
}
#clar (
clar:ambele;
}
#subsol (
fundal: #838283;
înălțime: 180px;
latime: 900px;
}
Sperăm că această lecție v-a permis să înțelegeți elementele de bază ale lucrului cu HTML și CSS.
Iată cum arată în browser:
Layout-ul își începe călătoria din vremurile când codul era scris în HTML și marcarea se făcea folosind tabele. De-a lungul timpului, s-au îndepărtat de acest lucru, iar marcajul a fost transferat în CSS. Acum există mai multe metode de layout. Cele moderne includ Flex-box, un set de instrumente Bootstrap, precum și cele mai recente Grids, care oferă oportunități enorme pentru creatori. Una dintre opțiunile de tranziție în dezvoltarea Web-ului este aspectul bloc. Folosit anterior pentru a crea marcarea întregii pagini, acum este considerat învechit, dar totuși își găsește o utilizare largă în cazuri speciale.
Ce este aspectul blocului?
A înlocuit-o pe cea tabelară învechită și imperfectă. Pagina este alcătuită din așa-numitele straturi, sau blocuri, iar eticheta de închidere servește ca elemente de bază
. Aceasta este o etichetă de bloc care ocupă întreaga lățime a elementului părinte și înălțimea pentru a se potrivi conținutului. Mai târziu, un astfel de aspect a început să fie numit „minunat”. Baza pentru orientarea paginii sunt așa-numitele clase.
În acest moment, acest tip de aspect este semnificativ depășit, iar eticheta în sine
trebuie utilizat numai în scopul pentru care a fost destinat. Au apărut o mulțime de etichete corecte din punct de vedere semantic care facilitează navigarea în cod. De exemplu, există o etichetă specială pentru meniul de navigare
