GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

PROCEDIMIENTO DESARROLLO CURRICULAR GUÍA DE

APRENDIZAJE

1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE

• Denominación del programa de formación: Diseño Web con Adobe Dreamweaver.

• Código del programa de formación: 21730030.
• Nombre del proyecto (si es formación Titulada): No aplica.
• Fase del proyecto (si es formación Titulada): No aplica.
• Actividad de proyecto (si es formación Titulada): No aplica.
• Competencia: 220501030: Integrar los elementos multimediales de acuerdo con un
diseño establecido.
• Resultados de aprendizaje a alcanzar: Manejar herramientas que permitan
desarrollar las páginas web, de acuerdo con los parámetros establecidos y las
necesidades del cliente.
• Duración de la guía: 10 horas.

2. PRESENTACIÓN
Aprendiz, reciba un caluroso y afectuoso saludo de bienvenida a la guía correspondiente
a la Actividad de Aprendizaje 2: Diseñar páginas web haciendo uso de las herramientas
que ofrece Adobe Dreamweaver, con el fin de generar un producto que cumpla con
los requerimientos del cliente.
En esta actividad adquirirá los conocimientos necesarios para crear un sitio web que
incluya el uso de capas con propiedades definidas a través de reglas de estilo CSS y la
implementación de comportamientos, con el fin de dar solución a los requerimientos
planteados por el proyecto.
Por lo anterior, esta guía está diseñada para que apropie los diferentes conceptos
propuestos en esta etapa del programa de formación referentes a estilos CSS y su
aplicación en el diseño de sitios y páginas web.

Adelante.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

GFPI-F-019 V3
3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE Actividad de
Aprendizaje 2
3.1 Actividades de reflexión inicial
En esta etapa del proceso formativo es muy importante detenerse y hacer una reflexión
personal. Para ello, revise el siguiente enunciado y dé respuesta a los cuestionamientos:

Cuando se ingresa a algún sitio web se encuentra a la vista del usuario gran cantidad de
secciones y servicios, los cuales son fáciles de identificar y de tener acceso por la
organización que ha establecido el diseñador del sitio web:

¿Qué importancia tiene la distribución de los espacios para ubicar la información y los
elementos que componen una página web?

¿Considera que el diseño visual de una página web es más importante que el
contenido?

Nota: este ejercicio tiene como finalidad orientarle y motivarle en el desarrollo de los temas
de esta actividad de aprendizaje, por tal razón no es calificable. No obstante, es primordial
realizarlo.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

3.2 Actividades de apropiación del conocimiento (conceptualización y teorización)

Foro temático: CSS y la aplicación de las capas div en el diseño web

En esta etapa del proceso de aprendizaje, con el fin de incentivar su comprensión del tema,
es necesario que participe en el Foro temático: CSS y la aplicación de las capas div en el
diseño web. Esta actividad está pensada para generar un encuentro académico interactivo
entre sus compañeros e instructor.

Los foros son espacios virtuales que buscan la discusión y el análisis entre los participantes
del programa de formación. En este caso, la actividad tiene como propósito identificar la o
las aplicaciones de las capas div al diseñar una página web. Así como los beneficios de
las hojas de estilo en cascada (CSS). Para participar debe analizar y dar respuesta a los
siguientes interrogantes:

¿Qué situaciones relacionadas con el diseño de una página web cree que se
pueden solucionar con el uso de las capas div? Exponga un ejemplo.

¿Qué ventajas encuentra al usar las hojas de estilo en cascada CSS?

De este foro podrán surgir importantes comprensiones sobre el tema y todo ello dará
sustento al aprendizaje en cada uno de los aspectos. Por ello, este conlleva a un
reconocimiento importante de conceptos, procesos e ideas, hasta aquí abordados.

Para acceder y participar en el foro temático:

• Clic en el botón: Foros de discusión.
• Clic en el enlace Foro temático: CSS y la aplicación de las capas div en el diseño web.
• Elegir Secuencia.
• Clic en el botón Responder.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

