Dreamweaver
Dreamweaver
ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene
el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para
la plataforma MAC como para Windows aunque también se puede ejecutar en
plataformas basadas en UNIX utilizando
programas que implementan las API's de Windows, tipo Wine .
Adobe
Dreamweaver es una aplicación en forma de estudio (basada en
la forma de estudio de Adobe Flash) que está destinada a la
construcción, diseño y edición de sitios, videos y aplicaciones web basados en estándares. Creado inicialmente por Macromedia
(actualmente producido por Adobe Systems) es el programa 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
y, recientemente, por su soporte de los estándares del World Wide WEb Consortium.
El
Dreamweaver, es un programa de la empresa Adobe que sirve para diseño y
programación web, básicamente para hacer o modificar páginas de Internet. Para
utilizarlo necesitas al menos algún conocimiento de lenguaje Html o PHP, estos
son códigos o lenguajes que se utilizan para desarrollar sitios web.
El programa es realmente muy
completo y sus nuevas versiones son cada vez más sencillas, aunque siempre
necesitarás conocer algo del tema para poder utilizarlo.
Historial de Versiones
Historial de versiones
| Proveedor | Versión mayor | Versión menor/nombre alternativo | Fecha de publicación | Notas |
|---|---|---|---|---|
| Macromedia | 1.0 | 1.0 | Diciembre de 1997 | Primer lanzamiento, sólo para Mac OS. |
| 1.2 | Marzo de 1998 | Primera versión para Windows. | ||
| 2.0 | 2.0 | Diciembre de 1998 | ||
| 3.0 | 3.0 | Diciembre de 1999 | ||
| UltraDev 1.0 | Junio de 1999 | |||
| 4.0 | 4.0 | Diciembre de 2000 | ||
| UltraDev 4.0 | Diciembre de 2000 | |||
| 6.0 | MX | 29 de mayo de 2002 | ||
| 7.0 | MX 2004 | 10 de septiembre de 2003 | ||
| 8.0 | 8.0 | 13 de septiembre de 2005 | ||
| Adobe | 9.0 | CS3 | 16 de abril de 2007 | Sustituye a Adobe GoLive en la serie Creative Suite |
| 10.0 | CS4 | 23 de septiembre de 2008 | ||
| 11.0 | CS5 | 12 de abril de 2010 | ||
| 11.5 | CS5.5 | 12 de Abril de 2011 | ||
| 12.0 | CS6 | 21 de abril de 2012 |
| Color | Significado |
|---|---|
| Rojo | Versión antigua; no soportada en la actualidad |
| Naranja | Versión antigua; soportada aún |
| Verde | Versión actual |
La interfaz del dreamweaver
Apariencia general
Nuestra andadura en la web ha comenzado con Dreamweaver y el estudio de XHTML.
A lo largo de las páginas de este documento
iremos desarrollando los diferentes aspectos del diseño de páginas web,
combinando tanto las herramientas propias de dreamweaver (DW de ahora en
adelante), y recurriendo al código puro y duro en aquellos casos donde sea
necesario.
En esta sección vamos a hablar sobre todo de la apariencia del programa, de algunas recomendaciones acerca de su configuración y uso y de herramientas a las que podemos recurrir sin que nuestro código resulte perjudicado
Al abrir el DW descubrimos que es muy similar
en apariencia al resto de los programas de la familia Macromedia:
Tenemos nuestros indispensables menús, una
barra de herramientas para insertar elementos y paletas para desarrollar los
diferentes aspectos de nuestro diseño.
El resto del espacio lo ocupará el área de
trabajo, donde iremos añadiendo los elementos que necesite nuestro documento.
No hablamos sólo de elementos visuales, como pueda ser el texto o las imágenes,
sino también de enlaces (links) o botones que nos validen un formulario.
La barra de herramientas
La barra de herramientas nos permite insertar
diferentes elementos en nuestro documento. En muchos casos nos ofrece un acceso
rápido y cómodo a ciertas funciones del DW.
En el caso de que alguna vez tengamos que
activarla (podemos cerrarla accidentalmente), debemos hacerlo desde el Menú Ver
> Barras de herramientas > Insertar.
La barra de herramientas nos ofrece varias
opciones. Según la visualización que escojamos nos aparecerán diferentes
herramientas, específicas para cada caso.
En el apartado "Común", que aparece
por defecto al abrir el programa por primera vez tenemos las opciones más
generales: crear tablas, puntos de ancla, insertar imágenes o crear imágenes de
sustitución son las que mejor funcionan.
Nota acerca de las herramientas de DW
Tengamos en cuenta que no todas las opciones de la
barra de herramientas son recomendables. Destacamos insertar formularios porque DW lo hace de manera
aceptable, evitando que escribamos código. Pero en otros casos, DW genera
código inadecuado. Aprender a controlar nuestro código es tan fundamental como
saber para qué sirven las herramientas del programa
Si pulsamos "Común" para desplegar las
opciones de la barra, tendremos acceso al resto de herramientas propias de cada
apartado. Uno de los más útiles para evitarnos escribir código es el de
Formulario.
Desde aquí podemos definir qué tipo de elementos
deseamos para nuestro formulario, insertar campos para pedir información al
usuario y botones que validen la informac
Código
o diseño
Como ya te habrás dado cuenta, estamos haciendo mención a un buen uso del código XHTML. Esto es importante para no generar un resultado a partir de una etiqueta inadecuada. Por tanto, desde aquí aconsejamos utilizar el doble espacio de trabajo que nos ofrece DW.
¿Qué
es esto?
Básicamente, se trata de una opción que nos permite trabajar en el documento
bien a nivel de código, bien sólo en modo diseño (la apariencia de la web).
Nosotros sugerimos la tercera opción: el modo dividir
De
esta manera visualizamos diseño y código al mismo tiempo. Esta opción se
encuentra en la barra de herramientas "Documento", a la que accedemos
desde el menú Ver > Barras de herramientas > Documento.
Vista
de código
Cuando
navegamos por internet podemos solicitar al navegador que nos muestre el código
fuente de una página para saber cómo está hecha. Cuando trabajamos en nuestro
documento en modo dividir también tenemos ese código a mano.
Por
defecto, DW suele mostrar el código ocupando tanto ancho como sea necesario.
Esto puede generar líneas de código interminables e incómodas de leer.
Para
solucionar esto debemos activar una opción que permite visualizar el código
según el ancho del área de trabajo, de tal manera que no habremos de recurrir a
las barras de desplazamiento horizontales.
A
esta opción llegamos desde el menú Ver > Opciones de vista de código >
Ajustar texto.
Las
paletas de trabajo
A medida que vayamos experimentando con DW y
dominemos mejor el código necesitaremos nuevas herramientas que nos aporten
nuevas posibilidades.
Una de las primeras aspiraciones es, por
supuesto, la de colgar nuestra web para que esté accesible en la red y pueda
ser visitada. Podemos también usar la paleta de los estilos CSS para gestionarlos desde nuestro documento, o crear comportamientos
También surgirá la idea de crear unpop- up o abrir una nueva ventana mostrando en detalle alguna foto o
cualquier otra cosa. Y a medida que queramos dar consistencia a nuestra página
nos vendrá bien aplicar los estilos CSS de manera más rápida que tecleando
en código.
Muchas de estas operaciones se realizan desde
las paletas que nos ofrece DW. Todas ellas pueden activarse desde el menú
Ventana.
No hay comentarios:
Publicar un comentario