Waldylei Yépez by DarkisX.Com - Sección Informática

Estilos CSS.

Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Por ejemplo el Tutorial Dreamweaver MX de iniciación al editor, estaba controlado por una hoja de estilos que definía una serie de valores de color, forma, tamaño, para unas cuantas de las palabras y textos empleados en el sitio. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.
Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

En la columna de la derecha se abrirá:

Ahora clikearemos en el icono de y aparecerá la siguiente ventana:

En esta ventana podemos darle un nombre al estilo que vamos a crear (por defecto el programa le da el nombre .unnamed1).
Podemos elegir si lo que queremos es definir un estilo personal, o bien, redefinir una de las etiquetas del lenguaje HTML. (Más adelante explicaremos la tercera opción: Usar selector CSS).
Por último podemos definir el estilo en una hoja externa o bien, que se aplique únicamente al documento en el que estamos trabajando.
Vamos a empezar trabajando los valores que están elegidos por defecto:
Le damos un nombre a nuestro estilo, por ejemplo, palabrasclave
Será un estilo personal.
En una hoja externa.
Cambiamos el .unnamed1 por .palabrasclave (si no ponemos el punto al comienzo, Dreamweaver lo hará por nosotros) y, sin más, le damos a Aceptar. Aparecerá la siguiente ventana:

En esta ventana nos aparece la carpeta raíz del sitio, en este caso, la carpeta para este sitio de ejemplo que he llamado webDreamMXcurso . Le daremos un nombre en Nombre de archivo (por ejemplo hoja1) y pulsaremos Guardar:

Se abrirá la siguiente ventana para que definamos el estilo:

Por ejemplo:

Y le damos a Aceptar
Podemos observar la inclusión del estilo que acabamos de definir:

Y, por otro lado, vemos la hoja de estilos dentro de los archivos del sitio:

Si hacemos doble clic sobre el icono veremos los estilos definidos en nuestra hoja:

Volvemos a nuestro documento para aplicar nuestro estilo: Seleccionaremos la palabra a la que se lo queramos aplicar, abriremos de nuevo (o vamos directamente a ) los Estilos CSS desde Ventana > Estilos CSS y haremos clic en el estilo palabrasclave.

El texto seleccionado pasará a estar escrito con los parámetros definidos.
Si una vez definido el estilo, no nos gusta, podemos modificarlo haciendo doble clic en el estilo correspondiente .
Para definir otro estilo, dentro de la ventana le damos al icono y se abrirá la ventana Nuevo estilo. Le ponemos un nombre, por ejemplo, .texto1 y lo definimos

Esta es la definición que he hecho:

Este estilo lo quiero aplicar a todos los párrafos que escriba en los documentos. Para hacerlo bastará colocar el cursor en el inicio del párrafo y hacer clic sobre el estilo . Observa que, si dentro del párrafo, hay una palabra ya definida como palabraclave el estilo de ésta no se va a modificar. Un estilo prevalece sobre el otro.
Para acabar este apartado, defino otro estilo para los títulos de los apartados y lo aplico. Nuestra hoja tiene, ahora, estos tres estilos definidos:

Empezamos con otro nuevo documento.
Para vincular este documento con la hoja de estilos que ya tenemos creada, le damos a Ventana > Estilos CSS y se abrirá la columna de la derecha desplegándose

Ahora clikeamos en el icono de y se abrirá:

Nuestra hoja está en el sitio web en el que estamos trabajando. Por eso, no hay que importarla de ningún otro sitio. Le damos a Examinar... y se abre:

Seleccionamos nuestra hoja1 y le damos a Aceptar:

Volverá a salir la ventana anterior con la hoja ya seleccionada:

Le damos a Aceptar.
En el desplegable Diseño se habrán colocado todos los estilos definidos en la hoja1 que acabamos de vincular:

Y podremos aplicar los estilos creados a las palabras o párrafos que nos interese. Observad que el estilo texto1 se aplica automáticamente conforme pulsamos la tecla Enter y creamos un nuevo párrafo.

• Un vistazo al código fuente generado

Clikeamos en el icono para ver el código fuente.
Vemos que en la cabecera del documento entre las etiquetas <head> y </head> se ha vinculado el documento con la hoja de estilos que hemos llamado hoja1

Más adelante, cada vez que hacemos uso de uno de los estilos definido dentro de esa hoja se genera una etiqueta
<p class> o <span class> que afecta al párrafo o al texto seleccionado:

Los estilos que hemos definido han sido de la categoría tipo:

Como se puede ver hay un montón más de categorías que se pueden definir.
Nosotros, de momento, vamos a pasar a ver los estilos que redefinen una etiqueta HTML.
En primer lugar, vinculamos nuestro documento con la hoja de estilos hoja1 que tenemos creada: Ventana > Estilos CSS , clikeamos en :

Le damos a Examinar:

Seleccionamos la hoja1 y le damos a Aceptar

Volvemos a Aceptar
Ahora clikeamos en el icono para crear nuevo estilo. Se abrirá:

Pero ahora seleccionamos Redefinir etiqueta HTML.

Ahora si clikeamos en la flechita de Etiqueta se desplegará:

Probablemente, muchas de las personas que lean este tutorial, desconocerán algunas o muchas de las etiquetas que aparecen en este listado. No es obligatorio conocerlas y, además, Dreamweaver las escribe por nosotros. Nosotros, sólo a modo de ejemplo, vamos a redefinir la etiqueta <a> que es la etiqueta de los enlaces. Bien; la seleccionamos:

y le damos a Aceptar. Aparecerá la ventana de Definir el estilo:

Definimos el estilo y elegimos Decoración: ninguna:

Le damos a Aceptar.
¿Qué hemos hecho? Hemos indicado al programa que, aparte del tipo de fuente, del tamaño y del grosor, cuando haya un enlace, el vínculo no esté subrayado. Como esto lo hemos definido dentro de la hoja de estilos hoja1, lo que acabamos de hacer tiene influencia en todos los documentos vinculados con la hoja, también en los creados anteriormente.
Ahora vamos a añadir un efecto a este estilo: Queremos que cuando pase el puntero del ratón por el vínculo, éste se subraye.
Para ello volvemos a clikear en el icono y ahora marcamos Usar selector CSS

En Selector: elegimos a:hover

Le damos a Aceptar y aparecerá la ventana de Defincición de estilo. Marcamos subrayado y le damos a Aceptar.:

Observa que lo que acabamos de hacer no se guarda como un estilo a aplicar:

De hecho, siempre que establezcamos un enlace se van a implementer las características de estilo definidas. Sin embargo, si clikeamos en Editar estilos, sí aparece la redifinición de la etiqueta <a> :

Haciendo doble clic sobre este estilo, o sobre cualquier otro, podremos modificar las caracterísitcas del mismo.
Como se ha podido intuir, las hojas de estilo tienen una gran potencialidad y sus posibilidades son muchas. Nosotros sólo nos hemos asomado a unas pocas de las utilidades que tiene esta herramienta. Se deja para el lector la experimentación y profundización a partir de las pistas dadas.

Los colores.

A estas alturas ya hemos empleado unas cuantas veces las paletas de color del Dreamweaver.

Si ninguno de estos colores nos gusta, pulsando en podemos crear nuestros propios colores:

• Códigos de color.

Supongamos que quiero cambiar el color de esta palabra. La selecciono y la pongo de color más o menos azul.
Ahora voy a ver qué ha pasado en el código fuente:

El código del color está formado por 6 símbolos alfa-numéricos precedidos del símbolo #.
Los símbolos alfa-numéricos son las diez cifras numéricas y las seis primeras letras del alfabeto ordenadas de la siguiente forma:

Siendo 0 el valor mínimo y f el valor máximo.
A su vez los seis símbolos se dividen en tres grupos de dos símbolos:
El primero de dos símbolos indica la cantidad de rojo (00 es el mínimo y ff el máximo)
El segundo de dos símbolos indica la cantidad de verde (00 es el mínimo y ff el máximo)
El tercero de dos símbolos indica la cantidad de azul (00 es el mínimo y ff el máximo)
Las mezclas y combinaciones de cantidad van dando origen a los diferentes colores.


ffffff	000000	ff0000	00ff00	0000ff	ffff00	cccccc	ff00ff

Es el denominado código hexadecimal.
Este código también se puede sustituir por la palabra inglesa que define el color. Así red será lo mismo que #ff0000 o green será lo mismo que #00ff00. El problema viene cuando no es un color primario ni secundario. Por ejemplo, el color blanchedalmond se corresponde con el código hexadecimal #ffebcd y es el siguiente color

Observa que he rellenado la celda con el color escribiendo en el inspector de propiedades el código nombre del color:

Imagen de sustitución (roll-over).
Es una imagen, vínculo a otro documento, que cambia de aspecto al pasar el puntero del ratón por encima de ella.
Primeramente deberemos tener, lógicamente, preparadas las dos imágenes y guardadas en cualquier parte del ordenador.
Le damos a Insertar > Imágenes interactivas > Imagen de sustitución

Aparecerá la siguiente ventana:

En el Nombre de la imagen podemos dejar la que aparece por defecto.
En la Imagen original e Imagen de sustitución le damos a Examinar para buscar las imágenes que tenemos guardadas en el ordenador.
El programa nos avisará que las imágenes no están guardadas dentro de la carpeta raíz del sitio y que debemos guardarlas dentro de esa carpeta:

Le decimos que Sí y guardamos las imágenes dentro de nuestro sitio en la carpeta que hayamos creado para dejar las imágenes (o sueltas dentro de la carpeta raíz del sitio).
Después escribimos la URL completa de la página a la cual queremos enlazar la imagen en el caso de que el enlace sea a un documento externo.

Álbum de fotos.

Una opción muy interesante es la creación de un álbum de fotos.
Para hacerlo es necesario tener instalado en el ordenador una versión de Fireworks la herramienta gráfica de Macromedia. Desde este sitio: http://www.macromedia.com/software/trial_download/ puedes descargarte una demo.
Para crear el álbum, lo primero que hay que hacer es tener en una carpeta, en cualquier parte del ordenador, las fotografías guardadas
Empezamos: Aunque el álbum no se va a colocar en el documento donde estemos trabajando, es necesario tener cualquier documento abierto para acceder a Comandos > Crear álbum de fotos web...

