Asignando Estilos a las Celdas
A continuación os muestro cómo queda la hoja de estilos "etilo2.css" tras completar la definición del ancho de algunas celdas:
Bueno, pues antes de seguir añadiendo más propiedades, vamos a volver a la página "plantilla1.htm" para completar unas cosillas y ver que tal funcionan estas definiciones y como ponerlas en marcha.
En primer lugar guardamos y cerramos la hoja de estilo "estilo2.css" y abrimos la página "plantilla1.htm" con el dreamweaver.
Por si las moscas, os indico que tal había quedado el código HTML de esa plantilla:
Como podréis comprobar, si hacéis vista previa de esa página, no los colores ni los anchos son tal y como hemos definido en la hoja de estilos. Por qué puede ser?
Pues porque no hemos indicado en la página qué estilo debe seguir cada celda. Hemos definido los estilos pero aún no los hemos aplicado a nada.
Ahora vamos a aprender a asignar un estilo definido a un elemento de una página.
Para hacer esto solo necesitamos echar un vistazo al código HTML de la página "plantilla2.htm".
Para hacer que una determinada celda siga un determinado estilo reformamos el código para quede, en lugar de así:
<td>Logotipo</td>
de esta otra forma:
<td class="a1">Logotipo</td>
Lo que hemos hecho es especificar que esa celda es del tipo "a1" y por tanto, seguirá las propiedades definidas en la hoja de estilo, según el estilo de "td.a1".
Para eso, se ha incluido el comando class, que indica la clase de estilo a seguir y se ha indicado la clase ( ="a1").
Lo mismo haremos con todas las demás celdas. No será facil identifiarlas en el código HTML pues antes habiamos escrito una palabra representativa en cada una de ellas.
Así, por ejemplo, en el código correspondiente a la celda "a2" pondremos esto:
<td class="a2">banner</td>
y así con todas las demás.
El código de la página "plantilla1.htm" queda así entonces:
|
Introdución