Hipervinculos

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

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.

Tipos de enlaces

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.  Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.  Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. 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.  Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio ahttp://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html. Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.  Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre. Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2 Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas (para crear hiperenlaces) o incluso imágenes u otro tipo de objetos (como veremos en temas posteriores). 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.

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. Por ejemplo, aquí hay un enlace a www.elpais.es, que 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 #. 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 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 dramweaver te creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la página 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, es equivalente al atributo ALT de las imágenes. 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.

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. 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 ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. 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. No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos. Formato del enlace   En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la página. Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado. Aqui tienes un vínculo de ejemplo: www.aulaclic.com Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vínculos similares de ejemplo: Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale cero (0). El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un vínculo o no. Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el tamaño de las líneas que forman el recuadro es cero (0). Puede hacerse un recuadro más gordo incrementando el valor del campo Borde. Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando. 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.  Para practicar puedes realizar el Ejercicio paso a paso Crear vínculo de correo electrónico. En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vínculos rotos. Si no sabes lo qué son o cómo solucionarlos, consúltalo aquí .

Sesión 3

El texto

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto.  Formato:  Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado 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 preformateado se respetará que hayan varios espacios en lugar de solo uno.  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.  Tamaño:  Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, 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.  Estilo:  Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades 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.  Alinear:  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.  Lista:  Estos botones permiten crear listas con viñetas o listas numeradas.  Sangria:  Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.

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ú Texto. La lista con viñetas (desordenada) 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): Preparar la mochila Sacar los libros de ese día Introducir los libros del día siguiente Ponerme el pijama Lavarme los dientes Poner el despertador

Ejemplo de lista con viñetas (desordenada): Perro Gato Aves Canario Loro Hamster

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ú Texto, 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.

Caracteres Especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha. Sólo coloca el puntero del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:

Estilos CSS. Introducción

En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado. Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de Estilo en Cascada) 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 algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo. 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. Crear un Estilo Personalizado   Con Dreamweaver 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él. Veámoslo:  Para crear un Estilo CSS personalizado: 1. En el documento, se selecciona el texto al que se desea aplicar características concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos. Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados. Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades. 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 desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior. Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo. Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana. De esta manera se puede crear un estilo para añadirlo a un documento. Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una manera rápida a través del menú Texto, opción Estilos CSS. En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo. Si lo deseas, puedes aprender más sobre el panel CSS aquí . Aplicar un Estilo   Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango de texto dentro de un párrafo, el Estilo CSS sólo afectará al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.  Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase. Hojas de Estilos Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionandoExportar. Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier página que queramos utilizarlos. Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos... En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos. Elegimos si queremos Vincular o importar la hoja de estilos. Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página, de esta forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado. Si elegimos Importar la hoja se incrusta en la página. La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que será la que se muestre cuando navegues por Internet, y otra para print que será la que se utilice cuando se imprima el contenido del archivo. Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.

Creación de un Sitio

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

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, las hojas de estilo, 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. 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. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica. Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm.

Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios.... Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opciónAdministrar 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 las características del sitio.

Las características 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. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto. Estas tres características son las imprescindibles para definir un sitio local. 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. 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ña Básicas, en vez de la pestaña Avanzadas.

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 Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.

Vistas del sitio

Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botón  que aparece en la parte superior del panel y de la ventana. Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc.

En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botón Actualizar.

Subir Archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) 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. Sino los enlaces no funcionarán correctamente y es posible que algunas imágenes no se muestren. Para subir los archivos via 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. Uno de los programas gratuitos (si no es con fines comerciales) más utilizados es SmartFTP, desdesu página web podrás descargarte el programa y su traducción al español. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP. Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Host, Usuario y Contraseña. Rellena los campos y haz clic en OK. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionándolos a la vez y arrastrándolos a la carpeta (remota) del servidor. Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y verás el sitio en Internet!  Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos allí.

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 Aspecto, como ves en la imagen anterior, 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.  Color de 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. Tamaño: permite definir el tamaño de la letra. Color del texto: es el color de la fuente. Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores.  En la categoría Título/Codificación encontramos la propiedad: Título: es 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 Vínculos encontramos las propiedades: 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 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 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.

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí .

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 Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. También es posible personalizar los colores 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 tienes más arriba. 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 #3399FF, el botón quedaría del siguiente modo: .