Macromedia Dreamweaver 1-18 Hojas de estilo CSS

Macromedia Dreamweaver 2-18 Hojas de estilo CSS

Hojas de estilo CSS

A la hora de dar formato al contenido de nuestras páginas echamos de menos algunas cosillas. Por ejemplo ¿si quiero establecer un determinado interlineado? o ¿una sangría de primera línea?... vamos, herramientas que estamos acostumbrados a utilizar en un tratamiento de textos. El lenguaje HTML se queda corto a la hora de ofrecernos la posibilidad de aplicar según que formatos a elementos de nuestra página.

Aquí entran las llamadas "Hojas de estilo en cascada (CSS)". Este complemento nos va a ofrecer multitud de posibilidades a la hora de mejorar el aspecto de nuestra página. Además de posibilitarnos la utilización de formatos y características que no disponíamos anteriormente, nos facilita la aplicación y, sobre todo la modificación de dichos formatos en diferentes zonas de la página o del sitio Web.

Lo primero, entendemos por "Estilo" un conjunto de formatos que podremos aplicar a:

Una etiqueta. Todos los elementos de nuestra página o sitio web contenidos en dicha etiqueta adoptarán los formatos aplicados a ella.

Una zona de nuestra página. Seleccionaremos la zona de nuestra página que nos interese y le aplicaremos el estilo definido. Por lo tanto, ya no dependemos de etiquetas.

Vínculos. Podemos definir estilos que afectarán exclusivamente a los diferentes enlaces incluidos en nuestra página o en nuestro sitio Web.

Otra posibilidad es la de crear un archivo de hoja de estilos que podremos utilizar en las diferentes páginas de nuestro sitio. Esto nos facilitará muchísimo la realización de cambios en cuanto al formato de las diferentes páginas.

Macromedia Dreamweaver 3-18 Hojas de estilo CSS

Creación de estilos

Imagina que nos interesa que todos los párrafos de nuestra página (elementos contenidos en la etiqueta <P>) tengan una serie de características. Tal y como sabemos hacerlo tendríamos que ir seleccionando uno por uno y aplicando los formatos que nos interesen, con la limitación que conlleva.

Pues bien, vamos a crear un estilo que contenga una serie de formatos y que afectarán a dichos elementos de nuestra página.

Para la prueba, copia el contenido del siguiente archivo en un nuevo documento de Dreamweaver. A cada una de las cabeceras de los diferentes bloques les das formato de "Encabezado 3" (esto es para diferenciarlas de los párrafos). Guarda la página.

Archivo para el ejemplo

Los pasos a seguir para la creación de un estilo son...

1. Selecciona la opción del menú "Texto/Estilos CSS/Nuevo".

En la opción "Tipo de selector" seleccionaremos "Etiqueta". Si te fijas en la explicación es justo lo que queremos, definir el nuevo aspecto de una etiqueta específica. Dicha etiqueta, hemos quedado que va a ser <P>, ya que deberá afectar a los diferentes párrafos de nuestra página.

En cuanto a la opción "Definir en...", de momento queremos que, únicamente afecte a la página en la que estamos. Por lo tanto elegiremos "Sólo este documento".

Una vez seleccionadas las opciones que nos interesan, ya podemos pulsar el botón "Aceptar". En la siguiente lección te comento los diferentes formatos que podemos utilizar.

Macromedia Dreamweaver 4-18 Hojas de estilo CSS

Elección de formatos

Una vez hemos determinado la etiqueta a la que va a afectar nuestro estilo, vamos a elegir los formatos que lo compondrán. Observarás que se muestra una ventana con multitud de formatos organizados por categorías. La primera de ellas es "Tipo".

Aquí podemos establecer diferentes atributos que afectarán a la fuente (tipo de letra, tamaño, color...) y, si te fijas, también podemos determinar el interlineado desde la opción "Alto de línea".

