tutorial de dreamweaver todo sobre el programa

1. AXEL ANDRE FUERTES
ANDRADE
4TO “J”

2. Qué es Dreamweaver CS6
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.
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.

3. Novedades de Dreamweaver CS6
En este punto comentaremos 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 librerias de Javascript que solucionan este
inconveniente.Dreamweaver incorpora estas soluciones en
sus nuevas plantillas de diseño fluido que veremos en la
unidad 18

4. • 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.
• Intergració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
compatibildad 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 rapido 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 estan 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.

5. Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario
crear los documentos con la extensión HTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas
incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más laborioso que hacerlo
utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar
cada uno de los elementos de la página, al mismo tiempo que es más complicado
crear una apariencia profesional para la página, sobre todo si no estamos
demasiado familiarizados con el HTML. Aunque también es cierto que escribir el
código nos da más control sobre él, y sobre todo al principio, nos ayudará a
entender lo que estamos haciendo y podremos aprender HTML rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más
utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye,
es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web,
como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o
Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

6. Cómo tener una página en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y
hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la
empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y
nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar
ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que
no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para
una página personal, sobre todo al comienzo.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet de forma gratuita en
forma de blog. Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tiene una estructura definida y no
ofrece tanta libertad como una página web a la hora del diseño.
También tenemos Google Sites que permite modificar directamente el código HTML.
En el resto del curso nos referiremos preferentemente a páginas web creadas desde cero por el usuario, sin restircciones de
diseño.Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se
suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página.
Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es
posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. La terminación hace
referencia al pais (.es para España, .com.mx para México, .pe para Perú, ...) o al tipo de página (.com para comerciales, .org
para organizaciones, .mobi para teléfonos móviles o celulares, ...)

7. Arrancar y cerrar Dreamweaver CS6
• Veamos las dos formas básicas de arrancar Dreamweaver CS6.
Desde el botón Inicio Botón de 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ú. Puedes comenzar a escribir el nombre del programa, y aparecerá
directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu
ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre él para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .
Puedes arrancar Dreamweaver CS6 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í. Básico
• Para cerrar Dreamweaver CS6, 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

8. 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 clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos
abiertos.
Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. Se abrirá el programa
Brigde que muestra las carpetas y archivos de forma gráfica.
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 CS6.
• Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botón nuevo 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.

9. Mi primera página
Para que te vayas haciendo una idea de cómo funciona
Dreamweaver, vamos a crear una página web sencilla, con varios
estilos de texto, una imagen y un enlace a otra página. Crear esta
página solo te llevará unos pocos minutos, y sabrás cómo trabajar con
los elementos básicos con los que están hechas la mayoría de las
páginas web. Si nunca has hecho una página web, este es el momento
para descubrir lo fácil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en
la página anterior como puede hacerse. Abre un documento nuevo y
selecciona la Categoría Página básica, HTML, en la columna Diseño
dejamos la opción por defecto: <ninguno>
Seguidamente, haz clic sobre la zona blanca del documento y escribe
lo siguiente:

10. Una vez introducido el texto, vamos a modificar el título y el color de fondo
del documento.
Para ello podemos hacer clic sobre el menú Modificar y elegir la opción
Propiedades de la página.
Entonces se abrirá una ventana como la que aparece a continuación:

11. La 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.

12. En el resto de esta unidad vamos a ir describiendo
los puntos más importantes señalados en esta
imagen por los números en azul del 1 al 9.
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.

13. La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada
veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen
superior.Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones
propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on
line.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar
entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que
ya veremos.
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de
trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo
veremos más adelante.
Los menús, están agrupados en categorías.

14. Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro
fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada
documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como
Cerrar otros archivos.Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos,
archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

15. La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo
hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha
encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y al final hay
otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.
Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde
el menú Ver → Barras de herramientas.