DREAMWEAVER

CS6
DISEÑO WEB Y ADMIN. DE CONTENIDOS
 ¿QUÉ ES
DREAMWEAVER?
Adobe Dreamweaver es un software de diseño
y desarrollo web que permite a los usuarios
crear y editar sitios web. Es una de las
herramientas más populares utilizadas por
diseñadores y desarrolladores web para crear
sitios web de alta calidad y funcionales.
 HISTORIA

Dreamweaver CS6 es una versión del software

de diseño web Dreamweaver lanzada por
Adobe Systems en 2012. Dreamweaver ha sido
uno de los programas líderes en el diseño y
desarrollo web desde su lanzamiento en 1997.
 1 Soporte para HTML5 y CSS3

2 Integración mejorada con Creative Suite

Interfaz de usuario actualizada e

3
NUEVAS intuitiva

CARACTERÍSTICAS Mejoras en la edición de código y

DEL CS6 4 panel de propiedades

Herramientas para creación de

5 apps móviles y sitios web

Integración de Adobe Business

6
Catalyst
 NOVEDADES
Integración mejorada con Interfaz de usuario
Soporte para HTML5 y CSS3:
Adobe Creative Suite: actualizada: Dreamweaver CS6
Dreamweaver CS6 incorpora
Dreamweaver CS6 se integra presenta una interfaz de
soporte para HTML5 y CSS3, lo
perfectamente con otros usuario actualizada y más
que permite a los diseñadores
programas de Adobe Creative intuitiva, que hace que el
y desarrolladores web trabajar
Suite, como Photoshop e programa sea más fácil de usar
con las últimas tecnologías
Illustrator, lo que permite a para los nuevos usuarios y más
web y crear sitios web
los diseñadores web trabajar eficiente para los usuarios
modernos y avanzados.
de manera más eficiente. avanzados.

Mejoras en la edición de código
y en el panel de propiedades:
Dreamweaver CS6 presenta
mejoras significativas en la
edición de código y en el panel
de propiedades, lo que facilita
la creación y el mantenimiento
de sitios web.
Herramientas para la creación de
aplicaciones móviles y sitios web Integración con el servidor
responsivos: Dreamweaver CS6 Adobe Business Catalyst:
incluye herramientas para la Dreamweaver CS6 se integra
creación de aplicaciones móviles y con el servidor Adobe Business
sitios web responsivos, lo que Catalyst, lo que permite a los
permite a los diseñadores y usuarios alojar y administrar
desarrolladores web crear sitios sus sitios web directamente
que se adapten automáticamente a desde Dreamweaver.
diferentes tamaños de pantalla.
REQUISITOS
TÉCNICOS
 WINDOWS
Sistema operativo: Windows XP, Espacio de disco duro: 1 GB de
Vista, 7, 8 espacio disponible

Procesador: Intel Pentium 4 o AMD Tarjeta de video: tarjeta compatible

Athlon de 64 bits con OpenGL 2.0

RAM: 1 GB de RAM (se recomiendan Resolución de pantalla:

2 GB o más) 1280 x 800
 LINUX
Sistema operativo: Ubuntu 10.04 o Espacio de disco duro: 1 GB de
posterior espacio disponible

Procesador: Intel Pentium 4 o AMD Tarjeta de video: tarjeta compatible

Athlon de 64 bits con OpenGL 2.0

RAM: 1 GB de RAM (se recomiendan Resolución de pantalla:

2 GB o más) 1280 x 800
 MAC
Sistema operativo: Mac OS X v10.6 o Espacio de disco duro: 1 GB de
posterior espacio disponible

Procesador: Intel multicore de 64 Tarjeta de video: tarjeta compatible

bit con OpenGL 2.0

RAM: 1 GB de RAM (se recomiendan Resolución de pantalla:

2 GB o más) 1280 x 800
 COSTOS DE LICENCIA
Adobe Dreamweaver CS6 ya no está disponible para
la venta, ya que ha sido reemplazado por versiones
más recientes del software, como Adobe
Dreamweaver CC. Sin embargo, en el momento en que
se lanzó, Dreamweaver CS6 tenía un precio de lista
de alrededor de $399 para una licencia completa.
TIPOS DE LENGUAJE
DE PROGRAMACIÓN
DW CS6
 HTML
Es el lenguaje de marcado estándar para
crear páginas web y se utiliza para definir la
estructura y el contenido de un sitio web.
 CSS
Permite definir la presentación y el estilo
visual de las páginas web, incluyendo la
apariencia de los elementos, como colores,
fuentes y diseños.
 JAVASCRIPT
Es un lenguaje de programación utilizado
para agregar interactividad y dinamismo a
las páginas web, incluyendo efectos
animados, validación de formularios y otros
comportamientos interactivos.
 PHP
Es un lenguaje de programación del lado del
servidor que se utiliza para crear
aplicaciones web dinámicas y conectarse a
bases de datos.
 ASP Y ASP.NET
Son lenguajes de programación del lado del
servidor utilizados para crear aplicaciones
web dinámicas y conectarse a bases de datos
en un entorno Windows.
EL ENTORNO DE
DREAMWEAVER
Dreamweaver es un entorno de desarrollo integrado (IDE)
que se utiliza principalmente para diseñar y desarrollar
sitios web. Proporciona una amplia gama de herramientas y
características para crear y editar páginas web, incluyendo
soporte para múltiples lenguajes de programación como
HTML, CSS, JavaScript, PHP, entre otros.
 EL ENTORNO SE DIVIDE EN:
Área de Trabajo Panel de Archivos

Barra de Trabajo Panel de Estilos

Panel de Propiedades Panel de Código

VISTAS
 VISTAS DE DISEÑO
La vista Diseño permite trabajar con el editor visual
y con la representación gráfica de la página Web que
se esté editando en ese momento.Es la vista
predeterminada de Dreamweaver y la que se suele
utilizar habitualmente. Dreamweaver permite editar
código mientras se trabaja en Vista de diseño.
 VISTAS DE CÓDIGO
Es el primer botón que aparece en la barra de Herramienta
de Documento, y se utiliza para poder trabajar en un
entorno totalmente de programación, de código fuente.
Permite trabajar con código de programación HTML, que es
el verdadero esqueleto de la página, pero no permite tener
directamente una referencia visual de cómo va quedando
el documento según se va modificando el código.
BARRAS
Las barra de herramientas contiene botones
para realizar las operaciones más habituales de
los menús Archivo y Edición: Nuevo, Abrir,
Guardar, Guardar todo, Imprimir código,
Cortar, Copiar, Pegar, Deshacer y Rehacer
 BARRAS DE APLICACIÓN
Una barra de herramientas de escritorio de la aplicación
(también denominada barra de aplicaciones) es una
ventana similar a la Windows barra de tareas. Está anclado
a un borde de la pantalla y normalmente contiene botones
que proporcionan al usuario acceso rápido a otras
aplicaciones y ventanas.
 BARRAS DE BOTONES
Un botón es un elemento de formulario que el usuario
pulsará para realizar una acción. Para insertar el botón
deberemos elegir la opción Botón en el submenú
Formulario del menú Insertar. O bien pulsar en el icono
Botón de la barra Herramienta en el panel Insertar.
 BARRAS DE MENÚS
La barra de menús contiene las operaciones de
Dreamweaver, agrupadas en menús desplegables. Al hacer
clic en Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se pueden
insertar en Dreamweaver.
 PESTAÑA DE DOCUMENTOS
La ventana Documento muestra el documento actual.
Para cambiar de una vista del documento a otro,
sírvase de las opciones de visualización de la barra
de herramientas Documento.
 BARRAS DE ESTADO
La barra de herramientas de Dreamweaver contiene
botones que permiten alternar entre diferentes
vistas del documento rápidamente, cambiar el título
del documento o previsualizar la página en el
navegador.
 BARRAS DE VER U OCULTAR
Para ver u ocultar la barra de herramientas, elija en el menú
Ver la opción Barra de herramientas. Para ver sólo código en
la ventana de documento, haga clic en el botón Vista de
código. Para ver una vista que contenga las vistas de Código
y de Diseño, haga clic en el botón Vistas de código y diseño.
 BARRAS DE HERRAMIENTAS
DOCUMENTOS
Para mostrar la barra de herramientas Estándar, seleccione
Ventana > Barras de herramientas > Estándar. La barra de
herramientas contiene botones para realizar las operaciones
más habituales de los menús Archivo y Edición: Nuevo, Abrir,
Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar,
Deshacer y Rehacer
 BARRAS DE NAVEGACIÓN
Una barra de navegación es un conjunto de
imágenes que se utilizan como opciones de menú
para navegar dentro de una web.
ÁREA DE PANELES DE
DREAMWEAVER
 PANEL DE PROPIEDADES
En la parte inferior de la ventana de dreamweaver CS6 se
encuentra el panel de propiedades, que permite ver y
cambiar diversas propiedades del objeto o texto
seleccionado, cada tipo de objeto tiene distintas
propiedades.
 PANEL INSERTAR
En el panel Insertar, encontramos todos los elementos que
podemos encontrar en el menú Insertar, clasificados en
categorías. Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios. cualquier elemento
que la web necesite.
 PANEL ARCHIVOS
El panel Archivos de Dreamweaver le permite acceder y
administrar archivos asociados a su sitio. Puede alternar
entre la Vista FTP y la Vista Git en el panel Archivos, para
administrarlos utilizando un servidor FTP o repositorios Git
 PANEL DE FRAGMENTOS
Permite: Insertar fragmentos Expandir las carpetas para ir hasta un
fragmento de código, crear carpetas de fragmentos de código Administrar
sus fragmentos alojándolos en carpetas con un convenio de nomenclatura
intuitivo, crear fragmentos de código, utilizar los fragmentos de código
previamente empaquetados y editar para crear los propios fragmentos de
código, editar fragmentos de código para realizar cambios en un fragmento
de código, eliminar fragmentos de código que ya no se necesiten y añadir
fragmentos de código que ya no se necesitan
 PANEL DISEÑADOR DE CSS
El panel Diseñador de CSS Ventana Diseñador de CSS es un
inspector de propiedades de CSS que permite crear
“visualmente” archivos y estilos CSS, así como definir
propiedades y consultas de medios.
 LÍNEA INFERIOR DE PESTAÑAS
En la parte inferior de la pantalla tenemos una línea que
contiene varias pestañas (Buscar, Validación, Línea pestañas
Para abrir una pestaña basta hacer clic sobre ella, para
cerrarla hacer doble clic en su título. Estas pestañas se
pueden configurar de forma similar a como acabamos de ver
con el área de paneles. Es decir, se pueden añadir y quitar,
convertir en flotantes, etc.