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.

GFPI-F-019 V3
 SERVICIO NACIONAL DE APRENDIZAJE SENA
PROCEDIMIENTO DE DESARROLLO CURRICULAR
GUÍA DE APRENDIZAJE

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.
3.2 Actividades de contextualización e identificación de conocimientos necesarios
para el aprendizaje

Videoconferencia: Ejercicio estilos CSS

Para iniciar la comprensión temática de esta segunda actividad de aprendizaje es

importante reconocer en un espacio de interacción común lo que se puede saber sobre el
tema. Para ello se plantea la videoconferencia: Ejercicio estilos CSS.

Para contextualizarse frente a los temas propuestos, se recomienda ver el video Creando
-DIV- absolutos en Adobe Dreamweaver CC, disponible en el material de apoyo; este
expone un ejercicio en Adobe Dreamweaver donde se aplican estilos CSS a las capas
div teniendo en cuenta un prototipo de diseño preestablecido.

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

Después de estudiar el video, se pretende que los aprendices interactuen colectivamente
a través de una videoconferencia, donde puedan expresar su punto de vista sobre este
contenido de manera crítica, lo que permitirá compartir las diferentes perspectivas sobre
el tema.
Es importante tener en cuenta que el instructor orientará el orden de participación
motivando a los aprendices a responder algunas preguntas, para que de manera
colectiva se resuelvan dudas, se aclaren ideas y se aprehendan nuevos conceptos
relacionados con la temática.
Por lo tanto, los aprendices deberán tener una disposición adecuada para que su palabra
y participación sean visibles, por lo que se sugiere realizar consultas previas para tener
información idónea que permita aportar en este ámbito del aprendizaje y, así, exponer
sus ideas y argumentos en relación con los estilos CSS y las capas div en el software
Adobe Dreamweaver.
Tenga en cuenta que deberá desarrollar una comunicación directa y fluida con el
instructor y demás compañeros de la formación, con el objeto de despejar dudas,
compartir sus argumentos y debatir la importancia de la capacidad de información en un
sistema de comunicaciones. Esto seguramente replanteará ideas y conllevará a la
construcción de nuevos aprendizajes.
Para acceder y participar de la videoconferencia:
● El instructor dará oportunamente las reglas de interacción y participación sujeta a
tiempos de duración y desarrollo de la videoconferencia.
● El respeto por la palabra y las ideas del otro debe prevalecer, superando incluso el
desacuerdo.
● La participación estará orientada a generar aportes conceptuales y de nuevas ideas
que contribuyan a la generación de mejores aprendizajes.
Se recomienda consultar el video: ¿Cómo unirse a una sesión virtual de Blackboard
Collaborate?, ubicado en el botón Tutoriales del menú del programa de formación, en
caso de tener dudas relacionadas con la participación en una videoconferencia.
Recuerde: esta actividad no es calificable, pero es fundamental la participación para el
desarrollo de la misma.

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

Ahora será necesario, para desarrollar las actividades correspondientes al segundo
resultado de aprendizaje, estudiar el material de formación y los materiales de apoyo.

Para acceder al Material de formación:

• Clic en el botón Actividad 2.
• Clic sobre los enlaces mostrados en el elemento Material de formación.

En el enlace al elemento Materiales de apoyo encontrará: Enlaces web.

¡Demos un paso adelante!

3.3 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?

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

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.
• 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 estilos
CSS y capas en Dreamweaver 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.

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

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.

• 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, donde se pueda evidenciar el uso de los comportamientos. El
cambio de imágenes se debe configurar a través de los eventos OnMouseOver para
mostrar las capas y OnMouseOut para ocultarlas.

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

• Los colores a manejar en las capas y el estilo en el texto es de libre elección,
selecciónelo y diseñe la página dejando volar su creatividad e imaginación.

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.

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

la misma.

Consultar el video: ¿Cómo realizar el envío de una evidencia descargable?, ubicado en

el botón Tutoriales, del menú del programa de formación, en caso de presentarse dudas
relacionadas con el envío del documento.

3.5 Ambientes de aprendizaje tipificados.

Ambiente requerido
• Learning Management System (LMS) Blackboard.
• Adobe Reader.
Materiales
• Material de formación: Estilos CSS.
• Material de apoyo:
Enlace web a https://youtu.be/ZTb4jJjAwJw. (Creando -DIV- absolutos en Adobe
Dreamweaver CC).
Enlace web a https://helpx.adobe.com/es/pdf/dreamweaver_reference.pdfm (CSS.pdf)

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

4. ACTIVIDADES DE EVALUACIÓN
Criterios de Técnicas e Instrumentos de
Evidencias de aprendizaje
evaluación 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.
aplicación de las capas div parámetros
en el diseño web. establecidos.

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.

5. GLOSARIO
• Capas: objetos que pueden situarse en cualquier parte de la página y en los cuales se
puede insertar contenido.
• Comportamientos: acciones que ocurren cuando los usuarios realizan algún evento
sobre un objeto, tales como mover el ratón sobre una imagen, pulsar sobre un texto,
hacer doble clic sobre un mapa de imágenes, entre otras.
• 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.
• Espacio de trabajo: zona de Adobe Dreamweaver en la cual se añade el contenido a
las páginas web.
• Estilo CSS: hojas de estilo en cascada, es un lenguaje formal usado para definir la
presentación de un documento HTML, XHTML o XML. Surgieron a raíz de la
necesidad de separar la presentación del contenido.
• 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

• Panel: elemento que se compone de varias pestañas, cada una con elementos
específicos de Adobe Dreamweaver.

6. REFERENCIAS BIBLIOGRÁFICAS
Adobe (2017). Diseño de páginas con el diseñador de CSS. Recuperado de
https://helpx.adobe.com/es/dreamweaver/using/css-designer.html
Adobe (2017). Ayuda de Adobe Dreamweaver CC. Recuperado de
https://helpx.adobe.com/es/pdf/dreamweaver_reference.pdf
Vexels (2017). Gráficos y diseños de automóvil. Recuperado de
https://es.vexels.com/graphics/automovil/

7. CONTROL DEL DOCUMENTO

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

Enero de
Nelson Ivan 2018
Giraldo
Asesor pedagógico
Equipo de Adecuación
Revisó Gráfica y Didáctica de Octubre de
Sandra Milena Recursos Educativos - 2017
Henao SENA Risaralda.
Guionista
Melchor

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

Sandra Milena Equipo de Adecuación
Revisó Henao Gráfica y Didáctica de Octubre de
Guionista
Melchor Recursos Educativos - 2017
SENA Risaralda.
Equipo de Adecuación
Andrés Felipe
Gráfica y Didáctica de Noviembre
Aprobó Valencia Líder
Recursos Educativos - de 2017
Pimienta
SENA Risaralda.

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)