Introducción a Dreamweaver

Introducción al programa de diseño de páginas web y gestión de sitios Adobe Dreamweaver.

 

1. Introducción y objetivos

Datos generales de la especialidad formativa.

 

2. Introducción

Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización correcta de cada uno de estos lenguajes. Finalmente, se indican las aplicaciones informáticas que requiere un diseñador de páginas web y cuáles se utilizarán a lo largo del curso. En esta lección se estudian:

• Introducción a Dreamweaver.


• Introducción.

 

3. Test de consolidación

Test de consolidación de la lección Introducción.

 

4. Modos de visualización del entorno de trabajo

Introduce la aplicación de diseño web profesional Adobe Dreamweaver, indicando, de forma general, sus características y principales funcionalidades. Describe las partes de la ventana de Dreamweaver y los distintos elementos que conforman su entorno de trabajo. También explica cómo configurar Dreamweaver para personalizarlo a nuestras necesidades. En esta lección se estudian:

• Introducción a Dreamweaver.


• Modos de visualización del entorno de trabajo.

 

5. Test de consolidación

Test de consolidación de la lección Modos de visualización del entorno de trabajo.

 

6. Definición de un sitio web. Mapa del sitio. Creación y mantenimiento

Presenta los pasos a seguir para crear y configurar un sitio en Dreamweaver. También se explica cómo crear un sitio en Dreamweaver a partir de páginas web y otro contenido existente. En esta lección se estudian:

• Introducción a Dreamweaver.


• Definición de un sitio web.


• Mapa del sitio. Creación y mantenimiento.

 

7. Test de consolidación

Test de consolidación de la lección Definición de un sitio web. Mapa del sitio. Creación y mantenimiento.

Crear sitios web

Introducción al lenguaje HTML, que es en el que están escritas las páginas de los sitios web.

 

8. Introducción. Sintaxis HTML. Mi primera página web. Etiquetas HTML

Se describe la sintaxis de las etiquetas HTML y la posibilidad de que presenten atributos para establecer propiedades o características adicionales. Se introducen las etiquetas HTML fundamentales que describen una página web, como html, head y body y la etiqueta de párrafo de texto p. Además, se indica cómo guardar una página web y establecer el título de la misma. En esta lección se estudian:

• Crear sitios web.


• Introducción.


• Sintaxis HTML.


• Mi primera página web.


• Etiquetas HTML.

 

9. Test de consolidación

Test de consolidación de la lección Introducción. Sintaxis HTML. Mi primera página web. Etiquetas HTML.

Diseño de páginas web

 

10. Introducción. Propiedades de la página. Editar página con Dreamweaver

Se muestran las alternativas que se tienen a la hora de crear páginas web en Dreamweaver y cómo establecer las propiedades principales de la página. Se destacan las diferencias entre trabajar con una aplicación de este tipo y hacerlo a mano, escribiendo todo el código HTML y CSS. En esta lección se estudian:

• Diseño de páginas web.


• Introducción.


• Propiedades de la página.


• Editar página con Dreamweaver.

 

11. Test de consolidación

Test de consolidación de la lección Introducción. Propiedades de la página. Editar página con Dreamweaver.

 

12. Introducción a CSS

Se introduce el lenguaje de las hojas de estilo en cascada (CSS), resaltando que son la herramienta que un diseñador web debe utilizar para aplicar formato a las páginas web. Se describe la sintaxis de las reglas CSS, compuestas de un selector y de la declaración de la regla; cómo enlazar las hojas de estilo con el código HTML; cómo aplicarlas; y los conceptos de herencia y cascada, esenciales para entender esta tecnología. En esta lección se estudian:

• Diseño de páginas web.


• Introducción a CSS.

 

13. Test de consolidación

Test de consolidación de la lección Introducción a CSS.

Introducir texto

Introducción del texto en las páginas web, visto primero desde el punto de vista teórico del lenguaje HTML y después su aplicación en Dreamweaver.

 

14. Introducción (I)

Se describen las características del texto de una página web utilizando el lenguaje HTML. Se estudia la distribución en párrafos y títulos de la página y se indica la posibilidad de escribir texto predefinido (aquel que se muestra en la página web tal como lo hemos escrito en el código). También se estudia la incorporación de líneas separadoras y los llamados elementos de frase, que sirven para describir el texto de una forma semántica (por ejemplo, para representar una cita, una abreviatura, aplicar énfasis, etc.). En esta lección se estudian:

• Introducir texto.


• Introducción.

 