• Digitar el asunto y el contenido del mensaje.

• Clic en el botón Enviar.

Recuerde: esta actividad es calificable, participe con responsabilidad en el desarrollo de

la misma.

3.4 Actividades de transferencia del conocimiento

Página web: Sitio web renta de automóviles

En esta etapa del proceso de aprendizaje se propone crear una página aplicando
elementos estructurales de HTML según el siguiente requerimiento:

Continuando con la Actividad de Aprendizaje 2, usted ha sido preseleccionado para

trabajar en la empresa de renta automóviles y en la prueba técnica solicitan que dé
soluciones el requerimiento de la empresa: una página web donde se exhiban los autos
que se tienen para alquilar.

Para realizar esta evidencia debe seguir los siguientes pasos:

a. Crear un sitio web llamado Actividad 2.
b. Crear una página principal, teniendo en cuenta la siguiente estructura para organizar la
información con la implementación de las capas: la página principal debe llamarse
index.html.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

• Una vez creada la página principal, realice dos copias de la misma y guárdelas con el
nombre de autos.html y contacto.html.
• Inserte los hipervínculos correspondientes en cada una de las páginas.
• De este modo, la capa que contiene el título y el menú del sitio permanecerá igual en
las tres páginas.
• En la capa de contenido, la información debe variar teniendo en cuenta las opciones
del menú del sitio.
• En la capa de contenido de la página llamada autos.html incluya una galería de mínimo
tres imágenes.
• Aún no utilice CSS, esa será la actividad de la unidad 3.

Para acceder a la Actividad Página web: Sitio web renta de automóviles.

• Clic en el botón: Actividad 2.
• Clic sobre el enlace Página web: Sitio web renta de automóviles.
• Seleccionar el archivo.
• Añadir un comentario en la caja de texto.
• Clic en el botón Enviar.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

Recuerde: esta actividad es calificable, participe con responsabilidad en el desarrollo de

la misma.

Evidencias de aprendizaje Criterios de evaluación Técnicas e Instrumentos de

evaluación

Evidencias de Implementación de la rúbrica

conocimiento. Crea el sitio web, de para la evidencia tipo foro
Foro temático: CSS y la acuerdo con los temático.
parámetros
aplicación de las capas div establecidos.
en el diseño web.

Evidencias de producto. Implementación de la rúbrica

Página web: Sitio web renta para la evidencia tipo página
de automóviles. web.

4. GLOSARIO
• Capas: objetos que pueden situarse en cualquier parte de la página y en los cuales se
puede insertar contenido.
• Enlace (link): texto o imagen en un sitio web que un usuario puede cliquear para tener
acceso o conectarse con otro sitio o página web.
• Hipervínculo: enlace, normalmente entre dos páginas web de un mismo sitio.
• HTML: lenguaje de marcado de hipertexto. Es el lenguaje básico para la creación de
páginas web.
 SERVICIO NACIONAL DE APRENDIZAJE
SENA
PROCEDIMIENTO DE DESARROLLO
CURRICULAR GUÍA DE
APRENDIZAJE

5. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha
Autor Jorge Eliécer Experto temático Equipo de Adecuación Octubre de
(es) Andrade Cruz asignado Gráfica y Didáctica de 2017
Recursos Educativos -
Elaboró SENA Risaralda.
Juliana García Asesora
Cardona pedagógica

Revisó Nelson Ivan Asesor pedagógico Equipo de Adecuación Enero de

Gráfica y Didáctica de
Giraldo 2018
Recursos Educativos -
SENA Risaralda.

Sandra Milena Guionista Octubre de

Henao 2017
Melchor

Revisó Sandra Milena Guionista Equipo de Adecuación Octubre de

Henao Gráfica y Didáctica de 2017
Recursos Educativos -
Melchor SENA Risaralda.

Aprobó Andrés Felipe Líder Equipo de Adecuación Noviembre

Gráfica y Didáctica de de 2017
Valencia
Recursos Educativos -
Pimienta SENA Risaralda.