A l’hora de dissenyar llocs, sovint heu de resoldre una pregunta fonamental: quin serà el comportament de la pàgina quan s’obre amb resolucions de pantalla diferents? Aquí hi ha dues opcions: pàgines de lloc de "goma" (estirament) o estàtiques. Es parlarà de la primera opció. Sigui quina sigui la vostra preferència pel disseny, el principi principal del disseny d’estiraments és l’escalabilitat relativa.
És necessari
- - coneixement d'HTML;
- - programa per editar codi HTML.
Instruccions
Pas 1
Seleccioneu el fitxer principal de la plantilla de lloc, que reflectirà el marcador principal. Pot ser un fitxer index.html o index.php. Un dels millors programes visuals d’edició de plantilles de llocs és Macromedia Dreamweawer. L'edició necessària es farà sobre la base d'aquest programa.
Obriu el fitxer de plantilla o creeu-ne un de nou amb l'ordre "Fitxer" - "Nou", categoria - "Pàgina base" - "HTML" o categoria "Pàgina dinàmica" - "PHP". Aquí considerem el cas general quan l'estructura del lloc es registra exactament en un dels dos fitxers.
Pas 2
Des de fa temps no és cap secret que hi hagi diferents tipus de disseny: a les taules, als blocs div i combinats (taules i blocs alhora). L’etiqueta html és responsable del disseny de la taula
Especifiqueu un percentatge (100%) per a cada propietat. Això aconseguirà l’efecte d’estirar automàticament les cel·les de les taules a les pantalles amb qualsevol geometria. Pot ser un monitor de 19 polzades o un telèfon intel·ligent: cadascun d’ells reproduirà correctament el contingut.
Pas 3
Si heu d’especificar exactament la correspondència entre les cel·les de la taula, feu servir l’exemple següent:
| … … el contingut de la cel·la 1. … | … … el contingut de la cel·la 2. … |
Aquí veureu que una de les cel·les s’especifica amb un ample del 30% de tot el que es defineix per a la mateixa taula. Un càlcul senzill mostra que queda un 100% -30% = 70% per a la segona cel·la. Recordeu que, en aquest cas, una de les cel·les de la taula no ha de tenir l'atribut ample definit. El navegador farà tots els càlculs per si mateix i estirarà correctament la taula amb cel·les. El contingut de les taules també s’estén i es redueix correctament a les diferents pantalles.
Pas 4
En una situació amb un disseny div, els blocs d’etiquetes s’estenen per defecte a tota l’amplada de la pantalla i se segueixen un darrere l’altre d’esquerra a dreta, de dalt a baix. Per perfeccionar la seva geometria, creeu una classe o identificador (ID) CCS en què especifiqueu, per exemple, els atributs i / o la categoria de mida i posició del quadre (quadre). No oblideu enllaçar l’estil especificat amb el fitxer de marcatge del lloc i vincular la classe (ID) a l’etiqueta desitjada. Normalment es col·loca al principi de l’escriptura, definint tota la geometria futura del lloc:
… … contingut del lloc. …
O així:
… … contingut del lloc. …
El codi de la regla CSS serà el següent:
… la meva classe {
amplada: 30%;
alçada: 50%;
}
#myID {
amplada: 30%;
alçada: 50%;
}