15. Test de consolidación

Test de consolidación de la lección Introducción (I).

 

16. Introducción (II)

Se describen las propiedades más utilizadas a la hora de dar formato al texto de las páginas web mediante las hojas de estilo en cascada (CSS): la elección de fuentes o tipos de letra, el tamaño del texto, realces, alineación, color, etc. En esta lección se estudian:

• Introducir texto.


• Introducción.

 

17. Test de consolidación

Test de consolidación de la lección Introducción (II).

 

18. Introducción (III)

Se introducen los distintos tipos de listas HTML que podemos incorporar en una página web: listas sin numerar, listas numeradas y listas de definición. También se estudian las propiedades CSS que afectan al aspecto de las listas. En esta lección se estudian:

• Introducir texto.


• Introducción.

 

19. Test de consolidación

Test de consolidación de la lección Introducción (III).

 

20. Propiedades del texto

Se estudian las distintas herramientas que proporciona Dreamweaver a la hora de trabajar con el texto de las páginas web. Así pues, se indica cómo introducir texto y aplicarle el formato estructural de título o párrafo. También se estudia la posibilidad de insertar el texto proveniente de algún documento existente, para lo que se utiliza el comando Pegado especial. Seguidamente se utiliza la opción de insertar caracteres especiales y de revisar la ortografía. Finalmente, se aplica formato al texto mediante estilos CSS. En esta lección se estudian:

• Introducir texto


• Propiedades del texto.

 

21. Test de consolidación

Test de consolidación de la lección Propiedades del texto.

Trabajo con vínculos

Describe la incorporación de vínculos o enlaces desde Dreamweaver. Previamente se ha realizado una introducción teórica de este elemento del HTML.

 

22. Introducción

Se introduce el concepto de hipervínculo, fundamental para poder navegar entre páginas web, y cómo podemos representarlo en el código HTML. Se estudian los distintos tipos de hipervínculos: vínculos a otras páginas del sitio web, vínculos a páginas externas al sitio web, vínculos a lugares concretos de una página web o vínculos que apuntan a direcciones de correo electrónico. Finalmente, se comprueba que las imágenes también pueden funcionar como hipervínculos. En esta lección se estudian:

• Trabajo con vínculos.


• Introducción.

 

23. Test de consolidación

Test de consolidación de la lección Introducción.

 

24. Vínculos

Describe la forma de insertar hipervínculos y marcadores en una página web cuando se trabaja con Dreamweaver. Seguidamente se hace lo mismo pero para incluir listas sin numerar o numeradas. La lección se completa viendo un ejemplo del uso conjunto de hipervínculos y listas para crear una barra de navegación del sitio web. En esta lección se estudian:

• Trabajo con vínculos.


• Vínculos.

 

25. Test de consolidación

Test de consolidación de la lección Vínculos.

Insertar imágenes

Describe el uso de imágenes en las páginas web desde el editor Dreamweaver. Previamente se han establecido las bases teóricas de este asunto en HTML.

 

26. Introducción. Formato y propiedades

Se estudia la etiqueta img del lenguaje HTML, utilizada para incorporar imágenes en el contenido de una página web, describiendo los formatos gráficos adecuados para este propósito. Se describe cómo optimizar una imagen para la Web (resolución, modo de color y compresión). Finalmente, se presenta la posibilidad de incluir imágenes como fondo de la página o de otros elementos, para lo que se utiliza las hojas de estilo en cascada (CSS). En esta lección se estudian:

• Insertar imágenes.


• Introducción.


• Formato y propiedades.

 

27. Tes de consolidación

Test de consolidación de la lección Introducción. Formato y propiedades.

 

28. Imagen de fondo de página. Imágenes de sustitución

Estudia la forma de utilizar imágenes en las páginas web con Dreamweaver. Se explica cómo insertar imágenes que forman parte del contenido de la página web y alinearlas respecto del texto situado a su alrededor; y cómo incorporar imágenes de fondo de la página u otros elementos. En esta lección se estudian:

• Insertar imágenes.


• Imagen de fondo de página.


• Imágenes de sustitución

 

29. Test de consolidación

Test de consolidación de la lección Imagen de fondo de página. Imágenes de sustitución.

Capas y tablas

Describe el uso de capas (elementos div) y tablas en las páginas web desde el editor Dreamweaver. Previamente se han establecido las bases teóricas de este asunto en HTML y CSS.

 

30. Introducción a las capas (I)

