Când proiectați site-uri, trebuie să rezolvați adesea o întrebare fundamentală: care va fi comportamentul paginii atunci când aceasta este deschisă cu rezoluții diferite de ecran? Există două opțiuni aici - paginile site-ului „cauciuc” (întindere) sau statice. Prima opțiune va fi discutată. Indiferent de preferința dvs. pentru aspect, principiul principal al designului stretch este scalabilitatea relativă.
Este necesar
- - cunostinte de HTML;
- - program pentru editarea codului html.
Instrucțiuni
Pasul 1
Selectați fișierul principal pentru șablonul site-ului dvs., care va reflecta marcajul principal. Poate fi fișier index.html sau index.php. Unul dintre cele mai bune programe vizuale de editare a șabloanelor de site este Macromedia Dreamweawer. Editarea necesară se va face pe baza acestui program.
Deschideți fișierul șablon sau creați unul nou prin comanda „Fișier” - „Nou”, categorie - „Pagină de bază” - „HTML” sau categoria „Pagină dinamică” - „PHP”. Aici luăm în considerare cazul general atunci când structura site-ului este înregistrată exact în unul dintre cele două fișiere.
Pasul 2
Nu a fost mult timp un secret că există diferite tipuri de aspect - pe tabele, pe blocuri div și combinate (tabele și blocuri în același timp). Eticheta html este responsabilă pentru aspectul tabelului
Specificați un procent (100%) pentru fiecare proprietate. Acest lucru va obține efectul de a întinde automat celulele mesei pe ecrane cu orice geometrie. Poate fi un monitor de 19 inci sau un smartphone - fiecare dintre ele va reproduce corect conținutul.
Pasul 3
Dacă trebuie să specificați exact corespondența dintre celulele tabelului, utilizați următorul exemplu:
| … … conținutul celulei 1. … | … … conținutul celulei 2. … |
Aici veți vedea că una dintre celule este specificată cu o lățime de 30% din tot ceea ce este definit pentru tabelul în sine. Un calcul simplu arată că rămâne 100% -30% = 70% pentru a doua celulă. Amintiți-vă că, în acest caz, una dintre celulele tabelului nu trebuie să aibă atributul de lățime setat. Browserul va face toate calculele singur și va întinde corect tabelul cu celule. Conținutul din interiorul tabelelor se va întinde și se va micșora corect pe diferite ecrane.
Pasul 4
Într-o situație cu un aspect div, blocurile de etichete sunt întinse în mod implicit la toată lățimea ecranului și urmează unul după altul de la stânga la dreapta, de sus în jos. Pentru a rafina geometria acestora, creați o clasă CCS sau un identificator (ID), în care specificați, de exemplu, atributele și / sau categoria de dimensiune și poziție a casetei (Casetă). Nu uitați să legați stilul specificat la fișierul de marcare a site-ului și să legați clasa (ID) de eticheta dorită. De obicei, este plasat chiar la începutul scriptului, definind toată geometria viitoare a site-ului:
… … conținutul site-ului. …
Sau așa:
… … conținutul site-ului. …
Codul pentru regula CSS va fi după cum urmează:
… clasa mea {
lățime: 30%;
înălțime: 50%;
}
#ID-ul meu {
lățime: 30%;
înălțime: 50%;
}
