FPE Diseñador Web y Multimedia<br />Carmina Barreiro. Curso de Adams.<br />Módulo 1. <br />Teoría. Planificar y entender. ...
Dreamweaver<br />Introducción<br />Interfaz de Dreamweaver<br />Panel de Propiedades<br />Barra Insertar<br />Personalizar...
Dreamweaver<br />Crear un Sitio Web<br />Como crear y modificar datos del sitio<br />Ventana Archivo<br />Conocimientos bá...
Dreamweaver<br />Escribir<br />Cuidado al copiar desde Word u otra web y Pegar en Dreamweaver<br />Estilos predefinidos<br...
Dreamweaver<br />Insertar enlaces. Barra propiedades<br />Enlaces a página<br />Enlaces externos<br />Enlaces a correos<br...
Dreamweaver<br />Las imágenes<br />Características y Formatos para Web<br />Insertar una imagen y propiedades<br />
Dreamweaver<br />Las Tablas:<br />Propiedades de la Tabla<br />Propiedades de las Filas<br />Propiedades de las Celdas<br ...
Dreamweaver<br />Formularios:<br />Elementos de Formularios<br />Página de Respuesta<br />A Tomar en Cuenta:<br />Ya no se...
Dreamweaver<br />Formularios. Cómo funciona el envío de datos:<br />
Dreamweaver<br />Los Comportamientos (Javascript sin programar!)<br />Javascript: lenguaje de programación orientado objet...
Dreamweaver<br />Los Comportamientos. Usos:<br />Validar formularios<br />Imágenes de sustitución<br />Abrir nueva ventana...
Dreamweaver<br />Las imágenes<br />Mapear una imagen <br />Crear imágenes de sustitución<br />Imagen en reposo<br />Imagen...
Dreamweaver<br />Elementos Spry:<br />Barra de Navegación de Spry<br />Acordeón<br />Formularios con Validación<br />
Dreamweaver<br />Trabajar con Plantillas:<br />Crear Plantillas<br />Crear Documento a partir de plantilla<br />Aplicar pl...
Dreamweaver<br />RECURSOS:<br />Imágenes, ilustraciones, animaciones, sonido…: <br />Istcokphoto: http://www.istockphoto.c...
Dreamweaver<br />RECURSOS:<br />Tipografías Gratis:<br />http://www.fontsquirrel.com/<br />http://www.exljbris.com/<br />C...
Dreamweaver<br />NOTA FINAL: Las imágenes de Dreamweaver incluidas en esta presentación corresponden a la interfaz de la v...
Upcoming SlideShare
Loading in …5
×

Curso FPE Diseño Web. Módulo 3. Dreamweaver

1,204 views
1,083 views

Published on

Módulo 3 del Curso FPE de Diseño Web impartido en Adams, Sevilla. Tercer Módulo sobre el uso de Dreamweaver para el diseño web.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,204
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso FPE Diseño Web. Módulo 3. Dreamweaver

  1. 1. FPE Diseñador Web y Multimedia<br />Carmina Barreiro. Curso de Adams.<br />Módulo 1. <br />Teoría. Planificar y entender. <br />Módulo 3. <br />Dreamweaver. Bendito WYSIWYG!<br />
  2. 2. Dreamweaver<br />Introducción<br />Interfaz de Dreamweaver<br />Panel de Propiedades<br />Barra Insertar<br />Personalizar espacio de trabajo<br />Dividir para ver Código<br />
  3. 3. Dreamweaver<br />Crear un Sitio Web<br />Como crear y modificar datos del sitio<br />Ventana Archivo<br />Conocimientos básico del nombre de los archivos.<br />
  4. 4. Dreamweaver<br />Escribir<br />Cuidado al copiar desde Word u otra web y Pegar en Dreamweaver<br />Estilos predefinidos<br />Párrafo<br />Encabezados<br />Listas<br />Listas Numeradas<br />
  5. 5. Dreamweaver<br />Insertar enlaces. Barra propiedades<br />Enlaces a página<br />Enlaces externos<br />Enlaces a correos<br />Comprobar vínculos<br />
  6. 6. Dreamweaver<br />Las imágenes<br />Características y Formatos para Web<br />Insertar una imagen y propiedades<br />
  7. 7. Dreamweaver<br />Las Tablas:<br />Propiedades de la Tabla<br />Propiedades de las Filas<br />Propiedades de las Celdas<br />Combinar Celdas<br />“Truco” Borde Fino con color de fondo y espacio entre celdas<br />Usar imágenes de fondo<br />
  8. 8. Dreamweaver<br />Formularios:<br />Elementos de Formularios<br />Página de Respuesta<br />A Tomar en Cuenta:<br />Ya no se usa tanto y es innecesario el botón borrar.<br />Solicitar la información mínima indispensable.<br />Disposición a rellenar formularios es directamente proporcional al interés del usuario (No te creas Dios)<br />Cuidado con la “manía” de campos obligatorios.<br />No limitar el número de caracteres sin necesidad.<br />No olvidar la Ley de Protección Datos<br />Útil para medir conversiones de publicidad online.<br />
  9. 9. Dreamweaver<br />Formularios. Cómo funciona el envío de datos:<br />
  10. 10. Dreamweaver<br />Los Comportamientos (Javascript sin programar!)<br />Javascript: lenguaje de programación orientado objeto que permite mejoras en la interfaz de la web<br />¿Qué es la programación orientada a Objetos?una forma de programación que usa objetos y sus interacciones, para diseñar aplicaciones y programas informáticos.<br />Elementos Fundamentales Comportamientos:EVENTO afecta a un OBJETO  desencadena una ACCIÓN <br />
  11. 11. Dreamweaver<br />Los Comportamientos. Usos:<br />Validar formularios<br />Imágenes de sustitución<br />Abrir nueva ventana<br />
  12. 12. Dreamweaver<br />Las imágenes<br />Mapear una imagen <br />Crear imágenes de sustitución<br />Imagen en reposo<br />Imagen en onMouseOver<br />
  13. 13. Dreamweaver<br />Elementos Spry:<br />Barra de Navegación de Spry<br />Acordeón<br />Formularios con Validación<br />
  14. 14. Dreamweaver<br />Trabajar con Plantillas:<br />Crear Plantillas<br />Crear Documento a partir de plantilla<br />Aplicar plantilla a documento<br />Aplicar cambios desde una plantilla<br />Uso para una web un segundo idioma<br />
  15. 15. Dreamweaver<br />RECURSOS:<br />Imágenes, ilustraciones, animaciones, sonido…: <br />Istcokphoto: http://www.istockphoto.com/<br />Fotolia: http://es.fotolia.com/<br />Dreamstime: http://www.dreamstime.com/<br />
  16. 16. Dreamweaver<br />RECURSOS:<br />Tipografías Gratis:<br />http://www.fontsquirrel.com/<br />http://www.exljbris.com/<br />Complemento de Firefox parainspeccionar el código de una web: Firebug (http://getfirebug.com)<br />
  17. 17. Dreamweaver<br />NOTA FINAL: Las imágenes de Dreamweaver incluidas en esta presentación corresponden a la interfaz de la versión CS3 para Mac. Pueden variar ligeramente de la versión para PC. Pero ambas incluyen las mismas funciones, en el mismo lugar.<br />

×