SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Dreamweaver 8 Taller Mofonguero Por: Juan C. Peña Martínez
Bienvenida ,[object Object],[object Object]
¿Qué es mofonguero? ,[object Object],[object Object]
Listado de materiales ,[object Object],[object Object],[object Object],[object Object]
Contenido ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Que es Dreamweaver? ,[object Object],[object Object]
¿Qué es HTML? ,[object Object],[object Object]
¿Qué es HTML? ,[object Object],[object Object],[object Object],[object Object]
¿Para qué sirve? ,[object Object],[object Object],[object Object],[object Object]
¿Qué es WYSIWYG? ,[object Object],[object Object]
¿Cómo comienzo? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Cómo comienzo? (preguntas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Cómo comienzo? (preguntas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Cómo comienzo? (preguntas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Cómo comienzo? (preguntas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
¿Cómo comienzo? (preguntas) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ejemplos de Flujograma Inicio Menú Pag 1 Pag 2 Pag 3 Pag 1a Pag 1b Pag 2a Pag 3a Pag 3b De vuelta a inicio Inicio (portada) Menú Pagina1 pagina1a pagina1b Pagina2 pagina2a Pagina3 Pagina4 Programa común Página básica
¡Ahora Si! ¡Dreamweaver! ,[object Object],[object Object],[object Object],[object Object]
Dreamweaver: Interfase Barra de menú
Dreamweaver: Interfase Menú utilitario( este menú es cambiante)
Dreamweaver: Interfase Documento que tiene activo
Dreamweaver: Interfase Editor de texto HTML
Dreamweaver: Interfase “ Layout” de pantalla y funciones comunes del editor
Dreamweaver: Interfase Otras funciones prácticas del editor de HTML
¡Ahora Si! ¡Dreamweaver! ,[object Object],Editor visual : “Preview” de cómo se ve la página.
Dreamweaver: Interfase Propiedades del elemento activo aquí puede ver que cambios sencillos se le pueden hacer al elemento que tiene activo en el momento.
Dreamweaver: Interfase “ Tabs” de Funciones adicionales y controles de algunos elementos un tanto mas complejos.
Dreamweaver: Interfase Nota: Algunos elementos de la interfase no se ven hasta que el objeto sea seleccionado o se activen los mismos según sea necesario para el usuario. Nota: Al colocar el cursor sobre algunos de los elementos le  aparecerá una notita informativa de que es el elemento que esta seleccionando. Esto puede ser muy útil y ayuda a explorar la  interfase sin necesidad de mucha explicación. Insert Table
Dreamweaver: Interfase Los elementos de edición de texto son estandarizados para dar un sentido de familiaridad sobretodo en elementos de edición de texto que tienen un “look” similar al de Word.
Dreamweaver: Interfase Dreamweaver automáticamente genera el código necesario al crear un documento nuevo. el que no tiene experiencia en HTML puede de manera “sencilla” hacer su pagina en el editor visual y el programa le generará el código básico necesario. Le recomiendo que si no sabe lo que es no lo borre. El lenguaje HTML es bien preciso y estructurado un error puede  causar elementos extraños y situaciones aún mas extrañas.
Dreamweaver: Interfase El darle “right-click” al espacio  vacío dentro del editor visual le aparecerá un menú de opciones esto le será especialmente útil mientras usted trabaja. Si escoge propiedades verá las propiedades de su pagina y podrá editarlas.
Dreamweaver: Interfase Aquí puede manejar la apariencia  y detalles de su pagina. Desde el color de fondo, el título, el espacio del margen, el color del texto  y otras muchas opciones. También puede poner una imagen de fondo a su página
Dreamweaver: Interfase Estos son los “tools” comunes que permiten al usuario crear mediante unos clics elementos en la pagina de web utilizando Dreamweaver. Note que están divididos por clasificaciones. Common (elementos mas comunes) Image table layer horizontal line Character (caracteres especiales) Line break Space Forms (formas) field checkbox button list box
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object],[object Object]
Dreamweaver: ¡Creemos algo! ,[object Object],[object Object],[object Object],[object Object]
Dreamweaver: Guías a seguir. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Otros términos… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dreamweaver: ¿huh? ,[object Object]
[object Object]

Weitere ähnliche Inhalte

Was ist angesagt?

Publisher 2003 y sus características
Publisher 2003 y sus característicasPublisher 2003 y sus características
Publisher 2003 y sus características
caroandre12
 
Gestor de contenidos
Gestor de contenidosGestor de contenidos
Gestor de contenidos
alarcon7a
 
Guía Scratch.
Guía Scratch.Guía Scratch.
Guía Scratch.
angelguiza
 

Was ist angesagt? (20)

Publisher 2003 y sus características
Publisher 2003 y sus característicasPublisher 2003 y sus características
Publisher 2003 y sus características
 
Manual de publisher
Manual de publisherManual de publisher
Manual de publisher
 
Ejercicio power point
Ejercicio power pointEjercicio power point
Ejercicio power point
 
TRIPTICO (PUBLISHER).pdf
TRIPTICO (PUBLISHER).pdfTRIPTICO (PUBLISHER).pdf
TRIPTICO (PUBLISHER).pdf
 
Microsoft word
Microsoft wordMicrosoft word
Microsoft word
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 
Scratch
ScratchScratch
Scratch
 
Tipos de licencia y versiones de software
Tipos de licencia y versiones de softwareTipos de licencia y versiones de software
Tipos de licencia y versiones de software
 
software educativo
software educativo software educativo
software educativo
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Sistemas operativos presentacion power point
Sistemas operativos presentacion power pointSistemas operativos presentacion power point
Sistemas operativos presentacion power point
 
Interfaz de PowerPoint 2016
Interfaz de PowerPoint 2016Interfaz de PowerPoint 2016
Interfaz de PowerPoint 2016
 
SISTEMA OPERATIVO
SISTEMA OPERATIVO SISTEMA OPERATIVO
SISTEMA OPERATIVO
 
Instala y configura software
Instala y configura softwareInstala y configura software
Instala y configura software
 
Que es microsoft office
Que es microsoft officeQue es microsoft office
Que es microsoft office
 
Cuadro comparativo sitemas operativo (SO) windows
Cuadro comparativo sitemas operativo (SO) windowsCuadro comparativo sitemas operativo (SO) windows
Cuadro comparativo sitemas operativo (SO) windows
 
Taller en power point
Taller en power pointTaller en power point
Taller en power point
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Gestor de contenidos
Gestor de contenidosGestor de contenidos
Gestor de contenidos
 
Guía Scratch.
Guía Scratch.Guía Scratch.
Guía Scratch.
 

Ähnlich wie Taller de Dreamweaver 8 (20)

Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperado
 
Johan T,T
Johan T,TJohan T,T
Johan T,T
 
Presentación post
Presentación postPresentación post
Presentación post
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Presentación front page
Presentación front pagePresentación front page
Presentación front page
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Linda eljach
Linda eljachLinda eljach
Linda eljach
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
tutorial de dreamweaver
tutorial de dreamweavertutorial de dreamweaver
tutorial de dreamweaver
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Manual frontpage 2000
Manual frontpage 2000Manual frontpage 2000
Manual frontpage 2000
 
Manual frontpage 2000
Manual frontpage 2000Manual frontpage 2000
Manual frontpage 2000
 
Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
MANUAL DE PROCESOS INFORMÁTICOS
MANUAL DE PROCESOS INFORMÁTICOSMANUAL DE PROCESOS INFORMÁTICOS
MANUAL DE PROCESOS INFORMÁTICOS
 
Dreamweaver Interfaz
Dreamweaver InterfazDreamweaver Interfaz
Dreamweaver Interfaz
 
Actividad de la 1 hasta la 5
Actividad de la 1 hasta la 5Actividad de la 1 hasta la 5
Actividad de la 1 hasta la 5
 
1 5
1 51 5
1 5
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trocha
 

Taller de Dreamweaver 8

  • 1. Dreamweaver 8 Taller Mofonguero Por: Juan C. Peña Martínez
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Ejemplos de Flujograma Inicio Menú Pag 1 Pag 2 Pag 3 Pag 1a Pag 1b Pag 2a Pag 3a Pag 3b De vuelta a inicio Inicio (portada) Menú Pagina1 pagina1a pagina1b Pagina2 pagina2a Pagina3 Pagina4 Programa común Página básica
  • 18.
  • 20. Dreamweaver: Interfase Menú utilitario( este menú es cambiante)
  • 23. Dreamweaver: Interfase “ Layout” de pantalla y funciones comunes del editor
  • 24. Dreamweaver: Interfase Otras funciones prácticas del editor de HTML
  • 25.
  • 26. Dreamweaver: Interfase Propiedades del elemento activo aquí puede ver que cambios sencillos se le pueden hacer al elemento que tiene activo en el momento.
  • 27. Dreamweaver: Interfase “ Tabs” de Funciones adicionales y controles de algunos elementos un tanto mas complejos.
  • 28. Dreamweaver: Interfase Nota: Algunos elementos de la interfase no se ven hasta que el objeto sea seleccionado o se activen los mismos según sea necesario para el usuario. Nota: Al colocar el cursor sobre algunos de los elementos le aparecerá una notita informativa de que es el elemento que esta seleccionando. Esto puede ser muy útil y ayuda a explorar la interfase sin necesidad de mucha explicación. Insert Table
  • 29. Dreamweaver: Interfase Los elementos de edición de texto son estandarizados para dar un sentido de familiaridad sobretodo en elementos de edición de texto que tienen un “look” similar al de Word.
  • 30. Dreamweaver: Interfase Dreamweaver automáticamente genera el código necesario al crear un documento nuevo. el que no tiene experiencia en HTML puede de manera “sencilla” hacer su pagina en el editor visual y el programa le generará el código básico necesario. Le recomiendo que si no sabe lo que es no lo borre. El lenguaje HTML es bien preciso y estructurado un error puede causar elementos extraños y situaciones aún mas extrañas.
  • 31. Dreamweaver: Interfase El darle “right-click” al espacio vacío dentro del editor visual le aparecerá un menú de opciones esto le será especialmente útil mientras usted trabaja. Si escoge propiedades verá las propiedades de su pagina y podrá editarlas.
  • 32. Dreamweaver: Interfase Aquí puede manejar la apariencia y detalles de su pagina. Desde el color de fondo, el título, el espacio del margen, el color del texto y otras muchas opciones. También puede poner una imagen de fondo a su página
  • 33. Dreamweaver: Interfase Estos son los “tools” comunes que permiten al usuario crear mediante unos clics elementos en la pagina de web utilizando Dreamweaver. Note que están divididos por clasificaciones. Common (elementos mas comunes) Image table layer horizontal line Character (caracteres especiales) Line break Space Forms (formas) field checkbox button list box
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.