SlideShare una empresa de Scribd logo
1 de 12
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 JavaScript, etc.., de
una forma muy sencilla y visual.
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.
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.
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.
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.
En Relativa a es posible especificar si la imagen será relativa
al documento o a la carpeta raíz del sitio. Es preferible
que sea relativa al Documento, ya que si cambiamos la
página de carpeta, lo habitual es cambiar también sus
imágenes.
Lo mismo ocurre cuando se selecciona un documento para
crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá
representada de una u otra forma en el campo URL de la
ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como
relativa a la carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio
(la carpeta del sitio) se encuentran la carpeta imagenes y
el documento en el que deseamos insertar la imagen.
Dicha imagen, llamadaaulaclic.jpg, se encuentra dentro de
la carpeta imagenes.
INSERTAR UNA IMAGEN
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la
tabla, así como el Ancho de la tabla.
El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro
es que el ancho en Píxeleses siempre el mismo, independientemente del tamaño de la
ventana del navegador en la que se visualice la página, en cambio, el ancho
en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se
ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que
tengan pantallas grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna
uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los
bordes de éstas.
Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para
indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con
celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que
los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los
encabezados de tabla y ayudan a los usuarios de los mismos a mantener un
seguimiento de la información de la tabla.
INSERTAR UNA TABLA

Más contenido relacionado

La actualidad más candente

Diapositivas informatica
Diapositivas informaticaDiapositivas informatica
Diapositivas informaticahelenamarquez
 
Como se usa Docxpresso - crear documentos online
Como se usa Docxpresso - crear documentos onlineComo se usa Docxpresso - crear documentos online
Como se usa Docxpresso - crear documentos onlineCesar Martín
 
Crear agenda telefonica access paso a paso
Crear agenda telefonica access paso a pasoCrear agenda telefonica access paso a paso
Crear agenda telefonica access paso a pasoLouis Jhosimar
 
Dreamweaver .. mariarico
Dreamweaver .. mariaricoDreamweaver .. mariarico
Dreamweaver .. mariaricoMafeRicoll
 
Access,isae,germán
Access,isae,germánAccess,isae,germán
Access,isae,germángerman30
 
Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005Ricardo Viqueira
 
Manual x mind-modificado
Manual x mind-modificadoManual x mind-modificado
Manual x mind-modificadoRosario Alva
 
Diseñando Base Datos MySQL
Diseñando Base Datos MySQLDiseñando Base Datos MySQL
Diseñando Base Datos MySQLvictorsalas
 
Entorno visual de microsoft word
Entorno visual de microsoft wordEntorno visual de microsoft word
Entorno visual de microsoft wordReimar Carmona
 
Enlace de visual basic con una base de datos access 2007
Enlace de visual basic con una base de datos access 2007Enlace de visual basic con una base de datos access 2007
Enlace de visual basic con una base de datos access 2007alan martinez
 
Como crear una mini agenda personal
Como crear una mini agenda personalComo crear una mini agenda personal
Como crear una mini agenda personalSady Euceda
 
Presentacion de compu
Presentacion de compuPresentacion de compu
Presentacion de compuSñoritha Bsc
 

La actualidad más candente (19)

Diapositivas informatica
Diapositivas informaticaDiapositivas informatica
Diapositivas informatica
 
Como se usa Docxpresso - crear documentos online
Como se usa Docxpresso - crear documentos onlineComo se usa Docxpresso - crear documentos online
Como se usa Docxpresso - crear documentos online
 
Crear agenda telefonica access paso a paso
Crear agenda telefonica access paso a pasoCrear agenda telefonica access paso a paso
Crear agenda telefonica access paso a paso
 
Dreamweaver .. mariarico
Dreamweaver .. mariaricoDreamweaver .. mariarico
Dreamweaver .. mariarico
 
Guia de exel
Guia de exelGuia de exel
Guia de exel
 
Access,isae,germán
Access,isae,germánAccess,isae,germán
Access,isae,germán
 
Informe de bre k..
Informe de bre k..Informe de bre k..
Informe de bre k..
 
Ventana principal de word
Ventana principal de wordVentana principal de word
Ventana principal de word
 
Adobe dream weaver tutorial
Adobe dream weaver tutorialAdobe dream weaver tutorial
Adobe dream weaver tutorial
 
Word 2010
Word 2010Word 2010
Word 2010
 
Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005Conexión Base de Datos Access con Visual 2005
Conexión Base de Datos Access con Visual 2005
 
Manual x mind-modificado
Manual x mind-modificadoManual x mind-modificado
Manual x mind-modificado
 
Diseñando Base Datos MySQL
Diseñando Base Datos MySQLDiseñando Base Datos MySQL
Diseñando Base Datos MySQL
 
Ppp jjj 1002
Ppp jjj 1002Ppp jjj 1002
Ppp jjj 1002
 
Entorno visual de microsoft word
Entorno visual de microsoft wordEntorno visual de microsoft word
Entorno visual de microsoft word
 
Enlace de visual basic con una base de datos access 2007
Enlace de visual basic con una base de datos access 2007Enlace de visual basic con una base de datos access 2007
Enlace de visual basic con una base de datos access 2007
 
