Macromedia Dreamweaver es un editor profesional de documentos Web, extremadamente sencillo de utilizar. Permite crear paginas tanto escribiendo directamente el código en HTML, como diseñando de forma visual los elementos. Esta aplicación incluye muchos elementos de gran utilidad como manejo de scripts, editores de código y depuradores. En Dreamweaver o (DW) crearemos páginas en el amigable entorno visual. Podremos introducir el texto de una página Web, insertar imágenes, crear tablas y asignar formatos de forma muy similar a como lo hacemos con un procesador de textos.
FLUJO DE TRABAJO PARA LA CREACIÓN DE PÁGINAS WEB Antes de crear cualquier sitio web debemos planearlo. Sabemos que un sitio web se compone de varias páginas relacionadas entre sí y contiene a su vez textos, imágenes, videos, vínculos, etc. Debemos definir los objetivos y la forma de presentarlos, elegir la estructura de navegación (jerárquica, lineal, lineal con jerarquía o red), definir el estilo visual, crear una página principal (Index o home) y finalmente diseñar cada uno de los documentos del sitio.
El flujo de trabajo es la estrategia que debe seguir el desarrollo de una página Web a partir de su diseño, objetivo y funcionamiento, por esto para diseñar un sitio completo y profesional, recomiendo trabajar en las siguientes etapas:
· PLANEACIÓN DEL SITIO WEB · RECOPILACIÓN DE INFORMACIÓN E IMÁGENES · MANIPULACIÓN Y OPTIMIZACIÓN DE IMÁGENES EN UN PROGRAMA DE DISEÑO GRAFICO · CREACIÓN DEL NUEVO SITIO EN DREAMWEAVER · DISEÑO DE LAS PAGINAS WEB · INTEGRACIÓN DEL CONTENIDO DE LAS PAGINAS · AGREGAR INTERACTIVIDAD (NAVEGACIÓN) · PRUEBA Y DEPURACIÓN
PLANEACIÓN DE UN SITIO WEB Antes de definir la estructura y contenido del sitio web, debemos considerar el TEMA, PROPÓSITO Y AUDIENCIA a la que se dirigirá. TEMA. En si es el argumento o cuestión a la cual se va a referir el sitio. Ejemplo: Enseñanza de las matemáticas, Dibujo, astronomía, etc. PROPÓSITO. Es la intención u objetivo que se quiere lograr con este sitio. Ejemplo: Aprender a dibujar virtualmente, Dar a conocer la ciudad de Panamá al mundo, etc. AUDIENCIA. Son los usuarios que generalmente navegarían en esta página. Ejemplo: estudiantes, viajeros, profesionales, etc.
RECOPILACIÓN, MANIPULACIÓN Y OPTIMIZACIÓN DE INFORMACIÓN E IMÁGENES Sugiero crear una carpeta temporal donde puedas guardar los elementos que hayas generado o recopilado como textos, imágenes, videos, sonidos o animación y que usaras en el sitio. Debes tener en cuenta: · No des formato a los textos es recomendable hacerlo directamente en DW. Lo más conveniente es pasar a archivos de Bloc de notas (texto puro) todos los textos que vayas a utilizar en las páginas del sitio. · Edita u optimiza las imágenes utilizando un editor de diseño grafico (Photoshop, Firework, Paint, etc.), por último guárdalos bajo formato jpg, gif o png ya que estos son soportados por más navegadores. Esto también permite reducir de tamaño a los archivos.
ENTORNO DE TRABAJO DE DREAMWEAVER Vamos a ver cuáles son los elementos básicos de Dreamweaver 8, la pantalla, las barras, los paneles, etc., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.
La barra de título La barra de título contiene el nombre del programa (Macromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato HTML. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. La barra de menús La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estándar La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar , etc.
La barra de herramientas de documento La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
La barra de estado La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta ). También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
MILADY MISAS GARCIA
Bibliografía: AulaClic.com Carlos Zepeda Chehaibar Diseño Web