Utilidades

Herramientas y menú

Características

Requisitos

para instalarlo

Abrir y guardar archivos

Configurar un sitio local

Propiedades y formato de texto

www.dreamweavermagazine.com

EDICIÓN

Definición

Utilidades

Principales barras de herramientas y menú

Características

Evolución

Iniciar Dreamweaver

Requisitos para instalarlo

Abrir y guardar archivos en Dreamweaver

Descripción detallada de la pantalla inicial de

Dreamweaver

Configurar un sitio local paso a paso

Propiedades y formato del texto en Dreamweaver

Adobe Dreamweaver es una aplicación

en forma de suite (basada en la forma

de estudio de Adobe Flash) que está

destinada a la construcción, diseño y

edición de sitios y aplicaciones Web

basados en estándares. Creado

inicialmente por Macromedia

(actualmente producido por Adobe

Systems) es el programa 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.

Dreamweaver permite al usuario utilizar la mayoría de los navegadores

Web instalados en su ordenador para pre visualizar las páginas web.

También dispone de herramientas 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.

Utilidades.

Barra de menú.

Situada bajo la barra de título, permite acceder a todas las opciones del programa

a través de sus menús.

Barra de herramientas de documentos.

Justo encima de la ventana de documento. Dreamweaver puede presentar dos

barras de herramientas: Documento y Estándar. Esta que vemos por defecto es la

de Documento. Actúa directamente sobre la ventana de documento:

Para mostrar la vista del código HTML de la página Web

Para mostrar un a vista conjunta del código y el diseño

Para mostrar la vista del diseño nuestro documento

Para dar un título a nuestra página Web en el cuadro de texto "Titulo“

Principales Barras

de Herramientas y Menú

Barra de propiedades o inspector de propiedades.

El inspector de Propiedades muestra y permite modificar las propiedades del

elemento seleccionado que son usadas de forma más frecuente. Por ejemplo,

cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación,

si está en negrita o cursiva, etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se

encuentra en la esquina inferior-derecha. Seguramente será la herramienta de

Dreamweaver que más vayas a utilizar.

PRINCIPALES BARRAS

DE HERRAMIENTAS Y MENÚ

Permite crear páginas web avanzadas o profesionales.

Soporta gran cantidad de tecnologías fáciles de usar.

Se actualiza con componentes.

El código generado es de buena calidad.

Al ser tan avanzado puede resultar difícil para algunos

usuarios inexpertos.

Proveniente de la familia Macromedia/Adobe.

Permite crear sitios totalmente gráficos.

Permite agregar diseño y funcionalidad a la página.

Permite trabajar con tablas, marcos, capas, comportamientos,

JavaScript.

Características.

Es un producto de la empresa desarrolladora de software Macromedia,

que nació en 1992 tras la fusión de Authorware Inc. (creadora de

Authorware) y Macro – Mind Paracomp (responsable de director). El

primer producto de esta nueva compañía fue Shockware, un plugin para

los navegadores que permitía ver animaciones hechas en Director. A

causa del éxito que tuvo, la empresa decidió que debía expandirse más

en el sector web y multimedia. Con esta expansión como objetivo

primario, en 1996, Macromedia realizo dos grandes adquisiciones. La

primera fue la empresa FutureWave software, creadora del

FutureSplash, al que Macromedia rebautizo como flash. La segunda fue

iBand software, creadora de Backstage, un programa de edición de

HTML, al que Macromedia rebautizo, con algunos cambios, como

DREAMWEAVER, del que lanzo su primera versión en 1997. A partir

de 1998, Macromedia comenzó a desarrollar una versión del programa

por año. En cada una de ellas, agrego componentes clave para un mejor

desarrollo de archivo de HTML y de otras expresiones (ASP, PHP, JPS,

etcétera). En el año 2006, la empresa fue comprada por Adobe, quien

absorbió completamente el nombre Macromedia. Por ello es que la

versión CS3 ya no es más Macromedia, sino Adobe.

Evolución.

Veamos las dos formas básicas de arrancar Dreamweaver.

Desde el botón Inicio.

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, seguidamente Dreamweaver, hacer

clic sobre él, y se arrancará el programa.

Windows XP Windows 7 Windows 8.1 y 10

Desde el icono de Dreamweaver en el escritorio.

Haciendo doble clic sobre el icono de Dreamweaver el programa arranca.

Como iniciar Dreamweaver.

Windows.

Procesador Intel ® Pentium ® 4 o

AMD Athlon ® 64

Microsoft ® Windows ® XP con

Service Pack 3 o Windows 7 con

Service Pack 1. Suite ® 5.5 y Adobe

® CS6 aplicaciones creativas

también son compatibles con

Windows 8. Ver el FAQ CS6 para

más información acerca de Windows