Como crear una mini agenda personal
Como crear una mini agenda personalComo crear una mini agenda personal
Como crear una mini agenda personal
 
Presentacion de compu
Presentacion de compuPresentacion de compu
Presentacion de compu
 
Capítulo 1
Capítulo 1Capítulo 1
Capítulo 1
 

Destacado (20)

Micro 5
Micro 5Micro 5
Micro 5
 
Conflenti e il trono del Papa
Conflenti e il trono del PapaConflenti e il trono del Papa
Conflenti e il trono del Papa
 
Resume 2015 V2
Resume 2015 V2Resume 2015 V2
Resume 2015 V2
 
Contractlabour form ii
Contractlabour form iiContractlabour form ii
Contractlabour form ii
 
1046_pausoz....pdf
1046_pausoz....pdf1046_pausoz....pdf
1046_pausoz....pdf
 
15 o shn agustín-18h
15 o shn agustín-18h15 o shn agustín-18h
15 o shn agustín-18h
 
POC* Logo
POC* LogoPOC* Logo
POC* Logo
 
Mapa coceptual
Mapa coceptualMapa coceptual
Mapa coceptual
 
CORPORACION UNIVERSITARIA MINUTO DEDIOS
CORPORACION UNIVERSITARIA MINUTO DEDIOSCORPORACION UNIVERSITARIA MINUTO DEDIOS
CORPORACION UNIVERSITARIA MINUTO DEDIOS
 
Mendeley presentation 2015_geraldo
Mendeley presentation 2015_geraldoMendeley presentation 2015_geraldo
Mendeley presentation 2015_geraldo
 
Sanluis agua
Sanluis aguaSanluis agua
Sanluis agua
 
Ambrosio lecutra recomendada
Ambrosio lecutra recomendadaAmbrosio lecutra recomendada
Ambrosio lecutra recomendada
 
Fatema
FatemaFatema
Fatema
 
OBRA DE TEATRO
OBRA DE TEATROOBRA DE TEATRO
OBRA DE TEATRO
 
2.500
2.5002.500
2.500
 
Gabriel garcía márquez
Gabriel garcía márquezGabriel garcía márquez
Gabriel garcía márquez
 
Bernard Walker Final-Ver2
Bernard Walker Final-Ver2Bernard Walker Final-Ver2
Bernard Walker Final-Ver2
 
Slide chapter 8 prt
Slide chapter 8 prtSlide chapter 8 prt
Slide chapter 8 prt
 
Clase 6
Clase 6Clase 6
Clase 6
 
WordPress and ATAG Compliance
WordPress and ATAG ComplianceWordPress and ATAG Compliance
WordPress and ATAG Compliance
 

Similar a Crear sitios web con Dreamweaver CS5

Resumen de inoformatica
Resumen de inoformaticaResumen de inoformatica
Resumen de inoformaticastevenruiz7
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaverpaosinning
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverMelii Duarte P
 
Presentación1 dreamweaver
Presentación1 dreamweaverPresentación1 dreamweaver
Presentación1 dreamweaverLina Ali
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 eaybeth9414
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotosstephanyzambrano
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotosstephanyzambrano
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 natynataliareniz
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas WebJose Casan
 
Guia diseño vectorial con corel draw
Guia diseño vectorial con corel drawGuia diseño vectorial con corel draw
Guia diseño vectorial con corel drawasesor_slide_2013
 
Reconocer el entorno de trabajo
Reconocer el entorno de trabajoReconocer el entorno de trabajo
Reconocer el entorno de trabajojuan98091655780
 

Similar a Crear sitios web con Dreamweaver CS5 (20)

Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Resumen de inoformatica
Resumen de inoformaticaResumen de inoformatica
Resumen de inoformatica
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Presentación1 dreamweaver
Presentación1 dreamweaverPresentación1 dreamweaver
Presentación1 dreamweaver
 
Front Page ==
Front Page ==Front Page ==
Front Page ==
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
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
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Guia diseño vectorial con corel draw
Guia diseño vectorial con corel drawGuia diseño vectorial con corel draw
Guia diseño vectorial con corel draw
 
Reconocer el entorno de trabajo
Reconocer el entorno de trabajoReconocer el entorno de trabajo
Reconocer el entorno de trabajo
 
Reconocer el entorno de trabajo
Reconocer el entorno de trabajoReconocer el entorno de trabajo
Reconocer el entorno de trabajo
 
Reconocer el entorno de trabajo
Reconocer el entorno de trabajoReconocer el entorno de trabajo
Reconocer el entorno de trabajo
 
dreamweaver
dreamweaverdreamweaver
dreamweaver
 
dreamweaver 8
dreamweaver 8dreamweaver 8
dreamweaver 8
 

Crear sitios web con Dreamweaver CS5

  • 1.
  • 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 JavaScript, etc.., de una forma muy sencilla y visual.
  • 3.
  • 4. 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.
  • 5. 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.
  • 6. 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.
  • 7.
  • 8.
  • 9. 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. En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes. Lo mismo ocurre cuando se selecciona un documento para crear un vínculo. La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamadaaulaclic.jpg, se encuentra dentro de la carpeta imagenes.
  • 11. Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla. El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeleses siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde. Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas. Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla. También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.