Inicio > Otros programas

El uso de Hojas de Estilo en Cascada (Cascade Style Sheet, CSS) con Dreamweaver.

Para la elaboración de este texto se ha usado la Versión Educativa de Dreamweaver MX.

1.- Creación de la hoja y el primer estilo.

Para crear y usar hojas de estilo en cascada, debemos abrir la ventana Diseño o dirigirnos al menú Ventana > Estilos CSS. Una vez tengamos visible la siguiente ventana, podemos comenzar a trabajar. El segundo icono de la barra de herramientas situada en la parte inferior de la ventana indica al posicionar el ratón sobre él, mediante una etiqueta emergente, que su uso es la creación de nuevos estilos. Hacemos click sobre él.

Una nueva ventana nos pide que introduzcamos el nombre del estilo. NO es lo mismo un estilo que una hoja de estilos. La hoja de estilos alberga tantos estilos como consideremos convenientes. He usado una sóla hoja CSS para todos los estilos usados en esta web.

El primer estilo que creamos puede ser el del texto normal de la página. Posteriormente ya definiremos títulos, enlaces...

Los nombres de los estilos deben ir precedidos de un punto y no admiten espacios. Por defecto Dreamweaver ya ofrece un nombre precedido de un punto. Podemos cambiar el nombre, sin embargo hay que respetar el punto.

Al primer estilo que creamos lo llamamos .textonormal, luego hacemos click en Aceptar.

Al no tener hoja de estilos CSS dónde albergar ese estilo, Dreamweaver solicita que creemos una.

En este sitio web he usado la hoja estilos1.css. Para la elaboración de este ejemplo asigno el nombre estilos2.css

Al no estar guardada todavía la página nueva, Dreamweaver ofrece como URL una dirección file:// seguida de la ruta a la hoja CSS.

Luego se abre la ventana para que definamos el estilo .textonormal. Cuando creemos sucesivos estilos, no se mostrará la ventana anterior en la que hay que asignar nombre a la hoja, ya que existe una hoja de estilos, y pasaremos directamente de la asignación del .nombre del estilo a esta ventana.

Una vez definido el estilo, comenzamos a usarlo.

2.- Uso de los estilos.

En la imagen inferior puede verse un fragmento de la página de presentación de este sitio web así como los estilos utilizados.

El cursor parpadea en el centro de la palabra "Paniagua". Vemos en la ventana Estilos CSS que tenemos resaltado el estilo textonormal (aquí no aparece el punto aunque en la hoja de estilos sí que existe). Haciendo doble click sobre el estilo textonormal o haciendo click sobre el icono con un lápiz (editar estilo), se abre la ventana para modificarlo.

El cambio del color rojo oscuro por azul provoca el siguiente efecto en esta página.

Puede observarse que TODO el texto, no sólo el primer párrafo, ha cambiado de color. Y no sólo en esta página, sino en todas aquellas páginas que contengan texto con el estilo textonormal.

3.- Crear una nueva página.

Al crear una nueva página debemos VINCULAR la hoja de estilos CSS. No hay que crear una hoja CSS por cada página, sólo una para todo el sitio web. De este modo, cualquier cambio en un estilo afectará a todo el sitio web. Si tras diseñar una docena de páginas decidimos cambiar el color del fondo y eso implica el cambio de color del texto, únicamente tendremos que editar los estilos, evitándonos el tener que abrir todas las páginas y cambiar una a una los formatos del texto.

En la barra de herramientas inferior, el icono de la izquierda nos muestra una etiqueta descriptiva al posicionarnos sobre él con el ratón: Adjuntar hoja de estilos.

Se abre la siguiente ventana. Haciendo click en Examinar buscamos la hoja. Aceptamos la ventana Examinar y se muestra el nombre de la hoja en el recuadro correspondiente.

Al hacer click en Aceptar, se nos muestra la lista de estilos de la hoja en la ventana Estilos CSS.

Para aplicar un estilo, no hay más que seleccionar el texto y luego hacer click en el estilo correspondiente de la lista.

Para quitar un estilo, se selecciona el texto y se hace click en primer elemento de la columna de estilos, sobre "No hay estilo CSS".

El cambio de un estilo afectará a todo el sitio web.

Los botones de la barra de herramientas tienen las siguientes utilidades:

Los dos botones de la derecha se activan al tener seleccionado un estilo.

Para finalizar, una hoja CSS editada con el bloc de notas (también pueden crearse tecleando el código además de hacerlo de este modo), tiene el siguiente aspecto:

.titulopagina {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: #990000;
text-align: left;
}

.titulomenu {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

.textonormal {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: justify;
color: #990000;
}

.fondo {
background-color: #FFFFCC;
background-repeat: repeat;
background-image: url(imagenes/fondo1.jpg);
}

Sigue... pero como ejemplo ya vale :-)

Y el código fuente de la página incorpora los estilos de este modo:

Dentro de <head> incorpora la línea:

<link href="estilos1.css" rel="stylesheet" type="text/css">

Y luego, dentro de <body>:

Inicio > Otros programas

<p><a href="index.htm" target="_top" class="direccion">Inicio</a> <span class="direccion">&gt;<a href="menu_otros_prg.php" class="direccion">
</a></span><a href="menu_otros_prg.php" class="direccion">Otros programas</a></span></p>

El uso Hojas de estilo en cascada (Cascade Style Sheet, CSS) con Dreamweaver.

<p align="center" class="titulopagina">El uso de Hojas de Estilo en Cascada (Cascade Style Sheet, CSS) con Dreamweaver.</p>

Cualquier texto normal (como este) se corresponde con el siguiente código.

<p class="textonormal">Cualquier texto normal (como este) se corresponde con el siguiente c&oacute;digo.</p>

ava4os.
16-04-04.