8 soporte.

512 MB de RAM

1 GB de espacio disponible en disco

duro para la instalación, el espacio

libre adicional durante la instalación

(no se puede instalar en dispositivos

de almacenamiento flash extraíbles)

Requisitos para instalarlo

1280 x 800 pantalla con el

adaptador de gráficos de 16 bits

Java ™ Runtime Environment 1.6

(incluido)

Unidad de DVD-ROM

Software QuickTime 7.6.6

necesario para la reproducción

multimedia HTML5

Este software no funcionará sin

activación. Se requiere conexión a

Internet.

El computador donde se desea instalarlo debe poseer como mínimo los siguientes

requisitos.

MAC OS

Procesador multinúcleo Intel

Mac OS X v10.6.8 o v10.7. Adobe Creative Suite 5,

CS5.5 y CS6 aplicaciones compatibles con Mac OS

X Mountain Lion (v10.8) cuando se instala en

sistemas basados en Intel.

512 MB de RAM

1,8 GB de espacio disponible en disco duro para la

instalación, el espacio libre adicional durante la

instalación (no se puede instalar en un volumen que

utilice un sistema de archivos entre mayúsculas y

minúsculas o en dispositivos de almacenamiento

flash extraíbles)

1280 x 800 pantalla con el adaptador de gráficos de

16 bits

Java Runtime Environment 1.6

Unidad de DVD-ROM

Software QuickTime 7.6.6 necesario para la

reproducción multimedia HTML5

REQUISITOS PARA INSTALARLO

Nota: Este software no funcionará sin activación. Se requiere conexión a Internet

de banda ancha y el registro para la activación del software, la validación de las

suscripciones, y el acceso a servicios en línea.

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 CS5.

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.

Abrir y Guardar en Dreamweaver.

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.

Dreamweaver incluye la posibilidad de, en el caso de estar

trabajando simultáneamente con varios documentos, poder guardar

todos de golpe, sin la necesidad de hacerlo uno por uno. Para

guardar todo puedes realizar cualquiera de las siguientes

operaciones.

Hacer clic en el botón Guardar todo Guardar todo de la Barra de

herramientas estándar.

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

Al tener varios documentos abiertos es fácil olvidarse de todas las

modificaciones hechas en cada uno de ellos.

Guardar en Dreamweaver.

El formato de trabajo de Dreamweaver combina una serie de ventanas, paletas y

solapas para conseguir que el proceso sea lo más fluido posible.

El aspecto de la pantalla de Dreamweaver nada más abrirlo se compone de los

siguientes elementos:

La Ventana Bienvenido: aparece la primera vez que iniciamos el programa.

Ofrece sugerencias para la configuración del espacio de trabajo para distintos

fines e información sobre nuevas funciones para aquellos que hayan trabajado

con antiguas versiones de Dreamweaver

La Barra de título: en la parte superior de la ventana de programa, muestra

el nombre del Web abierto actualmente y los botones minimizar, restaurar y

cerrar.

La Barra de menús: situada bajo la barra de título, permite acceder a todas

las opciones del programa a través de sus menús.

La Ventana del documento: es el área principal de trabajo. Aquí es donde

crearemos nuestras páginas Web. Esta es una ventana que se puede

minimizar, maximizar y restaurar.

Descripción detallada de la pantalla inicial de Dreamweaver.

Al definir un sitio local, está indicando a Dreamweaver el lugar

en el que tiene intención de almacenar todos los archivos de un

sitio concreto. Para trabajar de manera eficaz con

Dreamweaver, defina siempre un sitio local para cada sitio Web

que cree.

Paso 1.

Si aún no está abierto, inicie Dreamweaver. Se abrirá un

documento en blanco.

Paso 2.

Para acceder a la ventana de sitio puede acceder desde:

Sitio / Nuevo sitio.

O desde el botón x situado en la esquina inferior derecha de

la ventana.

Cómo configurar un sitio local paso a paso.

Cómo configurar un sitio local paso a paso.

Paso 3.

Una vez en la ventana de sitios, para crear un nuevo

sitio haga:

Sitio > Nuevo sitio, en el caso de que accediera a esta

ventana a través del botón.

- Si ya hizo Sitio > Nuevo sitio, ahora le aparecerá una

ventana en la que deberá rellenar los datos concretos

del sitio.

Paso 4.

En la casilla Nombre del sitio, hay que poner el nombre

que quieras para el sitio. No es relevante, puedes poner

cualquier cosa.

La casilla siguiente es más importante. En Donde pone

Carpeta raíz local hay que poner la dirección local del

sitio. Es decir, hay que hacer una carpeta para el sitio y

buscarla pulsando en el icono que pone una carpeta,

señalada en la foto con un círculo.

Donde pone Dirección HTTP, sería la dirección del site en

