1. Concepte de bază
Mulți designeri web preferă aspectul blocului site-ului. care se realizează utilizând eticheta
Un bloc este o zonă obișnuită dreptunghiulară cu un număr de proprietăți, cum ar fi: un cadru, margini și liniuțe (Figura 1). Conținutul blocului poate fi orice - text, imagini, liste, formulare pentru umplere, meniuri de navigare etc.
O margine este o cale pentru care puteți specifica caracteristici cum ar fi grosimea, culoarea și tipul (punctat, solid, punctat).
Câmpurile (separarea) - separă conținutul blocului de cadru, astfel încât textul, de exemplu, să nu fie "aproape" de pereții blocului.
Marginile sunt spațiul gol între diferite blocuri, permițând amplasarea a două blocuri la o anumită distanță relativ una față de cealaltă.
Blocurile, ca și tabelele, sunt elemente care sunt întotdeauna pe pagină vertical. Asta este, dacă două blocuri sunt scrise în codul paginii într-un rând, atunci acestea vor fi afișate în browser unul sub altul. Dacă trebuie să aranjăm mai multe blocuri pe orizontală, atunci proprietățile acestora sunt setate la un astfel de parametru ca "float". Dar mai mult despre asta mai târziu.
În această lucrare vom crea o pagină web din blocuri. Mai întâi, creați un container, în care, ca în cutie, adăugăm blocurile noastre. Pentru claritate, fiecare bloc va avea culoarea proprie. Rezultatul final trebuie să fie același ca în Fig. 2.
Containerul va conține cinci blocuri:
TOP - antetul site-ului, de obicei conține logo-ul companiei, titlul, titlurile și sloganurile, căutarea, navigarea;
CENTRE - conține textul principal al paginii;
FOOTER - subsolul site-ului care conține drepturi de autor și alte informații despre site, este posibil să se copieze navigația, care este un semn de ton bun.
Pentru testul site-ului nostru avem nevoie de cel puțin trei browsere cele mai populare - Opera, Fire Fox, Internet Explorer.
Descrierea paginii web se face, în principiu, în documentul CSS.
2. Proiectarea "fixă" în funcție de aspectul blocului
1. Creați un nou document în cadență cu extensia css și salvați-l ca mystyle.css.
2. Creați un document HTML și salvați-l în același folder.
Am definit pagina noastră în conformitate cu DOCTYPE sub numele Strict 1.0.
Cerințele de aici sunt foarte stricte - toate etichetele care nu au o pereche de închidere trebuie să se termine cu un spațiu cu o bară / înainte de colțul de închidere. Dar aici, de fapt, chiar DOCTYPE arata ca o eticheta! De ce nu are acest decalaj cu o slash? Și pur și simplu! Am vrut să dezvoltatorii acestor reguli stricte. Dar acesta este singurul caz în care regula nu funcționează.
4. O linie între etichete
și atașați documentul mystyle.css la documentul HTML (Figura 3).5. În foaia de stil, tastați codul ca în Figura 4.
# acest semn spune că elementul este un atribut unic și este folosit o dată în documentul HTML în eticheta div.
6. Adăugați antetul site-ului în mystyle.css (Figura 5).
7. Adăugați documentul HTML următorul cod între etichetele corpului (Figura 6).
Și ar trebui să obțineți următoarele (Figura 7).
Următoarea etapă a aspectului site-ului este aranjamentul a trei blocuri într-un rând orizontal, pentru aceasta în structura blocului, de regulă se folosește elementul flotant. Aceasta va permite blocului nostru să curgă în jurul altor elemente din dreapta sau din stânga.
8. Deschideți documentul CSS și adăugați următorul cod (Figura 8).
9. Imediat după eticheta de închidere
introduceți următorul cod (Figura 9).10. Deschideți documentul HTML în browser. Rezultatul este după cum urmează (Figura 10).
11. Acum, adăugați blocul subsolului. Browserul ar trebui să prezinte următoarele (Figura 11).
Luați în considerare atributele relative și absolute.
Uneori este necesar să se plaseze un bloc într-o poziție strict prescrisă față de părinte.
Luați în considerare cel mai simplu cod.
- Creați un document html, în corpul căruia plasați codul, ca în figura 12.
Să presupunem că vrem să plasăm un bloc de copii de 20 de pixeli în stânga și sub colțul din stânga sus al blocului părinte.
Să încercăm să facem acest lucru (adică poziționăm absolut blocul copil în raport cu părintele).
2. Creați o foaie de stil în care să introduceți codul din listă în Figura 13.
3. Verificați pagina web din browser. Iată ce sa întâmplat (Figura 14). Nu este ceea ce vrem, nu-i așa? Copilul nostru nu a mers la mama mea, ci la bunicul meu (Corp)!
Problema este rezolvată destul de simplu: părintele primește suplimentar poziția: relativă;
4. Modificați codul pentru foaia de stil în conformitate cu Figura 15.
5. Verificați pagina web din browser. Rezultatul din Figura 16. Estimați diferența.
Creați o pagină web a cărei apariție este prezentată în figura 17 de mai jos.
3. Layout modular de site "Rubber"
În sarcinile 1 și 2, am considerat un design "fix" folosind metoda layout-ului blocului. toate blocurile au avut o valoare exactă în lățime și înălțime în pixeli.
În cazul designului "din cauciuc", dimensiunile blocurilor sunt stabilite ca procent din lățimea ecranului. În ceea ce privește înălțimea, dimensiunea blocului poate fi determinată de conținutul blocului.
Sarcina 3. Creați o structură de tip "cauciuc" ca în figura 18.
1. Creați un document HTML cu codul, ca în Figura 19. Salvați documentul.
2. Creați o foaie de stil ca în figura 20. Salvați documentul. Ar trebui să obțineți rezultatul din Figura 18.
3. Schimbarea dimensiunii browser-ului, analiza comportamentului layout-ului.
4. Amenajarea blocului combinat
Amenajarea blocului combinat include atât blocuri de lățime fixă, cât și blocuri în procente față de lățimea ecranului.
Sarcina 4. Creați un layout de bloc compozit, ca în figura 21.
1. Creați un document HTML cu codul, ca în figura 22.
2. Creați o foaie de stil ca în figura 23. Salvați documentul. Ar trebui să obțineți rezultatul din Figura 21.
3. Schimbarea dimensiunii browser-ului, analiza comportamentului layout-ului.
Cerințe față de aspect: