Macromedia Dreamweaver 1

Macromedia Dreamweaver
1-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
2-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
3-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
4-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
5-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
6-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
7-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
8-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
9-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
10-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
11-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
12-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
13-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
14-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
15-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
16-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
17-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.
Macromedia Dreamweaver
18-18
Hojas de estilo CSS