SlideShare una empresa de Scribd logo
 
¿Que es dreamweaver? Es un software que permite crear  páginas web  profesionales. Las funciones de edición visual de  Dreamweaver  permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. 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.
Pantalla inicial.
Partes. Barras. La barra de título.  contiene el nombre del programa y el nombre del documento, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. La barra de menús.  contiene las operaciones  agrupadas en menús desplegables.  La barra de herramientas estándar.  contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como abrir, guardar,etc. La barra de herramientas de documento.  contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa. La barra de estado.  nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).
Paneles o  inspectores. Son ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. 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. Panel insertar.  permite insertar elementos  en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de  formulario, etc
Vistas del documento Puedes cambiar la vista del documento a través de la barra de herramientas de documento. Y verlo por código o diseño.
¿Primera vez utilizando dreamweaver? Como ya se menciono dreamweaver es un programa fácil de usar en el que te ahorras tiempo al ya no utilizar tan directamente los códigos HTML. A continuación se explicara como realizar una pagina, 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.
1ro. Lo primero que tienes que hacer es  abrir  Dreamweaver. Como abrir dreamweaver. Para abrir un documento  nuevo , puedes utilizar cualquiera de las siguientes operaciones.  Hacer clic en el botón abrir  de la barra de herramientas estándar.   Pulsar la combinación de teclas  Ctrl+N .  Hacer clic sobre el menú  Archivo  y elegir la opción  Nuevo . Hacer doble clic sobre el archivo en la ventana del sitio. Después de esto aparecerá una nueva ventana, en la que deberás elegir la  Categoría Página básica ,  HTML .
2do. Seleccionas la Categoría Página básica, HTML. Después aparecerá un documento en blanco escribe lo que quieras, por ejemplo:
3ro. Editar como se quiera. Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes 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 más abajo.
Ahora crearas la pagina a tu gusto y necesidad. Que en el ejemplo solo se muestre ahora el código del color azul no significa que así sea. Varia según quieras y hay infinidad de opciones. Cambia el Título por  Mi primera página . En Color de Fondo escribe  #CCCCFF , de este modo el fondo del documento pasará a ser de color azul. Da clic en aceptar.
Insertar imagen.  Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un CD-ROM o en un disquete, pero preferiblemente en el disco duro. Busca la imagen que quieres y tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un Enter para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece,  deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.
Como cambiar formato. Para ello necesitas ver el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto: Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen. y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página.
Final. Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12. Por último guarda el documento.
Gracias.

Más contenido relacionado

PDF
Manual Dreamweaver
PPT
Dreamweaver 8
PPT
Dreamweaver 8
PPTX
Dreamweaver
PPTX
Dreamweaver
PPTX
DREAMWEAVER
DOCX
Barras dreamweaver
PPT
Dreamweaver cs5
Manual Dreamweaver
Dreamweaver 8
Dreamweaver 8
Dreamweaver
Dreamweaver
DREAMWEAVER
Barras dreamweaver
Dreamweaver cs5

La actualidad más candente (20)

PPTX
Introducción a Dreamweaver cs5
DOCX
Manual de DreamWeaver
PPTX
Dreamweaver cs5 marcela trocha
PPTX
La interfaz de dreamweaver cs5
PPTX
Presentación1 dreamweaver
PPTX
Ventana de dreamweaver
PPTX
Espacio de trabajo de macromedia dreamweaver
PPTX
PPTX
PPT
Dreamweaver interfaz
PPTX
Dreamweaver Tutorial
PPTX
M ventana de dreamweaver
PPTX
PDF
Manual dreamweaver CC
PDF
Espacio de trabajo Dreamweaver
PPT
Dreamweaver Interfaz
DOC
Manual Powerpoint
PPTX
Presentación alanis
PPTX
PPTX
Introducción a Dreamweaver cs5
Manual de DreamWeaver
Dreamweaver cs5 marcela trocha
La interfaz de dreamweaver cs5
Presentación1 dreamweaver
Ventana de dreamweaver
Espacio de trabajo de macromedia dreamweaver
Dreamweaver interfaz
Dreamweaver Tutorial
M ventana de dreamweaver
Manual dreamweaver CC
Espacio de trabajo Dreamweaver
Dreamweaver Interfaz
Manual Powerpoint
Presentación alanis
Publicidad

Destacado (10)

PPTX
Ventana de dreamweaver
PPT
Presentacion Power Dreamweaver
PPTX
Israel blog
PPTX
Dreamweaver
PPTX
Dreamweaver (2)
PPTX
Grado 11 - dreamweaver
DOCX
Protocolos De Internet
DOC
Ejercicios Redes
PPTX
Protocolos de internet
PPTX
Materiales para instalar una red (lan)
Ventana de dreamweaver
Presentacion Power Dreamweaver
Israel blog
Dreamweaver
Dreamweaver (2)
Grado 11 - dreamweaver
Protocolos De Internet
Ejercicios Redes
Protocolos de internet
Materiales para instalar una red (lan)
Publicidad

Similar a Dreamweaver (20)

