Dreamweaver es una aplicación creada inicialmente por Macromedia en su version 1.0 fue lanzada al mercado en 1997 (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash.
La gran base de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en JavascriptC, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Dreamweaver oculta el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para pre visualizar 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.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver.
Dreamweaver es su arquitectura extensible. Es decir, permite 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, que van desde simple efectos roll over hasta completas cartas de compra. Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows.
1. ARCHIVO: Podremos encontrar opciones 6. TEXTO: Encontraremos las opciones para para crear, abrir y guardar archivos, cambiar la alineación, la fuente y el estilo de además, tenemos las de importar, exportar los textos. Además podremos controlar y y la de vista previa en el navegador. editar las hojas de estilo (CSS). 2. EDICIÓN: Aquí veremos las diferentes posibilidades para cortar, pegar y copiar, 7. COMANDOS: Desde este menú, se pueden junto con las opciones de selección y de obtener extensiones para el Dreamweaver, preferencias. que son agregados extra para el programa. 3. VER: En este menú, seleccionaremos las 8. SITIO: Podremos crear y editar nuevos sitios preferencias para achicar o maximizar la con sus respectivos archivos. visualización del documento, junto con las posibilidades para ver el código HTML. 9. VENTANA: Es un menú muy importante, desde el que podremos visualizar y ocultar 4. INSERTAR: Desde aquí, podremos insertar: las diferentes ventanas del programa con Imágenes, tablas, archivos de flash, sus respectivas opciones. hipervínculos y etiquetas para formularios. 10. AYUDA: Encontraremos el menú de ayuda 5. MODIFICAR: Con este menú, podremos del programa y su registro. controlar propiedades de imágenes, tablas y marcos, entre otros elementos de la página.
1. VISTA CÓDIGO: Nos permite visualizar el código en HTML en el área de trabajo. 2. VISTA DIVIDIR: Posibilita ver el código HTML en la parte superior del área de trabajo y la vista de diseño en la parte inferior. 3. VISTA DISEÑO: Habilita la visualización de la vista de diseño en el área de trabajo. (Opción predeterminada).
4. TÍTULO DE DOCUMENTO: Coloca el título de encabezado al documento. 5. ADMINISTRAR ARCHIVOS: Nos permite subir o bajar archivos del servidor remoto y también modificar sus propiedades de escritura de protección. 6. VISTA PREVIA: Permite pre visualizar el archivo HTML en un navegador.
7. ACTUALIZAR VISTA DE DISEÑO: Nos sirve para actualizar los cambios en la vista de diseño que se realizan en la vista de código HTML. 8. VARIAS DE VISUALIZACIÓN: Nos permite visualizar diferentes herramientas de diseño como reglas, guía, cuadrículas y otras. 9. AYUDAS VISUALES: Nos sirve para activar o desactivar ayudas visuales varias, como anchos de la tabla, bordes de tabla, mapa de imágenes y demás. 10. COMPROBAR COMPATIBILIDAD CON NAVEGADORES: Nos sirve para comprobar si el archivo HTML puede ser visto por diferentes versiones y tipos de navegadores sin problemas.
1. HIPERVÍNCULO: Con ella podremos insertar 7. FECHA: Agrega la fecha del día en cualquier un texto con hipervínculo. lugar de la página, tiene diversas opciones de formato. 2. VÍNCULO DE CORREO ELECTRÓNICO: Nos posibilita insertar un texto con un vínculo 8. COMPONENTES DE ENCABEZADO: Permite de correo electrónico. colocar atributos meta al archivo HTML. Son fundamentales para la indexación en 3. ANCLAJE: Nos sirve para insertar un vínculo buscadores. ancla, para vincular elementos dentro de un mismo archivo HTML. 4. TABLA: Con ella, podremos insertar una tabla con sus respectivas filas y columnas.
5. IMÁGENES: Nos posibilita insertar imágenes de diversos tipos y para hacer mapa de estas últimas. 6. MEDIA: La usaremos para insertar elementos de Flash y de otros programas externos.
1. FORMATO: Le otorga predeterminado al texto.
un
formato 10. ALINEAR – DERECHA: Alinea el texto hacia la derecha.
2. ESTILO: Nos sirve para darle un estilo (hojas 11. de estilo CSS) a un texto. 12. 3. FUENTE: Selecciona el tipo de fuente que desea usar. También se pueden agregar fuentes a la lista predeterminada. 13. 4. TAMAÑO: Brinda el tamaño deseado al texto. 14. 5. COLOR: Selecciona el color del texto. 6. NEGRITA: Aplica negrita al texto (bold).
7. ITÁLICA: Convierte en itálica el texto (Italic).
ALINEAR – JUSTIFICADO: Justifica el texto. LISTA SIN ORDENAR: Nos sirve para hacer una lista con puntos (círculos, cuadrados, entre otros). LISTA ORDENADA: numerada.
Realiza
una
lista
INSERCCIÓN DE VÍNCULO: Agrega un vínculo a un texto, imagen u otro elemento que se pueda seleccionar del área de trabajo.
15. DESTINO DE VÍNCULO: Especifica el destino de un vínculo (por ejemplo, que se abra en 8. ALINEAR – IZQUIERDA: Alinea el texto hacia una nueva ventana). la izquierda. 16. PROPIEDADES DE PÁGINA: Coloca las 9. ALINEAR – CENTRO: Alinea el texto hacia el diferentes propiedades a la página (Color de centro. fondo, color de vínculos, título de encabezado, entre otros).
1. CSS: Permite crear y editar las hojas de estilo que usemos en nuestro sitio. 2. ETIQUETAS: Con esta ventana podemos ver en profundidad las propiedades de cada elemento que compone nuestro sitio con tan s贸lo seleccionarlo. 3. ARCHIVOS: Nos posibilita manejar los diferentes sitios y archivos con los que trabajamos y tambi茅n conectarnos a un servidor para subir nuestro sitio a la Web.
Algo que tenemos que tener muy presente al trabajar con Dreamweaver es que debemos ser ordenados. Toda la materia prima, textos, imágenes e información que usaremos para la creación de nuestro sitio, debe estar separada y guardada correctamente en carpetas y subcarpetas. Siempre es preferible que nos excedamos en la cantidad de divisiones, a que nos falten. También es muy importante el nombre de cada uno de los archivos que integren nuestro proyecto. Es fundamental recordar que sólo deben llevar minúscula, no deben tener tildes ni cualquier otro carácter típico del idioma español, y no deben superar la extensión de 25 caracteres. Esto se debe a que muchos servidores diferencian entre mayúsculas y minúsculas, además de que desconocen caracteres como la tilde y otros signos ajenos al inglés. Si colocamos en el servidor archivos mal nombrados, éstos no se abrirán y aparecerá un mensaje de error.
DATO FUNDAMENTAL: EL ARCHIVO DE APERTURA DE UN SITIO WEB SIEMPRE HA DE LLAMARSE “index.html”
Editor: Moises J Manrique. From LeCollage.