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
Inspector de propiedades

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>.

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 >.
Nueva regla de estilo

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

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.
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.
Inspector propiedades CSSInspector propiedades HTML

Unidad 3: Configurar un sitio local


1. INTRODUCCIÓN

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

2. CREAR O EDITAR UN SITIO WEB SIN CONEXIÓN A INTERNET

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.
Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...
Nuevo sitio

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.
Definición de sitio

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento.
  • Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.
  • La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestañaBásicas, en vez de la pestaña Avanzadas.

3. ABRIR UN SITIO

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivosbuscar y seleccionar el sitio a abrir en el menú desplegable Archivos

4. VER EL SITIO

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón Expandir que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.
Ventana Expandida 

5. SUBIR ARCHIVOS AL SERVIDOR

Cuando quieras visualizar el sitio en Internet deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
• Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarán correctamente, y es posible que algunas imágenes no se muestren.
Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu servidor.
• La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos.
• Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos allí.

6. PROPIEDADES DEL DOCUMENTO

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
  • Pulsar la combinación de teclas Ctrl + J.
  • Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
  • Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:
Las propiedades están organizadas en categorías.
 En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
  • Fuente de página: es el tipo de letra  que le aplicaremos al texto.
  • Tamaño: es el tamaño de la fuente que aplicaremos al texto.
  • Color del texto: es el color de la fuente.
  • Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
  • Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. 
  • Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
  • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
• En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:
 
  • Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. 
  • Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
  • Texto: es el color de la fuente.
  • Vínculos: es el color que mostrará el texto de los vínculos.
  • Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
  • Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.
  • Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
En la categoría Vínculos (CSS) encontramos las propiedades:
  • Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
  • Tamaño: es el tamaño del texto de los vínculos.
  • Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.
  • Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.
  • Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo.
  • Vínculos activos: es el color de los vínculos activos.
  • Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
• En la categoría Encabezados (CSS) encontramos la propiedad:
  • Fuente de encabezadopermite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado.
• En la categoría Título/Codificación encontramos la propiedad:
  • Títuloes el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver
• En la categoría Imagen de rastreo encontramos las propiedades:
  • Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.
  • Transparencia: permite establecer la opacidad de la imagen de rastreo.

7. LOS COLORES

Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo.
Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos a través del botón  de la parte superior de la paleta.
Los colores pueden asignarse a través de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor#39F, el botón quedaría del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (RojoVerde y Azul).
Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).
El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al verde y el último al azul.
En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.