Para nuestro ejemplo, elige los atributos de texto que prefieras y, vamos a aplicar un doble espacio entre líneas para nuestros párrafos. Para ello introduce el número 2 en la casilla "Alto de línea" y elige como unidad de medida "ems". Esta unidad equivale a la altura de la fuente que viene a ser lo mismo que la distancia entre líneas.

No pulses todavía el botón "Aceptar" ya que vamos a continuar con la elección de formatos para nuestro estilo.

Macromedia Dreamweaver 5-18 Hojas de estilo CSS

Elección de formatos (Fondo)

Si pulsas sobre la categoría "Fondo" se mostrará la siguiente ventana...

En esta ventana podemos establecer el aspecto que tendrá el fondo de los elementos incluidos en la etiqueta seleccionada. En nuestro caso, el fondo de los párrafos.

Podemos establecer un color de fondo o mostrar una imagen que podrá repetirse o no y en caso de no repetirse, se nos da la posibilidad de determinar su posición. Para probar, guarda la siguiente imagen en la carpeta que contiene los archivos pertenecientes al sitio que definimos.

Haremos que esta imagen se coloque, como fondo, en la parte superior derecha de cada párrafo. Selecciona la imagen guardada en la opción "Imagen de fondo", en la opción "Repetir" elegiremos "No repetir", en la posición horizontal, "Derecha" y, en la posición vertical "Superior". Vamos a seguir eligiendo formatos y... ya veremos como queda.

Macromedia Dreamweaver 6-18 Hojas de estilo CSS

Elección de formatos (Bloque)

Desde esta categoría podemos modificar alineaciones (tanto verticales como horizontales), espacio entre letras y palabras y establecer sangrías de primera línea (espacio desde el margen al comienzo de la primera línea de cada párrafo).

Como estamos probando la utilización de estilos, vamos a seleccionar como alineamiento de texto, justificar y como sangría de texto 15 px.

Macromedia Dreamweaver 7-18 Hojas de estilo CSS

Elección de formatos (Cuadro)

Las opciones de esta categoría nos van a permitir establecer anchura y altura de según que elementos de nuestra página y el espacio entre el elemento y sus bordes o entre el elemento y los bordes de la ventana.

Como después vamos a hacer que se muestren los bordes alrededor de cada párrafo, vamos a aumentar la distancia desde dichos bordes hasta el texto. En la opción "Sup" del apartado "Relleno", escribe, por ejemplo, 15 y, como unidad de medida, lo dejaremos en píxeles. deja activada la casilla "Igual para todo" para que dicha distancia afecte a todos los lados del párrafo.

Macromedia Dreamweaver 8-18 Hojas de estilo CSS

Elección de formatos (borde)

Aquí podemos determinar si queremos que se muestren determinados bordes alrededor del elemento seleccionado, su estilo, grosor y color.

¡Es obligatorio elegir el estilo para que se muestren los bordes del elemento!

Para probar, selecciona un estilo (sólido, por ejemplo) un grosor y un color y deja la casilla "Igual para todo" activada. De esta manera dibujará todo el contorno de cada párrafo.

Pulsa el botón "Aceptar" y carga la página en el navegador para ver como queda. En teoría, con los formatos aplicados, los párrafos de la página deberían quedar, más o menos, así...

Macromedia Dreamweaver 9-18 Hojas de estilo CSS

Elección de formatos (lista)

Ya comentamos que podemos colocar a la izquierda de cada párrafo un número o una viñeta. En esta categoría de formatos se nos da la posibilidad de utilizar más tipos de viñetas e incluso sustituir dichas viñetas por una imagen.

Ejemplo

Lista con viñetas

Macromedia Dreamweaver 10-18 Hojas de estilo CSS

Lista con estilo aplicado a la etiqueta <LI>

