Unidad 6: Imágenes

1. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada gato.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/gato.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/gato.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así  indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:.

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

2. Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.

Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen. Puedes ver cómo en este aquí .

En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados:

Puedes asignarle un grosor de borde desde el campo Borde.

Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.

Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

3. Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:

Tamaño original 

   Con tamaño modificado

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella. 

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

4. Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

  

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

Unidad 5: Hiperenlaces

1. Introducción

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.

• Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.

Por ejemplo, http://www.google.com, o http://www.misitio.com/pagina/pagina1.html.

La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

•  Referencia relativa al documento (por defecto):

La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento.

Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.

Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.

Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas.

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual.

• Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.

En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de su ubicación.

Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de pruebas como veremos más adelante, ya que Windows interpretará como raíz la raíz del disco duro.

•  Marcadores o Puntos de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).

El formato sería nombre_de_documento.extension#nombre_de_punto.

Si el punto de fijación está en la propia página, basta con indicar únicamente el punto en el enlace, por ejemplo #apartado2

Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje con nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la página.

Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).

Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.

También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos.

3. Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector HTML.

Por ejemplo, aquí hay un enlace a www.google.com, que al ser un archivo externo es de referencia absoluta, por eso contiene http://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. Veremos su utilidad más adelante.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.

Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te creará un enlace relativo al documento. 

Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se tabularán por orden de aparición.

4. Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de si el documento está basado en marcos.

Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.

_blank:

Abre el documento vinculado en una nueva ventana o pestaña del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.

_self:

Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador. 

Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.

Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratón.

5. Enlace a correo electrónico

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vínculo en este caso es mailto:direccióndecorreo.
Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.
También es posible a través del menú Insertar, opción Vínculo de correo electrónico.
En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo.

Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un ordenador público, o emplea el correo web directamente.

Unidad 4: Características del Texto y Estilos CSS

1. Propiedades y Formato

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

•  Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato: 

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo: 

El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.

Lista: 

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas mas adelante.

Sangría: 

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.

Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

• Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web.

Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS4 nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada .

Regla de destino: 

Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.

Editar regla: 

Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.

Panel CSS: 

Este botón abre el panel CSS si no lo tuviéramos abierto.

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.

Estilo: 

Estos botones ponene el texto en negrita y cursiva respectivamente.

Alineación: 

A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.

Tamaño: 

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...

Color: 

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

2. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista numerada (ordenada) se selecciona a través del botón .

 Ejemplo de lista numerada (ordenada):

1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador

Ejemplo de lista con viñetas (sin ordenar):

• Perro
• Gato
• Aves
• Canario
• Loro
• Hámster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

3. Crear Estilos CSS

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.
También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), párrafos (<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo.
También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a los que apliquemos esa clase.
Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS.
Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.


4. Esilo CSS Personalizado.

Con Dreamweaver CS4, las características que apliquemos a un texto a través del Inspector de propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué elementos afecta.Veámoslo:

•  Crear un estilo en línea.

Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en línea>.

A continuación, definimos las propiedades del estilo.

Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos.

• Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos < Nuevo estilo en línea >.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerá la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo.

Podemos elegir entre cuatro tipos de selector:

• Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase. El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
• ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.
• Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
• Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Nombre del selector: esta opción permite asignar un nombre al selector.

Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la clase, id, etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos escribir el que queramos.

Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.

Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se añadirán ella.

5. Definir o Editar un Estilo

Una vez creado, tenemos que definir las propiedades que formarán el estilo.

Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van añadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la ventana Definición de regla.

Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más adelante.

Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar varias propiedades.

Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el menú Ventanas o pulsando en el botón Panel CSS.

En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en la parte inferior las propiedades del estilo actual.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el botón derecho sobre el estilo y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

6. Aplicar un Estilo


En el caso de haber creado una regla para una etiqueta, nos será necesario aplicarla, ya que directamente se aplicarán directamente.
Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos cómo hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo).
En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.