SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
• Qué es Dreamweaver
CS5

• Novedades de
Dreamweaver CS5
HTML básico

•Editar páginas web

• Arrancar y cerrar
Dreamweaver CS5

• Abrir y guardar
documentos

• La pantalla inicial

• Las barras
Dreamweaver CS5 es un software fácil de usar que permite crear páginas
web profesionales.

Las funciones de edición visual de Dreamweaver CS5 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 Java
Script, etc..de una forma muy sencilla y visual.
• Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en
inglés Content Management System, abreviado CMS) es in interfaz o programa que
nos permite gestionar el contenido de un sitio web

• Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente
los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan,
tanto si son propias, como heredadas de los elementos padre.
• Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de
Adobe, que nos permite comparar cómo se ve una misma página web en las distintas
versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de
Windows o Mac OS.



•Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio
local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más
las opciones avanzadas y poco importantes.




                                                          •Sugerencias de código. Ahora
                                                          las sugerencias de código
                                                          incluyen     nuestras      clases
                                                          personalizadas, y los comandos y
                                                          funciones propios de los distintos
                                                          CMS soportados.
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 costoso 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.
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ú. 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 CS5 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .




Puedes arrancar Dreamweaver CS5 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í.
• Para cerrar Dreamweaver CS5, 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.




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 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     de la Barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Dwj
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.
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 encontramos las herramientas de Selección, Mano (para
desplazarse) y Zoom. Y 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.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.


Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente
con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)




Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas
de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 
Manual paginas web
Manual paginas webManual paginas web
Manual paginas web
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Presentación1 dreamweaver
Presentación1 dreamweaverPresentación1 dreamweaver
Presentación1 dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver generalidades
Dreamweaver generalidadesDreamweaver generalidades
Dreamweaver generalidades
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Barras dreamweaver
Barras dreamweaverBarras dreamweaver
Barras dreamweaver
 
Dreamweaver Tutorial
Dreamweaver Tutorial Dreamweaver Tutorial
Dreamweaver Tutorial
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trocha
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 

Similar a Dwj (20)

Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Linda eljach
Linda eljachLinda eljach
Linda eljach
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Johana
JohanaJohana
Johana
 
Johan T,T
Johan T,TJohan T,T
Johan T,T
 
Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperado
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
dremweaver
dremweaverdremweaver
dremweaver
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Presentación alanis
Presentación alanisPresentación alanis
Presentación alanis
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotos
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotos
 
UTPL - Curso De Dreamweave
UTPL - Curso De DreamweaveUTPL - Curso De Dreamweave
UTPL - Curso De Dreamweave
 

Más de Angie Lop

Como crear una pagina web con wix
Como crear una pagina web con wixComo crear una pagina web con wix
Como crear una pagina web con wixAngie Lop
 
como hacer una pagina web?
como hacer una pagina web?como hacer una pagina web?
como hacer una pagina web?Angie Lop
 
Alanis galingo
Alanis galingoAlanis galingo
Alanis galingoAngie Lop
 

Más de Angie Lop (6)

Como crear una pagina web con wix
Como crear una pagina web con wixComo crear una pagina web con wix
Como crear una pagina web con wix
 
El agua.
El agua.El agua.
El agua.
 
como hacer una pagina web?
como hacer una pagina web?como hacer una pagina web?
como hacer una pagina web?
 
Usabilidad.
Usabilidad.Usabilidad.
Usabilidad.
 
Alanis galingo
Alanis galingoAlanis galingo
Alanis galingo
 
Dwj
DwjDwj
Dwj
 

Dwj

  • 1. • Qué es Dreamweaver CS5 • Novedades de Dreamweaver CS5 HTML básico •Editar páginas web • Arrancar y cerrar Dreamweaver CS5 • Abrir y guardar documentos • La pantalla inicial • Las barras
  • 2. Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 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 Java Script, etc..de una forma muy sencilla y visual.
  • 3. • Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web • Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.
  • 4. • Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS. •Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco importantes. •Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.
  • 5. 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 costoso 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.
  • 6. 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ú. 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 CS5 y haz clic sobre él para arrancar el programa. Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes . Puedes arrancar Dreamweaver CS5 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í.
  • 7. • Para cerrar Dreamweaver CS5, 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. 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.
  • 8. 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 de la Barra de herramientas estándar. Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
  • 10. 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.
  • 11. 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 encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y 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.
  • 12. La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.) Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.
  • 13. Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.