DREAMWEAVER

Diseño de una página web

Conceptos básicos de adobe dreamweaver

Dreamweaver es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML, aproximadamente más de 3,2 millones de profesionales utilizan Dreamweaver para desarrollar sus sitios web.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en el ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.

Un aspecto de alta consideración de Dreamweaver es su funcionalidad con el uso de extensiones. Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web.

Dreamweaver es la opción profesional para crear sitios Web y aplicaciones, dado que proporciona una potente combinación de herramientas visuales de diseño, funciones de desarrollo de aplicaciones y soporte para la edición del código, características todas ellas que permiten a los desarrolladores y diseñadores más expertos o menos expertos crear rápidamente sitios Web y aplicaciones basados en estándares. Los desarrolladores pueden utilizar Dreamweaver con su tecnología de servidor preferida para crear potentes aplicaciones en Internet destinadas a conectar a los usuarios a las bases de datos, las fuentes de datos dinámicos y los sistemas heredados.

El entorno de trabajo

Este programa se presenta al mundo del diseño de páginas web y se describen los principales elementos del entorno de trabajo de Dreamweaver, explicando la forma de trabajar con sus paneles y herramientas, guardardando distintas configuraciones en espacios de trabajo. También se indica cómo mostrar los documentos o páginas en distintos navegadores y la utilización del sistema de ayuda.

CREAR SITIOS WEB

Presenta los pasos a seguir para crear y configurar un sitio web en el programa Dreamweaver. Explica las diferencias entre el sitio local y sitio remoto, cómo organizarlos para albergar el contenido creado y las distintas formas de ver los archivos en el sitio local.

CONFIGURAR PÁGINAS WEB

Se estudia cómo crear y configurar nuevas páginas web en Dreamweaver, además de la forma de elegir colores en este programa, incluir imágenes de fondo o utilizar imágenes de rastreo.

UTILIDADES DE EDICIÓN

Se describen algunas funciones útiles en el trabajo diario con Dreamweaver, como pueden ser el trabajo con las distintas ventanas que podemos tener abiertas en el mismo, el modo de deshacer los cambios realizados en una página y la utilización de reglas, guías y cuadrícula como ayuda para la organización de los objetos.

TRABAJO CON VÍNCULOS

Explica cómo insertar hipervínculos en las páginas web: vínculos a un lugar determinado de una página (a través de un anclaje con nombre), vínculos a otras páginas (del mismo sitio o a cualquier página de Internet) y vínculos en un menú de salto. Se indican las diferencias entre rutas absolutas y relativas, así como la administración y modificación de hipervínculos. Por último, se describe el uso de comportamientos en las páginas, para ejecutar comandos en respuesta a determinados sucesos o eventos.

INSERTAR IMÁGENES

Se describe el modo de incorporar imágenes en las páginas web. Se presentan los formatos gráficos que se pueden utilizar en una página web y sus diferencias, así como la creación de imágenes de sustitución, mapas de imagen y barras de navegación.

ETIQUETAS DIV Y TABLAS

Explica la forma de distribuir o colocar los contenidos en las páginas web mediante la utilización de etiquetas Div PA o elementos PA dispuestos en capas, utilizando tablas o por medio de etiquetas Div o contenedores. Se describe cómo establecer su formato e incluir el contenido.

DIVISIÓN EN MARCOS

Introduce el concepto de marco (también llamado frame), como una forma de dividir la página web en varias secciones y mostrar contenido distinto en cada una de ellas. Se explica el modo de trabajar con los marcos en Dreamweaver, así como la asignación de contenido y la creación de hipervínculos que trabajen con los marcos.

TRABAJAR CON PLANTILLAS

Explica qué son y cómo crear y utilizar plantillas para, a partir de ellas, crear páginas web. Se muestra cómo organizar los contenidos en zonas bloqueadas y regiones editables de una plantilla.

PUBLICAR EL SITIO WEB

Explica los pasos a seguir para preparar el sitio web creado en Dreamweaver y finalmente publicarlo en el servidor web, es decir, ponerlo a disposición de los usuarios, de forma que éstos puedan ver las páginas web en sus navegadores.

Configuración de un sitio local

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.miweb.com en el navegador, éste intentaría cargar la página http://www.miweb.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.

A través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar 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.

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

...