Ahora que pienso, en el ejemoplo anterior te he puesto "Lista con estilo aplicado a la etiqueta <LI>" ¿cómo sé a qué etiqueta he de aplicar un determinado estilo? Si tengo que aplicar un estilo a los elementos de una lista, a una tabla, a un elemento de formulario, a una imagen... No tenemos por qué conocer todas las etiquetas HTML. Bueeenooo... en este caso, por ejemplo, si me sitúo en uno de los elementos de la lista y me fijo en la parte inferior de la ventana del documento, me doy cuenta de que se muestra la etiqueta HTML correspondiente al elemento en el que me encuentro.

Pues eso, ya podemos conocer qué etiqueta se corresponde con cada elemento de nuestra página.

Macromedia Dreamweaver 11-18 Hojas de estilo CSS

Edición de estilos

Una vez creado un estilo, podemos hacer modificaciones en él variando cualquiera de los formatos que lo componen. Para editar un estilo y modificarlo, muestra la ventana "Estilos CSS".

En ella aparecen los estilos creados y las propiedades de cada uno de ellos. Puedes hacer modificaciones directamente en esta ventana, haciendo un clic en la propiedad que desees modificar pero... te recomiendo que hagas doble clic en el estilo, vuelve a mostrarse la ventana con las categorías y formatos. Por ejemplo, haz doble clic en el estilo asignado a la etiqueta P.

Macromedia Dreamweaver 12-18 Hojas de estilo CSS

Modifica, para probar, el color del texto...

Pulsa el botón "Aceptar" y observa como cambia el aspecto de los párrafos. Date cuenta de que la utilización de estilos, además de ofrecernos más posibilidades en cuanto a la utilización de formatos y de facilitarnos el cambio de aspecto de diferentes elementos de nuestra página, hace mucho más cómoda la modificación de formatos ya aplicados.

Macromedia Dreamweaver 13-18 Hojas de estilo CSS

Estilos para los enlaces

Aunque desde la opción “Modificar/Propiedades de la página” podemos variar el aspecto de los diferentes estados de los enlaces (tipo de letra, color y subrayado), utilizando las hojas de estilo CSS disponemos de mayor número de opciones.

Crea un nuevo documento e inserta en él algún enlace para probar. Selecciona la opción “Texto/Estilos CSS/Nuevo”.

Los estilos para los enlaces los definiremos desde la opción “Avanzadas”. En el desplegable “Selector” se muestran los diferentes estados de un enlace:

a:link -> Enlace normal.

a:visited -> Enlace visitado.

a:hover -> Estado que se manifiesta al pasar sobre el enlace.

a:active -> Enlace activo.

Selecciona, de momento, el estado a:link y la opción “Sólo este documento”. Pulsa el botón “Aceptar” y… elige los formatos que quieras.

Esto lo haríamos con el resto de estados pero… imagina que me interesa que para el estado a:visited, los enlaces tengan el mismo aspecto que para el estado normal. Podemos duplicar el estilo creado y asignárselo al estado a:visited. Para ello muestra la ventana “Estilos CSS” y pulsa el botón derecho del ratón sobre el estilo a:link y selecciona la opción “Duplicar”…

Macromedia Dreamweaver 14-18 Hojas de estilo CSS

En la ventana que se muestra, selecciona el estado a:visited y pulsa el botón “Aceptar”.

Asigna otros estilos a los estados a:hover y a:active. Pulsa la tecla “F12” para comprobar como afectan los estilos creados a los estados de los enlaces de la página.

Macromedia Dreamweaver 15-18 Hojas de estilo CSS

Estilos personales (clases)

Ya hemos comentado la posibilidad de redefinir las características de una etiqueta mediante la utilización de estilos. Esto nos limita a que todos los elementos de nuestra página contenidos en dicha etiqueta tengan el mismo formato.

Imagina que quiero que unos párrafos tengan una serie de características y otros, otras. Si creo un estilo que afecte a la etiqueta <P> todos los párrafos de la página tendrán el mismo aspecto.