En el caso de que no se tenga el Fireworks en el ordenador aparecerá la siguiente ventana de advertencia:

Y se podrá ir a la página de Macromedia para descargar una demo del programa.
Aparecerá la siguiente ventana:

Ponemos un Título a nuestro álbum y una información de subencabezado, si se desea.
Examinamos la carpeta origen de las imágenes (en este caso en D: fotos_ayerbe):

Le damos a Abrir y aparecerá la carpeta:

Aunque aparezca vacía, la carpeta contiene las imágenes previamente guardadas. Le damos a Seleccionar.
A continuación clikeamos en Examinar... de la Carpeta de destino. Se abrirá la carpeta raíz del sitio y allí deberemos crear una nueva carpeta con el nombre que queramos, por ejemplo, album1

Para crear la carpeta, clikeamos en el icono . Inmediatamente aparecerá la nueva carpeta a la que cambiaremos el nombre tal como hemos quedado por album1.
El tamaño de la miniatura puede estar bien (lo podemos modificar si queremos).
Desactivamos la casilla de mostrar nombre de archivos.
Elegimos el número de columnas que deseemos tenga la página inicial.
Ésta ha sido mi ventana completada:

Le damos a Aceptar y saltará el Fireworks procesando la información de cada imagen. Al final aparecerá el mensaje:

Y se presentará en pantalla la primera página del álbum con todas las miniaturas (thumbnails). Podemos modificar los textos introducidos, colocar una imagen o color de fondo, centrar el texto,... para mejorar el aspecto de la página.

• Modificar el álbum.

Para empezar echamos un vistazo a las carpetas creadas. Vamos a la columna de la derecha, la abrimos si no está abierta y desplegamos :

Vemos que se ha creado 1 carpeta con el nombre de album1, dentro de la cual hay otras tres carpetas y un archivo nuevos.

Las carpetas son:
images (que contiene las imágenes del álbum)
pages (que contiene las paginas que soportan cada una de las imágenes)
thumbnails (que contiene las miniaturas)
Y el archivo es el index.htm. Es la primera página que contiene las miniaturas de todo el álbum.
Si abrimos el index.htm (de la carpeta album1)veremos algo así:

Vamos a centrar los textos. Cambiar el color de los mismos, cambiar el fondo... Lo hacemos como ya sabemos pues se trata, simplemente, de una página web.
Una vez arreglada la primera página, abrimos cada una del las pages y vemos cómo se han creado:

Evidentemente el nombre del archivo (Aguero_40.jpg.jpg en este caso) sobra. Así que lo eliminamos.
La imagen, por otro lado, debería estar centrada. Una forma buena de hacerlo es seleccionar todo: Clikeamos en cualquier parte dentro de la tabla y, después en . Se seleccionará toda la tabla que contiene el título, los enlaces para navegar y la imagen. Después desde el inspector de propiedades de la tabla le decimos Alinear: Centro

Botones Flash.

Los botones flash son elementos animados que sirven como enlaces.
Para ver las posibles opciones de botones clikea aquí.
Para insertar un botón le damos a Insertar > Imágenes interactivas > Botón Flash

Aparecerá la siguiente ventana:

En Estilo eliges el botón que quieras. En Muestra verás el botón elegido.
En Texto del botón escribes lo que quieres que aparezca en el botón.
Puedes elegir el tipo de fuente y el tamaño.
En Vínculo escribe la dirección URL completa si es un vínculo externo, o dale a Examinar y elige el archivo en caso de ser un vínculo a un documento de la propia web.
En Destino puedes elegir que se abra en la pantalla completa (_top), en ventana nueva (blank),...
Puedes elegir el color de fondo que rodeará al botón ( a veces, según el botón, no se ve apenas nada).
Finalmente puedes dejar el nombre por defecto o poner otro. Es importante saber que los botones tienen que estar en la misma carpeta que el documento. No pueden estar en carpetas diferentes.
Le damos a Aceptar y el botón se habrá colocado en el sitio elegido.
Vamos a colocar un botón a continuación de esta línea con enlace a otra página de este sitio: Esto ha sido lo que he escrito:

Si una vez hecho el botón, quieres modificar alguna de las propiedades del mismo basta con hacer doble clic sobre el botón para volver a la ventana anterior y poder hacer los cambios oportunos.
Si, en cambio, haces un único clic se obtiene la ventana:

Aquí también se pueden modificar alguna de las variables.

Texto Flash.

Otra forma muy sencilla de crear botones con animación para los vínculos es, con el denominado, texto flash.
Le damos a Insertar > Imágenes interactivas > Texto Flash

Nos aparecerá la siguiente ventana:

Aquí podemos elegir el tipo de fuente, el tamaño, negrita, cursiva, el tipo de justificación dentro del botón, el texto que va a tener... Elegimos el archivo con el que se vincula, el destino: si es en ventana nueva o en toda la pantalla, el color de fondo y el nombre con el que lo vamos a guardar...