Unidad 1. Conceptos básicos de Dreamweaver CC (I)

1.1. Qué es Dreamweaver CC

Dreamweaver CC (Creative Cloud) es un software fácil de usar que permite crear páginas web profesionales.

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

Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.

Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML visita nuestro básico HTML básico .

1.2. Novedades de Dreamweaver CC

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

Edición en la vista En vivo. En versiones anteriores de Dreamweaver, la vista En vivo servía fundamentalmente para tener una vista preliminar de la página web sin necesidad de utilizar un navegador. Ahora, en esta versión, dicha vista En vivo no sólo se ha mejorado incorporando el motor de navegación Chromium (que es el que utiliza el navegador Chrome), sino que además permite tareas de edición como la inserción de imágenes y otros elementos y la modificación de atributos de las etiquetas HTML de la página web, como veremos en el capítulo 4.

Vista rápida de elementos. Las páginas web, como estudiaremos a lo largo del curso, se componen de una estructura de etiquetas HTML que organizan el contenido de la página. Con la nueva ventana Vista rápida de elementos podemos ver fácilmente esa estructura y modificarla. Este tema también se toca en el capítulo 4.

Nuevo panel de color. El nuevo panel de color permite el manejo de una gama de colores más amplia en las páginas web, aprovechando la cada vez mayor compatibilidad de los nuevos navegadores. El tema será tratado en el capítulo 3.

Sincronización de equipos con Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver, mediante suscripción mensual o anual, de esta forma se tiene acceso más rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicación con acceso a internet. También es posible compartir la configuración de un sitio web entre dos equipos con una misma cuenta de Adobe, de modo que no estamos limitados a trabajar en nuestros proyectos con un solo equipo. La sincronización entre equipos es tema del capítulo 3.

Además hay funciones que sólo están disponibles para los suscriptores de Cloud, como la inserción de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la búsqueda dinámica en Mac.

Nuevo panel Diseñador de CSS. El contenido de una página web debe ser organizado a través de etiquetas de HTML, pero la presentación de los mismos se establece a través de las propiedades CSS. Dreamweaver CC ha incorporado un panel completamente nuevo para el trabajo con las propiedades de estilo en cascada, el cual nos será muy útil durante todo el curso. El panel se estudia con más extensión en el capítulo 5.

Nuevas plantillas "Responsive" HTML5. Dreamweaver CC incluye ahora un nuevo juego de plantillas para crear rápidamente páginas web que se adaptan a diversos tipos de pantallas y dispositivos. Usaremos estos elementos en el capítulo 11

Edge Web Fonts. Es la nueva manera de aprovechar el conjunto de fuentes que Adobe dispone para usuarios de Dreamweaver y otros productos, las cuales podemos incorporar fácilmente a nuestros diseños. Este recurso se revisa en el capítulo 13.

Extract. Es un nuevo panel que permite "extraer" recursos contenidos en los archivos PSD de Photoshop, como estilos CSS, imágenes individuales y códigos de color. Este panel reduce la necesidad de conmutar entre Dreamweaver y Photoshop. Será tema de estudio en el capítulo 13.

Consulta de medios para diseño multipantalla. En esta nueva versión de Dreamweaver es posible crear fácilmente consultas de la resolución de pantalla del dispositivo del usuario para crear páginas de acuerdo al resultado. Este será tema de estudio en el capítulo 18.

Widgets de jQuery. Los widgets de Spry se han sustituido por Widgets de jQuery. Se trata de librerías en JavaScript que, a través de Dreamweaver, pueden incorporarse fácilmente a los sitios web, mejorando la experiencia del usuario. Son motivo de estudio en el capítulo 24.