Dreamweaver CS3

Introducción: como crear sitio web  (Dreamweaver)

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áginahttp://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 nombreindex.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ónEditar..., 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ú desple Creación de hipervínculos La creación de enlaces es algo cotidiano e importante en el proceso de desarrollo de un sitio Web. Los enlaces entre sus páginas conformaran la estructura del sitio. Dreamweaver nos ofrece varias posibilidades para crear vínculos. Esta es una de las bazas de este programa para facilitar el trabajo al diseñador. Tiene varios métodos que están pensados para ser rápidos e intuitivos, sobre todo para crear enlaces entre las páginas de un mismo sitio Web. Entre todas estas opciones cada uno elegirá la que le resulte más rápida en cada ocasión. ¡MUCHO OJO! Cuando vayas a introducir una dirección URL absoluta como vínculo debes asegurarte de que la incluyes completa. Con protocolo, servidor, ruta, archivo y los signos de separación. Basta que te confundas en una letra para que el explorador no encuentre el archivo. Una buena fórmula consiste en visitar la página con el navegador y cuando se haya comprobado se copia la URL de la barra de direcciones y se pega en el lugar correspondiente en Dreamweaver. Utilizando el icono de carpeta o el campo de texto Vinculo del inspector de Propiedades Seleccionamos el texto que deseamos que se convierta en hipervínculo. Abrimos el inspector de Propiedades (menú Ventana > Propiedades) y llevamos a cabo una de las siguientes operaciones: Escribimos el destino directamente en el campo de texto Vinculo. Para enlazar con un documento del sitio escribe la ruta y el nombre del archivo. (mejor seleccionarlo con el otro método). Para establecer un vínculo con un documento externo escribimos la dirección absoluta URL. Pulsamos en el icono de carpeta  situado a la derecha del cuadro de texto Vinculo para localizar y seleccionar un archivo de nuestro sitio. Vemos que basta con seleccionar el archivo de destino para que automáticamenete escriba la dirección URL. Eso si, habrá que tener cuidado de seleccionar en este cuadro siempre la opción Relativa a Documento, ya que la otra opción nos puede dar muchos disgustos. Crear un hipervínculo 1 Señalar archivos para crear enlaces relativos. Este método es uno de mis favoritos: Seleccionamos el texto que deseamos convertir en hipervínculo Activamos el panel Archivos > Sitio , el cual muestra todos los documentos que contiene el sitio en el que trabajamos. Arrastramos el icono de señalización de archivos  , situado a la derecha del cuadro de texto Vinculo del inspector de Propiedades, y señalamos con él un documento de la solapa Sitio. Liberamos el botón del ratón y comprobamos que el archivo escogido aparece en el campo Vinculo del inspector de Propiedades. Crear un hipervínculo 2 Desde una selección de un documento abierto Selecciona un texto. Manten la tecla Mayúsculas pulsada. Arrastra la selección (con Mayúscula presionada). Veras que el cursor de convierte en el señalizador de archivos. Señala un documento en la solapa Sitio.   Libera el botón del ratón. Comprueba que el archivo escogido aparece en el campo Vinculo del inspector de Propiedades. Crear un hipervínculo 3 Utilizando el menú Insertar Este es el método general y mas completo (aunque un poco lento): Sitúa el cursor en la zona del documento que quieres que aparezca el hipervínculo Realiza una de estas dos operaciones para mostrar el cuadro de dialogo Hipervínculo Vamos al menú Insertar > Hipervínculo Pulsamos sobre el botón Hipervínculo  del panel Insertar > Común.  Para realizar un enlace simple basta con rellenar estos campos de texto: Texto : el texto que se mostrará como hipervínculo en el documento. Vinculo : la dirección URL del vínculo o haga clic en el icono de carpeta para localizar y seleccionar un archivo dentro del sitio web (hipervínculo relativo). Destino : Lo explicaremos detenidamente al final de esta Unidad. Título: Escribiremos un texto alternativo que se muestra en un letrero amarillo. Los otros campos son relativos a la accesibilidad del enlace, presiona el botón Ayuda si quieres más información. Aceptamos y el resultado es este: Buscar con google Crear un hipervínculo 4 Hipervínculos de correo electrónico Cuando un usuario hace clic en un enlace de correo electrónico se abre en una ventana el programa de correo electrónico del usuario con un mensaje en blanco (se utiliza el programa de correo configurado en el navegador del usuario). En la ventana de mensaje de correo electrónico, en el campo Para se completa automáticamente la dirección de correo electrónico establecida en el enlace. Por ejemplo, si se quieren recibir comentarios de los usuarios que visitan la página, se puede crear un hipervínculo que permita redactar y enviar un mensaje de correo electrónico a una determinada dirección. Ejemplo: Para contactar conmigo pulsa aquí Código: Para contactar conmigo pulsa <a href="mailto:profesor@hotmail.com">aqui</a> ¡Nota! No todos los exploradores de Web admiten hipervínculos a las direcciones de correo electrónico. Para que funcione, es imprescindible que el usuario que pica sobre el enlace tenga configurado su programa de correo electrónico. El procedimiento para realizar un enlace de este tipo es el siguiente: Sitúa el cursor donde quieres insertar el hipervínculo o selecciona el texto que deseas que sea convierta en enlace. Realiza una de estas operaciones para insertar el hipervínculo: Selecciona Insertar/Vinculo de correo electrónico Pulsa el icono  de la solapa Común del panel Insertar. Aparecerá este cuadro de dialogo: Completa los campos de texto: Texto : Texto que se mostrará como enlace. Si hemos seleccionado texto antes de insertar el vínculo aparecerá en este casillero.( Ejemplo: aqui ) Correo electrónico: Dirección de correo electrónico a la que queramos que escriba el usuario.( Ejemplo: profesor@hotmail.com ) Haemos click en Aceptar También se puede introducir un vinculo a un correo electrónico directamente desde el cuadro Vinculo del inspector de Propiedades. Solo has de escribir mailto: seguida de la dirección de correo. Por ejemplo: mailto:profesor@hotmail.com (sin espacio alguno entre los dos puntos y la dirección) Crear un hipervínculo de correo electrónico Hipervínculos a marcadores Hay enlaces que no nos llevan a otros documentos, sino que nos llevan a un lugar determinado de la página. Esos lugares de la misma página a los que nos dirige el enlace están marcados. Para marcar se utilizan marcadores, También llamados Anclas o Puntos de fijación con nombre (complicado nombre que utiliza Dreamweaver). Un marcador es una ubicación o texto seleccionado en una página que se ha marcado, lo que permite crear un hipervínculo a dicho marcador con el fin de mostrar una determinada sección de una página Web. Ejemplo: Repasa las etiquetas de HTML Código del marcador:<a name="referencias">Referencias HTML</a> Código del enlace:<a href="#referencias">Repasa las etiquetas de HTML</a> Como ves, un hipervínculo a un marcador, se indica mediante el signo (#), que precede a la dirección URL de destino. Por lo tanto cuando utilizamos marcadores hay dos tareas que realizar, en primer lugar crear los marcadores y en segundo lugar hacer los enlaces a dichos marcadores. Crear un marcador Situamos el cursor donde deseamos insertar el marcador Realizamos una de estas operaciones: Seleccionamos menú Insertar > Punto de fijación con nombre. Pulsamos el botón "ancla"  de la solapa Común del panel Insertar. Aparecerá este cuadro de dialogo: Escribimos un nombre para el marcador y aceptamos. (Es importante respecto de la compatibilidad no incluir espacios ni caracteres especiales dentro de los marcadores). Donde hemos insertado el marcador aparecerá este icono . Solamente es una ayuda visual para localizar los marcadores en la vista de diseño que no se reproducirán en el navegador. ¡Nota! Si no se muestra la ayuda visual del icono de marcador, selecciona Ver/Ayudas visuales/Elementos invisibles. Crear un enlace a un marcador Seleccionamos el texto que deseamos que se convierta en enlace. En el cuadro de texto Vinculo del inspector de Propiedades, introducimos el signo almohadilla (#) seguido del nombre del marcador. Por ejemplo: Para enlazarlo con un marcador, situado en el inicio de la misma página, llamado "arriba", escribimos #arriba. Para enlazarlo con un marcador llamado "arriba" situado en un documento distinto pero en la misma carpeta, escribimos nombredelarchivo.htm#arriba. Una forma mas sencilla de hacer estos enlaces consiste en utilizar el señalizador de archivos ( recuerda,  , situado a la derecha del campo Vinculo ¡Muy útil!) Seleccionamos el texto que deseamos convertir en enlace. Podemos utilizar cualquiera de estos dos métodos: Arrastramos el señalizador hasta el icono que localiza el marcador  Mantenemos pulsada la tecla de Mayúsculas mientras arrastramos el texto hasta el marcador deseado. Liberamos el botón del ratón. ¡Y ya está! Crear un marcador y un enlace al marcador Destino-Target de los Hipervínculos Cuando pulsamos en un enlace, el archivo al que llamamos necesita de una ventana del navegador para mostrarse. Por defecto el documento se abre en la misma ventana, sustituyendo el contenido que estamos viendo por el de la página a la que enlazamos. Nosotros podemos cambiar este comportamiento y determinar cual va a ser la ventana de destino del enlace. Ese trabajo lo va a realizar el atributo target de la etiqueta <a> de hipervínculo. Cuando realizamos un hipervínculo, una vez que el cuadro de texto Vinculo contiene la dirección del enlace, se activa el menú Destino del inspector de Propiedades. Este menú presenta 4 opciones como destino de nuestro enlace: _blank carga el archivo vinculado en una ventana de navegador nueva. _parent * se utiliza cuando el enlace se encuentra en una página de marcos, carga el archivo vinculado en el marco padre. _self *carga el archivo vinculado en la misma ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. _top *carga el archivo vinculado en la ventana completa del navegador, quita los marcos que hubiera. gable de la pestaña Archivos