TECNONEWS
Que es Dreamweaver Dreamweaver CS6 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS6 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.
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 CS6 En este punto se puede comentar que las características que aporta esta nueva versión sobre la anterior. • Plantillas diseño fluido. El acceso a la web a través de todo tipo de dispositivos está experimentando un aumento importante. Ahora es habitual acceder a internet desde el teléfono móvil y desde las tabletas. Esto complica el diseño de los sitios web porque los dispositivos son de diferentes dimensiones. Una forma de afrontar este problema es utilizando el diseño fluido, este tipo de diseño hace que la página se adapte automáticamente a las dimensiones del dispositivo. Este tipo de diseño utiliza HTML 5.
Por los que los navegadores antiguos no son capaces de representarlo correctamente. Sin embargo, existen librerías de JavaScript que solucionan este inconveniente. Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseño fluido
Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Con transiciones se pueden lograr vistosos efectos de animaciones. • Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseños de páginas web. En esta versión, Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla. • Integración con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para teléfonos móviles en las plataformas más utilizadas (Android, Apple,...) ahora se ha mejorado la compatibilidad con PhoneGap desde Dreamweaver. • Funciones exclusivas para 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 rápido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicación con acceso a internet. 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.
Entorno de Dreamweaver CS6 Pantalla Inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será 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, como veremos más adelante.
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.
Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web. Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
Novedades de Dreamweaver CS6 PELÍCULAS FLASH (SWF) Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash todavía es uno de los elementos multimedia más empleados en las páginas web, aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4. Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.
Novedades de Dreamweaver CS6 ESTILOS CSS Por defecto, cuando creábamos una < Nueva regla de estilo > desde el inspector de propiedades, se definía la regla únicamente para la página actual. Esto generaba un código similar al siguiente en el <head> de la página (por supuesto, cambiando las propiedades según el caso).
La base del CSS es lograr un estilo homogéneo y fácil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada página. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensión .css). Esta opción nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un sólo archivo que aplicaremos a todas las páginas.
Las dos primeras líneas generadas por Dreamweaver no son imprescindibles. Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luego deberíamos vincularlo en la página HTML utilizando la etiqueta <link /> dentro del <head> de la página:
Novedades de Dreamweaver CS6 MAQUETAR UNA PÁGINA WEB La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página. Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página. Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas, también llamadas divisiones. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.