Per entendre-jo, imagino a les taules amb la propietat de 'elasticitat' Anem a veure perquè les imagino així. I segueixo treballant en el document que havia guardat com portal2.htm

Veure aquí mida original de la captura.

A la cel · la superior, que guardi pensant a posar el títol, el que vull fer ara, és posar un logo i una imatge. Situo el cursor sobre el text que havia inserit abans i ho selecciono tot, i ens serà de gran ajuda, el tenir l'espai de treball del DW en Disseny dividit:

Ampliar

Ja que ens permetrà veure si hi ha o no paràgrafs en aquesta cel · la (<td> </ td>) i veiem que si hi ha:

<td align="center" bgcolor="#FFF1D6"> <h1> Disseny Web sense Imatges </ h1> </ p> </ td>

Perquè aquest totalment neta, hauríem de deixar així.:

<td align="center" bgcolor="#FFF1D6"> </ td>

No obstant això, perquè la cel · la no desaparegui, ha d'haver alguna cosa dins d'ella, perquè si no, s'esfuma! amb aquesta combinació de caràcters especials: el que fem a inserir un caràcter invisible en la cel · la, no es vora res però no desapareix tampoc Ja anireu veient, que el DW, el posa sol, i prou suprimir el text i l'etiqueta des de la barra, a sobre de l'Inspector de Propietats:

Una vegada que aquest 'neta' del tot, anem a Inserir / Taula amb aquesta configuració:

I com no se les imatges que aneu a utilitzar, deixo a la vostra elecció, si apliqueu fons a la taula o no, oa la cel · la, com havíem fet en els estatuts anteriors. En el meu cas si ho vaig fer. El que si farem tots és posar alineació (centre, i donar mida d'ample a la cel · la / columna de l'esquerra:

150 px, com abans li havíem donat a la columna de les opcions, o menú. L'efecte estètic, és fonamental en una web, així, que aquestes columnes han d'estar totalment igualades, en cas de tenir 200 px en una, l'altra convé que sigui també de 200 px.

En el PSP, (o qualsevol programa de gràfics) vam crear una imatge que ens serveixi per a aquesta comesa i tindrem en compte, les mesures de les columnes, o la simetria d'aquestes quedarà eliminada, independentment que els hàgim donat el mateix valor d'amplada .

Ho veurem

Preparar tres imatges, una de 100/100, 150/150, 200/200 píxels, i anirem inserint una a una, a veure que passa: Inserim la primera, de 100/100 px:

No havíem posat alineació en la cel · la, per tant queda a la part esquerra que és la predeterminada. No trenca la simètrica de les columnes, però queda descentrada, de manera que aquesta ens pot servir ja que per centrar, ja sabem com fer-ho. Alineació = centre a la cel · la

Per comprovar per vosaltres mateixos, podeu també provar de treure-li el valor d'amplada, o fins i tot canviar-a 100 Us queda així?

Es va adaptar per complet a la imatge, a la seva mida .. per tant si és més petita i volem que la columna tingui un ample concret, hem de donar per separat a ella, o ens quedarà malament el disseny.
Observar així, mateix, que tota la Fila, té la mateixa alçada que la imatge, i es,. ho farà amb les properes imatges, per tant de l'alçada ens hem de preocupar, només en crear la imatge, ja que la mateixa que tingui aquesta, serà la que tindrà la Fila, i clar, afectarà també a la taula on aquest inserida .

No canvieu el valor d'ample de la cel · la, deixar-lo al 100, veiem que passa amb la segona, 150 px:

Queda perfecta, a la primera, fins i tot encara que la cel · la no tingui el mateix valor d'ample ... que la imatge! Veieu perquè els dic 'elàstiques'?

* Nota: Fixeu-vos també, que en el requadre on veiem el valor de la cel · la, ens diu, 100 (150), be ... 100 és el valor que nosaltres hem posat abans, i entre parèntesi, veiem el que té realment.

Per acabar de comprovar-ho, veiem que passa amb la imatge de 200 px:

I donarà el mateix que canviem el valor a la de la cel · la! És elàstica! Per tant, podem veure que qui acaba manant, són les imatges, o continguts. Perquè hem fet servir una imatge, però un text ens farà el mateix. Un enllaç llarg, igual .. La taula, cel · ... es 's'estirés' fins abastar tot el contingut que inserim i de poc ens servirà haver posat una mida concret ... s'allargarà i creixerà tant com el contingut que inserim en elles!

Pel que fa a l'altura, si mai us passa que observeu que la cel · la és més alta, o que sobra un espai sobre la imatge:

S'haurà com s'observa en la captura a que hi ha una etiqueta, en aquest casp <p> (paràgraf) un contingut més que encara que no veiem .. aquesta i ens molesta! hem de treure

Posarem per tant, la mida adequada a la imatge que estem fent servir i que en el meu cas és 150/150 px i per les imatges següents, tindré en compte que el màxim d'alçada, si no vull que em desmunti el disseny, sigui de 150px .

A la cel · la de la dreta, inserim una taula amb 100% i aquest cop si que no hem de posar fons ni res, la deixarem transparent i que es vegi el fons que ja havíem posat anteriorment:

A la columna de la dreta, inserit una imatge i li assigno el mateix valor (a la columna) que té la imatge d'ample, com veieu, l'altura és inferior a 150px.

Es pot veure millor en la següent captura:

i ni hem de preocupar per l'alineació ni res més.

A l'altra columna inserit una imatge d'un text i en li assigno alineació central, i queda 'flotant' al centre que és el que pretenia, per al proper pas.

A la cel · la no li assignarem cap valor d'ample.

I el més interessant ve ara, ja que si en la primera taula, substituïm els 780 px del principi, per 100%, es 's'estiressin' totes les taules:

Escrivim 100 i canviem a%

Veure aquí l'exemple

Conservant el mateix disseny que teníem però això farà que l'usuari final, quan entri a la nostra pàgina, tingui la resolució que tingui, la vegi a pantalla completa, sigui de 600, 800, 1024, 1280 o superior.

Al meu segueix agradant més 'recogidita' és a dir, amb el valor inicial de 780 px però ara que sabem com canviar això, cada un que triï la forma que més li agradi