Macromedia Dreamweaver es un editor profesional de páginas Web. Permite crear sitios tanto escribiendo directamente el código en HTML, como diseñando de.

Presentación del tema: "Macromedia Dreamweaver es un editor profesional de páginas Web. Permite crear sitios tanto escribiendo directamente el código en HTML, como diseñando de."— Transcripción de la presentación:

1 Macromedia Dreamweaver es un editor profesional de páginas Web. Permite crear sitios tanto escribiendo directamente el código en HTML, como diseñando de forma visual los elementos. Dreamweaver incluye muchos elementos de gran utilidad para los que ya tienen más conocimiento del diseño Web, como manejo de scripts, editores de código, y depuradores; sin embargo es extremadamente sencillo para quienes no saben ningún lenguaje de programación en Internet. Este conjunto de laboratorios se enfocan solo al manejo general de la interfaz gráfica, y a la creación de páginas en el amigable entorno visual. No ahondaremos en ninguna de las funciones avanzadas, ya que para ello se requiere conocimiento de lenguajes más especializados. Introducción

2 En estos laboratorios trabajarás con 7 fases para crear un sitio Web completo y profesional. El flujo de trabajo recomendado será: 1. Planeación del sitio. 2. Recopilación de información e imágenes. 3. Creación del nuevo sitio. 4. Diseño de las páginas Web. 5. Integración de contenido. 6. Interactividad (navegación) y Animación. 7. Prueba y depuración.

3 Fase 1: Planeación de un sitio Web En la planeación de un sitio se deben considerar todos los aspectos visuales, funcionales y técnicos. Antes de definir la estructura y contenido de tu sitio Web, debes al menos considerar el tema, el propósito y la audiencia a quien está destinado. Cuando estos 3 aspectos sean claros para ti, puedes definir la estructura general del sitio, es decir, decidir cuántas páginas vas a crear, la relación entre ellas, y la ubicación de los archivos relacionados.

4 Todos los archivos que uses en el sitio (que principalmente serán documentos Web e imágenes), estarán físicamente en una o más carpetas. Comienza definiendo una estructura de árbol que te permita organizar en carpetas todos los archivos que vayan a formar parte del sitio. Analiza el siguiente ejemplo:

5 Te ahorrarás mucho trabajo si de antemano defines cómo quieres que se vea tu sitio en forma general. Dibuja en un papel cada pantalla, y decide el lugar que ocuparán los textos, las imágenes, botones y animaciones. Es importante mantener consistencia entre las distintas páginas que componen el sitio, pues los usuarios se confunden cuando cada página tiene un look diferente, o cuando los botones de navegación están en distinto lugar en cada página. Ejemplo: www.huevocartoon.com

6 CANTIDADPRODUCTO PRECIO UNITARIOTOTAL 2Lapicero $ 2,500? 5Carpeta $ 1,200? 3Borrador $ 600? 4Sacapuntas $ 200? 1Marcador $ 2,000? 6Cartuchera $ 5,000? 4Cuaderno $ 15,000? 3Libreta $ 6,500? 10Lápiz $ 300? 3Agenda $ 25,000?

7 CANTIDADPRODUCTO PRECIO UNITARIOESTATUSTOTAL 2Lapicero $ 2,500C? 5Carpeta $ 1,200V? 3Borrador $ 600P? 4Sacapuntas $ 200C? 1Marcador $ 2,000P? 6Cartuchera $ 5,000V? 4Cuaderno $ 15,000P? 3Libreta $ 6,500V? 10Lápiz $ 300C? 3Agenda $ 25,000P?

8 Ahora diseña la forma en que los visitantes de tu sitio navegarán de una página a otra. Considera que en todo momento, el usuario debe saber en qué página se encuentra y cómo puede navegar a cualquier otra página. Imagina cómo debe verse la navegación en tu sitio, y procura que sea consistente. Por ejemplo, si en la página principal los botones de navegación están en el margen izquierdo, procura que en las demás páginas también se encuentren en esa zona.

9 Si antes de comenzar a crear el sitio en la computadora, recopilas toda la información e imágenes que necesitarás, el proceso de creación será extremadamente simple. Ve guardando las imágenes que planees usar en las carpetas previamente creadas, y procura mantenerlas organizadas. No guardes en esas carpetas archivos que no piensas usar, o que piensas modificar primero: guarda solo las versiones finales que estarán realmente en el sitio.

10 Válidos en Windows pero inválidos en Internet Para los nombres de archivos y carpetas en un sitio Web no debes utilizar espacios, acentos, ni caracteres internacionales como la ñ. Si lo haces tu sitio no funcionará adecuadamente en Internet, aunque pueda parecer que funciona bien en tu disco duro.

11 Pesos y dimensiones Al recopilar las imágenes es importante que las proceses y optimices en cualquier programa de diseño gráfico. Recuerda que en Internet el tamaño de los archivos es crítico, y deben pesar lo menos posible. Aunque en Dreamweaver se pueden cambiar las dimensiones (alto y ancho) de una imagen, este cambio no cambia el peso (Kb) del archivo. Por lo tanto, procura que las imágenes queden ya con las dimensiones y peso ideales, antes de guardarlas en las carpetas del sitio local.