PPTX
Presentación dreamweaver 1
PPTX
Ventana dreamweaver
PPTX
Ventana dreamweaver
PPTX
Ventana dreamweaver
PDF
PDF
Octavo semana 21
PDF
Cap 1 curso_dreamweaver 8
PPTX
PPSX
Dreamweaver generalidades
PPT
Dreamweaver cs5
PDF
Dreamweaver mx-practicas
PPTX
Ventana de dreamweaver
PPTX
Dreamweaver
PDF
Maquetación Web con Dreamweaver y Photoshop (1/2)
PDF
Dreamweaver mayo 2010
PDF
Archivo Pdf
PDF
Tutorialdreamweaver
PPTX
Adoble dreanweare1
PPTX
Manual de Dreamweaver
PPTX
Dreamweaver
Presentación dreamweaver 1
Ventana dreamweaver
Ventana dreamweaver
Ventana dreamweaver
Octavo semana 21
Cap 1 curso_dreamweaver 8
Dreamweaver generalidades
Dreamweaver cs5
Dreamweaver mx-practicas
Ventana de dreamweaver
Dreamweaver
Maquetación Web con Dreamweaver y Photoshop (1/2)
Dreamweaver mayo 2010
Archivo Pdf
Tutorialdreamweaver
Adoble dreanweare1
Manual de Dreamweaver
Dreamweaver

Último (20)

PDF
Diapositiva proyecto de vida, materia catedra
PDF
Plantilla para Diseño de Narrativas Transmedia.pdf
PDF
Estrategia de apoyo tecnología grado 9-3
DOCX
Zarate Quispe Alex aldayir aplicaciones de internet .docx
PPTX
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
PDF
taller de informática - LEY DE OHM
PPT
Que son las redes de computadores y sus partes
PPTX
Sesion 1 de microsoft power point - Clase 1
PPTX
Propuesta BKP servidores con Acronis1.pptx
PDF
5.1 Pinch y Bijker en libro Actos, actores y artefactos de Bunch Thomas (coor...
PPTX
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
PDF
MÓDULO DE CALOR DE GRADO DE MEDIO DE FORMACIÓN PROFESIONAL
PDF
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PPT
El-Gobierno-Electrónico-En-El-Estado-Bolivia
PPTX
Presentación PASANTIAS AuditorioOO..pptx
PPTX
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
PPTX
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
PPTX
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
PDF
SAP Transportation Management para LSP, TM140 Col18
Diapositiva proyecto de vida, materia catedra
Plantilla para Diseño de Narrativas Transmedia.pdf
Estrategia de apoyo tecnología grado 9-3
Zarate Quispe Alex aldayir aplicaciones de internet .docx
IA de Cine - Como MuleSoft y los Agentes estan redefiniendo la realidad
taller de informática - LEY DE OHM
Que son las redes de computadores y sus partes
Sesion 1 de microsoft power point - Clase 1
Propuesta BKP servidores con Acronis1.pptx
5.1 Pinch y Bijker en libro Actos, actores y artefactos de Bunch Thomas (coor...
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
MÓDULO DE CALOR DE GRADO DE MEDIO DE FORMACIÓN PROFESIONAL
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
historia_web de la creacion de un navegador_presentacion.pptx
El-Gobierno-Electrónico-En-El-Estado-Bolivia
Presentación PASANTIAS AuditorioOO..pptx
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
SAP Transportation Management para LSP, TM140 Col18

Dreamweaver

  • 1.  
  • 2. ¿Que es dreamweaver? Es un software que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. 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.
  • 4. Partes. Barras. La barra de título. contiene el nombre del programa y el nombre del documento, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. La barra de menús. contiene las operaciones agrupadas en menús desplegables. La barra de herramientas estándar. contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como abrir, guardar,etc. La barra de herramientas de documento. contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa. La barra de estado. nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).
  • 5. Paneles o inspectores. Son ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. 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. Panel insertar. permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc
  • 6. Vistas del documento Puedes cambiar la vista del documento a través de la barra de herramientas de documento. Y verlo por código o diseño.
  • 7. ¿Primera vez utilizando dreamweaver? Como ya se menciono dreamweaver es un programa fácil de usar en el que te ahorras tiempo al ya no utilizar tan directamente los códigos HTML. A continuación se explicara como realizar una pagina, 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.
  • 8. 1ro. Lo primero que tienes que hacer es abrir Dreamweaver. Como abrir dreamweaver. Para abrir un documento nuevo , puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de herramientas estándar.  Pulsar la combinación de teclas Ctrl+N . Hacer clic sobre el menú Archivo y elegir la opción Nuevo . Hacer doble clic sobre el archivo en la ventana del sitio. Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página básica , HTML .
  • 9. 2do. Seleccionas la Categoría Página básica, HTML. Después aparecerá un documento en blanco escribe lo que quieras, por ejemplo:
  • 10. 3ro. Editar como se quiera. Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes 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 más abajo.
  • 11. Ahora crearas la pagina a tu gusto y necesidad. Que en el ejemplo solo se muestre ahora el código del color azul no significa que así sea. Varia según quieras y hay infinidad de opciones. Cambia el Título por Mi primera página . En Color de Fondo escribe #CCCCFF , de este modo el fondo del documento pasará a ser de color azul. Da clic en aceptar.
  • 12. Insertar imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un CD-ROM o en un disquete, pero preferiblemente en el disco duro. Busca la imagen que quieres y tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un Enter para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.
  • 13. Como cambiar formato. Para ello necesitas ver el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto: Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen. y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página.
  • 14. Final. Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12. Por último guarda el documento.