1

DREAMWEAVER CS5

MANUAL DE CÓMO UTILIZAR EL

PROGRAMA PARA CREAR

PAGINAS WEB

AUTOR: ANDRES CORDOVA

INDICE

2

1 Que es el Dreamweaver

2. Arrancar y cerrar Dreamweaver CS4

3. Abrir y guardar documentos

4. Novedades de Dreamweaver CS4

5. Como insertar imagenes

QUE ES DREAMWEAVER?

3

Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (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 y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

La gran ventaja 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 hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, 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.

Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.

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, tipo Wine.

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 fácilmente sin necesidad de escribir código.

Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas

4

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. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.

Un aspecto de alta consideración de 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 rollover hasta completas cartas de compra.

También podría decirse, que para un diseño más rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR - U.P.C.)

Arrancar y cerrar Dreamweaver CS4

Veamos las dos formas básicas de arrancar Dreamweaver CS4.

Desde el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS4 del Escritorio .

Puedes arrancar Dreamweaver CS4 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.

5

Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir. Hacer doble clic sobre el archivo en la ventana del sitio. Hacer clic derecho sobre el archivo en el explorador de Windows, y

elegir la opción Abrir con → Adobe Dreamweaver CS4.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:

Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + N.

Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.

6

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl + S.

Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Las funciones de edición visual de Dreamweaver CS4 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.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

7

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe.

Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí.

Novedades de Dreamweaver CS4

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.

Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador, diseñador, etc. ) pero también tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.

Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en un navegador.

Navegador de código. La función de Navegador de código muestra las fuentes de código que afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.

8

La nueva barra de Archivos relacionados muestra todos los archivos que de una forma u otra contribuyen al diseño final de nuestra página, como hojas de estilo css, archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivo a otro cómodamente y tener una visión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitio web.

Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear y editar nuestros estilos de forma cómoda y sencilla.

Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crear objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las páginas web, de forma que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiar características de los objetos inteligentes de imagen directamente desde Dreamweaver.

Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De esta forma los usuarios previamente habilitados podrán actualizar el contenido de estas regiones de la página web directamente desde el navegador, sin necesidad de tener un editor de páginas web instalado.

Software Subversion. Subversion es uno de los más usados sistemas de control de versiones para equipos de desarrollo. Dreamweaver CS4 es capaz

9

de sincronizarse con el repositorio de versiones, facilitando el trabajo a los profesionales que empleen este sistema.

Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas de forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones dinámicas con la tecnología Spry

PAGINA PRINCIPAL

1.)

Primero empezamos abriendo la página dando un clic en el programa

Dreamweaver

Y a continuación se abre esta imagen que pueden ver, en donde elegimos la

opción HTML y ahí es donde vamos a trabajar la pagina web.

HTML

10

2.) Se va a abrir una pagina en la cual ya empezamos a trabajar en donde se

divide en tres partes que son CODE, SPLIT, DESIGN

En donde puedes trabajar de la manera que tu elijas si es con códigos, aquí

programas tu pagina se compone en diferentes partes que son:

HTML

HEAD

TITLE

BODY

Si deseas trabajar en SPLIT lo que puedes hacer es mirar tus imágenes, texto,

enlaces, videos etc... mientras programas tu pagina en CODE.

Aquí podemos divisar en la imagen como se va programando una pagina web,

como pueden ver tenemos imágenes, texto, fondo de pantalla y links.

Como crear un link para conectar a otra pagina?

Para crear un link colocamos texto, imagen o video y programamos de la

siguiente forma:

11

Este comportamiento te será muy útil para mejorar la visualización de tus páginas web en determinados casos.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador a descargar las imágenes con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el usuario verá la estructura completa de la página con las imágenes incluidas ya cargadas y mostrándose.

Este método se diferencia del tradicional en que si no establecemos este comportamiento, la página se carga (sólo texto) y se visualiza antes de que las imágenes estén cargadas por completo, aunque respetando su hueco. Ten en cuenta que ésta es la opción más aconsejada en la mayoría de los casos.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes. Por lo que hay unos momentos en los que la página no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botón , selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

12

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones , podrás indicar su ubicación pulsando el botón Examinar.

¿Qué imágenes debemos de cargar? Aquellas que son imprescindibles en el diseño de la página o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el cursor esté encima esa imagen cambie. Hemos de entender que las imágenes se cargan cuando se necesitan. Por tanto, la imagen de fondo nos e cargará hasta que no pasemos el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner el cursor la imagen desaparezca pero la de sustitución aún no se haya cargado. En este caso, es conveniente precargar esa imagen.

La imagen de sustitución que ya explicamos incluye la carga previa de imágenes.

Por su puesto, resulta contraproducente cargar imágenes que no vayamos a emplear.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu página tarda demasiado en cargarse la abandone.

13