Internet. Puede dejarse en blanco.

La casilla Caché debe dejarse siempre activada. Al tener

él caché activado se establece un registro de los archivos

existentes de modo que Dreamweaver pueda actualizar

rápidamente los vínculos al mover, cambiar el nombre o

eliminar un archivo.

Por último hay que darle al botón aceptar, para cerrar el

cuadro de diálogo.

Cómo configurar un sitio local paso a paso.

CÓMO CONFIGURAR UN SITIO LOCAL

PASO A PASO

Paso 5.

Haga clic en Aceptar en el mensaje sobre el cahé

La ventana Sitio mostrará a continuación una lista de

todas las carpetas y archivos contenidos en el sitio

local (si hubiera algo). La lista también actúa como

administrador de archivos, ya que permite copiar,

pegar, eliminar, mover y abrir archivos del mismo modo

que en el escritorio del PC.

aceptar, para cerrar el cuadro de diálogo.

Cómo configurar un sitio local paso a paso.

Propiedades y formato del texto en Dreamweaver.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets)

nos permiten formatear nuestra página y darle el diseño que

queramos. Podemos cambiar desde propiedades simples, como

el color de fondo, hasta cosas más vistosas, como hacer que un

bloque se muestre en una posición determinada o que un

elemento cambie al pasar el cursor sobre él. Profundizaremos en

esto más adelante, por ser una parte fundamental en la creación

de páginas web.

Tenemos más posibilidades a la hora de aplicar formatos.

Dreamweaver CS5 nos proporciona numerosas funciones para

la creación de estilos mediante hojas de estilos en cascada.

Regla de destino.

Las reglas CSS sirven para definir a qué elemento aplicamos

el estilo, y cómo lo hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una

clase. Veremos esto antes de acabar el tema.

Editar regla.

Mediante este botón accedemos a las opciones para la

creación o modificación de estilos CSS, de la regla

seleccionada.

Panel CSS.

Este botón abre el panel CSS si no lo tuviéramos abierto.

Propiedades y formato del texto en Dreamweaver.

Fuente.

Permite seleccionar un conjunto de fuentes. Aparecen

conjuntos de fuentes en lugar de una sola, ya que es posible

que al establecer una única fuente el usuario no la tenga en su

ordenador. El seleccionar un conjunto de fuentes posibilita

que en el caso de que el usuario no tenga una fuente se aplique

otra del conjunto. Por ejemplo, si seleccionamos Arial,

Helvética, sans-serif, el texto se verá con la fuente Arial, pero

si esta no existe se verá en Helvética.

Estilo.

Estos botones ponen el texto en negrita y cursiva

respectivamente. Pero en este caso, generan un estilo css en

línea.

Propiedades y formato del texto en Dreamweaver.

Alineación.

A través de estos botones es posible establecer la alineación del

texto de una de estas cuatro formas distintas: izquierda,

centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que

queremos alinear, por ejemplo, sobre un párrafo.

Tamaño.

Permite cambiar el tamaño del texto. El tamaño lo podemos

indicar en diversas unidades, en píxeles, porcentajes del tamaño

base, etc...

Color.

Permite seleccionar el color de la fuente, ignorando el color que

se haya definido en las propiedades de la página. Si no se ha

establecido ningún color en las propiedades de la página ni aquí,

el color del texto por defecto será el negro.

Propiedades y formato del texto en Dreamweaver.

Descripción.

Este curso provee a los alumnos la información necesaria

para crear sitios Web de alto impacto visual, podrá diseñar

páginas Web profesionales con manejo de Tablas,

animaciones, adición de botones de Flash, vínculo de Anclas,

diseño en modo Layout, formularios, uso de Layers, uso de

estilos en Cascadas, definición de Behaivor, inserción de

Rollover Image y muchas otras ventajas de este programa.

Requisitos.

Haber realizado el curso de HTML o poseer los

conocimientos que se dictan en éste.

Duración.

16 Horas.

Información.

http://www.benllisoft.com/website/cursos/detalle/Dreamweav

er_CC

Descripción.

Este curso provee a los alumnos la información necesaria

para crear sitios Web de alto impacto visual, podrá diseñar

páginas Web profesionales con manejo de Tablas,

animaciones, adición de botones de Flash, vínculo de Anclas,

diseño en modo Layout, formularios, uso de Layers, uso de

estilos en Cascadas, definición de Behaivor, inserción de

Rollover Image y muchas otras ventajas de este programa.

Requisitos.

Haber realizado el curso de HTML o poseer los

conocimientos que se dictan en éste.

Duración.

16 Horas.

Información.

http://www.benllisoft.com/website/cursos/detalle/Dreamweav

er_CC

Realizado por:

María Díazwww.dreamweavermagazine.com