Diseño de Páginas Web con Dreamweaver

El Diseño de Páginas Web con Dreamweaver es una habilidad fundamental para crear sitios atractivos y funcionales. Adobe Dreamweaver es una herramienta poderosa que facilita la construcción de aplicaciones web, desde páginas estáticas con contenido fijo hasta páginas dinámicas que interactúan con el usuario y bases de datos. Esta guía completa te ayudará a entender los conceptos clave y a realizar las operaciones básicas para desarrollar tus propios proyectos web.

Diseño de Páginas Web con Dreamweaver: Conceptos Esenciales

El diseño web implica la creación de sitios que pueden ser de dos tipos principales: páginas estáticas y páginas dinámicas. Comprender la diferencia es crucial para el desarrollo efectivo.

Las páginas estáticas tienen contenidos fijos. Se muestran al visitante exactamente como fueron diseñadas por el desarrollador, aunque pueden incluir elementos como animaciones, sonido y video para enriquecer la experiencia. Su contenido no cambia en función de las acciones del usuario.

Por otro lado, las páginas dinámicas presentan un contenido indeterminado que varía según las peticiones del visitante. Estas páginas interactúan con el usuario, entre sí y con los recursos de un servidor web, como las bases de datos. La respuesta que ve el cliente dependerá de sus solicitudes, lo que las hace mucho más interactivas y personalizables.

Servidores Web y Aplicaciones Web

Un servidor web es una aplicación que entrega las páginas web solicitadas por un usuario a través de un navegador. Cuando un usuario pulsa un hipervínculo o introduce una dirección en la barra, el navegador envía una solicitud al servidor web, que localiza la página y la envía de vuelta.

En el caso de las aplicaciones web con páginas dinámicas, la situación es más compleja. Cuando el cliente las solicita, algunas líneas de código pueden no estar determinadas. Si el usuario necesita ver datos específicos de una base de datos, además del servidor web, se requiere un servidor de aplicaciones. Este último integra la respuesta final con los datos solicitados y la envía al servidor web para que la entregue al navegador. Dreamweaver reconoce tecnologías de servidor web como ColdFusion (propia de Adobe), ASP.NET, ASP, JSP y PHP, cada una con características particulares.

Creación y Estructura de Sitios Web en Dreamweaver

Para iniciar un proyecto web con Dreamweaver, es esencial organizar tus archivos de manera lógica. Una buena estructura de carpetas facilitará el manejo y la actualización de tu sitio.

Organización de Archivos y Creación de Tablas

1. Crea la estructura de carpetas: Dentro de tu carpeta principal para el proyecto (por ejemplo, HTML), crea una nueva carpeta llamada Web_02. Dentro de Web_02, organiza tus recursos creando dos subcarpetas: una para Imagen (o Images) y otra para sonidos (para clips de audio).
2. Inserta una tabla: Abre un nuevo archivo en Dreamweaver e inserta una tabla de tres columnas por tres filas. Distribúyelas adecuadamente en la página para crear un diseño base.
3. Añade contenido inicial:

• En la parte superior central de la página, escribe el nombre del músico o tema principal.
• Debajo del nombre, puedes añadir datos como la fecha de nacimiento y muerte, o el lugar de origen.
• Inserta una imagen: Coloca el cursor en la celda central. Ve al menú Insertar y ejecuta el comando Imagen. En el cuadro de diálogo Seleccionar origen de imagen, busca y selecciona la imagen que previamente guardaste en tu carpeta Imagen y pulsa Aceptar.
• En las celdas laterales, puedes colocar datos relevantes sobre obras, amigos o viajes, junto con texto al que luego podrás asignar hipervínculos.
• En la celda inferior, escribe un breve resumen de la vida del músico y no olvides incluir la fuente de la información.

4. Guarda el archivo: Guarda tu trabajo en la carpeta Web_02 con el nombre Index.htm utilizando el comando Guardar como del menú Archivo. Cierra el archivo y el programa cuando hayas terminado.

Formato y Color en Tablas y Texto con Dreamweaver

Dreamweaver simplifica mucho el proceso de dar formato sin necesidad de escribir código HTML manualmente.

1. Selecciona celdas: Pulsa en la celda izquierda de una fila inferior y arrastra el ratón hacia la derecha para seleccionar varias celdas. Para unirlas, ve al menú Modificar, pulsa en el comando Tabla y selecciona Combinar celdas. Las celdas se convertirán en una sola.
2. Elimina bordes de tabla: Con la tabla seleccionada (el Inspector de propiedades debe estar visible), introduce el valor 0 en el campo Borde para eliminar las líneas visibles de la tabla.
3. Modifica colores de fondo y texto generales:

• Pulsa en el menú Modificar y selecciona el comando Propiedades de la página.
• En el cuadro de diálogo, selecciona Apariencia (HTML) y en la lista Categoría, pulsa en el recuadro Fondo para elegir un color para el fondo de la página.
• Si deseas cambiar el color de todo el texto, selecciona Texto y escoge el color deseado.

4. Cambia el color de texto específico: Para modificar el color de un texto en particular (como un título), selecciónalo y ejecuta el comando Color del menú Formato.

Nota importante: El formato y posicionamiento de elementos puede ser laborioso. A veces, las tablas y textos pueden desajustarse sin motivo aparente. Sin embargo, una vez que domines las herramientas de Dreamweaver, apreciarás las bondades del programa, especialmente al evitar la escritura manual de gran parte del código HTML.

Inserción de Hipervínculos en Dreamweaver: Multimedia y Navegación

Los hipervínculos son esenciales para la interactividad de tu sitio web, permitiendo a los usuarios navegar entre páginas o acceder a contenido multimedia.

Enlazar a Videos de YouTube

1. Busca el video en YouTube: Inicia una sesión con tu navegador y ve a En el campo de búsqueda, escribe el nombre del músico o tema y pulsa Buscar. Selecciona el video más adecuado y, mientras lo escuchas, copia la dirección web de la página pulsando Ctrl + C.
2. Crea el hipervínculo en Dreamweaver: Regresa a Dreamweaver, selecciona el texto en tu página que quieres que actúe como enlace (por ejemplo, "Observa un video"). Abre el menú Insertar y ejecuta el comando Hipervínculo.
3. Configura el enlace: En el cuadro de diálogo Hipervínculo, pega la dirección copiada de YouTube en el campo Vínculo con Ctrl + V. Escribe un Título (descripción breve del enlace) y pulsa Aceptar. Al abrir la página en un navegador, pulsar este hipervínculo te permitirá ver el video.

Enlazar a Archivos de Audio Locales

1. Selecciona el texto: En Dreamweaver, selecciona el texto que deseas convertir en un hipervínculo para escuchar un audio (por ejemplo, "Escucha un concierto").
2. Ejecuta el comando Hipervínculo: Abre el menú Insertar y selecciona el comando Hipervínculo.
3. Busca el archivo de sonido: En el cuadro de diálogo Hipervínculo, pulsa sobre el pequeño icono con forma de carpeta. Navega hasta tu carpeta sonidos (dentro de Web_02) y selecciona el archivo de sonido deseado (por ejemplo, Paganini.wav). Pulsa Aceptar. Ahora, al hacer clic en este enlace en el navegador, se reproducirá el archivo de audio.

Preguntas Frecuentes sobre Diseño Web con Dreamweaver para Estudiantes

¿Qué es Dreamweaver y para qué sirve en el diseño web?

Dreamweaver es un software de Adobe que permite diseñar, desarrollar y mantener sitios web. Es especialmente útil porque ofrece una interfaz visual (WYSIWYG) para crear páginas sin necesidad de escribir todo el código HTML, CSS o JavaScript manualmente, facilitando la creación de páginas estáticas y dinámicas.

¿Cuál es la diferencia entre una página web estática y una dinámica?

Una página estática tiene contenido fijo que se muestra siempre igual a todos los visitantes. Una página dinámica, en cambio, genera su contenido en tiempo real basándose en interacciones del usuario o datos de una base de datos, ofreciendo una experiencia personalizada.

¿Cómo se inserta una imagen en Dreamweaver?

Para insertar una imagen, debes colocar el cursor en el lugar deseado de tu página, ir al menú Insertar, seleccionar Imagen, y luego buscar y elegir el archivo de imagen desde tu carpeta local en el cuadro de diálogo Seleccionar origen de imagen.

¿Cómo puedo eliminar los bordes de una tabla en Dreamweaver?

Con la tabla seleccionada en Dreamweaver, busca el Inspector de propiedades. Allí encontrarás un campo llamado Borde. Simplemente introduce el valor 0 en ese campo para que los bordes de la tabla dejen de ser visibles en la página web final.

¿Qué son los servidores web y de aplicaciones?

Un servidor web es un programa que entrega páginas web a los navegadores cuando estas son solicitadas. Un servidor de aplicaciones, por su parte, se encarga de procesar la lógica de negocio y las interacciones con bases de datos para generar contenido dinámico, trabajando en conjunto con el servidor web para entregar la respuesta final al usuario.