La utilización de estilos personales también llamados clases, nos abre muchas posibilidades a la hora de aplicarlos a diferentes zonas de nuestra página ya que no dependerán de una determinada etiqueta.

Abre este archivo y copia su contenido en un documento nuevo.

Texto para copiar

Vamos a aplicar un estilo al primer y tercer párrafo y otro al segundo y cuarto. Selecciona la opción “Texto/Estilos CSS/Nuevo”.

Selecciona la opción “Clase” y pon un nombre cualquiera (yo he puesto unestilo). Selecciona la opción “Sólo este documento” y pulsa el botón “Aceptar”.

Elige una serie de formatos, los que quieras.

Una vez creado el estilo personal tenemos que aplicarlo a las zonas de nuestra página que nos intereses. Para ello selecciona una de esas zonas (el primer párrafo) y elige la opción del menú “Texto/Estilos CSS”. Si te fijas, aparece el estilo que has creado. Selecciónalo y verás como la zona seleccionada cambia de aspecto. Selecciona ahora el tercer párrafo y haz lo mismo.

Ahora crea un nuevo estilo personal y aplícalo al segundo y cuarto párrafo.

Macromedia Dreamweaver 16-18 Hojas de estilo CSS

Archivos de hoja de estilos

De momento, al crear un estilo, hemos activado la casilla “Sólo este documento”. De esta manera el estilo afectaba únicamente a la página en la era creado. Pues bien, podemos aprovecharnos de un estilo para utilizarlo en varias páginas. Lo haremos guardando el o los estilos creados en un archivo que, posteriormente vincularemos a las páginas en las que los queramos utilizar.

Crea cuatro páginas con el siguiente aspecto y las guardas. Al rótulo “Boletus Edulis” le he dado formato de Encabezado1, al siguiente rótulo Encabezado4, al texto Párrafo y a Volver un enlace a la página index.html. Esto lo hago para diferenciar los elementos que componen la página y así poder aplicar estilos a cada uno de ellos. Asigna estos formatos a los elementos de las cuatro páginas.

Vamos a crear una serie de estilos que afecten a cada una de las etiquetas que hemos asignado a los elementos de la página:

Encabezado1 -> H1 Encabezado4 -> H4 Párrafo -> P Enlace -> A

Empezamos con el estilo para el Encabezado1. Selecciona la opción del menú “Texto/Estilos CSS/Nuevo”.

Macromedia Dreamweaver 17-18 Hojas de estilo CSS

Elige la etiqueta H1 y selecciona la opción “Nuevo archivo de hoja de estilos”. Pulsa el botón “Aceptar”. En ese momento nos pide que le pongamos nombre al archivo en el que vamos a almacenar el estilo.

Yo le he puesto como nombre “estilos” y, Dreamweaver le asignará la extensión “.css”. Por supuesto que este archivo deberá estar guardado en la carpeta correspondiente al sitio en el que estamos trabajando. Una vez pulsas el botón “Guardar” ya puedes elegir los formatos que quieras.

Macromedia Dreamweaver 18-18 Hojas de estilo CSS

Haz lo mismo para la etiqueta P…

Y para las etiquetas H4 y los diferentes estados de los enlaces. Una vez que tengas los estilos creados, te comento como podemos aprovecharnos de ellos en el resto de las páginas.

VINCULAR

Abre otra de las páginas creadas y selecciona la opción “Texto/Estilos CSS/Adjuntar hoja de estilos”.

En la opción “Arch./URL” pulsa el botón “Examinar” y selecciona el archivo “estilos.css”. En la opción “Añadir como:”, selecciona la opción “Vincular”. De esta manera, si modificamos el archivo de hoja de estilos desde cualquier página, esta modificación afectará al resto.

Una vez que pulsas el botón “Aceptar” verás como, de forma automática, cambia el aspecto de los diferentes elementos de la página. Vincula el archivo de hoja de estilos al resto de las páginas.