AdobeDreamweaver

Page 1


Es un software de edición en forma de un estudio (basado en la forma de Adobe Flash) su propósito es construir, desarrollar, diseñar y editar sitios, vídeos y aplicaciones web. Inicialmente fue creado por Macromedia pero actualmente es desarrollado por Adobe Systems. Adobe Dreamweaver se ha convertido en el programa más utilizado para el diseño y la programación web, esto gracias a las funciones que posee, su fácil integración a otros programas como Adobe Flash y recientemente por su soporte para estándares del World Wide Web Consortium.

Entre los principales competidores que tiene en el mercado están Microsoft Expression Web y BlueGriffon. Forma parte de la familia Adobe Creative Suite desde que Adobe adquirió Macromedia. El agregado de las siglas CS significan precisamente Creative Suite. ...


Es una de las recientes versiones aunque la última es CS6. Dreamweaver nos ofrece un sin número de cosas que nos permitirán la creación de un sitio web de acuerdo a nuestras necesidades. Hay que tomar en cuenta que no sólo podemos utilizar lo que éste nos ofrece también hay como agregarle aplicaciones de Adob Flash o Adobe Illustrator lo cual nos ayudará a mejorar nuestro sitio web. A los que son aprendices se les puede hacer algo complicado manejar este programa, pero en realidad es muy fácil su utilización, pero pueden recurrir a internet donde encontrarán tutoriales que nos enseñarán a manejar Dreamwaever y a emplear sus múltiples herramientas para que nuestro website quede como lo hemos planificado.

Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico.


Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además poder de insertar web elementos , encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar. Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por dónde comenzar.


La aplicaciรณn permite crear sitios de forma totalmente grรกfica, y dispone de funciones para acceder al cรณdigo HTML generado. Permite la conexiรณn a un servidor, a base de datos, soporte para programaciรณn en ASP, PHP, Javascript, cliente FTP integrado, etc. Principal competencia de Microsoft FrontPage


Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web La gran ventaja de fácilmente sin este editor sobre otros es su gran poder necesidad de escribir código. de ampliación y personalización del mismo, puesto que en Un aspecto de alta este programa, sus consideración de rutinas (como la de Dreamweaver es su insertar un funcionalidad con hipervínculo, una imagen o añadir un extensiones. Es decir, permite comportamiento) el uso de "Extensiones". Las están hechas en extensiones, tal y como se Javascript-C, lo que conocen, son pequeños le ofrece una gran programas, que cualquier flexibilidad en estas desarrollador web puede materias.

escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.


Aunque muchos usuarios afirmen en los foros de DW que no tiene desventajas, tampoco se puede decir que Dreamweaver lo puede utilizar cualquiera, al ser tan avanzado el único inconveniente es que puede resultar difícil su manejo para usuarios menos experimentados en el diseño de páginas web, ya que quien lo utiliza tiene que tener un conocimiento básico de este programa.

Las primeras veces son un poco complicadas. Al ser un programa tan avanzado su manejo puede resultar complicado para usuarios no experimentados


Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres diferentes elementos y será de los 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 y dónde.


En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en azul del 1 al 9. 1.- Las barras. 2.- Las pestañas de documentos. 3.- La barra de estado. 4.- El panel de propiedades. 5.- Área de paneles. 6.- Paneles y ventanas. 7.- Línea inferior de pestañas. 8.- Vista diseño del documento. 9.- Vista código del documento


La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

1 Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.

2 Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.


Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

2.- Las pestañas de documento.

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.


La barra de estado. Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio. Y al final hay otros datos como el tamaño de la ventana, el tamaño de la página o su codificación. Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.


La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)

La barra de herramientas de documento. La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multipantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

La barra de representación de estilos Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pesado clases activas, como cuando el cursor está sobre un elemento.


La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño . La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione.


Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.

Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Mostrar vistas de código y diseño. Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño arriba del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.

Para ver código sólo en la ventana de documento, haga clic en el botón Mostrar vista de código.

Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.


Para ver sólo la vista de Diseño, haga clic en el botón Mostrar vista de diseño.

Para ver el menú emergente Estado de archivo, haga clic en el botón de menú de estado de archivo.

Para introducir un título para el documento, utilice el campo Título. Si el documento ya tiene título, éste aparecerá en dicho campo.

Para pre visualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.


Para agregar o cambiar los navegadores enumerados en el menú, elija Editar lista de navegadores.

Para desplazarse por el código, haga clic en el botón Navegación por el código.

Para obtener acceso al menú Opciones, haga clic en el botón de menú Opciones.

Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño. Para obtener acceso al panel Referencia, haga en el botón clic Referencia.

El panel Referencia contiene información de referencia sobre código HTML, CSS y JavaScript.

En el menú Opciones se enumeran distintas opciones para cada vista. Para obtener más información sobre las opciones de vista de Diseño, consulte Introducción a la disposición.

Nota: Cuando la ventana de documento muestre ambas vistas, dispondrá de acceso al menú Opciones de cada una de las vistas haciendo clic en la vista deseada y luego en el menú Opciones.


El menú Archivo contiene los elementos de menú estándar como Nuevo, Abrir, Guardar, Guardar como. También contiene otros comandos para la visualización o manipulación del documento actual, como Vista previa en el navegador e Imprimir código.

El menú Ver le permite obtener diversas vistas del documento (como la vista Diseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página y herramientas de Dreamweaver CS3.

El menú Edición contiene los elementos de menú estándar como Cortar, Copiar y Pegar. También incluye comandos de selección y búsqueda, como Seleccionar etiqueta padre, Buscar y reemplazar, y proporciona acceso al editor de Métodos abreviados de teclado y al Editor de la biblioteca de etiquetas.

El menú Insertar ofrece una alternativa a la barra Insertar para la inserción de objetos en el documento.

El menú Texto le permite aplicar formato al texto fácilmente.


El menú Modificar le permite cambiar las propiedades del elemento de página seleccionado. A través de este menú, puede editar los atributos de etiquetas, cambiar las tablas y elementos de tablas y realizar diversas operaciones relacionadas con elementos de biblioteca y plantillas.

El menú Sitio proporciona opciones de menú para crear, abrir y editar sitios, así como para administrar los archivos del sitio actual (en Macintosh).

El menú Comandos proporciona acceso a diversos comandos, entre otros, uno para aplicar formato al código en función de las preferencias de formato y otro para crear un álbum de fotos.

El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanas de Dreamweaver


Las funciones de edición visual de Dreamweaver MX permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.