Se introducen los dos elementos fundamentales en la composición o maquetación de una página web: las etiquetas HTML div y span. Seguidamente se estudia cómo crear selectores complejos en las reglas CSS, así como el uso de las pseudoclases y pseudoelementos CSS. En esta lección se estudian:

• Capas y tablas.


• Introducción a las capas.

 

31. Test de consolidación

Test de consolidación de la lección Introducción a las capas (I).

 

32. Introducción a las capas (II)

Describe la forma clásica de maquetar o distribuir los elementos de una página web mediante posicionamiento CSS. En este caso, se estudia el uso de los elementos flotantes (propiedad float) y del clearing o desplazamiento. En esta lección se estudian:

• Capas y tablas.


• Introducción a las capas.

 

33. Test de consolidación

Test de consolidación de la lección Introducción a las capas (II).

 

34. Introducción a las capas (III)

Describe otros métodos de posicionamiento CSS, como el posicionamiento absoluto, relativo y fijo. A diferencia de los elementos flotantes, en este caso la posición de los elementos viene dada por coordenadas x e y. También es posible crear solapamiento de elementos a través del índice z. En esta lección se estudian:

• Capas y tablas.


• Introducción a las capas.

 

35. Test de consolidación

Test de consolidación de la lección Introducción a las capas (III).

 

36. Capas

Describe cómo utilizar elementos div para distribuir el contenido de una página web y después utilizar reglas CSS para maquetarla utilizando Dreamweaver. Se estudia cómo hacerlo mediante elementos flotantes para la mayoría de la página web y elementos de posicionamiento absoluto PA para casos concretos. Se describen las ventajas e inconvenientes de ambos tipos de posicionamiento CSS. Finalmente, se describen las tendencias de diseño web de hoy en día. En esta lección se estudian:

• Capas y tablas.


• Capas.

 

37. Test de consolidación

Test de consolidación de la lección Capas.

 

38. Introducción a las tablas (I)

Introduce las tablas como elemento adecuado a la hora de presentar información tabular en una página web. Describe las etiquetas HTML relacionadas con las tablas y las propiedades CSS para aplicar el formato y aspecto deseado. Se presenta el concepto de modelo de caja, fundamental a la hora de diseñar páginas web mediante CSS. Se recuerda que las tablas no son la herramienta adecuada para maquetar una página web excepto si deseamos compatibilidad con navegadores antiguos. En esta lección se estudian:

• Capas y tablas.


• Introducción a las tablas.

 

39. Test de consolidación

Test de consolidación de la lección Introducción a las tablas (I).

 

40. Introducción a las tablas (II)

Estudia conceptos avanzados en el trabajo con tablas en páginas web: se indica cómo establecer las dimensiones de la tabla, su número de columnas, etc. y cómo afecta estos detalles al cargar la tabla en la página web; la posibilidad de unir celdas en dos o más filas o columnas; crear tablas anidadas, es decir, una tabla en el interior de otra tabla, etc. En esta lección se estudian:

• Capas y tablas.


• Introducción a las tablas.


• Ancho y alto de columnas y filas.


• Añadir, eliminar, combinar y dividir filas.

 

41. Test de consolidación

Test de consolidación de la lección Introducción a las tablas (II).

 

42. Crear tablas. Ancho y alto de columnas y filas. Añadir, eliminar, combinar y dividir celdas. Bordes y fondos

Estudia la forma de incorporar tablas desde Dreamweaver. Describe cómo insertar una tabla con un determinado número de filas y columnas; cómo insertar filas y columnas más tarde; cómo unir y dividir celdas; cómo aplicar formato CSS a las distintas partes de una tabla; y cómo importar y ordenar contenido tabular desde otras aplicaciones y convertirlo en tablas en Dreamweaver. En esta lección se estudian:

• Capas y tablas.


• Crear tablas.


• Ancho y alto de columnas y filas.


• Añadir, eliminar, combinar y dividir celdas.


• Bordes y fondos.

 

43. Test de consolidación

Test de consolidación de la lección Crear tablas. Ancho y alto de columnas y filas. Añadir, eliminar, combinar y dividir celdas. Bordes y fondos.

División en marcos

Describe la posibilidad de dividir las páginas web en áreas o marcos. Se introduce este elemento HMTL aunque hoy en día no es una tendencia su uso.

 

44. Introducción. Trabajar con marcos

Describe cómo dividir la página web en frames o marcos a través del código HTML, de forma que sea posible mostrar en pantalla más de una página web al mismo tiempo. Aunque es una técnica que no se recomienda actualmente, un buen diseñador web tiene que conocer el código correspondiente a los frames. Además, se estudia el uso correcto de los iframes. En esta lección se estudian:

• División en marcos.


• Introducción.


• Trabajar con marcos.

 

45. Test de consolidación

Test de consolidación de la lección Introducción. Trabajar con marcos.

Formularios

Describe la confección de formularios en Dreamweaver.

 

46. Introducción

Se introduce el concepto de formulario y de control. Los formularios son componentes de una página web que sirven para recoger información del usuario. Estudia las herramientas que proporciona Dreamweaver para su confección, algunos tipos de controles (cuadro de texto, área de texto, botón de opción, casilla de verificación, lista, control file y botón de comando) y cómo maquetar un formulario utilizando tablas. En esta lección se estudian:

• Formularios.


• Introducción.

 

47. Test de consolidación

Test de consolidación de la lección Introducción.

 

48. Parámetros y controles de los formularios

Se completa el formulario creado en la lección anterior introduciendo otro tipo de control, como es el fieldset, y aplicando formato mediante hojas de estilo en cascada CSS. Seguidamente, se describe cómo maquetar un formulario mediante CSS en lugar de usar tablas. En esta lección se estudian:

Formularios.

Parámetros y controles de los formularios.

 

49. Test de consolidación

Test de consolidación de la lección Parámetros y controles de los formularios.

Elementos multimedia

Describe la incorporación de elementos multimedia (audio, vídeo y animación) desde Dreamweaver.

 

50. Introducción. Inserción de audio. Inserción de vídeo. Inserción de Flash y Shockwave

Estudia cómo incorporar vídeo y audio mediante las nuevas etiquetas HTML5. Con esas etiquetas es el navegador el que reproduce de forma nativa el contenido multimedia, sin necesidad de utilizar ningún complemento o plugin externo. Se estudian los distintos formatos y códecs que están disponibles y se indica cuáles son los que utilizan los principales navegadores. También se proporcionan indicaciones para completar el código de forma que los navegadores antiguos puedan reproducir el contenido multimedia mediante Flash, así como la posibilidad de emplear servicios de hospedaje para los vídeos, como el popular YouTube. En esta lección se estudian:

• Introducción.


• Inserción de audio.


• Inserción de vídeo.


• Inserción de Flash y Shockwave.

 

51. Test de consolidación

Test de consolidación de la lección Introducción. Inserción de audio. Inserción de vídeo. Inserción de Flash y Shockwave.

Otros efectos

Describe la utilización de Adobe Extension Manager para la obtención de extensiones de Dreamweaver.

 

52. Introducción. Adobe Extension Manager. Descargar e instalar una extensión. Usar una extensión

(ESTE CONTENIDO HACE REFERENCIA A VERSIONES ANTIGUAS DE DREAMWEAVER) Describe la utilización de Adobe Extension Manager para la obtención de extensiones de Dreamweaver, que son pequeñas aplicaciones que amplían las funcionalidades del entorno de desarrollo. En esta lección se estudian:

• Otros efectos.


• Introducción.


• Adobe Extension Manager.


• Descargar e instalar una extensión.


• Usar una extensión.

 

53. Test de consolidación

Test de consolidación de la lección Introducción. Adobe Extension Manager. Descargar e instalar una extensión. Usar una extensión.

Publicar el sitio web

Describe el procedimiento de publicar un sitio web desde Dreamweaver.

 

54. Introducción. Obtención de un sitio de publicación. Utilización de programas de FTP. Publicación y mantenimiento del sitio web. Dar la web de alta en los buscadores

Describe las herramientas que proporciona Dreamweaver para revisar el sitio web antes de su publicación. Por ejemplo, comprobar que el código sea válido según los estándares W3C, comprobar la existencia de vínculos rotos o archivos huérfanos, generar informes de errores, etc. Finalmente, se explica el procedimiento para configurar el servidor y publicar el sitio web. En esta lección se estudian:

• Introducción.


• Obtención de un sitio de publicación.


• Utilización de programas de FTP.


• Publicación y mantenimiento del sitio web.


• Dar la web de alta en los buscadores

 

55. Test de consolidación

Test de consolidación de la lección Introducción. Obtención de un sitio de publicación. Utilización de programas de FTP. Publicación y mantenimiento del sitio web. Dar la web de alta en los buscadores.

• Evaluación Final


• Evaluación Final del curso.

 

56. Evaluación Final Dreamweaver: Diseño de páginas web (IFCT040PO)

Evaluación Final del curso.